test

app.py

@@ -35,7 +35,7 @@ def remove_bg(image):
     mask = transforms.ToPILImage()(preds).resize(im.size)
     return mask
 
-class DreamblendGUI:
+class DreamFuseGUI:
     def __init__(self):
         self.examples = [
             ["./examples/9_02.png", 
@@ -174,124 +174,121 @@ class DreamblendGUI:
             };
 
             globalThis.initializeDrag = () => {
-                console.log("初始化拖拽与缩放功能...");
-                const observer = new MutationObserver(() => {
-                    const img = document.getElementById('draggable-img');
-                    const container = document.getElementById('canvas-container');
-                    const slider = document.getElementById('scale-slider');
-                    if (img && container && slider) {
-                        observer.disconnect();
-                        console.log("绑定拖拽与缩放事件...");
-                        img.ondragstart = (e) => { e.preventDefault(); return false; };
-                        let offsetX = 0, offsetY = 0;
-                        let isDragging = false;
-                        let scaleAnchor = null;
-
-                        img.addEventListener('mousedown', (e) => {
-                            isDragging = true;
-                            img.style.cursor = 'grabbing';
-                            const imgRect = img.getBoundingClientRect();
-                            offsetX = e.clientX - imgRect.left;
-                            offsetY = e.clientY - imgRect.top;
-                            img.style.transform = "none";
-                            img.style.left = img.offsetLeft + "px";
-                            img.style.top = img.offsetTop + "px";
-                            console.log("mousedown: left=", img.style.left, "top=", img.style.top);
-                        });
-                        document.addEventListener('mousemove', (e) => {
-                        if (!isDragging) return;
-                        e.preventDefault();
-                        
+                console.log("✅ 初始化拖拽与缩放功能...");
+
+                const oldImg = document.getElementById('draggable-img');
+                const container = document.getElementById('canvas-container');
+                const slider = document.getElementById('scale-slider');
+
+                if (!oldImg || !container || !slider) {
+                    console.warn("❌ 缺少必要的元素 (#draggable-img, #canvas-container, #scale-slider)");
+                    return;
+                }
+
+                // 用 clone 替换旧 img，清除之前的监听器
+                const img = oldImg.cloneNode(true);
+                oldImg.replaceWith(img);
+
+                img.ondragstart = (e) => { e.preventDefault(); return false; };
+                let offsetX = 0, offsetY = 0;
+                let isDragging = false;
+                let scaleAnchor = null;
+
+                img.addEventListener('mousedown', (e) => {
+                    isDragging = true;
+                    img.style.cursor = 'grabbing';
+                    const imgRect = img.getBoundingClientRect();
+                    offsetX = e.clientX - imgRect.left;
+                    offsetY = e.clientY - imgRect.top;
+                    img.style.transform = "none";
+                    img.style.left = img.offsetLeft + "px";
+                    img.style.top = img.offsetTop + "px";
+                    console.log("mousedown: left=", img.style.left, "top=", img.style.top);
+                });
+
+                document.addEventListener('mousemove', (e) => {
+                    if (!isDragging) return;
+                    e.preventDefault();
+
+                    const containerRect = container.getBoundingClientRect();
+                    let left = e.clientX - containerRect.left - offsetX;
+                    let top  = e.clientY - containerRect.top  - offsetY;
+
+                    const minLeft = -img.clientWidth * (7/8);
+                    const maxLeft = containerRect.width - img.clientWidth * (1/8);
+                    const minTop = -img.clientHeight * (7/8);
+                    const maxTop = containerRect.height - img.clientHeight * (1/8);
+
+                    if (left < minLeft) left = minLeft;
+                    if (left > maxLeft) left = maxLeft;
+                    if (top < minTop) top = minTop;
+                    if (top > maxTop) top = maxTop;
+
+                    img.style.left = left + "px";
+                    img.style.top = top + "px";
+                });
+
+                window.addEventListener('mouseup', (e) => {
+                    if (isDragging) {
+                        isDragging = false;
+                        img.style.cursor = 'grab';
                         const containerRect = container.getBoundingClientRect();
-                        // 计算当前拖拽后的坐标（基于容器）
-                        let left = e.clientX - containerRect.left - offsetX;
-                        let top  = e.clientY - containerRect.top  - offsetY;
-                        
-                        // 允许的拖拽范围：
-                        // 水平方向允许最少超出图像一半：最小值为 -img.clientWidth * (7/8)
-                        // 水平方向允许最多超出一半：最大值为 containerRect.width - img.clientWidth * (1/8)
-                        const minLeft = -img.clientWidth * (7/8);
-                        const maxLeft = containerRect.width - img.clientWidth * (1/8);
-                        
-                        // 垂直方向允许范围：
-                        // 最小值为 -img.clientHeight * (7/8)
-                        // 最大值为 containerRect.height - img.clientHeight * (1/8)
-                        const minTop = -img.clientHeight * (7/8);
-                        const maxTop = containerRect.height - img.clientHeight * (1/8);
-                        
-                        // 限制范围
-                        if (left < minLeft) left = minLeft;
-                        if (left > maxLeft) left = maxLeft;
-                        
-                        if (top < minTop) top = minTop;
-                        if (top > maxTop) top = maxTop;
-                        
-                        img.style.left = left + "px";
-                        img.style.top = top + "px";
-                        });
-
-                        window.addEventListener('mouseup', (e) => {
-                            if (isDragging) {
-                                isDragging = false;
-                                img.style.cursor = 'grab';
-                                const containerRect = container.getBoundingClientRect();
-                                const bgWidth = parseFloat(container.dataset.bgWidth);
-                                const bgHeight = parseFloat(container.dataset.bgHeight);
-                                const offsetLeft = (containerRect.width - bgWidth) / 2;
-                                const offsetTop = (containerRect.height - bgHeight) / 2;
-                                const absoluteLeft = parseFloat(img.style.left);
-                                const absoluteTop = parseFloat(img.style.top);
-                                const relativeX = absoluteLeft - offsetLeft;
-                                const relativeY = absoluteTop - offsetTop;
-                                document.getElementById("coordinate").textContent =
-                                    `前景图坐标: (x=${relativeX.toFixed(2)}, y=${relativeY.toFixed(2)})`;
-                                updateTransformation();
-                            }
-                            scaleAnchor = null;
-                        });
-
-                        slider.addEventListener('mousedown', (e) => {
-                            const containerRect = container.getBoundingClientRect();
-                            const imgRect = img.getBoundingClientRect();
-                            scaleAnchor = {
-                                x: imgRect.left + imgRect.width/2 - containerRect.left,
-                                y: imgRect.top + imgRect.height/2 - containerRect.top
-                            };
-                            console.log("Slider mousedown, captured scaleAnchor: ", scaleAnchor);
-                        });
-
-                        slider.addEventListener('input', (e) => {
-                            const scale = parseFloat(e.target.value);
-                            const originalWidth = parseFloat(img.getAttribute('data-original-width'));
-                            const originalHeight = parseFloat(img.getAttribute('data-original-height'));
-                            const newWidth = originalWidth * scale;
-                            const newHeight = originalHeight * scale;
-                            const containerRect = container.getBoundingClientRect();
-                            let centerX, centerY;
-                            if (scaleAnchor) {
-                                centerX = scaleAnchor.x;
-                                centerY = scaleAnchor.y;
-                            } else {
-                                const imgRect = img.getBoundingClientRect();
-                                centerX = imgRect.left + imgRect.width/2 - containerRect.left;
-                                centerY = imgRect.top + imgRect.height/2 - containerRect.top;
-                            }
-                            const newLeft = centerX - newWidth/2;
-                            const newTop = centerY - newHeight/2;
-                            img.style.width = newWidth + "px";
-                            img.style.height = newHeight + "px";
-                            img.style.left = newLeft + "px";
-                            img.style.top = newTop + "px";
-                            console.log("slider: scale=", scale, "newWidth=", newWidth, "newHeight=", newHeight);
-                            updateTransformation();
-                        });
-                        
-                        slider.addEventListener('mouseup', (e) => {
-                            scaleAnchor = null;
-                        });
+                        const bgWidth = parseFloat(container.dataset.bgWidth);
+                        const bgHeight = parseFloat(container.dataset.bgHeight);
+                        const offsetLeft = (containerRect.width - bgWidth) / 2;
+                        const offsetTop = (containerRect.height - bgHeight) / 2;
+                        const absoluteLeft = parseFloat(img.style.left);
+                        const absoluteTop = parseFloat(img.style.top);
+                        const relativeX = absoluteLeft - offsetLeft;
+                        const relativeY = absoluteTop - offsetTop;
+                        document.getElementById("coordinate").textContent =
+                            `前景图坐标: (x=${relativeX.toFixed(2)}, y=${relativeY.toFixed(2)})`;
+                        updateTransformation();
                     }
+                    scaleAnchor = null;
+                });
+
+                slider.addEventListener('mousedown', (e) => {
+                    const containerRect = container.getBoundingClientRect();
+                    const imgRect = img.getBoundingClientRect();
+                    scaleAnchor = {
+                        x: imgRect.left + imgRect.width/2 - containerRect.left,
+                        y: imgRect.top + imgRect.height/2 - containerRect.top
+                    };
+                    console.log("Slider mousedown, captured scaleAnchor: ", scaleAnchor);
                 });
-                observer.observe(document.body, { childList: true, subtree: true });
+
+                slider.addEventListener('input', (e) => {
+                    const scale = parseFloat(e.target.value);
+                    const originalWidth = parseFloat(img.getAttribute('data-original-width'));
+                    const originalHeight = parseFloat(img.getAttribute('data-original-height'));
+                    const newWidth = originalWidth * scale;
+                    const newHeight = originalHeight * scale;
+                    const containerRect = container.getBoundingClientRect();
+                    let centerX, centerY;
+                    if (scaleAnchor) {
+                        centerX = scaleAnchor.x;
+                        centerY = scaleAnchor.y;
+                    } else {
+                        const imgRect = img.getBoundingClientRect();
+                        centerX = imgRect.left + imgRect.width/2 - containerRect.left;
+                        centerY = imgRect.top + imgRect.height/2 - containerRect.top;
+                    }
+                    const newLeft = centerX - newWidth/2;
+                    const newTop = centerY - newHeight/2;
+                    img.style.width = newWidth + "px";
+                    img.style.height = newHeight + "px";
+                    img.style.left = newLeft + "px";
+                    img.style.top = newTop + "px";
+                    console.log("slider: scale=", scale, "newWidth=", newWidth, "newHeight=", newHeight);
+                    updateTransformation();
+                });
+
+                slider.addEventListener('mouseup', (e) => {
+                    scaleAnchor = null;
+                });
+
+                console.log("✅ 拖拽和缩放事件已绑定");
             };
         }
         """
@@ -522,7 +519,13 @@ class DreamblendGUI:
                 fn=self.on_upload,
                 inputs=[background_img_in, draggable_img_in],
                 outputs=[html_out, modified_fg_state],
+            ).then(
+                fn=None,
+                inputs=None,
+                outputs=None,
+                js="initializeDrag"
             )
+
             model_generate_btn.click(
                 fn=pipeline.gradio_generate,
                 # fn=self.pil_to_base64,
@@ -538,9 +541,7 @@ class DreamblendGUI:
 
 if __name__ == "__main__":
 
-    gui = DreamblendGUI()
+    gui = DreamFuseGUI()
     demo = gui.create_gui()
     demo.queue()
     demo.launch()
-    # demo.launch(server_port=7789, ssr_mode=False)
-    # demo.launch(server_name="[::]", share=True)