function MainComponent() { const [image, setImage] = React.useState(''); const [chatResponse, setChatResponse] = React.useState(''); const handleGenerateImage = async (e)=>{ e.preventDefault(); const prompt = e.target.prompt.value; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setImage(data.data[0]); }; const handleSendMessage = async ()=>{ const message = document.getElementById('chat-input').value; const response = await fetch('/integrations/google-gemini-1-5-flash/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: message } ] }) }); const data = await response.json(); setChatResponse(data.choices[0].message.content); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-6", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "Image and Chat Bot"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md", onSubmit: handleGenerateImage, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium font-roboto mb-2", htmlFor: "prompt", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Enter Image Description"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "prompt", name: "prompt", placeholder: "a painting of foxes playing poker, disney, zootopia", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700", type: "submit", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Generate Image")), image && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated by Stable Diffusion", className: "w-[400px] h-[400px] object-cover", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "my-6 w-full max-w-md", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Chat Bot"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border border-gray-300 rounded", id: "chat-input", name: "chat-input", placeholder: "Type your message here...", rows: "4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-green-500 text-white py-2 px-4 rounded mt-2 hover:bg-green-700", type: "button", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Send Message"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded h-[200px] overflow-y-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", id: "chat-output", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, chatResponse)))); }