function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [images, setImages] = React.useState([]); const [width, setWidth] = React.useState("300"); const [height, setHeight] = React.useState("300"); const [numImages, setNumImages] = React.useState(1); const [seed, setSeed] = React.useState(0); const [faceFix, setFaceFix] = React.useState(false); const [inputImage, setInputImage] = React.useState(null); const handleGenerateImage = async ()=>{ const queryParams = new URLSearchParams({ prompt: encodeURIComponent(prompt), width, height, num_images: numImages, seed, face_fix: faceFix }); const response = await fetch(`/integrations/dall-e-3/?${queryParams.toString()}`, { method: "GET" }); const result = await response.json(); if (result.data && result.data.length > 0) { setImages(result.data.slice(0, numImages)); } }; const generateRandomSeed = ()=>{ setSeed(Math.floor(Math.random() * 10000)); }; const randomizePrompt = ()=>{ const randomPrompts = [ "a painting of foxes playing poker", "a futuristic city", "a serene landscape" ]; const randomPrompt = randomPrompts[Math.floor(Math.random() * randomPrompts.length)]; setPrompt(randomPrompt); }; const handleImageUpload = (e)=>{ if (e.target.files && e.target.files[0]) { setInputImage(URL.createObjectURL(e.target.files[0])); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", className: "border w-full p-2 mb-4 font-roboto", placeholder: "Enter image description", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: randomizePrompt, className: "bg-gray-500 text-white px-4 py-2 font-roboto mb-4 w-full", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "Randomize Prompt"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "width", className: "border w-full p-2 mb-4 font-roboto", placeholder: "Width", value: width, onChange: (e)=>setWidth(e.target.value), __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", className: "border w-full p-2 mb-4 font-roboto", placeholder: "Height", value: height, onChange: (e)=>setHeight(e.target.value), __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "numImages", className: "border w-full p-2 mb-4 font-roboto", value: numImages, onChange: (e)=>setNumImages(e.target.value), __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, [ 1, 2, 3, 4 ].map((number)=>/*#__PURE__*/ React.createElement("option", { key: number, value: number, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, number))), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4 w-full", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "seed", className: "border w-full p-2 font-roboto", placeholder: "Seed", value: seed, onChange: (e)=>setSeed(e.target.value), __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateRandomSeed, className: "bg-gray-500 text-white px-4 py-2 font-roboto ml-2", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "🎲")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center w-full mb-4 font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "faceFix", value: faceFix, onChange: ()=>setFaceFix(!faceFix), className: "mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }), "Face Fix"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "inputImage", className: "border w-full p-2 mb-4 font-roboto", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImage, className: "bg-blue-500 text-white px-4 py-2 font-roboto w-full", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, "Generate Image"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, images.map((imageUrl, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: imageUrl, alt: `Generated image ${index + 1} for ${prompt}`, style: { width: `${width}px`, height: `${height}px` }, __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this })))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this })); }