function MainComponent() { const [image, setImage] = React.useState(""); const generateOutfit = async ()=>{ const tops = document.querySelector('select[name="tops"]').value; const pants = document.querySelector('select[name="pants"]').value; const shoes = document.querySelector('select[name="shoes"]').value; const colors = document.querySelector('select[name="colors"]').value; const mood = document.querySelector('select[name="mood"]').value; const gender = document.querySelector('select[name="gender"]').value; const prompt = `${colors} ${mood} ${gender} outfit with ${tops}, ${pants}, and ${shoes}`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); setImage(data.data[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen bg-cover", style: { backgroundImage: "url(https://ucarecdn.com/c6a929ad-b6e4-4d88-a465-7fbe7ef59a48/-/format/auto/)" }, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 left-5 flex flex-col space-y-3", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-[150px] p-2 rounded bg-white border border-gray-300 font-roboto", name: "tops", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "shirt", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Shirt"), /*#__PURE__*/ React.createElement("option", { value: "blouse", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Blouse"), /*#__PURE__*/ React.createElement("option", { value: "sweater", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Sweater"), /*#__PURE__*/ React.createElement("option", { value: "jacket", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Jacket")), /*#__PURE__*/ React.createElement("select", { className: "w-[150px] p-2 rounded bg-white border border-gray-300 font-roboto", name: "pants", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "jeans", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Jeans"), /*#__PURE__*/ React.createElement("option", { value: "shorts", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Shorts"), /*#__PURE__*/ React.createElement("option", { value: "skirt", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Skirt"), /*#__PURE__*/ React.createElement("option", { value: "trousers", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Trousers")), /*#__PURE__*/ React.createElement("select", { className: "w-[150px] p-2 rounded bg-white border border-gray-300 font-roboto", name: "shoes", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "sneakers", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Sneakers"), /*#__PURE__*/ React.createElement("option", { value: "boots", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Boots"), /*#__PURE__*/ React.createElement("option", { value: "heels", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Heels"), /*#__PURE__*/ React.createElement("option", { value: "flats", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Flats")), /*#__PURE__*/ React.createElement("select", { className: "w-[150px] p-2 rounded bg-white border border-gray-300 font-roboto", name: "colors", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "red", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Red"), /*#__PURE__*/ React.createElement("option", { value: "blue", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Blue"), /*#__PURE__*/ React.createElement("option", { value: "green", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Green"), /*#__PURE__*/ React.createElement("option", { value: "black", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Black"), /*#__PURE__*/ React.createElement("option", { value: "white", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "White")), /*#__PURE__*/ React.createElement("select", { className: "w-[150px] p-2 rounded bg-white border border-gray-300 font-roboto", name: "mood", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "casual", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Casual"), /*#__PURE__*/ React.createElement("option", { value: "formal", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Formal"), /*#__PURE__*/ React.createElement("option", { value: "sporty", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Sporty"), /*#__PURE__*/ React.createElement("option", { value: "elegant", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Elegant")), /*#__PURE__*/ React.createElement("select", { className: "w-[150px] p-2 rounded bg-white border border-gray-300 font-roboto", name: "gender", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Female"), /*#__PURE__*/ React.createElement("option", { value: "unisex", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Unisex"))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 right-5 w-[300px] h-[400px] bg-[#FFC0CB] rounded-md p-4 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-center text-xl mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "your new fit"), /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated outfit", className: "w-full h-full object-contain", id: "generatedImage", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateOutfit, className: "absolute bottom-20 left-1/2 transform -translate-x-1/2 bg-[#FF69B4] text-white rounded p-2 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "Make Magic!")); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); }