function ImageGeneratorWithStableDiffusion({ images }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-wrap items-center justify-center gap-4 p-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, images && images.length > 0 ? images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Generated realistic image including a beautiful woman from STABLE_DIFFUSION based on the input prompt ${index + 1}`, className: "max-w-full h-auto w-[300px]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })) : 'The image of the generated beautiful woman will be displayed here'); } function ImageGeneratorWithStableDiffusionStory() { const sampleImages = [ "https://fal-cdn.batuhan-941.workers.dev/files/elephant/y_nTa5HSjqbEuoL5MLnfT.jpeg" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageGeneratorWithStableDiffusion, { images: sampleImages, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [images, setImages] = React.useState([]); const [positiveInputValue, setPositiveInputValue] = React.useState(''); const [negativeInputValue, setNegativeInputValue] = React.useState(''); const positiveSystemPrompt = "超美人"; const negativeSystemPrompt = ""; const handlePositiveInputChange = (e)=>{ setPositiveInputValue(e.target.value); }; const handleNegativeInputChange = (e)=>{ setNegativeInputValue(e.target.value); }; const handleGenerateImage = ()=>{ setLoading(true); setImages([]); const combinedPrompt = `${positiveInputValue}, ${positiveSystemPrompt} -${negativeInputValue}, -${negativeSystemPrompt}`; const fetchImages = async ()=>{ const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(combinedPrompt)}`, { method: 'GET' }); const data = await response.json(); setImages(data.data); }; fetchImages().finally(()=>{ setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl flex flex-col p-8", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "ポジティブプロンプト:"), /*#__PURE__*/ React.createElement("input", { name: "positiveDescription", type: "text", value: positiveInputValue, onChange: handlePositiveInputChange, className: "p-2 mb-4 border-[#121212] border-2", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "ネガティブプロンプト:"), /*#__PURE__*/ React.createElement("input", { name: "negativeDescription", type: "text", value: negativeInputValue, onChange: handleNegativeInputChange, className: "p-2 mb-6 border-[#121212] border-2", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), loading ? /*#__PURE__*/ React.createElement("button", { className: "bg-[#121212] text-white font-roboto p-2", disabled: true, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "生成中...") : /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImage, className: "bg-[#121212] text-white font-roboto p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "画像生成")), /*#__PURE__*/ React.createElement(ImageGeneratorWithStableDiffusion, { images: images, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); }