function MainComponent() { const [selectedIntegration, setSelectedIntegration] = React.useState(''); const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(''); function handleIntegrationChange(integration) { setSelectedIntegration(integration); setLoading(true); switch(integration){ case 'CHAT_GPT': fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'Hello, Chat GPT!' } ], system_prompt: 'Respond to user greeting' }) }).then((response)=>response.json()).then((data)=>{ setResult(data.result); setLoading(false); }); break; case 'WEB_SCRAPING': fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: 'https://example.com' }) }).then((response)=>response.text()).then((text)=>{ setResult(text); setLoading(false); }); break; case 'QR_CODE': fetch('/integrations/qr-code/generatebasicbase64?data=https%3A%2F%2Fwww.google.com', { method: 'GET' }).then((response)=>response.text()).then((base64)=>{ setResult(`data:image/png;base64,${base64}`); setLoading(false); }); break; case 'DOMAIN_WHOIS': fetch('/integrations/domain-whois/whois?domain=rapidapi.com', { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setResult(JSON.stringify(data, null, 2)); setLoading(false); }); break; case 'STABLE_DIFFUSION': fetch('/integrations/stable-diffusion/?prompt=a+painting+of+foxes+playing+poker%2C+disney%2C+zootopia&batch_size=1', { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setResult(data.data[0]); setLoading(false); }); break; default: setResult(''); setLoading(false); } } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen space-y-6 bg-[#f0f0f2]", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#38488f]", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Integration Centre"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Showcasing various integrations in one place")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#fdfdff] p-4 rounded-lg shadow-md", onClick: ()=>handleIntegrationChange('CHAT_GPT'), __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#38488f] text-xl", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Chat GPT"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Interact using natural language processing.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fdfdff] p-4 rounded-lg shadow-md", onClick: ()=>handleIntegrationChange('WEB_SCRAPING'), __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#38488f] text-xl", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Web Scraping"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Extract data with web scraping technology.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fdfdff] p-4 rounded-lg shadow-md", onClick: ()=>handleIntegrationChange('QR_CODE'), __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#38488f] text-xl", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "QR Code"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Generate QR codes on the fly.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fdfdff] p-4 rounded-lg shadow-md", onClick: ()=>handleIntegrationChange('DOMAIN_WHOIS'), __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#38488f] text-xl", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Domain WHOIS"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Get domain registration details.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fdfdff] p-4 rounded-lg shadow-md", onClick: ()=>handleIntegrationChange('STABLE_DIFFUSION'), __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#38488f] text-xl", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Stable Diffusion"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Generate images from textual input."))), loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 108, columnNumber: 18 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("pre", { __source: { fileName: "", lineNumber: 108, columnNumber: 38 }, __self: this }, result)); }