function MainComponent() { const [chatMessage, setChatMessage] = React.useState(''); const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(''); const handleChatSubmit = async (event)=>{ event.preventDefault(); setLoading(true); setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: chatMessage } ]); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": chatMessage } ], system_prompt: 'Please suggest an image idea based on this input' }) }).then((response)=>response.json()); const assistantMessage = chatResponse.choices[0].message.content; setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: assistantMessage } ]); const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(assistantMessage)}`, { method: 'GET' }).then((response)=>response.json()); setImageUrl(imageResponse.data[0]); } catch (error) { console.error('Error:', error); } setLoading(false); setChatMessage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F7F8]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] sm:max-w-md lg:max-w-lg bg-white p-8 m-4 rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#363636] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "画像生成チャット"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleChatSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "chatMessage", className: "block text-sm font-roboto text-[#363636]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "プロンプト"), /*#__PURE__*/ React.createElement("div", { className: "flex mt-1", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatMessage", value: chatMessage, onChange: (e)=>setChatMessage(e.target.value), placeholder: "アイディアを入力してください", className: "w-full p-2 border rounded-md text-[#363636] focus:outline-none focus:ring-2 focus:ring-[#4A90E2]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 bg-[#4A90E2] text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 p-2 rounded-md text-[#363636] ${message.role === 'user' ? 'bg-[#DDEEFF]' : 'bg-[#FFEEDD]'} `, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-[#363636]", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "生成中..."), imageUrl && !loading && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "生成された画像", className: "mt-4 w-full max-w-md lg:max-w-lg object-cover", __source: { fileName: "", lineNumber: 50, columnNumber: 34 }, __self: this }))); }