function MainComponent() { const [input, setInput] = React.useState(''); const [messages, setMessages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [isGeneratingImage, setIsGeneratingImage] = React.useState(false); const handleMessageSubmit = async ()=>{ if (!input.trim()) return; setIsLoading(true); setMessages((prev)=>[ ...prev, { role: 'user', content: input } ]); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: input } ], system_prompt: input }), headers: { 'Content-Type': 'application/json' } }).then((res)=>res.json()); if (chatResponse && chatResponse.choices.length > 0) { const englishPrompt = chatResponse.choices[0].message.content; setMessages((prev)=>[ ...prev, { role: 'assistant', content: 'プロンプト生成中…' } ]); setIsGeneratingImage(true); const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(englishPrompt)}`, { method: 'GET' }).then((res)=>res.json()); setIsGeneratingImage(false); if (imageResponse.data.length > 0) { setMessages((prev)=>[ ...prev, { role: 'assistant', content: '', image: imageResponse.data[0] } ]); } } } catch (error) { console.error('Error:', error); } setIsLoading(false); setInput(''); }; const handleReset = ()=>{ setMessages([]); }; const handleInputChange = (e)=>{ setInput(e.target.value); }; const renderMessage = (message, index)=>{ if (message.role === 'user') { return /*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-end mb-4 last:mb-0", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-2 py-2 px-4 bg-[#DCF8C6] text-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, message.content), /*#__PURE__*/ React.createElement("div", { className: "ml-4 bg-white rounded-full p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "🗣️"))); } else if (message.role === 'assistant' && message.content) { return /*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-start items-start mb-4 last:mb-0", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-4 bg-white rounded-full p-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "🤖")), /*#__PURE__*/ React.createElement("div", { className: `${isLoading ? 'animate-pulse' : ''} mr-2 py-2 px-4 bg-gray-300 text-gray-800 rounded-lg`, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, message.content)); } else if (message.role === 'assistant' && message.image) { return /*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-start items-start mb-4 last:mb-0 flex-col", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isGeneratingImage ? 'animate-pulse' : ''} mr-2 py-2 px-4 bg-gray-300 text-gray-800 rounded-lg`, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "画像を生成しました。"), /*#__PURE__*/ React.createElement("img", { src: message.image, alt: "Generated based on the conversation prompt", className: "max-h-[200px] max-w-full rounded-lg shadow-lg mt-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center min-h-screen bg-[#ededed]", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-center font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "日本語画像生成AI"), /*#__PURE__*/ React.createElement("div", { className: "border-b-2 border-gray-200 mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: input, onChange: handleInputChange, type: "text", name: "prompt", className: "w-full p-2 border-2 border-gray-300 rounded-lg", placeholder: "何を生成しましょうか？", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleMessageSubmit, disabled: isLoading || isGeneratingImage, className: `ml-4 py-2 px-4 text-white rounded-lg ${isLoading || isGeneratingImage ? 'bg-gray-400' : 'bg-[#007bff]'}`, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "生成"))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-4 space-y-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, messages.map(renderMessage)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center px-4 py-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "py-2 px-4 text-white bg-[#dc3545] rounded-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "リセット")))); }