function ImageMagnifier({ onMagnify }) { return /*#__PURE__*/ React.createElement("button", { onClick: onMagnify, className: "px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white text-sm rounded-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "画像を2倍に拡大"); } function ImageMagnifierStory() { const handleMagnifyImage = ()=>{ console.log("Image magnification triggered."); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageMagnifier, { onMagnify: handleMagnifyImage, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [uploadedImage, setUploadedImage] = React.useState(null); const [isProcessing, setIsProcessing] = React.useState(false); const [resultImage, setResultImage] = React.useState(null); const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setUploadedImage(reader.result); }; reader.readAsDataURL(file); } }; const handleMagnifyImage = async ()=>{ if (!uploadedImage) return; setIsProcessing(true); // Imaginary function to process the image through Stable Diffusion with the urtraupscale addon // This is a placeholder for actual API call await new Promise((resolve)=>setTimeout(resolve, 2000)); // Simulate API delay // Placeholder for the result, since we can't really process the image here setResultImage(uploadedImage); // In a real scenario, this should be set to the processed image URL at 2x quality setIsProcessing(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-2xl font-crimson-text text-[#333]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "画像を高品質に拡大"), uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Uploaded for UltraUpscale magnification", className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "mb-4 px-4 py-2 bg-[#007bff] text-white cursor-pointer rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Upload Image", /*#__PURE__*/ React.createElement("input", { type: "file", name: "image-upload", onChange: handleImageUpload, className: "hidden", accept: "image/*", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement(ImageMagnifier, { onMagnify: handleMagnifyImage, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), resultImage && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-xl font-crimson-text text-[#333]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Enhanced Image:"), /*#__PURE__*/ React.createElement("img", { src: resultImage, alt: "Enhanced Result via UltraUpscale", className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }))); }