function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [imageUrl, setImageUrl] = React.useState(""); const [selectedApparel, setSelectedApparel] = React.useState(""); const handleGenerate = async ()=>{ const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); setImageUrl(data.data[0]); }; const handleChoice = ()=>{}; const apparelImages = { "Tシャツ": "/tshirt.png", "パーカー": "/hoodie.png", "マグカップ": "/mug.png" }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-10", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 w-[612px] h-[612px] flex items-center justify-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, imageUrl ? /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated visual representation", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa fa-image text-6xl text-gray-300", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-10", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Step1 Create Image"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "border border-gray-300 w-full p-2 mb-2", placeholder: "プロンプトを挿入", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "bg-black text-white py-2 px-4 w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Generate"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-10", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[612px] h-[612px] border border-gray-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, selectedApparel && imageUrl ? /*#__PURE__*/ React.createElement("img", { src: apparelImages[selectedApparel], alt: `Generated visual on ${selectedApparel}`, className: "object-cover w-full h-full", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { className: "w-[100px] h-[100px]", src: "/placeholder.png", alt: "Placeholder image", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-10", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Step2 Choice the apparel pattern"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2 mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedApparel("Tシャツ"), className: "border border-gray-300 p-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[50px] h-[50px]", src: "/tshirt.png", alt: "T-shirt icon", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), "Tシャツ"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedApparel("パーカー"), className: "border border-gray-300 p-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[50px] h-[50px]", src: "/hoodie.png", alt: "Hoodie icon", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }), "パーカー"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedApparel("マグカップ"), className: "border border-gray-300 p-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[50px] h-[50px]", src: "/mug.png", alt: "Mug icon", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), "マグカップ")), /*#__PURE__*/ React.createElement("button", { onClick: handleChoice, className: "bg-black text-white py-2 px-4 w-full", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Choice")))); }