function MainComponent() { const [top, setTop] = React.useState(""); const [pants, setPants] = React.useState(""); const [shoes, setShoes] = React.useState(""); const [color, setColor] = React.useState(""); const [mood, setMood] = React.useState(""); const [imageSrc, setImageSrc] = React.useState(""); const generateImage = async ()=>{ if (!top || !pants || !shoes || !color || !mood) return; const prompt = `Outfit with a ${top} top, ${pants} pants, and ${shoes} shoes. Color: ${color}. Mood: ${mood}`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setImageSrc(data.data[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen p-8", style: { backgroundImage: 'url(https://ucarecdn.com/512ec4e4-2980-4408-8a1b-676e0b9d3b26/-/format/auto/)', backgroundSize: '65%' }, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[20%] h-[70%] flex flex-col justify-center space-y-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "top", className: "w-full p-2 border border-gray-300 rounded", value: top, onChange: (e)=>setTop(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Select Top"), /*#__PURE__*/ React.createElement("option", { value: "t-shirt", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "T-shirt"), /*#__PURE__*/ React.createElement("option", { value: "shirt", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Shirt"), /*#__PURE__*/ React.createElement("option", { value: "blouse", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Blouse")), /*#__PURE__*/ React.createElement("select", { name: "pants", className: "w-full p-2 border border-gray-300 rounded", value: pants, onChange: (e)=>setPants(e.target.value), __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Select Pants"), /*#__PURE__*/ React.createElement("option", { value: "jeans", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Jeans"), /*#__PURE__*/ React.createElement("option", { value: "trousers", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Trousers"), /*#__PURE__*/ React.createElement("option", { value: "shorts", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Shorts")), /*#__PURE__*/ React.createElement("select", { name: "shoes", className: "w-full p-2 border border-gray-300 rounded", value: shoes, onChange: (e)=>setShoes(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Select Shoes"), /*#__PURE__*/ React.createElement("option", { value: "sneakers", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Sneakers"), /*#__PURE__*/ React.createElement("option", { value: "boots", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Boots"), /*#__PURE__*/ React.createElement("option", { value: "flats", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Flats")), /*#__PURE__*/ React.createElement("input", { name: "color", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Color", value: color, onChange: (e)=>setColor(e.target.value), __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "mood", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Mood", value: mood, onChange: (e)=>setMood(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-end items-end", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50%] flex flex-col items-center justify-center p-4 bg-[#ff69b4] rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl text-white mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Your New Fit"), imageSrc && /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "Generated outfit based on selected items", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 24 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 flex justify-center mb-10", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateImage, className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Generate"))); }