function MainComponent() { const [designIdea, setDesignIdea] = React.useState(''); const [messages, setMessages] = React.useState([ { role: "assistant", content: "商品のイメージについて教えてください。" } ]); const [loading, setLoading] = React.useState(false); const handleDesignIdeaChange = (e)=>{ setDesignIdea(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setMessages((oldMessages)=>[ ...oldMessages, { role: "user", content: designIdea } ]); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": designIdea } ], system_prompt: "Discuss packaging design" }) }); const chatData = await chatResponse.json(); if (chatData.choices[0].message.content.toLowerCase().includes("final image")) { const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(designIdea)}`, { method: 'GET' }); if (imageResponse.ok) { const imageData = await imageResponse.json(); setMessages((oldMessages)=>[ ...oldMessages, { role: "system", content: imageData.data[0], isImage: true } ]); } } else { setMessages((oldMessages)=>[ ...oldMessages, { role: "assistant", content: chatData.choices[0].message.content } ]); } setDesignIdea(''); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] py-10", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-3xl shadow-lg p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "袋菓子の商品パッケージデザイン"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "designIdea", value: designIdea, onChange: handleDesignIdeaChange, placeholder: "回答をここに入力…", className: "w-full p-2 border border-gray-300 rounded-full", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { disabled: loading, className: `w-full mt-2 p-2 text-white font-roboto rounded-full ${loading ? 'bg-gray-400' : 'bg-green-500'}`, type: "submit", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 52, columnNumber: 25 }, __self: this }, "応答生成中...") : '送信')), /*#__PURE__*/ React.createElement("div", { className: "h-96 overflow-y-auto bg-gray-50 rounded-lg p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"} my-2`, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs md:max-w-md break-words p-2 rounded-lg ${msg.role === "user" ? "bg-green-200" : "bg-blue-100"}`, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, msg.isImage ? /*#__PURE__*/ React.createElement("img", { src: msg.content, alt: "Generated packaging design", style: { width: "100%", maxHeight: "200px", objectFit: "cover", borderRadius: "8px" }, __source: { fileName: "", lineNumber: 59, columnNumber: 32 }, __self: this }) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 180 }, __self: this }, msg.content))))))); }