function MainComponent() { const { useState, useCallback } = React; const [prompt, setPrompt] = useState(""); const [image, setImage] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [size, setSize] = useState("1024x1024"); const [style, setStyle] = useState("Cinematic"); const modelForStyle = { Realistic: "dall-e-3", Cinematic: "dall-e-3", Fantasy: "dall-e-3", "Professional Photography": "dall-e-3", "Studio Portrait": "dall-e-3", "Oil Painting": "stable-diffusion-v-3", Watercolor: "stable-diffusion-v-3", Anime: "stable-diffusion-v-3", Cartoon: "dall-e-3", "3D": "dall-e-3" }; const sizes = { "Square (1:1)": "1024x1024", "Landscape (16:9)": "1792x1024", "Portrait (9:16)": "1024x1792" }; const styles = { Realistic: "photorealistic, natural lighting, clear details, balanced composition, true-to-life colors and textures, --no artistic filters --no borders --no frames --no text --no watermarks", Cinematic: "masterful composition, dramatic atmosphere, perfect lighting, rich contrast, emotional depth, high production value, premium quality, --no borders --no frames --no text --no watermarks --no film grain --no timestamps --no numbers", Fantasy: "fantasy scene, magical atmosphere, ethereal lighting, dreamlike quality, vibrant colors", "Professional Photography": "natural lighting, sharp focus, balanced composition, rich colors", "Studio Portrait": "studio lighting, clean background, professional lighting setup, sharp focus", "Oil Painting": "(masterpiece, oil painting:1.2), painted by master artist, impasto technique, visible brushstrokes, rich textures, gallery lighting, museum quality, golden ratio composition, painted on canvas, classical art", Watercolor: "(masterpiece, watercolor painting:1.2), soft edges, flowing colors, wet on wet technique, handpainted, organic textures, artistic composition, vibrant pigments, painted on watercolor paper", Anime: "(anime key visual:1.2), high quality anime art, Studio Ghibli, detailed anime illustration, beautiful anime style, professional anime artwork, clean lines, cel shaded", Cartoon: "colorful cartoon style, clean vector-like appearance, simple shapes, bold colors, playful aesthetic, child-friendly, 2D illustration style, --no borders --no frames --no text --no watermarks", "3D": "3D rendered image, photorealistic textures, high detail, cinematic lighting, professional 3D modeling, octane render style, --no borders --no frames --no text --no watermarks" }; const styleExamples = { Realistic: "A modern kitchen with natural daylight coming through the windows, showing everyday objects and appliances", Cinematic: "A solitary lighthouse on a rocky cliff during a storm, massive waves crashing against the rocks, moody dark clouds, golden hour lighting", Fantasy: "A mystical castle floating among the clouds with rainbow bridges connecting to floating islands", "Professional Photography": "A misty mountain valley at sunrise with ancient trees in the foreground", "Studio Portrait": "A confident businesswoman in a modern suit against a dark background", "Oil Painting": "A dramatic seascape with crashing waves against coastal cliffs", Watercolor: "A delicate arrangement of spring flowers in soft pastel colors", Anime: "A young adventurer standing in a flowering meadow with a magical staff", Cartoon: "A happy elephant playing with a red balloon in a sunny park", "3D": "A futuristic robot exploring an ancient temple filled with glowing crystals" }; const generateImage = useCallback(async ()=>{ if (!prompt) return; setLoading(true); setError(null); try { const model = modelForStyle[style]; const enhancedPrompt = `${prompt}, ${styles[style]}`; const [width, height] = size.split("x").map(Number); const url = new URL(`/integrations/${model}/`, window.location.origin); if (model === "stable-diffusion-v-3") { url.searchParams.append("width", width.toString()); url.searchParams.append("height", height.toString()); } url.searchParams.append("prompt", enhancedPrompt); const imageResponse = await fetch(url.toString()); const imageData = await imageResponse.json(); if (!imageData.data || !imageData.data[0]) { throw new Error("No image was generated"); } setImage(imageData.data[0]); } catch (err) { setError(err?.message || "Failed to generate image. Please try again."); console.error(err); } finally{ setLoading(false); } }, [ prompt, style, size ]); const downloadImage = async ()=>{ const link = document.createElement("a"); link.href = image; link.download = `ai-image-${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#111827] p-8", __source: { fileName: "", lineNumber: 112, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-[#F9FAFB] font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "AI Image Studio"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1F2937] rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#F9FAFB]", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { value: style, onChange: (e)=>setStyle(e.target.value), className: "w-full p-3 bg-[#374151] text-[#D1D5DB] border border-[#4B5563] rounded-lg", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, Object.keys(styles).map((styleName)=>/*#__PURE__*/ React.createElement("option", { key: styleName, value: styleName, __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, styleName)))), modelForStyle[style] === "stable-diffusion-v-3" && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#F9FAFB]", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, "Size"), /*#__PURE__*/ React.createElement("select", { value: size, onChange: (e)=>setSize(e.target.value), className: "w-full p-3 bg-[#374151] text-[#D1D5DB] border border-[#4B5563] rounded-lg", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, Object.entries(sizes).map(([label, value])=>/*#__PURE__*/ React.createElement("option", { key: value, value: value, __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, label)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#F9FAFB]", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: `Describe what you want to see in detail... \n\nExample for ${style}:\n${styleExamples[style]}`, className: "w-full p-3 bg-[#374151] text-[#D1D5DB] border border-[#4B5563] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4B5563] h-32", name: "prompt", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: loading || !prompt, className: `w-full p-3 rounded-lg text-[#F9FAFB] font-medium ${loading || !prompt ? "bg-[#374151] cursor-not-allowed" : "bg-[#374151] hover:bg-[#4B5563] transition-colors"}`, __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }), "Generating...") : "Generate Image")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-red-900/50 border border-red-500 text-red-200 rounded-lg", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, error), image && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#F9FAFB] font-medium", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "Generated Image"), /*#__PURE__*/ React.createElement("img", { src: image, alt: "AI generated artwork based on user prompt", className: "w-full h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setImage(null), className: "px-4 py-2 bg-[#374151] text-[#F9FAFB] rounded hover:bg-[#4B5563] transition-colors", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit mr-2", __source: { fileName: "", lineNumber: 208, columnNumber: 21 }, __self: this }), "Create New"), /*#__PURE__*/ React.createElement("button", { onClick: downloadImage, className: "px-4 py-2 bg-[#374151] text-[#F9FAFB] rounded hover:bg-[#4B5563] transition-colors", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 215, columnNumber: 21 }, __self: this }), "Download"))))))); }