function MainComponent({ initialQuery = "", initialWidth = 256, initialHeight = 256 }) { const [query, setQuery] = React.useState(initialQuery); const [width, setWidth] = React.useState(initialWidth); const [height, setHeight] = React.useState(initialHeight); const [images, setImages] = React.useState([]); const [loading, setLoading] = React.useState(false); const fetchImages = async ()=>{ setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(query)}&width=${width}&height=${height}`); const data = await response.json(); setImages(data.data); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", placeholder: "Search for images...", value: query, onChange: (e)=>setQuery(e.target.value), className: "block w-full mb-2 p-2 border", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "width", placeholder: "Width", value: width, onChange: (e)=>setWidth(e.target.value), className: "block w-full mb-2 p-2 border", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", placeholder: "Height", value: height, onChange: (e)=>setHeight(e.target.value), className: "block w-full mb-2 p-2 border", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: fetchImages, className: "mb-4 p-2 bg-blue-600 text-white rounded", disabled: loading, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, loading ? "Generating..." : "Generate Images"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, images.map((src, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full h-[200px]", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `Generated Image ${index + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { initialQuery: "a painting of foxes playing poker, disney, zootopia", initialWidth: 512, initialHeight: 512, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this })); }