function MainComponent() { const [response, setResponse] = React.useState(''); const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); const prompt = e.target.prompt.value; const userMessage = { text: prompt, sender: 'user' }; setMessages((prev)=>[ ...prev, userMessage ]); e.target.reset(); setLoading(true); const aiResponse = await fetchOpenAiResponse(prompt); setMessages((prev)=>[ ...prev, { text: aiResponse, sender: 'ai' } ]); const imageResponse = await fetchImageResponse(aiResponse); setImageUrl(imageResponse); setLoading(false); }; const fetchOpenAiResponse = async (prompt)=>{ const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: prompt } ] }) }); const data = await response.json(); return data.choices[0].message.content; }; const fetchImageResponse = async (prompt)=>{ const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&width=512&height=512`, { method: 'GET' }); const data = await response.json(); return data.data[0]; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[350px] bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 border-b", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-sans text-[#333]", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "ネットミーム生成器"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-smile text-[#007bff]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 h-[400px] overflow-y-scroll", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, messages.map((message, index)=>{ const isAi = message.sender === 'ai'; const messageClasses = `p-2 mb-2 max-w-[75%] rounded-lg ${isAi ? 'self-start bg-[#e0e0e0] text-[#333]' : 'self-end bg-[#007bff] text-white'}`; return /*#__PURE__*/ React.createElement("div", { key: index, className: messageClasses, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, message.text); }), loading && /*#__PURE__*/ React.createElement("div", { className: "self-start bg-[#e0e0e0] text-[#333] p-2 mb-2 max-w-[75%] rounded-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 23 }, __self: this }, "読み込み中...")), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "生成されたネットミーム", className: "max-w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 border-t flex", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "お題を入力してください...", className: "flex-1 p-2 border border-[#ddd] rounded-l", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white px-4 py-2 rounded-r font-sans", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "生成")))); }