function MainComponent() { const [imageUrl, setImageUrl] = React.useState(''); const [imageUrls, setImageUrls] = React.useState([]); const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const prompt = formData.get('prompt'); const numberOfImages = parseInt(formData.get('number-of-images'), 10); const width = parseInt(formData.get('width'), 10); const height = parseInt(formData.get('height'), 10); const style = formData.get('style'); const modifiedPrompt = `${prompt}, ${style}`; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(modifiedPrompt)}&width=${width}&height=${height}`, { method: 'GET' }); const data = await response.json(); if (numberOfImages > 1 && data.data.length > 0) { setImageUrls(data.data.slice(0, numberOfImages)); } else { setImageUrl(data.data[0]); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f9fc] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white border-2 border-[#007bff] shadow-md rounded-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#007bff] text-center mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Stable Diffusion XL Web Interface"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Prompt:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", id: "prompt", className: "block w-full p-3 mb-4 border border-gray-200 rounded", placeholder: "Describe the image", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "style", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Style:"), /*#__PURE__*/ React.createElement("select", { name: "style", id: "style", className: "block w-full p-3 mb-4 border border-gray-200 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "photo-realistic", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "フォトリアル"), /*#__PURE__*/ React.createElement("option", { value: "japanese anime", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "ジャパニーズアニメ"), /*#__PURE__*/ React.createElement("option", { value: "painting", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "絵画風")), /*#__PURE__*/ React.createElement("label", { htmlFor: "width", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Width:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "width", id: "width", className: "block w-full p-3 mb-4 border border-gray-200 rounded", defaultValue: "1024", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Height:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", id: "height", className: "block w-full p-3 mb-4 border border-gray-200 rounded", defaultValue: "1024", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "number-of-images", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Number of Images:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "number-of-images", id: "number-of-images", className: "block w-full p-3 mb-6 border border-gray-200 rounded", defaultValue: "1", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-[#007bff] text-white font-roboto rounded hover:bg-[#0056b3] transition duration-200", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Generate")), imageUrls.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, imageUrls.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `Generated from Stable Diffusion - ${index + 1}`, className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }))), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 22 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated from Stable Diffusion", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })))); }