function MainComponent({ imageUrl }) { const [generatedImage, setGeneratedImage] = React.useState(null); const [formValues, setFormValues] = React.useState({ tops: "", pants: "", shoes: "", mainColor: "", mood: "" }); const handleChange = (e)=>{ const { name, value } = e.target; setFormValues({ ...formValues, [name]: value }); }; const generateOutfit = async ()=>{ const prompt = `outfit with ${formValues.tops}, ${formValues.pants}, ${formValues.shoes} in ${formValues.mainColor}, mood: ${formValues.mood}`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: "GET" }); const data = await response.json(); setGeneratedImage(data.data[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen relative bg-cover", style: { backgroundImage: 'url(https://ucarecdn.com/c6a929ad-b6e4-4d88-a465-7fbe7ef59a48/-/format/auto/)' }, __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 bottom-4 flex flex-col space-y-4 w-[150px]", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "tops", className: "p-2 border border-black font-roboto", value: formValues.tops, onChange: handleChange, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Select Tops"), /*#__PURE__*/ React.createElement("option", { value: "tshirt", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "T-Shirt"), /*#__PURE__*/ React.createElement("option", { value: "blouse", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Blouse"), /*#__PURE__*/ React.createElement("option", { value: "jacket", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Jacket")), /*#__PURE__*/ React.createElement("select", { name: "pants", className: "p-2 border border-black font-roboto", value: formValues.pants, onChange: handleChange, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Select Pants"), /*#__PURE__*/ React.createElement("option", { value: "jeans", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Jeans"), /*#__PURE__*/ React.createElement("option", { value: "shorts", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Shorts"), /*#__PURE__*/ React.createElement("option", { value: "skirt", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Skirt")), /*#__PURE__*/ React.createElement("select", { name: "shoes", className: "p-2 border border-black font-roboto", value: formValues.shoes, onChange: handleChange, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Select Shoes"), /*#__PURE__*/ React.createElement("option", { value: "sneakers", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Sneakers"), /*#__PURE__*/ React.createElement("option", { value: "sandals", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Sandals"), /*#__PURE__*/ React.createElement("option", { value: "boots", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Boots")), /*#__PURE__*/ React.createElement("select", { name: "mainColor", className: "p-2 border border-black font-roboto", value: formValues.mainColor, onChange: handleChange, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Select Main Color"), /*#__PURE__*/ React.createElement("option", { value: "red", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Red"), /*#__PURE__*/ React.createElement("option", { value: "blue", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Blue"), /*#__PURE__*/ React.createElement("option", { value: "green", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Green")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "mood", className: "p-2 border border-black font-roboto", placeholder: "Enter Mood", value: formValues.mood, onChange: handleChange, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-pink-600 text-white font-roboto mt-4", onClick: generateOutfit, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Generate Outfit")), /*#__PURE__*/ React.createElement("div", { className: "absolute right-4 bottom-4 bg-pink-400 p-4 w-[300px] h-[400px] flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-lg mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Your New Fit"), generatedImage && /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated outfit", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 59, columnNumber: 28 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(MainComponent, { imageUrl: null, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { imageUrl: "https://oaidalleapiprodscus.blob.core.windows.net/example.png", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this })); }