function MainComponent() { const [prompt, setPrompt] = useState(""); const [generating, setGenerating] = useState(false); const [currentImage, setCurrentImage] = useState(null); const [recentImages, setRecentImages] = useState([]); const [error, setError] = useState(null); const [progress, setProgress] = useState(0); const [loadingMessage, setLoadingMessage] = useState(""); const [referenceImage, setReferenceImage] = useState(null); const [selectedFormat, setSelectedFormat] = useState("png"); const [upload, { loading: uploading }] = useUpload(); useEffect(()=>{ fetchRecentImages(); }, []); const fetchRecentImages = async ()=>{ try { const response = await fetch("/api/get-recent-images", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch recent images"); } const data = await response.json(); setRecentImages(data.images); } catch (err) { console.error(err); setError("Failed to load recent images"); } }; const handleReferenceImageUpload = async (file)=>{ const { url, error } = await upload({ file }); if (error) { setError(error); return; } setReferenceImage(url); }; const handleDownload = async (imageId)=>{ try { const response = await fetch("/api/download-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageId, format: selectedFormat }) }); if (!response.ok) { throw new Error("Failed to download image"); } const blob = await response.blob(); const downloadLink = document.createElement("a"); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = `ai-generated-${imageId}.${selectedFormat.toLowerCase()}`; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); URL.revokeObjectURL(downloadLink.href); } catch (err) { console.error(err); setError("Failed to download image"); } }; const handleDelete = async (imageId)=>{ try { const response = await fetch("/api/delete-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageId }) }); if (!response.ok) { throw new Error("Failed to delete image"); } await fetchRecentImages(); } catch (err) { console.error(err); setError("Failed to delete image"); } }; const generateImage = async ()=>{ if (!prompt.trim()) return; setGenerating(true); setError(null); setProgress(0); setLoadingMessage("Starting up..."); const messages = [ "Analyzing your prompt...", "Creating your masterpiece...", "Adding final touches...", "Almost there..." ]; const progressInterval = setInterval(()=>{ setProgress((prev)=>{ if (prev >= 90) { clearInterval(progressInterval); return 90; } return prev + 10; }); }, 500); let messageIndex = 0; const messageInterval = setInterval(()=>{ messageIndex = (messageIndex + 1) % messages.length; setLoadingMessage(messages[messageIndex]); }, 2000); try { const response = await fetch("/api/generate-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, referenceImageUrl: referenceImage }) }); if (!response.ok) { const error = await response.text(); throw new Error(error || "Failed to generate image"); } const data = await response.json(); setProgress(100); setLoadingMessage("Done!"); setCurrentImage({ imageUrl: data.imageUrl, prompt }); await fetchRecentImages(); } catch (err) { console.error(err); setError(err.message || "Failed to generate image. Please try again."); } finally{ clearInterval(progressInterval); clearInterval(messageInterval); setGenerating(false); setProgress(0); setReferenceImage(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-8 font-inter text-center", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wolf-pack-battalion mr-4", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }), "Wolf AI Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to generate...", className: "flex-1 p-4 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg font-inter resize-none h-32", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-64", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files && handleReferenceImageUpload(e.target.files[0]), className: "hidden", id: "reference-image", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "reference-image", className: "block w-full p-4 text-center cursor-pointer bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg font-inter", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, referenceImage ? /*#__PURE__*/ React.createElement("img", { src: referenceImage, alt: "Reference", className: "w-full h-24 object-cover", __source: { fileName: "", lineNumber: 180, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mb-2", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block", __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, "Upload Reference Image"))))), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: generating || !prompt.trim(), className: `w-full md:w-auto px-6 py-3 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-md font-inter transition-opacity ${generating || !prompt.trim() ? "opacity-50 cursor-not-allowed" : "hover:opacity-80"}`, __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, generating ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin mr-2 text-xl", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }), "Generating...") : "Generate Image"), generating && /*#__PURE__*/ React.createElement("div", { className: "animate-fade-in", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pt-1", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-2 items-center justify-between", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this }, loadingMessage)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold inline-block text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }, progress, "%"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: `${progress}%` }, className: "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gray-900 dark:bg-white transition-all duration-500 ease-out animate-pulse", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this })))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 font-inter text-sm mt-2", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, error), currentImage && /*#__PURE__*/ React.createElement("div", { className: "mt-8 animate-fade-in", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, "Generated Image"), /*#__PURE__*/ React.createElement("div", { className: "rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentImage.imageUrl, alt: currentImage.prompt, className: "w-full h-auto", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, currentImage.prompt)), recentImages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, "Recent Generations"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, recentImages.length, "/5 images generated")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, recentImages.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "rounded-lg overflow-hidden bg-white dark:bg-gray-800 p-4", __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.image_url, alt: image.prompt, className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 281, columnNumber: 21 }, __self: this }, image.prompt), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2 mt-2", __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 285, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedFormat, onChange: (e)=>setSelectedFormat(e.target.value), className: "px-2 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white rounded-md", __source: { fileName: "", lineNumber: 286, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "png", __source: { fileName: "", lineNumber: 291, columnNumber: 27 }, __self: this }, "PNG"), /*#__PURE__*/ React.createElement("option", { value: "jpeg", __source: { fileName: "", lineNumber: 292, columnNumber: 27 }, __self: this }, "JPEG")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(image.id), className: "px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white rounded-md hover:opacity-80", __source: { fileName: "", lineNumber: 294, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-1", __source: { fileName: "", lineNumber: 298, columnNumber: 27 }, __self: this }), "Download")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(image.id), className: "px-3 py-1 text-sm bg-red-100 dark:bg-red-900 text-red-900 dark:text-red-100 rounded-md hover:opacity-80", __source: { fileName: "", lineNumber: 302, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash mr-1", __source: { fileName: "", lineNumber: 306, columnNumber: 25 }, __self: this }), "Delete")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-center text-sm text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 316, columnNumber: 11 }, __self: this }, "This AI Image Generator is currently in beta. Results may vary."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 322, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.3s ease-out; } `)); }