function MainComponent({ title, onImageUpload, onCreateDesign, designUrl }) { const [imagePreviews, setImagePreviews] = React.useState({ img1: '', img2: '' }); const handleImageChange = (event, imgKey)=>{ const fileReader = new FileReader(); const file = event.target.files[0]; if (file) { fileReader.readAsDataURL(file); fileReader.onloadend = ()=>{ setImagePreviews((prev)=>({ ...prev, [imgKey]: fileReader.result })); onImageUpload(fileReader.result, imgKey); }; } }; const handleCreateDesignClick = ()=>{ if (imagePreviews.img1 && imagePreviews.img2) { onCreateDesign(imagePreviews.img1, imagePreviews.img2); } else { alert('2つの参考画像をアップロードしてください。'); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#333] mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, Object.keys(imagePreviews).map((imgKey, index)=>/*#__PURE__*/ React.createElement("div", { key: imgKey, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { backgroundImage: `url(${imagePreviews[imgKey] || 'placeholder-image.png'})`, backgroundSize: 'contain', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat' }, className: "bg-gray-100 w-[300px] md:w-[400px] h-[220px] border border-[#ccc] rounded-lg shadow-lg mb-4", "aria-label": `${index + 1}参考画像のプレビュー表示`, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { id: `imageUpload${index + 1}`, type: "file", onChange: (event)=>handleImageChange(event, imgKey), className: "hidden", name: `imageUpload${index + 1}`, accept: "image/*", "aria-label": `${index + 1}参考画像の画像を追加`, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `imageUpload${index + 1}`, className: "cursor-pointer py-2 px-4 bg-yellow-500 text-white font-roboto rounded-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "画像を追加")))), /*#__PURE__*/ React.createElement("button", { onClick: handleCreateDesignClick, className: "mt-10 py-3 px-6 bg-pink-500 text-white font-roboto rounded-full", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "この2つの画像からウェブデザイン作成"), designUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: designUrl, alt: "生成されたWEBデザインのイメージ", className: "md:w-[400px] md:h-[300px] w-full h-auto border border-[#ccc] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }))); } function StoryComponent() { const [designUrl, setDesignUrl] = React.useState(''); const designProps = { title: "参考デザインの画像アップロードとWEBデザイン生成", onImageUpload: (imageData, imgKey)=>{ console.log(`Uploaded: ${imgKey}`, imageData); }, onCreateDesign: (img1, img2)=>{ console.log('Creating design with Stable Diffusion...'); setTimeout(()=>{ // Simulate an API call to a stable diffusion service and update state with a new image URL setDesignUrl('design-generated.png'); }, 1500); }, designUrl: designUrl }; return /*#__PURE__*/ React.createElement(MainComponent, { ...designProps, __source: { fileName: "", lineNumber: 95, columnNumber: 10 }, __self: this }); }