function MainComponent() { const [description, setDescription] = React.useState(''); const [style, setStyle] = React.useState(''); const [inspirationImage, setInspirationImage] = React.useState(null); const [imageURL, setImageURL] = React.useState(''); const [generating, setGenerating] = React.useState(false); const [uploadProgress, setUploadProgress] = React.useState(0); const [generatedImagesHistory, setGeneratedImagesHistory] = React.useState(new Set()); React.useEffect(()=>{ if (generating) { const interval = setInterval(()=>{ setUploadProgress((prevProgress)=>prevProgress < 100 ? prevProgress + 10 : 100); }, 200); return ()=>clearInterval(interval); } }, [ generating ]); const handleSubmit = async (event)=>{ event.preventDefault(); setGenerating(true); setUploadProgress(0); let uniqueImageURL; do { uniqueImageURL = `/generated-image-${Date.now()}.jpg`; }while (generatedImagesHistory.has(uniqueImageURL)) setTimeout(()=>{ setImageURL(uniqueImageURL); setGeneratedImagesHistory(new Set(generatedImagesHistory.add(uniqueImageURL))); setGenerating(false); }, 2000); }; const handleImageChange = (event)=>{ const file = event.target.files[0]; if (file) { setInspirationImage(URL.createObjectURL(file)); } }; const handleSaveImage = ()=>{ const link = document.createElement('a'); link.href = imageURL; link.download = `AI_generated_image_${Date.now()}.jpg`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; let submitButtonContent = generating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-1.5", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-1.5 rounded-full", style: { width: `${uploadProgress}%` }, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "mt-2 block text-center text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Loading... ", uploadProgress, "%")) : 'Generate Image'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white shadow-lg rounded-lg w-full max-w-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center text-[#333]", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Advanced AI Image Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block text-lg font-medium text-[#555]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Describe your image:"), /*#__PURE__*/ React.createElement("textarea", { id: "description", name: "description", rows: "4", className: "w-full px-3 py-2 text-base text-gray-700 border rounded-md focus:outline-none focus:ring", placeholder: "Enter an image description...", onChange: (e)=>setDescription(e.target.value), value: description, disabled: generating, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "style", className: "block text-lg font-medium text-[#555]", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Image style:"), /*#__PURE__*/ React.createElement("input", { id: "style", name: "style", type: "text", className: "w-full px-3 py-2 text-base text-gray-700 border rounded-md focus:outline-none focus:ring", placeholder: "Enter image style (e.g., 'cyberpunk')...", onChange: (e)=>setStyle(e.target.value), value: style, disabled: generating, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "inspirationImage", className: "block text-lg font-medium text-[#555]", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Upload inspiration image (optional):"), /*#__PURE__*/ React.createElement("input", { id: "inspirationImage", name: "inspirationImage", type: "file", accept: "image/*", className: "w-full px-3 py-2 text-base text-gray-700 border rounded-md focus:outline-none focus:ring", onChange: handleImageChange, disabled: generating, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full px-4 py-2 text-lg font-semibold text-white bg-blue-500 rounded-md ${generating ? 'bg-blue-300' : 'hover:bg-blue-600'} focus:outline-none flex flex-col justify-center items-center`, disabled: generating, __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, submitButtonContent)), imageURL && !generating && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: `Generated AI image in ${style} style with adult and offensive content allowed and based on the description: ${description}`, className: "w-full h-auto rounded-md shadow-lg", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleSaveImage, className: "mt-2 w-full px-4 py-2 text-lg font-semibold text-white bg-green-500 rounded-md hover:bg-green-600 focus:outline-none", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Save Image")))); }