function MainComponent() { const [imageURL, setImageURL] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const promptRef = React.useRef(null); const fetchImage = async (event)=>{ event.preventDefault(); const promptValue = promptRef.current.value; setIsLoading(true); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(promptValue)}&batch_size=1`, { method: 'GET' }); const data = await response.json(); setImageURL(data.data[0]); } catch (error) { console.error("Fetching image failed:", error); } setIsLoading(false); }; const imageStyle = { display: imageURL ? 'block' : 'none', maxWidth: '100%', maxHeight: '500px', objectFit: 'cover', margin: 'auto' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-6", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-md rounded-lg w-full max-w-md", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: fetchImage, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "font-sans text-lg text-[#444]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Describe the image you want to generate:"), /*#__PURE__*/ React.createElement("input", { ref: promptRef, type: "text", id: "prompt", name: "prompt", placeholder: "e.g., a sunset over the mountains", className: "border px-4 py-2 rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: `transition duration-150 ease-in-out rounded px-4 py-2 ${isLoading ? 'bg-gray-300' : 'bg-blue-600 hover:bg-blue-700'} text-white`, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, isLoading ? 'Generating...' : 'Generate Image')), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#555]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Generating your image...") : /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Generated from input prompt", style: imageStyle, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }