app.py

import gradio as gr
import cv2
import numpy as np
from PIL import Image

def combine_images(dress_image, design_image, position, size):
    # Convert images to numpy arrays
    dress = np.array(dress_image)
    design = np.array(design_image)

    # Convert position and size from strings to tuples of integers
    x, y = map(int, position.split(","))
    width, height = map(int, size.split(","))

    # Resize design image to fit the size
    design_resized = cv2.resize(design, (width, height))

    # 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)

    # Define region where the design will be placed
    h, w = design_resized.shape[:2]
    
    # 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>
        """)

    return demo

demo = interface()
demo.launch()