Update app.py

app.py

@@ -1,82 +1,98 @@
 import gradio as gr
+import cv2
 import numpy as np
 from PIL import Image
 
-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 to fit within the dress area
-    design_image = design_image.resize(dress_area, Image.Resampling.LANCZOS)
+def combine_images(dress_image, design_image, position, size):
+    # Convert images to numpy arrays
+    dress = np.array(dress_image)
+    design = np.array(design_image)
 
-    # Create a transparent overlay
-    overlay = Image.new('RGBA', target_image.size, (255, 255, 255, 0))
-    overlay.paste(design_image, (x, y), design_image)
+    # Convert position and size from strings to tuples of integers
+    x, y = map(int, position.split(","))
+    width, height = map(int, size.split(","))
 
-    # Combine overlay with target image
-    combined = Image.alpha_composite(target_image, overlay)
+    # Resize design image to fit the size
+    design_resized = cv2.resize(design, (width, height))
 
-    return np.array(combined)
+    # Create a mask for the design image
+    if design_resized.shape[2] == 4:  # Handle transparency if PNG
+        design_mask = design_resized[:, :, 3] > 0
+        design_resized = design_resized[:, :, :3]
+    else:
+        design_mask = np.ones(design_resized.shape[:2], dtype=bool)
 
-with gr.Blocks() as editor:
-    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="Dress Image", type="numpy")
+    # Define region where the design will be placed
+    h, w = design_resized.shape[:2]
     
-    overlay_result = gr.Image(label="Resulting Image")
-
-    # Hidden elements for coordinates
-    x_coord = gr.Number(value=0, visible=False)
-    y_coord = gr.Number(value=0, visible=False)
-
-    apply_overlay = gr.Button("Apply Design to Dress")
-
-    # JavaScript for click, drag, and drop
-    custom_js = """
-    <script>
-    let designElement = null;
-    let targetElement = null;
-    let isDragging = false;
-
-    function initDragAndDrop() {
-        designElement = document.querySelector('img[data-target="design_img"]');
-        targetElement = document.querySelector('img[data-target="target_img"]');
-
-        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;
+    # Ensure the design fits within the dress image
+    if x + w > dress.shape[1]:
+        w = dress.shape[1] - x
+        design_resized = design_resized[:, :w]
+        design_mask = design_mask[:, :w]
+    
+    if y + h > dress.shape[0]:
+        h = dress.shape[0] - y
+        design_resized = design_resized[:h]
+        design_mask = design_mask[:h]
+
+    # Place the design on the dress image
+    for c in range(3):
+        dress[y:y+h, x:x+w, c] = dress[y:y+h, x:x+w, c] * (1 - design_mask) + design_resized[:, :, c] * design_mask
+
+    return Image.fromarray(dress)
+
+def interface():
+    with gr.Blocks() as demo:
+        gr.Markdown("## Image Editor with Drag-and-Drop")
+        dress_image = gr.Image(type="pil", label="Upload Dress Image")
+        design_image = gr.Image(type="pil", label="Upload Design Image", tool="editor")  # Editor tool for resizing
+
+        position = gr.Textbox(placeholder="Enter position as x,y", value="100,100", label="Position")
+        size = gr.Textbox(placeholder="Enter size as width,height", value="200,200", label="Size")
+
+        btn = gr.Button("Fit Design")
+        output = gr.Image(type="pil", label="Final Output")
+
+        # Gradio button click function
+        btn.click(
+            combine_images, 
+            inputs=[dress_image, design_image, position, size],
+            outputs=output
+        )
+
+        # Inject JavaScript for drag-and-drop functionality
+        gr.HTML("""
+        <script>
+            function initDragAndDrop() {
+                const designImg = document.querySelector('img[data-name="design_image"]');
+                let startX, startY, initialX, initialY;
+                
+                designImg.addEventListener('mousedown', (e) => {
+                    startX = e.clientX;
+                    startY = e.clientY;
+                    initialX = designImg.offsetLeft;
+                    initialY = designImg.offsetTop;
+                    
+                    document.onmousemove = (e) => {
+                        const dx = e.clientX - startX;
+                        const dy = e.clientY - startY;
+                        designImg.style.position = 'absolute';
+                        designImg.style.left = (initialX + dx) + 'px';
+                        designImg.style.top = (initialY + dy) + 'px';
+                    }
+                });
+                
+                document.onmouseup = () => {
+                    document.onmousemove = document.onmouseup = null;
+                }
             }
-        };
-    }
-
-    window.onload = initDragAndDrop;
-    </script>
-    """
-
-    html_code = gr.HTML(custom_js)
+            
+            window.onload = initDragAndDrop;
+        </script>
+        """)
 
-    # 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)
+    return demo
 
-editor.launch()
+demo = interface()
+demo.launch()