function MainComponent() { const [userMessage, setUserMessage] = React.useState(""); const [conversation, setConversation] = React.useState([]); const [imageURL, setImageURL] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleUserMessageChange = (e)=>{ setUserMessage(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setConversation((prev)=>[ ...prev, { role: "user", content: userMessage } ]); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: userMessage } ], system_prompt: 'Can you generate a prompt for Stable Diffusion based on this input?' }) }); const chatData = await chatResponse.json(); setConversation((prev)=>[ ...prev, { role: "assistant", content: chatData.choices[0].message.content } ]); const prompt = chatData.choices[0].message.content; const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&width=1024&height=576`, { method: 'GET' }); const imageData = await imageResponse.json(); setImageURL(imageData.data[0]); setLoading(false); setUserMessage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Chat & Generate Images"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg mb-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", placeholder: "What image would you like to generate?", className: "w-full p-3 border border-gray-300 rounded-lg font-roboto mb-4", value: userMessage, onChange: handleUserMessageChange, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white p-3 rounded-lg font-roboto hover:bg-[#0056b3]", disabled: loading, __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, loading ? 'Generating...' : 'Send Message')), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg overflow-auto bg-white shadow rounded-lg p-6 font-roboto space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: `${message.role === "user" ? "text-right" : "text-left"} p-2`, __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, message.content))), imageURL && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Generated image based on chat prompt", className: "w-full max-w-lg rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } img { animation: fadeIn 1s ease-out; } `)); }