function MainComponent() { const [race, setRace] = React.useState(''); const [gender, setGender] = React.useState(''); const [profession, setProfession] = React.useState(''); const [age, setAge] = React.useState(''); const [otherSettings, setOtherSettings] = React.useState(''); const [loading, setLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const generateImage = async ()=>{ setLoading(true); const prompt = `Generate a full-body illustration of an explorer. Race: ${race}, Gender: ${gender}, Profession: ${profession}, Age: ${age}. Additional Settings: ${otherSettings}. Draw in a Japanese anime style if not specified.`; const gptResponse = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: prompt } ] } ] }) }); const gptData = await gptResponse.json(); const gptContent = gptData.choices[0].message.content; const imageResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(gptContent)}&width=1024&height=1024`, { method: 'GET' }); const imageData = await imageResponse.json(); const imageUrl = imageData.data[0]; setMessages([ ...messages, { role: 'user', content: prompt }, { role: 'system', content: imageUrl } ]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "race", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "探索者の種族"), /*#__PURE__*/ React.createElement("input", { id: "race", name: "race", value: race, onChange: (e)=>setRace(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "gender", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "探索者の性別"), /*#__PURE__*/ React.createElement("input", { id: "gender", name: "gender", value: gender, onChange: (e)=>setGender(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "profession", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "探索者の職業"), /*#__PURE__*/ React.createElement("input", { id: "profession", name: "profession", value: profession, onChange: (e)=>setProfession(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "age", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "探索者の年齢"), /*#__PURE__*/ React.createElement("input", { id: "age", name: "age", value: age, onChange: (e)=>setAge(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "otherSettings", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "その他の設定"), /*#__PURE__*/ React.createElement("input", { id: "otherSettings", name: "otherSettings", value: otherSettings, onChange: (e)=>setOtherSettings(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateImage, className: `py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700 ${loading ? 'cursor-not-allowed' : ''}`, disabled: loading, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, loading ? '生成中...' : '画像を生成')), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, msg.role === 'system' ? /*#__PURE__*/ React.createElement("img", { src: msg.content, alt: `Explorer generated ${index}`, className: "w-full h-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 38 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 128 }, __self: this }, msg.content))))); }