function MainComponent() { const [selectedModel, setSelectedModel] = React.useState("ChatGPT"); const [showMenu, setShowMenu] = React.useState(false); const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(null); const models = [ "ChatGPT", "Stable Diffusion V3", "DALL·E 3", "GPT-4 Vision", "Google Gemini", "Google Gemini 1.5", "Google Gemini 1.5 Flash", "Claude 3 Opus", "Claude 3 Sonnet", "Claude 3 Haiku", "Groq" ]; const handleModelSelect = (model)=>{ setSelectedModel(model); setShowMenu(false); }; const handleGenerateImage = ()=>{ setLoading(true); setTimeout(()=>{ setImageUrl("relative/path/to/generated/image.jpg"); setLoading(false); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white text-black font-sans w-full h-full", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "material-icons text-3xl", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "brightness_3"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "material-icons text-3xl", onClick: ()=>setShowMenu(!showMenu), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "settings"), showMenu && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-[200px] bg-white border border-gray-200 shadow-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, models.map((model)=>/*#__PURE__*/ React.createElement("li", { key: model, className: "p-2 hover:bg-gray-100 cursor-pointer", onClick: ()=>handleModelSelect(model), __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, model)))))), selectedModel === "GPT-4 Vision" || selectedModel === "ChatGPT" || selectedModel === "Google Gemini" || selectedModel === "Google Gemini 1.5" || selectedModel === "Google Gemini 1.5 Flash" || selectedModel === "Claude 3 Opus" || selectedModel === "Claude 3 Sonnet" || selectedModel === "Claude 3 Haiku" || selectedModel === "Groq" ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center p-4 bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "chat-input", className: "w-full p-2 bg-white border border-gray-300 rounded-md", type: "text", placeholder: "Type your message", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }), selectedModel === "GPT-4 Vision" ? /*#__PURE__*/ React.createElement("button", { className: "ml-2 material-icons text-3xl", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "add_photo_alternate") : null), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "material-icons animate-spin text-3xl", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "sync"))) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center p-4 bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "image-input", className: "w-full p-2 bg-white border border-gray-300 rounded-md", type: "text", placeholder: "Describe the image you want to generate", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 p-2 bg-blue-500 text-white rounded-md", onClick: handleGenerateImage, __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Generate")), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "material-icons animate-spin text-3xl", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "sync")), !loading && imageUrl && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated output", className: "w-[400px] h-[400px] object-contain", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this })))); }