function MainComponent() { const [inputPrompt, setInputPrompt] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(''); const handleInputChange = (event)=>{ setInputPrompt(event.target.value); }; const handleGenerateImage = async ()=>{ const response = await fetch('https://api.stablediffusion.com/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: inputPrompt }) }); const data = await response.json(); setImageUrl(data.url); }; const handleSaveImage = ()=>{ const link = document.createElement('a'); link.href = imageUrl; link.download = 'generated-image.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#F3F4F6] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Image Generator")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md flex flex-col gap-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "imagePrompt", placeholder: "Describe the image you want to generate...", className: "input border border-gray-300 p-2 rounded", value: inputPrompt, onChange: handleInputChange, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImage, className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Generate"), /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 border border-gray-300 rounded flex justify-center items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: inputPrompt, className: "max-w-full max-h-[400px] object-cover", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveImage, className: "bg-green-500 text-white py-2 px-4 rounded hover:bg-green-700 transition duration-200", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Save Image"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F3F4F6] p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://developerwebsite.com", className: "font-roboto text-blue-500 hover:text-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Developer Website"))); }