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 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') # 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) 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") target_img = gr.Image(label="Target Image", type="numpy") 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) apply_overlay = gr.Button("Apply Overlay") # JavaScript for dragging and resizing custom_js = """ """ 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()