function MainComponent() { const [gender, setGender] = React.useState(''); const [features, setFeatures] = React.useState(''); const [image, setImage] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); const imageURL = `https://api.example.com/generate?gender=${gender}&features=${encodeURI(features)}`; setImage(imageURL); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "特徴に基づく美男美女画像生成器"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "gender", className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "性別の選択"), /*#__PURE__*/ React.createElement("select", { id: "gender", name: "gender", value: gender, onChange: (e)=>setGender(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "美女"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "美男"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "features", className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "特徴"), /*#__PURE__*/ React.createElement("textarea", { id: "features", name: "features", rows: "4", className: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", placeholder: "例：笑顔が素敵、優しそうな目、など", value: features, onChange: (e)=>setFeatures(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "クリエイト")), image && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `生成された画像：${gender === 'female' ? '美女' : '美男'}、特徴：${features}`, className: "w-full max-w-lg mx-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })))); }