Update app.py

app.py

@@ -2,25 +2,25 @@ import gradio as gr
 import numpy as np
 from PIL import Image
 
-def apply_overlay(final_x, final_y, final_width, final_height, design_img, target_img):
-    # Convert to PIL images
+def overlay_images(design_img, target_img, x, y, width, height):
+    # Convert inputs to PIL images
     design_image = Image.fromarray(design_img).convert("RGBA")
     target_image = Image.fromarray(target_img).convert("RGBA")
 
-    # Resize the design image based on the final dimensions
-    design_image = design_image.resize((final_width, final_height), Image.Resampling.LANCZOS)
-    
+    # Resize the design image
+    design_image = design_image.resize((width, height), Image.Resampling.LANCZOS)
+
     # Create a transparent overlay
     overlay = Image.new('RGBA', target_image.size, (255, 255, 255, 0))
-    overlay.paste(design_image, (final_x, final_y), design_image)
-    
-    # Merge overlay with target image
-    combined_image = Image.alpha_composite(target_image, overlay)
-    
-    return np.array(combined_image)
+    overlay.paste(design_image, (x, y), design_image)
+
+    # Combine overlay with target image
+    combined = Image.alpha_composite(target_image, overlay)
+
+    return np.array(combined)
 
 with gr.Blocks() as editor:
-    gr.Markdown("## Drag, Drop, and Resize Your Design")
+    gr.Markdown("## Drag, Drop, and Resize the Design Image on the Target Image")
 
     with gr.Row():
         design_img = gr.Image(label="Design Image", type="numpy")
@@ -28,83 +28,62 @@ with gr.Blocks() as editor:
     
     overlay_result = gr.Image(label="Overlay Result")
 
-    # Hidden elements to store the final positioning and size after user interaction
-    final_x = gr.Number(value=0, visible=False)
-    final_y = gr.Number(value=0, visible=False)
-    final_width = gr.Number(value=100, visible=False)
-    final_height = gr.Number(value=100, visible=False)
-    
-    apply_overlay_btn = gr.Button("Apply Overlay")
+    # Hidden elements for storing coordinates and size
+    x_coord = gr.Number(value=0, visible=False)
+    y_coord = gr.Number(value=0, visible=False)
+    width = gr.Number(value=100, visible=False)
+    height = gr.Number(value=100, visible=False)
 
-    # JavaScript code for dragging, resizing, and cropping
+    # Button to apply the overlay
+    apply_overlay = gr.Button("Apply Overlay")
+
+    # JavaScript for dragging, resizing, and positioning
     custom_js = """
     <script>
-    let designImg = document.querySelector('img[data-target="design_img"]');
-    let targetImg = document.querySelector('img[data-target="target_img"]');
-    let resultImg = document.querySelector('img[data-target="overlay_result"]');
-    
-    let finalX = document.querySelector('input[name="final_x"]');
-    let finalY = document.querySelector('input[name="final_y"]');
-    let finalWidth = document.querySelector('input[name="final_width"]');
-    let finalHeight = document.querySelector('input[name="final_height"]');
-    
-    let active = false;
-    let currentX, currentY, initialX, initialY;
-    let offsetX = 0, offsetY = 0;
-    
-    designImg.style.position = "absolute";
-    designImg.style.cursor = "move";
-    designImg.style.zIndex = "10";
+    let designElement = null;
+    let targetElement = null;
     
-    function dragStart(e) {
-        active = true;
-        initialX = e.clientX - offsetX;
-        initialY = e.clientY - offsetY;
-    }
-    
-    function dragEnd() {
-        active = false;
-        offsetX = currentX;
-        offsetY = currentY;
+    function initDragAndResize() {
+        designElement = document.querySelector('img[data-target="design_img"]');
+        targetElement = document.querySelector('img[data-target="target_img"]');
         
-        finalX.value = offsetX;
-        finalY.value = offsetY;
-        finalWidth.value = designImg.width;
-        finalHeight.value = designImg.height;
-    }
-    
-    function drag(e) {
-        if (active) {
-            e.preventDefault();
-            
-            currentX = e.clientX - initialX;
-            currentY = e.clientY - initialY;
-            
-            designImg.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
-        }
-    }
-    
-    designImg.addEventListener("mousedown", dragStart);
-    window.addEventListener("mouseup", dragEnd);
-    window.addEventListener("mousemove", drag);
-    
-    designImg.addEventListener("wheel", (e) => {
-        e.preventDefault();
-        
-        let newWidth = designImg.width + (e.deltaY < 0 ? 10 : -10);
-        let newHeight = designImg.height + (e.deltaY < 0 ? 10 : -10);
+        let overlay = document.createElement('div');
+        overlay.style.position = 'absolute';
+        overlay.style.border = '2px dashed #000';
+        overlay.style.cursor = 'move';
+        overlay.style.resize = 'both';
+        overlay.style.overflow = 'auto';
         
-        if (newWidth > 50 && newHeight > 50) {
-            designImg.style.width = `${newWidth}px`;
-            designImg.style.height = `${newHeight}px`;
+        targetElement.parentNode.appendChild(overlay);
+
+        // Drag functionality
+        overlay.onmousedown = function(event) {
+            document.onmousemove = function(event) {
+                overlay.style.left = event.pageX - overlay.offsetWidth / 2 + 'px';
+                overlay.style.top = event.pageY - overlay.offsetHeight / 2 + 'px';
+            }
         }
-    });
+
+        document.onmouseup = function() {
+            document.onmousemove = null;
+        }
+
+        // Save the position and size when the user applies the overlay
+        applyOverlay.onclick = function() {
+            x_coord.value = parseInt(overlay.style.left) - targetElement.getBoundingClientRect().left;
+            y_coord.value = parseInt(overlay.style.top) - targetElement.getBoundingClientRect().top;
+            width.value = overlay.offsetWidth;
+            height.value = overlay.offsetHeight;
+        }
+    }
+
+    window.onload = initDragAndResize;
     </script>
     """
 
     html_code = gr.HTML(custom_js)
 
-    # Apply overlay on clicking the button
-    apply_overlay_btn.click(apply_overlay, [final_x, final_y, final_width, final_height, design_img, target_img], overlay_result)
+    # Load the overlayed image on clicking the button
+    apply_overlay.click(overlay_images, [design_img, target_img, x_coord, y_coord, width, height], overlay_result)
 
 editor.launch()