Update app.py

app.py

@@ -2,13 +2,16 @@ import gradio as gr
 import numpy as np
 from PIL import Image
 
-def overlay_images(design_img, target_img, x, y, width, height):
+def fit_design_to_target(design_img, target_img, x, y):
     # Convert inputs to PIL images
     design_image = Image.fromarray(design_img).convert("RGBA")
     target_image = Image.fromarray(target_img).convert("RGBA")
+    
+    # Calculate the area where the design should fit (full size of the dress image)
+    dress_area = target_image.size
 
-    # Resize the design image
-    design_image = design_image.resize((width, height), Image.Resampling.LANCZOS)
+    # Resize the design image to fit within the dress area
+    design_image = design_image.resize(dress_area, Image.Resampling.LANCZOS)
 
     # Create a transparent overlay
     overlay = Image.new('RGBA', target_image.size, (255, 255, 255, 0))
@@ -20,70 +23,60 @@ def overlay_images(design_img, target_img, x, y, width, height):
     return np.array(combined)
 
 with gr.Blocks() as editor:
-    gr.Markdown("## Drag, Drop, and Resize the Design Image on the Target Image")
+    gr.Markdown("## Move and Fit Design on Dress Image")
 
     with gr.Row():
         design_img = gr.Image(label="Design Image", type="numpy")
-        target_img = gr.Image(label="Target Image", type="numpy")
+        target_img = gr.Image(label="Dress Image", type="numpy")
     
-    overlay_result = gr.Image(label="Overlay Result")
+    overlay_result = gr.Image(label="Resulting Image")
 
-    # Hidden elements for storing coordinates and size
+    # Hidden elements for coordinates
     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)
 
-    # Button to apply the overlay
-    apply_overlay = gr.Button("Apply Overlay")
+    apply_overlay = gr.Button("Apply Design to Dress")
 
-    # JavaScript for dragging, resizing, and positioning
+    # JavaScript for click, drag, and drop
     custom_js = """
     <script>
     let designElement = null;
     let targetElement = null;
-    
-    function initDragAndResize() {
+    let isDragging = false;
+
+    function initDragAndDrop() {
         designElement = document.querySelector('img[data-target="design_img"]');
         targetElement = document.querySelector('img[data-target="target_img"]');
-        
-        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';
-        
-        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';
+
+        designElement.style.position = 'absolute';
+        designElement.style.cursor = 'move';
+        designElement.draggable = true;
+
+        designElement.ondragstart = function(event) {
+            isDragging = true;
+        };
+
+        targetElement.ondragover = function(event) {
+            event.preventDefault();
+        };
+
+        targetElement.ondrop = function(event) {
+            if (isDragging) {
+                let rect = targetElement.getBoundingClientRect();
+                x_coord.value = event.clientX - rect.left;
+                y_coord.value = event.clientY - rect.top;
+                isDragging = false;
             }
-        }
-
-        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;
+    window.onload = initDragAndDrop;
     </script>
     """
 
     html_code = gr.HTML(custom_js)
 
-    # 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)
+    # Apply overlay based on click-and-drag action
+    apply_overlay.click(fit_design_to_target, [design_img, target_img, x_coord, y_coord], overlay_result)
 
 editor.launch()