function MainComponent() { const [response, setResponse] = React.useState(null); const [loading, setLoading] = React.useState(false); const [query, setQuery] = React.useState(''); const [prompt, setPrompt] = React.useState(''); const [imageResult, setImageResult] = React.useState(null); const [translatedText, setTranslatedText] = React.useState(''); const [webScrapedText, setWebScrapedText] = React.useState(''); const [visionResponse, setVisionResponse] = React.useState(null); const [qrCode, setQrCode] = React.useState(''); const [geminiResponse, setGeminiResponse] = React.useState(''); const handleChatGPT = async ()=>{ setLoading(true); const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: query } ] }) }); const data = await res.json(); setResponse(data.choices[0].message.content); setLoading(false); }; const handleDallE = async ()=>{ setLoading(true); const res = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await res.json(); setImageResult(data.data[0]); setLoading(false); }; const handleStableDiffusion = async ()=>{ setLoading(true); const res = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await res.json(); setImageResult(data.data[0]); setLoading(false); }; const handleTranslate = async ()=>{ setLoading(true); const res = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ q: query, target: 'de' }) }); const data = await res.json(); setTranslatedText(data.data.translations[0].translatedText); setLoading(false); }; const handleWebScraping = async ()=>{ setLoading(true); const res = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: query, getText: true }) }); const text = await res.text(); setWebScrapedText(text); setLoading(false); }; const handleGptVision = async ()=>{ setLoading(true); const res = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: `Analyze this image` }, { type: 'image_url', image_url: { url: query } } ] } ] }) }); const data = await res.json(); setVisionResponse(data.choices[0].message.content); setLoading(false); }; const handleQrCode = async ()=>{ setLoading(true); const res = await fetch(`/integrations/qr-code/generatebasicbase64?data=${encodeURIComponent(query)}`, { method: 'GET' }); const data = await res.text(); setQrCode(data); setLoading(false); }; const handleGemini = async ()=>{ setLoading(true); const res = await fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: query } ] }) }); const data = await res.json(); setGeminiResponse(data.choices[0].message.content); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "Enter your query", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "border p-2 mb-2 w-full", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Enter your prompt", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 mr-2", onClick: handleChatGPT, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, "Chat GPT"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 mr-2", onClick: handleDallE, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, "Generate Dall-E Image"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-800 text-white px-4 py-2 mr-2", onClick: handleStableDiffusion, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, "Generate Stable Diffusion Image"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white px-4 py-2 mr-2", onClick: handleTranslate, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, "Translate"), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 text-white px-4 py-2 mr-2", onClick: handleWebScraping, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, "Web Scraping"), /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 text-white px-4 py-2 mr-2", onClick: handleGptVision, __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, "GPT Vision"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white px-4 py-2 mr-2", onClick: handleQrCode, __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, "Generate QR Code"), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white px-4 py-2", onClick: handleGemini, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, "Google Gemini"), loading && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Loading..."), response && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 113, columnNumber: 20 }, __self: this }, response), translatedText && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 26 }, __self: this }, translatedText), webScrapedText && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 115, columnNumber: 26 }, __self: this }, webScrapedText), visionResponse && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 116, columnNumber: 26 }, __self: this }, visionResponse), geminiResponse && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 117, columnNumber: 26 }, __self: this }, geminiResponse), imageResult && /*#__PURE__*/ React.createElement("img", { className: "mt-4", src: imageResult, alt: "Generated result", __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }), qrCode && /*#__PURE__*/ React.createElement("img", { className: "mt-4", src: `data:image/png;base64,${qrCode}`, alt: "QR Code", __source: { fileName: "", lineNumber: 119, columnNumber: 18 }, __self: this })); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this })); }