function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [negativePrompt, setNegativePrompt] = React.useState(''); const [seed, setSeed] = React.useState(''); const [randomSeed, setRandomSeed] = React.useState(true); const [style, setStyle] = React.useState('default'); const [images, setImages] = React.useState([]); const [aspectRatio, setAspectRatio] = React.useState('1:1'); const handleGenerateImage = async ()=>{ const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}&negative_prompt=${encodeURIComponent(negativePrompt)}&seed=${seed}&style=${style}&aspect_ratio=${aspectRatio}`); const data = await response.json(); setImages(data.data); }; const handleRandomSeed = ()=>{ setRandomSeed(true); setSeed(Math.floor(Math.random() * 10000)); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-2 font-roboto", htmlFor: "prompt", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Prompt:"), /*#__PURE__*/ React.createElement("input", { name: "prompt", type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-2 font-roboto", htmlFor: "negativePrompt", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Negative Prompt:"), /*#__PURE__*/ React.createElement("input", { name: "negativePrompt", type: "text", value: negativePrompt, onChange: (e)=>setNegativePrompt(e.target.value), className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-2 font-roboto", htmlFor: "seed", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Seed:"), /*#__PURE__*/ React.createElement("input", { name: "seed", type: "text", value: seed, onChange: (e)=>{ setSeed(e.target.value); setRandomSeed(false); }, className: "w-full p-2 border border-gray-400 rounded", disabled: randomSeed, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleRandomSeed, className: "mt-2 p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "🎲 Random Seed")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-2 font-roboto", htmlFor: "style", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Style:"), /*#__PURE__*/ React.createElement("select", { name: "style", value: style, onChange: (e)=>setStyle(e.target.value), className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Default"), /*#__PURE__*/ React.createElement("option", { value: "anime", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Anime"), /*#__PURE__*/ React.createElement("option", { value: "manga", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Manga"), /*#__PURE__*/ React.createElement("option", { value: "disney", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Disney"), /*#__PURE__*/ React.createElement("option", { value: "pixar", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Pixar"), /*#__PURE__*/ React.createElement("option", { value: "comic", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Comic"), /*#__PURE__*/ React.createElement("option", { value: "moe", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Moe"), /*#__PURE__*/ React.createElement("option", { value: "lineart", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Lineart"), /*#__PURE__*/ React.createElement("option", { value: "realistic", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Realistic"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-2 font-roboto", htmlFor: "aspectRatio", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Aspect Ratio:"), /*#__PURE__*/ React.createElement("select", { name: "aspectRatio", value: aspectRatio, onChange: (e)=>setAspectRatio(e.target.value), className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1:1", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "1:1"), /*#__PURE__*/ React.createElement("option", { value: "16:9", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "16:9"), /*#__PURE__*/ React.createElement("option", { value: "4:3", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "4:3"))), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImage, className: "p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, "Generate Image"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, images.map((img, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: img, alt: `Generated image ${index + 1}`, className: "w-full h-auto rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this })))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this })); }