function GenerateImageButton({ onClick, isLoading }) { return /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 bg-blue-500 text-white rounded-sm font-roboto w-full hover:bg-blue-600 transition-colors ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`, onClick: onClick, disabled: isLoading, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Generate Image"); } function GenerateImageButtonStory() { const handleClick = ()=>console.log('Button clicked'); const loadingState = false; // simulate the loading state return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateImageButton, { onClick: handleClick, isLoading: loadingState, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userMessage, setUserMessage] = React.useState(""); const [loading, setLoading] = React.useState(false); const [imageURL, setImageURL] = React.useState(""); const handleMessageChange = (event)=>{ setUserMessage(event.target.value); }; const fetchGeneratedImage = async ()=>{ setLoading(true); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(userMessage)}`, { method: 'GET' }); const data = await response.json(); setImageURL(data.data[0] || ''); } catch (error) { console.error('Error fetching generated image:', error); } finally{ setLoading(false); } }; const handleSendMessage = async ()=>{ await fetchGeneratedImage(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F8F9FA] p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full max-w-4xl p-6 bg-white shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto font-bold text-center mb-6 text-[#333]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Text to Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-4 h-40 border border-gray-300 rounded-sm font-roboto", placeholder: "Describe the image to generate...", name: "userMessage", value: userMessage, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-500 text-white rounded-sm font-roboto w-full hover:bg-blue-600 transition-colors", onClick: handleSendMessage, disabled: loading, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Generate Image")), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full max-w-4xl", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-bold mb-6 text-center text-[#333]", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Generated Image"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "AI generated image based on textual description", className: "w-full max-w-lg rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })))); }