function MainComponent() { const [selectedOptions, setSelectedOptions] = React.useState({ style: "", hairstyle: "", expression: "", outfit: "", pose: "", background: "", facialFeatures: "", bodyShape: "" }); const [generatedImage, setGeneratedImage] = React.useState(""); const handleChange = (e)=>{ setSelectedOptions({ ...selectedOptions, [e.target.name]: e.target.value }); }; const handleGenerateImageClick = ()=>{ // Image generation simulation. In a real scenario, you'd call an API. setGeneratedImage("/path/to/generated/image.jpg"); }; const handleDownloadImage = ()=>{ const link = document.createElement("a"); link.href = generatedImage; link.download = "generated-image.jpg"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto space-y-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 36, columnNumber: 14 }, __self: this }, "画像生成AI「Stable Diffusion」")), /*#__PURE__*/ React.createElement("select", { name: "style", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "実写風かアニメ風か"), /*#__PURE__*/ React.createElement("option", { value: "realistic", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "実写風"), /*#__PURE__*/ React.createElement("option", { value: "anime", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "アニメ風")), /*#__PURE__*/ React.createElement("select", { name: "hairstyle", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "髪型"), /*#__PURE__*/ React.createElement("option", { value: "short", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "短髪"), /*#__PURE__*/ React.createElement("option", { value: "long", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "長髪")), /*#__PURE__*/ React.createElement("select", { name: "expression", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "表情"), /*#__PURE__*/ React.createElement("option", { value: "happy", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "幸せ"), /*#__PURE__*/ React.createElement("option", { value: "sad", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "悲しい")), /*#__PURE__*/ React.createElement("select", { name: "outfit", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "服装"), /*#__PURE__*/ React.createElement("option", { value: "casual", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "カジュアル"), /*#__PURE__*/ React.createElement("option", { value: "formal", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "フォーマル")), /*#__PURE__*/ React.createElement("select", { name: "pose", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "ポーズ"), /*#__PURE__*/ React.createElement("option", { value: "standing", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "立っている"), /*#__PURE__*/ React.createElement("option", { value: "sitting", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "座っている")), /*#__PURE__*/ React.createElement("select", { name: "background", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "背景"), /*#__PURE__*/ React.createElement("option", { value: "city", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "都市"), /*#__PURE__*/ React.createElement("option", { value: "nature", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "自然")), /*#__PURE__*/ React.createElement("select", { name: "facialFeatures", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "顔の雰囲気"), /*#__PURE__*/ React.createElement("option", { value: "gentle", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "優しい"), /*#__PURE__*/ React.createElement("option", { value: "sharp", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "鋭い")), /*#__PURE__*/ React.createElement("select", { name: "bodyShape", onChange: handleChange, className: "w-full p-2 border rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "体型"), /*#__PURE__*/ React.createElement("option", { value: "slim", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "スリム"), /*#__PURE__*/ React.createElement("option", { value: "muscular", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "筋肉質")), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImageClick, className: "w-full p-2 mt-4 bg-blue-500 text-white rounded focus:outline-none", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "画像生成"), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "生成された画像", className: "mx-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDownloadImage, className: "mt-2 bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "ダウンロード")))); }