function MainComponent() { const [prompt, setPrompt] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [generations, setGenerations] = useState([]); const [showSettings, setShowSettings] = useState(false); const [imageStyle, setImageStyle] = useState("Natural"); const [imageFormat, setImageFormat] = useState("Square"); const [quality, setQuality] = useState("Standard"); const [selectedTags, setSelectedTags] = useState([]); const imageStyles = [ "Natural", "Vivid", "Anime", "Digital Art", "Oil Painting", "Watercolor", "Sketch", "Comic", "Photorealistic" ]; const formats = { Square: "1024x1024", Portrait: "1024x1792", Landscape: "1792x1024" }; const artTags = [ "Minimalist", "Surreal", "Abstract", "Retro", "Cyberpunk", "Fantasy", "Sci-fi", "Gothic" ]; const toggleTag = (tag)=>{ setSelectedTags((prev)=>prev.includes(tag) ? prev.filter((t)=>t !== tag) : [ ...prev, tag ]); }; const constructPrompt = ()=>{ const stylePart = `${imageStyle} style`; const formatPart = `${imageFormat.toLowerCase()} format (${formats[imageFormat]})`; const tagsPart = selectedTags.length > 0 ? selectedTags.join(", ") : ""; const qualityPart = quality === "HD" ? "high quality, detailed" : ""; const fullPrompt = [ stylePart, formatPart, tagsPart, qualityPart, prompt ].filter(Boolean).join(", "); return fullPrompt; }; const generateImage = async ()=>{ if (!prompt.trim()) return; setLoading(true); setError(null); try { const finalPrompt = constructPrompt(); const response = await fetch("/integrations/dall-e-3/?prompt=" + encodeURIComponent(finalPrompt)); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const result = await response.json(); setGenerations((prev)=>[ { prompt: finalPrompt, imageUrl: result.data[0] }, ...prev ]); } catch (err) { console.error(err); setError("Failed to generate image. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A0A0F] text-[#E0E0E0] py-8 px-4", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[400px] mb-12 bg-cover bg-center rounded-lg overflow-hidden", style: { backgroundImage: 'url("https://ucarecdn.com/10392121-38a9-41b1-962e-c25780a662c2/-/format/auto/")' }, __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-[#0A0A0F99] via-transparent to-[#0A0A0F99]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl md:text-7xl font-orbitron text-center tracking-wider text-[#E0E0E0] px-4 text-shadow-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "BROKEN MIRROR IMAGES"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#151520] rounded-lg p-6 mb-8 border border-[#2A2A40] shadow-[0_0_15px_rgba(88,101,242,0.1)]", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to generate...", className: "w-full h-32 bg-[#1A1A25] text-[#E0E0E0] p-4 rounded-lg mb-4 border border-[#2A2A40] focus:outline-none focus:border-[#FF2E8A] focus:shadow-[0_0_10px_rgba(255,46,138,0.2)] resize-none transition-all", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettings(!showSettings), className: "w-full bg-[#1A1A25] hover:bg-gradient-to-r from-[#1A1A25] to-[#252535] text-[#E0E0E0] py-2 rounded-lg mb-4 flex items-center justify-center border border-[#2A2A40] hover:border-[#FF2E8A] transition-all", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Advanced Settings"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${showSettings ? "up" : "down"}`, __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this })), showSettings && /*#__PURE__*/ React.createElement("div", { className: "mb-6 space-y-6 bg-[#12121A] p-4 rounded-lg border border-[#2A2A40]", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#FF2E8A]", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "Image Style"), /*#__PURE__*/ React.createElement("select", { value: imageStyle, onChange: (e)=>setImageStyle(e.target.value), className: "w-full bg-[#1A1A25] border border-[#2A2A40] rounded-lg p-2 focus:border-[#FF2E8A] focus:outline-none transition-all", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, imageStyles.map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, value: style, __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }, style)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#36B9FF]", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, "Image Format"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, Object.keys(formats).map((format)=>/*#__PURE__*/ React.createElement("label", { key: format, className: "flex items-center cursor-pointer", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "format", value: format, checked: imageFormat === format, onChange: (e)=>setImageFormat(e.target.value), className: "mr-2 accent-[#36B9FF]", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "hover:text-[#36B9FF] transition-colors", __source: { fileName: "", lineNumber: 155, columnNumber: 23 }, __self: this }, format))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#50E3C2]", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Quality"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, [ "Standard", "HD" ].map((q)=>/*#__PURE__*/ React.createElement("label", { key: q, className: "flex items-center cursor-pointer", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "quality", value: q, checked: quality === q, onChange: (e)=>setQuality(e.target.value), className: "mr-2 accent-[#50E3C2]", __source: { fileName: "", lineNumber: 167, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "hover:text-[#50E3C2] transition-colors", __source: { fileName: "", lineNumber: 175, columnNumber: 23 }, __self: this }, q))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#FF2E8A]", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, "Art Style Tags"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, artTags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag, onClick: ()=>toggleTag(tag), className: `px-3 py-1 rounded-full border transition-all ${selectedTags.includes(tag) ? "bg-[#FF2E8A] border-[#FF2E8A] text-white shadow-[0_0_10px_rgba(255,46,138,0.3)]" : "bg-[#1A1A25] border-[#2A2A40] hover:border-[#FF2E8A] hover:shadow-[0_0_10px_rgba(255,46,138,0.1)]"}`, __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, tag)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#36B9FF]", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, "Final Prompt Preview"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A25] p-3 rounded-lg text-sm border border-[#2A2A40]", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, constructPrompt()))), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: loading || !prompt.trim(), className: "w-full bg-gradient-to-r from-[#FF2E8A] to-[#36B9FF] hover:from-[#FF2E8A] hover:to-[#50E3C2] text-white py-3 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_15px_rgba(255,46,138,0.3)] hover:shadow-[0_0_20px_rgba(255,46,138,0.4)]", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin mr-2", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }), "Generating...") : "Generate Image")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-[#FF2E8A20] text-[#FF2E8A] p-4 rounded-lg mb-8 border border-[#FF2E8A]", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }, generations.map((gen, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#151520] rounded-lg p-6 border border-[#2A2A40] shadow-[0_0_15px_rgba(88,101,242,0.1)]", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-[#E0E0E0]", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, gen.prompt), /*#__PURE__*/ React.createElement("img", { src: gen.imageUrl, alt: gen.prompt, className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this })))))); }