function MainComponent({ imageUrl, seed, prompt, model }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[640px] lg:w-[800px] xl:w-[1024px] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated Art", className: "w-full h-auto rounded shadow-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] text-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Prompt: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 67 }, __self: this }, prompt)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] text-sm", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Seed: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 9, columnNumber: 65 }, __self: this }, seed)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] text-sm", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Model: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 10, columnNumber: 66 }, __self: this }, model)))); } function StoryComponent() { const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const params = new URLSearchParams(); params.append("prompt", `${formData.get("prompt")} -${formData.get("negativePrompt")}`); params.append("width", formData.get("width")); params.append("height", formData.get("height")); const response = await fetch(`/integrations/stable-diffusion/?${params}`, { method: 'GET' }); const data = await response.json(); setImageProps({ ...imageProps, imageUrl: data.data[0], prompt: formData.get("prompt"), seed: "To be implemented", model: formData.get("model") }); }; const modelOptions = [ "Model 1", "Model 2", "Model 3", "Model 4", "Real beautiful Asian women" ]; const [imageProps, setImageProps] = React.useState({ imageUrl: "https://fal-cdn.batuhan-941.workers.dev/files/elephant/y_nTa5HSjqbEuoL5MLnfT.jpeg", seed: "123456", prompt: "A painting of foxes playing poker, Disney, Zootopia", model: "Real beautiful Asian women" }); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "Prompt", className: "border p-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "negativePrompt", placeholder: "Negative Prompt", className: "border p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "steps", placeholder: "Number of Steps", className: "border p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "width", placeholder: "Width", className: "border p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", placeholder: "Height", className: "border p-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "model", className: "border p-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, modelOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { value: option, key: option, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, option))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#121212] text-white p-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Generate"))), /*#__PURE__*/ React.createElement(MainComponent, { ...imageProps, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); }