function MainComponent() { const [generatedImages, setGeneratedImages] = React.useState([]); const [width, setWidth] = React.useState(512); const [height, setHeight] = React.useState(512); const handleGenerateImage = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const promptText = formData.get("textInput"); const useLora = formData.get("lora") === 'on'; const useControlNet = formData.get("controlNet") === 'on'; const imageSize = `${width}x${height}`; const models = []; if (useLora) models.push("lora"); if (useControlNet) models.push("controlNet"); const modelParam = models.length > 0 ? `&models=${models.join(',')}` : ''; const responses = await Promise.all([ fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(promptText)}&img=${imageSize}${modelParam}`, { method: 'GET' }), fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(promptText)}&img=${imageSize}${modelParam}`, { method: 'GET' }), fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(promptText)}&img=${imageSize}${modelParam}`, { method: 'GET' }), fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(promptText)}&img=${imageSize}${modelParam}`, { method: 'GET' }) ]); const data = await Promise.all(responses.map((response)=>response.json())); setGeneratedImages(data.map((item)=>item.data[0])); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5F5F5] min-h-screen pt-10 pb-20 px-4 sm:px-6 lg:px-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-serif text-4xl text-center text-[#343A40] mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Aiのべりすとジェネレーター"), /*#__PURE__*/ React.createElement("p", { className: "font-serif text-lg text-[#6C757D] mb-10 text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "あなたの入力をもとに、AIベースで画像を生成します。"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-xl bg-white rounded-lg shadow-md p-8 mb-6", onSubmit: handleGenerateImage, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "textInput", className: "block mb-2 text-sm font-medium text-[#343A40] font-serif", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "入力テキスト"), /*#__PURE__*/ React.createElement("textarea", { name: "textInput", id: "textInput", rows: "4", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 font-serif", placeholder: "ここに画像を生成するための説明を入力してください。", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "lora", name: "lora", type: "checkbox", className: "w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "lora", className: "ml-2 text-sm font-medium text-gray-900 font-serif", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "LoRA モデルを使用")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "controlNet", name: "controlNet", type: "checkbox", className: "w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "controlNet", className: "ml-2 text-sm font-medium text-gray-900 font-serif", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "ControlNet を使用")), /*#__PURE__*/ React.createElement("div", { className: "flex mb-6 justify-between", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "width", className: "block mb-2 text-sm font-medium text-[#343A40] font-serif", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "幅"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "width", name: "width", min: "100", max: "1024", value: width, onChange: (e)=>setWidth(e.target.value), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block mb-2 text-sm font-medium text-[#343A40] font-serif", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "高さ"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "height", name: "height", min: "100", max: "1024", value: height, onChange: (e)=>setHeight(e.target.value), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full font-serif text-white bg-[#007BFF] hover:bg-[#0056B3] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "生成する")), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-serif text-2xl text-[#343A40] mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "生成された画像"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 font-serif text-sm text-[#495057] grid grid-cols-1 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, generatedImages.length > 0 ? generatedImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `AIが生成した画像 ${index + 1}`, className: `max-w-full h-auto rounded`, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })) : "ここにAIが生成した画像が表示されます。"))); }