function MainComponent() { const [prompt, setPrompt] = useState(""); const [generatedImage, setGeneratedImage] = useState(""); const [loading, setLoading] = useState(false); const generateImage = async ()=>{ setLoading(true); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); const result = await response.json(); setGeneratedImage(result.data[0]); } catch (error) { console.error(error); } setLoading(false); }; const handleDownload = async ()=>{ const link = document.createElement("a"); link.href = generatedImage; link.download = "generated-image.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#1a1a1a] via-[#2a2a2a] to-[#1a1a1a] flex", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#1E1E1E] p-6 flex flex-col gap-6 border-r border-[#333]", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white font-montserrat", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Image Creator"), /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to create...", className: "w-full h-32 p-4 rounded-lg bg-[#2A2A2A] text-white border border-[#333] focus:outline-none focus:border-[#555] font-roboto resize-none", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: loading || !prompt, className: "py-4 px-8 rounded-lg bg-[#4A4A4A] text-white hover:bg-[#555] transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Generating...")) : "Generate Image")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, generatedImage ? /*#__PURE__*/ React.createElement("div", { className: "relative max-w-4xl w-full", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI generated artwork based on your prompt", className: "w-full rounded-lg shadow-2xl", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "absolute top-4 right-4 bg-[#2A2A2A] p-3 rounded-full hover:bg-[#333] transition-colors", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-white", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "text-[#666] text-xl font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Your generated image will appear here"))); }