function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "画像のプロンプトを入力してください。" }, { role: "assistant", content: "生成画像のスタイルを選んでください。" } ]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const [generatedImage, setGeneratedImage] = React.useState(null); const sendMessage = async (e)=>{ e.preventDefault(); if (!input.trim()) return; const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setInput(""); setLoading(true); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }); const chatData = await chatResponse.json(); const assistantMessage = chatData.choices[0].message.content; const messagesWithReply = [ ...newMessages, { role: "assistant", content: assistantMessage } ]; setMessages(messagesWithReply); const stableResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(assistantMessage)}`); const stableData = await stableResponse.json(); setGeneratedImage(stableData.data[0]); } catch (error) { console.error("Error:", error); } finally{ 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: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 44, 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: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "完全無料の画像生成AIサイト"), /*#__PURE__*/ React.createElement("span", { className: "fa fa-comment-dots", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-start space-x-2 ${msg.role === "user" ? "justify-end" : ""}`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-user-circle text-2xl", __source: { fileName: "", lineNumber: 52, 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: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, msg.role === "user" ? `ユーザー: ${msg.content}` : `ChatGPT: ${msg.content}`))))), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI生成画像", className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", placeholder: "メッセージを入力...", value: input, onChange: (e)=>setInput(e.target.value), className: "w-full border-2 border-[#ccc] rounded-lg p-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#0078d7] text-white px-4 py-2 rounded-lg", disabled: loading, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "送信"))))); }