function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [imageURLs, setImageURLs] = React.useState([]); const [imageSize, setImageSize] = React.useState('medium'); const [imageCount, setImageCount] = React.useState(1); const [imageStyle, setImageStyle] = React.useState(''); const fetchImages = async ()=>{ for(let i = 0; i < imageCount; i++){ const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(`${prompt}, ${imageStyle}`)}&batch_size=1`, { method: 'GET' }); const data = await response.json(); setImageURLs((prevURLs)=>[ ...prevURLs, data.data[0] ]); } }; const handleSizeChange = (e)=>{ setImageSize(e.target.value); }; const handleCountChange = (e)=>{ setImageCount(parseInt(e.target.value, 10)); }; const handleStyleChange = (e)=>{ setImageStyle(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 min-h-screen p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Аниме Изображения Генератор"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4 my-8", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, imageURLs.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: "Сгенерированное аниме изображение", className: `max-w-${imageSize} h-auto rounded-lg shadow-lg`, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Описание изображения:"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border border-gray-200 rounded", rows: "4", placeholder: "Введите описание аниме изображения", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-between mt-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-2 mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Размер изображения:"), /*#__PURE__*/ React.createElement("select", { value: imageSize, onChange: handleSizeChange, className: "w-full p-2 border border-gray-200 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "small", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "Маленький"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Средний"), /*#__PURE__*/ React.createElement("option", { value: "large", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "Большой"))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-2 mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Количество изображений:"), /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border border-gray-200 rounded", value: imageCount, onChange: handleCountChange, min: "1", max: "5", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-2 mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Стилистика изображения:"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border border-gray-200 rounded", value: imageStyle, onChange: handleStyleChange, placeholder: "Введите стилистику изображения", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-indigo-500 p-2 rounded hover:bg-gray-100 transition-colors font-semibold", onClick: ()=>{ setImageURLs([]); fetchImages(); }, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Сгенерировать изображение"))); }