function MainComponent() { const [messages, setMessages] = React.useState([ { role: 'user', content: 'プロンプトのアイデアを持っていますか？' }, { role: 'assistant', content: 'それは素晴らしいアイデアです！何を作りたいですか？' } ]); const [inputMessage, setInputMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleMessageChange = (event)=>{ setInputMessage(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const userMessage = inputMessage.trim(); if (!userMessage) return; setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: userMessage } ]); setInputMessage(''); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ], system_prompt: 'Explain this content' }) }).then((res)=>res.json()); if (chatResponse.choices && chatResponse.choices.length > 0) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: chatResponse.choices[0].message.content } ]); const imageGenerationMessage = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(chatResponse.choices[0].message.content)}`, { method: 'GET' }).then((res)=>res.json()); if (imageGenerationMessage.data && imageGenerationMessage.data.length > 0) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'image', content: imageGenerationMessage.data[0] } ]); } else { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: '画像生成に失敗しました。' } ]); } } else { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: '応答取得に失敗しました。' } ]); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center p-5", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "完全無料の画像生成サイト"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-3xl bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "チャット形式で画像生成")), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex-grow overflow-y-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${message.role === 'user' ? 'fa-user-circle' : message.role === 'image' ? 'fa-image' : 'fa-robot'} text-2xl text-[#555]`, __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }, message.role.toUpperCase().replace('IMAGE', 'STABLE DIFFUSION'), ":")), message.role !== 'image' ? /*#__PURE__*/ React.createElement("p", { className: "ml-10 text-sm text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, message.content) : /*#__PURE__*/ React.createElement("img", { src: message.content, alt: "Generated content based on ChatGPT consultation", className: "ml-10 max-w-xs max-h-60", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: handleMessageChange, placeholder: "メッセージを入力...", disabled: loading, className: "w-full p-2 border rounded-lg mr-2 text-sm", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg text-sm", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, loading ? '送信中...' : '送信'))))))); }