function MainComponent() { const [chatInput, setChatInput] = React.useState(''); const [chatHistory, setChatHistory] = React.useState([]); const [loading, setLoading] = React.useState(false); const [image, setImage] = React.useState(''); const sendChat = async ()=>{ if (!chatInput.trim()) return; const newUserMessage = { role: 'user', content: chatInput }; setLoading(true); const chatGPTResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newUserMessage ], system_prompt: chatInput }) }).then((response)=>response.json()); setChatHistory([ ...chatHistory, newUserMessage, { ...chatGPTResponse.choices[0].message, role: 'assistant' } ]); const promptForImage = "ゆるキャラ " + chatGPTResponse.choices[0].message.content; const stableDiffusionResponse = await fetch('/integrations/stable-diffusion/?prompt=' + encodeURIComponent(promptForImage), { method: 'GET' }).then((response)=>response.json()); setImage(stableDiffusionResponse.data[0]); setLoading(false); setChatInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FDF6EC]", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#333] mb-8 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "ゆるキャラ生成 AI"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-white overflow-auto border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, chatHistory.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `m-2 p-2 rounded-lg ${message.role === 'user' ? 'bg-[#D0F0C0]' : 'bg-[#F0D0C0]'}`, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, message.content)), loading && /*#__PURE__*/ React.createElement("div", { className: "m-2 p-2 bg-[#F0F0F0] rounded-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 23 }, __self: this }, "...")), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: (e)=>setChatInput(e.target.value), className: "flex-grow p-2 border border-gray-300 rounded-l-lg", placeholder: "質問を入力...", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendChat, className: "px-4 bg-[#FFB549] text-white rounded-r-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "送信"))), image && /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] bg-[#FFF] shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "ゆるキャラ生成画像", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }))); }

ゆるキャラ 生成 AI

ゆるキャラ生成 AI