function MainComponent() { const [imageUrl, setImageUrl] = React.useState(''); const [messages, setMessages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleSubmission = async (e)=>{ e.preventDefault(); const text = e.target.elements.chatInput.value; const updatedMessages = [ { role: 'user', content: text }, ...messages ]; setMessages(updatedMessages); setIsLoading(true); const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: text }, ...messages ] }) }); const chatGptData = await chatGptResponse.json(); const chatGptMessage = chatGptData.choices[0].message.content; const newMessages = [ { role: 'assistant', content: chatGptMessage }, ...updatedMessages ]; setMessages(newMessages); if (updatedMessages.length % 2 === 0) { const dallEResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(chatGptMessage)}`, { method: 'GET' }); const dallEData = await dallEResponse.json(); setImageUrl(dallEData.data[0]); } else { const stableDiffusionResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(chatGptMessage)}`, { method: 'GET', headers: { 'Content-Type': 'application/json' } }); const stableDiffusionData = await stableDiffusionResponse.json(); setImageUrl(stableDiffusionData.data[0]); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text my-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Web絵本作り"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ChatGptSubmissionForm, { onSubmit: handleSubmission, placeholder: "物語を入力してください...", buttonText: "生成", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mt-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, imageUrl && !isLoading && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "生成された絵", className: "w-[300px] h-[300px] object-cover mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>{ const messageAlignment = msg.role === 'user' ? 'text-right' : 'text-left'; const messageBgColor = msg.role === 'user' ? 'bg-blue-200' : 'bg-green-200'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 my-2 ${messageAlignment} ${messageBgColor}`, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-md font-crimson-text", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, msg.content)); })))); } function ChatGptSubmissionForm({ onSubmit, placeholder, buttonText }) { return /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "w-full flex flex-col", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", placeholder: placeholder, className: "p-2 border border-gray-300 rounded mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, buttonText)); }