function MainComponent() { const [chatInput, setChatInput] = React.useState(''); const [imagePrompt, setImagePrompt] = React.useState(''); const [translateInput, setTranslateInput] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleChatSubmit = async ()=>{ setLoading(true); await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: chatInput } ], system_prompt: 'Explain this content' }) }); setLoading(false); }; const handleImageGenerate = async ()=>{ setLoading(true); await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(imagePrompt)}&batch_size=1`, { method: 'GET' }); setLoading(false); }; const handleTranslate = async ()=>{ setLoading(true); await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: translateInput, target: 'en' }) }); setLoading(false); }; const handleSearchSubmit = async ()=>{ setLoading(true); await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`, { method: 'GET' }); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Interactive AI Features"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-white shadow-md", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "chatInput", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Your Question:"), /*#__PURE__*/ React.createElement("textarea", { id: "chatInput", name: "chatInput", rows: "4", className: "mt-1 p-2 w-full border rounded-md", value: chatInput, onChange: (e)=>setChatInput(e.target.value), __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#0D6EFD] text-white rounded hover:bg-[#0B5ED7] transition-colors", onClick: handleChatSubmit, disabled: loading, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Ask")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, ` button:disabled { background-color: #ccc; } `), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Generate Image from Text"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imagePrompt", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Image Description:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "imagePrompt", name: "imagePrompt", className: "mt-1 p-2 w-full border rounded-md", value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#198754] text-white rounded hover:bg-[#157347] transition-colors", onClick: handleImageGenerate, disabled: loading, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Generate Image")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Translate Text"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "translateInput", className: "p-2 w-full border rounded-md flex-1", value: translateInput, onChange: (e)=>setTranslateInput(e.target.value), __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#DC3545] text-white rounded hover:bg-[#BB2D3B] transition-colors", onClick: handleTranslate, disabled: loading, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Translate"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mt-8", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Web Search"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "searchQuery", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Search Query:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "searchQuery", name: "searchQuery", className: "mt-1 p-2 w-full border rounded-md", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#FFC107] text-[#333] rounded hover:bg-[#FFCA28] transition-colors", onClick: handleSearchSubmit, disabled: loading, __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Search"))); }