function MainComponent() { const [image, setImage] = React.useState(null); const handleSubmit = async (event)=>{ event.preventDefault(); const form = event.target; const prompt = form.prompt.value; const width = form.width.value; const height = form.height.value; const params = new URLSearchParams({ prompt, ...width && { width }, ...height && { height } }); const response = await fetch(`/integrations/stable-diffusion-v-3/?${params.toString()}`, { method: 'GET' }); const result = await response.json(); setImage(result.data[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-200", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Image Generator"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-[400px] max-w-full", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Description")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "width", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Width"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "width", name: "width", className: "mt-1 block w-full border border-gray-300 rounded-md p-2 text-sm", placeholder: "Enter width", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Height"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", className: "mt-1 block w-full border border-gray-300 rounded-md p-2 text-sm", placeholder: "Enter height", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-600 text-white font-bold rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Generate Image")), image && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated visual representation", className: "rounded shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }))); }