function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [generatedImage, setGeneratedImage] = React.useState(null); const handleGenerateImage = async ()=>{ if (prompt.trim() === '') return; const response = await fetch('https://api.example.com/generate-image', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) }); const data = await response.json(); setGeneratedImage(data.image_url); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-white flex flex-col items-center p-4 font-sans", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-[#f0f0f0] rounded-md shadow-md p-6", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-center font-bold mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Stable Diffusion Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", className: "w-full p-4 border border-gray-300 rounded-md", rows: "4", placeholder: "Type your image description here...", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImage, className: "w-full bg-blue-500 text-white font-semibold py-2 rounded-md", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Generate Image")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Generated Image:"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-200 rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, generatedImage ? /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated image from your prompt", className: "w-full h-full object-cover rounded-md", __source: { fileName: "", lineNumber: 40, columnNumber: 31 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 40, columnNumber: 151 }, __self: this }, "Your generated image will appear here"))))); }