Update app.py

app.py

@@ -2,31 +2,25 @@ import gradio as gr
 import numpy as np
 from PIL import Image
 
-def overlay_images(x, y, scale, design_img, target_img):
-    # Convert inputs to PIL images
+def apply_overlay(final_x, final_y, final_width, final_height, design_img, target_img):
+    # Convert 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 scale
-    design_image = design_image.resize(
-        (int(design_image.width * scale), int(design_image.height * scale)), Image.Resampling.LANCZOS
-    )
-
-    # Ensure the design image has an alpha channel for transparency
-    if design_image.mode != 'RGBA':
-        design_image = design_image.convert('RGBA')
+    # Resize the design image based on the final dimensions
+    design_image = design_image.resize((final_width, final_height), Image.Resampling.LANCZOS)
     
     # Create a transparent overlay
     overlay = Image.new('RGBA', target_image.size, (255, 255, 255, 0))
-    overlay.paste(design_image, (x, y), design_image)
-
-    # Combine overlay with target image
-    combined = Image.alpha_composite(target_image, overlay)
+    overlay.paste(design_image, (final_x, final_y), design_image)
     
-    return np.array(combined)
+    # Merge overlay with target image
+    combined_image = Image.alpha_composite(target_image, overlay)
+    
+    return np.array(combined_image)
 
 with gr.Blocks() as editor:
-    gr.Markdown("## Drag-and-Drop Image Editor with Resizing")
+    gr.Markdown("## Drag, Drop, and Resize Your Design")
 
     with gr.Row():
         design_img = gr.Image(label="Design Image", type="numpy")
@@ -34,43 +28,83 @@ with gr.Blocks() as editor:
     
     overlay_result = gr.Image(label="Overlay Result")
 
-    # Hidden elements to hold drag-drop coordinates and scale
-    x_coord = gr.Number(value=0, visible=False)
-    y_coord = gr.Number(value=0, visible=False)
-    scale_factor = gr.Number(value=1.0, visible=False)
+    # 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 = gr.Button("Apply Overlay")
+    apply_overlay_btn = gr.Button("Apply Overlay")
 
-    # JavaScript for dragging and resizing
+    # JavaScript code for dragging, resizing, and cropping
     custom_js = """
     <script>
-    let img = document.querySelector('img[data-target="design_img"]');
-    let result = document.querySelector('img[data-target="overlay_result"]');
-    let xInput = document.querySelector('input[name="x_coord"]');
-    let yInput = document.querySelector('input[name="y_coord"]');
-    let scaleInput = document.querySelector('input[name="scale_factor"]');
+    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";
+    
+    function dragStart(e) {
+        active = true;
+        initialX = e.clientX - offsetX;
+        initialY = e.clientY - offsetY;
+    }
+    
+    function dragEnd() {
+        active = false;
+        offsetX = currentX;
+        offsetY = currentY;
+        
+        finalX.value = offsetX;
+        finalY.value = offsetY;
+        finalWidth.value = designImg.width;
+        finalHeight.value = designImg.height;
+    }
     
-    img.draggable = true;
-    img.ondragstart = function(event) {
-        event.dataTransfer.setDragImage(new Image(), 0, 0);
-    };
+    function drag(e) {
+        if (active) {
+            e.preventDefault();
+            
+            currentX = e.clientX - initialX;
+            currentY = e.clientY - initialY;
+            
+            designImg.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
+        }
+    }
     
-    img.ondragend = function(event) {
-        let rect = result.getBoundingClientRect();
-        xInput.value = event.clientX - rect.left;
-        yInput.value = event.clientY - rect.top;
-    };
+    designImg.addEventListener("mousedown", dragStart);
+    window.addEventListener("mouseup", dragEnd);
+    window.addEventListener("mousemove", drag);
     
-    let resizeObserver = new ResizeObserver(entries => {
-        scaleInput.value = img.width / img.naturalWidth;
+    designImg.addEventListener("wheel", (e) => {
+        e.preventDefault();
+        
+        let newWidth = designImg.width + (e.deltaY < 0 ? 10 : -10);
+        let newHeight = designImg.height + (e.deltaY < 0 ? 10 : -10);
+        
+        if (newWidth > 50 && newHeight > 50) {
+            designImg.style.width = `${newWidth}px`;
+            designImg.style.height = `${newHeight}px`;
+        }
     });
-    resizeObserver.observe(img);
     </script>
     """
 
     html_code = gr.HTML(custom_js)
 
-    # Load the overlayed image on clicking the button
-    apply_overlay.click(overlay_images, [x_coord, y_coord, scale_factor, design_img, target_img], overlay_result)
+    # 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)
 
 editor.launch()