Update app.py

app.py

@@ -1,55 +1,72 @@
 import gradio as gr
-import cv2
 import numpy as np
-from PIL import Image, ImageOps
+from PIL import Image
 
-# Initialize global variables
-design_image = None
-target_image = None
+def overlay_images(x, y, scale, design_img, target_img):
+    # Convert inputs to PIL images
+    design_image = Image.fromarray(design_img)
+    target_image = Image.fromarray(target_img)
 
-def load_images(design_path, target_path):
-    global design_image, target_image
-    design_image = Image.open(design_path).convert("RGBA")
-    target_image = Image.open(target_path).convert("RGBA")
-    return design_image, target_image
+    # Resize the design image based on scale
+    design_image = design_image.resize(
+        (int(design_image.width * scale), int(design_image.height * scale)), Image.ANTIALIAS
+    )
 
-def overlay_images(drag_info):
-    if not drag_info or not design_image or not target_image:
-        return target_image
+    # Create a transparent overlay
+    overlay = Image.new('RGBA', target_image.size, (255, 255, 255, 0))
+    overlay.paste(design_image, (x, y), design_image)
     
-    # Extract drag position and scale
-    x = drag_info['x']
-    y = drag_info['y']
-    scale = drag_info['scale']
+    # Combine overlay with target image
+    combined = Image.alpha_composite(target_image.convert('RGBA'), overlay)
     
-    # Resize the design image
-    resized_design = design_image.resize(
-        (int(design_image.width * scale), int(design_image.height * scale)),
-        Image.ANTIALIAS
-    )
+    return np.array(combined)
+
+with gr.Blocks() as editor:
+    gr.Markdown("## Drag-and-Drop Image Editor with Resizing")
+
+    with gr.Row():
+        design_img = gr.Image(label="Design Image", type="numpy", tool=None)
+        target_img = gr.Image(label="Target Image", type="numpy", tool=None)
     
-    # Overlay design onto target
-    overlay = Image.new('RGBA', target_image.size, (255, 255, 255, 0))
-    overlay.paste(resized_design, (x, y), resized_design)
-    combined_image = Image.alpha_composite(target_image, overlay)
+    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)
     
-    return combined_image
+    apply_overlay = gr.Button("Apply Overlay")
 
-# Gradio Interface
-with gr.Blocks() as editor:
-    gr.Markdown("## Drag-and-Drop Image Editor")
+    # JavaScript for dragging and resizing
+    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"]');
     
-    with gr.Row():
-        with gr.Column():
-            design_path = gr.Image(label="Design Image")
-            target_path = gr.Image(label="Target Image")
-            load_btn = gr.Button("Load Images")
-        with gr.Column():
-            drag_info = gr.JSON(label="Drag Info", value={"x": 0, "y": 0, "scale": 1.0})
-            drag_area = gr.Canvas(tool="drag", label="Drag Design Here", width=600, height=400)
-            overlay_result = gr.Image(label="Overlay Result")
+    img.draggable = true;
+    img.ondragstart = function(event) {
+        event.dataTransfer.setDragImage(new Image(), 0, 0);
+    };
     
-    load_btn.click(load_images, inputs=[design_path, target_path], outputs=[drag_info, drag_area])
-    drag_area.edit(overlay_images, inputs=drag_info, outputs=overlay_result)
+    img.ondragend = function(event) {
+        let rect = result.getBoundingClientRect();
+        xInput.value = event.clientX - rect.left;
+        yInput.value = event.clientY - rect.top;
+    };
+    
+    let resizeObserver = new ResizeObserver(entries => {
+        scaleInput.value = img.width / img.naturalWidth;
+    });
+    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)
 
 editor.launch()