function MainComponent() { const [messages, setMessages] = React.useState([ { role: "system", content: "ChatGPT: 画像のプロンプトを入力してください。" }, { role: "system", content: "ChatGPT: 生成画像のスタイルを選んでください。" } ]); const [inputValue, setInputValue] = React.useState(""); const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(""); const handleSendMessage = async (e)=>{ e.preventDefault(); if (!inputValue.trim()) return; const newMessages = [ ...messages, { role: "user", content: inputValue } ]; setMessages(newMessages); setInputValue(""); setLoading(true); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages.map((msg)=>({ role: msg.role, content: msg.content })) }) }).then((res)=>res.json()); const chatContent = chatResponse.choices[0].message.content; const updatedMessages = [ ...newMessages, { role: "system", content: chatContent } ]; setMessages(updatedMessages); const imageResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(chatContent)}`, { method: 'GET' }).then((res)=>res.json()); setImageUrl(imageResponse.data[0]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b-2 border-[#ccc] bg-[#0078d7] text-white flex justify-between items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "完全無料の画像生成AIサイト"), /*#__PURE__*/ React.createElement("span", { className: "fa fa-comment-dots", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-start space-x-2 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `fa fa-user-circle text-2xl ${msg.role === 'user' ? 'ml-auto' : ''}`, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg w-full ${msg.role === 'user' ? 'bg-[#d1ffd1]' : 'bg-[#e0e0e0]'}`, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, msg.content))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 23 }, __self: this }, "Loading..."), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated", className: "w-full", __source: { fileName: "", lineNumber: 56, columnNumber: 24 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", placeholder: "メッセージを入力...", className: "w-full border-2 border-[#ccc] rounded-lg p-2", value: inputValue, onChange: (e)=>setInputValue(e.target.value), __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }))))); }