function MainComponent() { const [vTuberFeature, setVTuberFeature] = React.useState({ eyes: '', eyebrows: '', mouth: '', facialContour: '', shirt: '', pants: '' }); const [imageLink, setImageLink] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleFeatureChange = (event)=>{ setVTuberFeature((prevState)=>({ ...prevState, [event.target.name]: event.target.value })); }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const prompt = `A VTuber character with ${Object.entries(vTuberFeature).map(([key, value])=>`${key}: ${value}`).join(', ')}`; try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); if (!response.ok) { throw new Error('Failed to generate image'); } const { data } = await response.json(); setImageLink(data[0]); } catch (error) { console.error('Error:', error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-pink-500 to-pink-700 flex items-center justify-center", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-xl p-8 bg-white rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-3xl font-bold text-center text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "VTuber生成くん"), Object.keys(vTuberFeature).map((feature, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: feature, className: "block mb-2 text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, feature), /*#__PURE__*/ React.createElement("input", { id: feature, name: feature, value: vTuberFeature[feature], onChange: handleFeatureChange, type: "text", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent", placeholder: `${feature}特徴を入力`, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: `${loading ? 'bg-gray-400' : 'bg-pink-500 hover:bg-pink-600'} transition-colors px-6 py-2 text-white rounded-lg font-roboto`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, loading ? '読み込み中...' : '画像を生成する')), imageLink && /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-center", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageLink, alt: "Generated VTuber Character", className: "max-w-xs md:max-w-sm lg:max-w-md rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })))); }