function GenderSelectElement({ name, options }) { return /*#__PURE__*/ React.createElement("select", { name: name, className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option.value, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, option.label))); } function GenderSelectElementStory() { const genderOptions = [ { value: "female", label: "女性" }, { value: "male", label: "男性" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenderSelectElement, { name: "gender", options: genderOptions, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const requestPayload = { characteristics: { gender: formData.get('gender'), age: formData.get('age'), hair_style: formData.get('hair_style'), eye_color: formData.get('eye_color') }, pose: formData.get('pose'), background: formData.get('background'), fashion_items: [ { category: formData.get('category'), item_name: formData.get('item_name'), design_details: formData.get('design_details') } ], style: formData.get('style') }; fetch('https://api.example.com/generate-image', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestPayload) }).then((response)=>response.json()).then((data)=>{ console.log(data); }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-noto-sans", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl mb-4 text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "画像生成アプリ"), /*#__PURE__*/ React.createElement("form", { className: "mb-8", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("fieldset", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "人物の特徴"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "gender", value: "female", className: "mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }), "女性"), /*#__PURE__*/ React.createElement("img", { src: "/path/to/female.png", alt: "女性のアイコン", className: "w-full h-[100px] object-cover rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "gender", value: "male", className: "mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }), "男性"), /*#__PURE__*/ React.createElement("img", { src: "/path/to/male.png", alt: "男性のアイコン", className: "w-full h-[100px] object-cover rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "gender", value: "other", className: "mr-2", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }), "その他"), /*#__PURE__*/ React.createElement("img", { src: "/path/to/other.png", alt: "その他のアイコン", className: "w-full h-[100px] object-cover rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "年齢", /*#__PURE__*/ React.createElement("select", { name: "age", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "adult", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "成人"), /*#__PURE__*/ React.createElement("option", { value: "child", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "子供"))), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "髪型", /*#__PURE__*/ React.createElement("input", { type: "text", name: "hair_style", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "目の色", /*#__PURE__*/ React.createElement("input", { type: "text", name: "eye_color", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("fieldset", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "人物のポーズ"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "ポーズ", /*#__PURE__*/ React.createElement("select", { name: "pose", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "standing", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "立ちポーズ"), /*#__PURE__*/ React.createElement("option", { value: "sitting", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "座りポーズ")))), /*#__PURE__*/ React.createElement("fieldset", { className: "mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "背景の特徴"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "背景", /*#__PURE__*/ React.createElement("select", { name: "background", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "urban", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "屋外（都市）"), /*#__PURE__*/ React.createElement("option", { value: "nature", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "自然"), /*#__PURE__*/ React.createElement("option", { value: "indoor", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "屋内")))), /*#__PURE__*/ React.createElement("fieldset", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "ファッションアイテムの特徴"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "カテゴリ", /*#__PURE__*/ React.createElement("input", { type: "text", name: "category", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "アイテム名", /*#__PURE__*/ React.createElement("input", { type: "text", name: "item_name", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "デザイン詳細", /*#__PURE__*/ React.createElement("input", { type: "text", name: "design_details", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("fieldset", { className: "mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "画像のスタイル"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "スタイル", /*#__PURE__*/ React.createElement("select", { name: "style", className: "border w-full p-2 rounded", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "manga", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "漫画風"), /*#__PURE__*/ React.createElement("option", { value: "oil", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "油絵風")))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "画像を生成")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://example.com/image1.png", alt: "生成された画像1", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://example.com/image2.png", alt: "生成された画像2", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded w-full", onClick: ()=>alert("詳細を見る"), __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "詳細を見る"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "これはサンプルのコーディネートです。"))))); }