function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [images, setImages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [generatedCount, setGeneratedCount] = React.useState(0); const generateImages = React.useCallback(async ()=>{ if (!prompt.trim()) { setError("Please enter a prompt"); return; } setLoading(true); setError(null); setImages([]); setGeneratedCount(0); try { const imagePromises = []; for(let i = 0; i < 30; i++){ const promise = fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: "GET" }).then((response)=>{ if (!response.ok) { throw new Error(`Failed to generate image ${i + 1}`); } return response.json(); }).then((data)=>{ setGeneratedCount((prev)=>prev + 1); return data.data[0]; }); imagePromises.push(promise); } const generatedImages = await Promise.all(imagePromises); setImages(generatedImages); } catch (error) { console.error(error); setError("Failed to generate some images. Please try again."); } finally{ setLoading(false); } }, [ prompt ]); const downloadImage = React.useCallback(async (imageUrl, index)=>{ try { const response = await fetch(imageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `generated-image-${index + 1}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); } catch (error) { console.error("Failed to download image:", error); } }, []); const downloadAllImages = React.useCallback(async ()=>{ for(let i = 0; i < images.length; i++){ await downloadImage(images[i], i); // Small delay to prevent overwhelming the browser await new Promise((resolve)=>setTimeout(resolve, 100)); } }, [ images, downloadImage ]); return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", backgroundColor: "#0f0f0f", color: "#ffffff", padding: "2rem 1rem" }, __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto", textAlign: "center" }, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { fontSize: "clamp(3rem, 8vw, 6rem)", fontWeight: "bold", marginBottom: "3rem", background: "linear-gradient(135deg, #ffffff, #888888)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }, __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "AI Image Generator"), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "3rem" }, __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to generate...", style: { width: "100%", maxWidth: "600px", height: "120px", padding: "1rem", backgroundColor: "#1a1a1a", border: "2px solid #333333", borderRadius: "8px", color: "#ffffff", fontSize: "1rem", resize: "vertical", outline: "none" }, onFocus: (e)=>e.target.style.borderColor = "#555555", onBlur: (e)=>e.target.style.borderColor = "#333333", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateImages, disabled: loading, style: { backgroundColor: "#2a2a2a", color: "#ffffff", border: "none", padding: "1rem 2rem", fontSize: "1.1rem", borderRadius: "8px", cursor: loading ? "not-allowed" : "pointer", marginBottom: "2rem", opacity: loading ? 0.6 : 1, transition: "all 0.2s ease" }, onMouseEnter: (e)=>{ if (!loading) { e.target.style.backgroundColor = "#3a3a3a"; } }, onMouseLeave: (e)=>{ if (!loading) { e.target.style.backgroundColor = "#2a2a2a"; } }, __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, loading ? `Generating... (${generatedCount}/30)` : "Generate 30 Images"), error && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#2a1a1a", color: "#ff6b6b", padding: "1rem", borderRadius: "8px", marginBottom: "2rem", border: "1px solid #4a2a2a" }, __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, error), images.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: downloadAllImages, style: { backgroundColor: "#2a2a2a", color: "#ffffff", border: "none", padding: "0.8rem 1.5rem", fontSize: "1rem", borderRadius: "8px", cursor: "pointer", marginBottom: "2rem", transition: "all 0.2s ease" }, onMouseEnter: (e)=>e.target.style.backgroundColor = "#3a3a3a", onMouseLeave: (e)=>e.target.style.backgroundColor = "#2a2a2a", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "Download All Images"), images.length > 0 && /*#__PURE__*/ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: "1.5rem", marginTop: "2rem" }, __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, images.map((imageUrl, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { backgroundColor: "#1a1a1a", borderRadius: "8px", padding: "1rem", border: "1px solid #333333" }, __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Generated image ${index + 1}`, style: { width: "100%", height: "200px", objectFit: "cover", borderRadius: "4px", marginBottom: "1rem" }, __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadImage(imageUrl, index), style: { backgroundColor: "#2a2a2a", color: "#ffffff", border: "none", padding: "0.5rem 1rem", fontSize: "0.9rem", borderRadius: "4px", cursor: "pointer", width: "100%", transition: "all 0.2s ease" }, onMouseEnter: (e)=>e.target.style.backgroundColor = "#3a3a3a", onMouseLeave: (e)=>e.target.style.backgroundColor = "#2a2a2a", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, "Download")))))); }