function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [image, setImage] = React.useState(null); const handleGenerate = async ()=>{ try { const response = await fetch("https://stable-diffusion-api.com/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }) }); const data = await response.json(); setImage(data.image_url); } catch (error) { console.error("Error generating image:", error); } }; const handleSaveImage = ()=>{ if (image) { const link = document.createElement("a"); link.href = image; link.download = "generated_image.png"; link.click(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-between bg-gray-100", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600 text-white py-4 flex justify-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Image Generator App")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to generate...", className: "w-[400px] p-2 border border-gray-300 rounded-md shadow-sm font-crimson-text", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "w-[150px] bg-green-500 text-white py-2 rounded-md shadow-md hover:bg-green-700 font-crimson-text", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Generate"), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-[400px] bg-gray-200 border border-gray-400 flex items-center justify-center mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, image ? /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated visual representation", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Generated image will appear here.")), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveImage, className: "w-[150px] bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-700 font-crimson-text", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Save Image")), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-blue-600 text-white py-4 flex justify-center", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://developer-website.com", className: "text-sm font-roboto hover:underline", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Visit Developer's Website"))); }