function MainComponent({ title, onCreateDesign, designUrls }) { const [imageUrls, setImageUrls] = React.useState({ img1: '', img2: '' }); const [generatedDesignUrl, setGeneratedDesignUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const [progress, setProgress] = React.useState(0); const handleImageChange = (event, imgKey)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setImageUrls((prevUrls)=>({ ...prevUrls, [imgKey]: e.target.result })); }; reader.readAsDataURL(file); } }; const combineImagesAndCreateDesign = async ()=>{ setLoading(true); let progressInterval = setInterval(()=>{ setProgress((prevProgress)=>{ if (prevProgress >= 100) { clearInterval(progressInterval); return 100; } return prevProgress + 10; }); }, 1000); const prompt = `A web design inspired by ${imageUrls.img1} and ${imageUrls.img2}`; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const result = await response.json(); clearInterval(progressInterval); setLoading(false); setProgress(0); if (result.data && result.data.length > 0) { const generatedUrl = result.data[0]; setGeneratedDesignUrl(generatedUrl); onCreateDesign(generatedUrl); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center bg-gray-100 p-4 w-full space-y-6", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-sans text-gray-800", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 md:flex md:space-y-0 md:space-x-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, [ 1, 2 ].map((imgNumber)=>/*#__PURE__*/ React.createElement("div", { key: imgNumber, className: "space-y-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, imageUrls[`img${imgNumber}`] ? /*#__PURE__*/ React.createElement("img", { src: imageUrls[`img${imgNumber}`], alt: `画像${imgNumber}`, className: "w-48 h-32 rounded-lg shadow object-cover", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-48 h-32 bg-gray-200 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, imgNumber, "枚目のプレビュー画像")), /*#__PURE__*/ React.createElement("input", { type: "file", onChange: (e)=>handleImageChange(e, `img${imgNumber}`), name: `img${imgNumber}`, className: "sr-only", id: `image-input-${imgNumber}`, accept: "image/*", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `image-input-${imgNumber}`, className: "text-sm bg-yellow-400 hover:bg-yellow-500 text-white py-2 px-4 rounded cursor-pointer inline-block", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "画像を選択")))), /*#__PURE__*/ React.createElement("button", { onClick: combineImagesAndCreateDesign, className: "bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-6 rounded-md", disabled: loading || !imageUrls.img1 || !imageUrls.img2, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, "この画像を組み合わせてデザインを生成"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { style: { width: `${progress}%` }, className: "h-2 bg-pink-600 rounded", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this })), generatedDesignUrl && !loading && /*#__PURE__*/ React.createElement("img", { src: generatedDesignUrl, alt: "生成されたWEBデザインの画像", className: "w-full max-w-md rounded-lg shadow-lg my-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, designUrls.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `デザイン画像 ${index + 1}`, className: "w-full max-w-xs rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this })))); } function StoryComponent() { const [designUrls, setDesignUrls] = React.useState([]); const handleCreateDesign = (url)=>{ setDesignUrls((prevUrls)=>[ ...prevUrls, url ]); }; return /*#__PURE__*/ React.createElement(MainComponent, { title: "画像アップロードとWEBデザインの生成", onCreateDesign: handleCreateDesign, designUrls: designUrls, __source: { fileName: "", lineNumber: 115, columnNumber: 10 }, __self: this }); }