function MainComponent() { const [state, setState] = useState({ generatedImage: null, prompt: "", loading: false, error: null, topText: "", bottomText: "", createdMemes: [], fontSize: 32 }); const generateImage = async ()=>{ if (!state.prompt) return; setState((prev)=>({ ...prev, loading: true, error: null })); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(state.prompt)}`, { method: "GET", headers: { "Content-Type": "application/json" } }); if (response.status === 429) { throw new Error("Whoa there! Too many requests. Take a breather and try again in a moment."); } if (!response.ok) { throw new Error(`Failed to generate image. Please try again.`); } const data = await response.json(); if (data && data.data && data.data[0]) { setState((prev)=>({ ...prev, generatedImage: data.data[0], loading: false, error: null })); } else { throw new Error("No image received from generator"); } } catch (err) { console.error("Image generation error:", err); setState((prev)=>({ ...prev, error: err.message || "Failed to generate image. Please try again.", loading: false })); } }; const saveMeme = ()=>{ if (!state.generatedImage) return; const newMeme = { id: `meme-${Date.now()}`, imageUrl: state.generatedImage, topText: state.topText, bottomText: state.bottomText, prompt: state.prompt, fontSize: state.fontSize, timestamp: Date.now() }; setState((prev)=>({ ...prev, createdMemes: [ newMeme, ...prev.createdMemes ], generatedImage: null, topText: "", bottomText: "", prompt: "" })); }; const downloadMeme = ()=>{ if (!state.generatedImage) { setState((prev)=>({ ...prev, error: "No image to download!" })); return; } const memeContainer = document.createElement("div"); memeContainer.style.position = "relative"; memeContainer.style.display = "inline-block"; try { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); ctx.fillStyle = "white"; ctx.strokeStyle = "black"; ctx.lineWidth = Math.max(canvas.width * 0.004, 4); ctx.font = `bold ${canvas.height * 0.1}px Impact`; ctx.textAlign = "center"; const drawText = (text, y)=>{ if (!text) return; const uppercase = text.toUpperCase(); ctx.strokeText(uppercase, canvas.width / 2, y); ctx.fillText(uppercase, canvas.width / 2, y); }; drawText(state.topText, canvas.height * 0.15); drawText(state.bottomText, canvas.height * 0.9); try { const link = document.createElement("a"); link.download = `meme-${Date.now()}.png`; link.href = canvas.toDataURL("image/png"); document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (err) { console.error("Download link creation error:", err); setState((prev)=>({ ...prev, error: "Failed to create download link. Please try again." })); } }; img.onerror = ()=>{ console.error("Image loading failed"); setState((prev)=>({ ...prev, error: "Failed to load image for download. Please try again." })); }; img.src = state.generatedImage; } catch (err) { console.error("Download error:", err); setState((prev)=>({ ...prev, error: "Failed to download meme. Please try again." })); } }; const WindowBox = ({ title, children })=>/*#__PURE__*/ React.createElement("div", { className: "m-4 border-2 border-[#848484] bg-[#c0c0c0] rounded shadow-lg transform hover:skew-x-1", __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000080] text-white p-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-[system-ui] glitch", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-4 h-4 bg-[#c0c0c0] border border-[#848484] text-black text-xs animate-pulse", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, "_"), /*#__PURE__*/ React.createElement("button", { className: "w-4 h-4 bg-[#c0c0c0] border border-[#848484] text-black text-xs animate-bounce", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, "□"), /*#__PURE__*/ React.createElement("button", { className: "w-4 h-4 bg-[#c0c0c0] border border-[#848484] text-black text-xs animate-spin", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, "×"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 glitch-content", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, children)); if (state.error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#008080] p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#000080] mb-4 text-center", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "Error.exe"), /*#__PURE__*/ React.createElement("p", { className: "text-red-600 mb-4 text-center", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, state.error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "w-full py-2 bg-[#000080] text-white border-2 border-[#848484] hover:bg-[#0000a0]", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "Restart Program"))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#008080] p-4", __source: { fileName: "", lineNumber: 196, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block bg-[#000080] border-2 border-[#848484] rounded shadow-lg p-4 mb-6 text-center hover:bg-[#0000a0] transition-colors", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-white font-bold mb-2", style: { textShadow: "2px 2px 0 #ff0000, -2px -2px 0 #00ff00" }, __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, "The Internet Was A Mistake"), /*#__PURE__*/ React.createElement("div", { className: "text-[#c0c0c0] text-lg italic", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, "But we're making it worse...")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded p-6 mb-6", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl text-[#000080] text-center mb-4", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, "AI Meme Generator 9000"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: state.prompt, onChange: (e)=>setState((prev)=>({ ...prev, prompt: e.target.value })), placeholder: "Describe your crazy meme image...", className: "flex-1 px-4 py-2 border-2 border-[#848484]", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: state.loading || !state.prompt, className: `px-6 py-2 ${state.loading ? "bg-[#848484]" : "bg-[#000080]"} text-white border-2 border-[#848484] hover:bg-[#0000a0]`, __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, state.loading ? "Generating..." : "Generate Image"))), state.loading && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded shadow-lg p-4 mb-6", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000080] text-white p-2 mb-2", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "Loading.exe"), /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-[#848484] border-2 border-[#c0c0c0]", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading-bar h-full bg-[#000080]", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff0000] border-2 border-[#848484] rounded shadow-lg p-2 mb-4 text-center", style: { animation: "blink 1s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, "WARNING: MEME GENERATION IN PROGRESS"))), state.error && /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded shadow-lg p-4 mb-6", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000080] text-white p-2 mb-2", __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this }, "Error"), /*#__PURE__*/ React.createElement("p", { className: "text-red-600", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, error)), state.generatedImage && /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#848484] p-4", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-[300px] mx-auto", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: state.generatedImage, alt: "Generated meme", className: "w-full h-auto border-2 border-[#848484]", onError: ()=>{ setState((prev)=>({ ...prev, error: "Failed to load the generated image. Please try again." })); }, __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }), state.topText && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-0 right-0 text-center px-2", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: `${state.fontSize}px`, textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", color: "white", fontFamily: "Impact, sans-serif", textTransform: "uppercase", lineHeight: "1.2" }, __source: { fileName: "", lineNumber: 288, columnNumber: 23 }, __self: this }, state.topText)), state.bottomText && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 left-0 right-0 text-center px-2", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: `${state.fontSize}px`, textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", color: "white", fontFamily: "Impact, sans-serif", textTransform: "uppercase", lineHeight: "1.2" }, __source: { fileName: "", lineNumber: 306, columnNumber: 23 }, __self: this }, state.bottomText))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: state.topText, onChange: (e)=>setState((prev)=>({ ...prev, topText: e.target.value })), placeholder: "Top text", className: "w-full p-2 border-2 border-[#848484]", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: state.bottomText, onChange: (e)=>setState((prev)=>({ ...prev, bottomText: e.target.value })), placeholder: "Bottom text", className: "w-full p-2 border-2 border-[#848484]", __source: { fileName: "", lineNumber: 334, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2", __source: { fileName: "", lineNumber: 348, columnNumber: 21 }, __self: this }, "Text Size: ", state.fontSize, "px"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "20", max: "60", value: state.fontSize, onChange: (e)=>setState((prev)=>({ ...prev, fontSize: parseInt(e.target.value) })), className: "w-full", __source: { fileName: "", lineNumber: 351, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: downloadMeme, className: "w-full p-2 mt-4 bg-[#000080] text-white border-2 border-[#848484] hover:bg-[#0000a0]", __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this }, "💾 Download Meme")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 377, columnNumber: 11 }, __self: this }, state.createdMemes.map((meme)=>/*#__PURE__*/ React.createElement("div", { key: meme.id, className: "bg-[#c0c0c0] border-2 border-[#848484] p-2", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 383, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: meme.imageUrl, alt: "Created meme", className: "w-full h-auto", __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 p-2 text-center", __source: { fileName: "", lineNumber: 389, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white stroke-black", style: { textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", fontSize: `${meme.fontSize || 32}px` }, __source: { fileName: "", lineNumber: 390, columnNumber: 21 }, __self: this }, meme.topText)), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-2 text-center", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white stroke-black", style: { textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", fontSize: `${meme.fontSize || 32}px` }, __source: { fileName: "", lineNumber: 402, columnNumber: 21 }, __self: this }, meme.bottomText))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-xs text-[#666]", __source: { fileName: "", lineNumber: 414, columnNumber: 17 }, __self: this }, "Generated from: ", meme.prompt))))), /*#__PURE__*/ React.createElement("style", { __source: { fileName: "", lineNumber: 422, columnNumber: 9 }, __self: this }, ` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes loading { 0% { width: 0; } 50% { width: 70%; } 100% { width: 100%; } } .loading-bar { animation: loading 2s ease-in-out infinite; width: 0; } `))); }