Update app.py (#1)

- Update app.py (46c9d3626818c2a3fa61463ead858f586cb1123d)

app.py

@@ -4,8 +4,9 @@ import random
 import torch
 import spaces
 import os
+import json
 
-from PIL import Image
+from PIL import Image, ImageDraw
 import torch 
 import math
 
@@ -138,6 +139,130 @@ Return only the rewritten instruction text directly, without JSON formatting or
     
     return polish_prompt_hf(full_prompt, SYSTEM_PROMPT)
 
+# --- Outpainting Functions ---
+def can_expand(source_width, source_height, target_width, target_height, alignment):
+    """Checks if the image can be expanded based on the alignment."""
+    if alignment in ("Left", "Right") and source_width >= target_width:
+        return False
+    if alignment in ("Top", "Bottom") and source_height >= target_height:
+        return False
+    return True
+
+def prepare_image_and_mask(image, width, height, overlap_percentage, resize_option, custom_resize_percentage, alignment, overlap_left, overlap_right, overlap_top, overlap_bottom):
+    """Prepares the image with white margins and creates a mask for outpainting."""
+    target_size = (width, height)
+    
+    # Calculate the scaling factor to fit the image within the target size
+    scale_factor = min(target_size[0] / image.width, target_size[1] / image.height)
+    new_width = int(image.width * scale_factor)
+    new_height = int(image.height * scale_factor)
+    
+    # Resize the source image to fit within target size
+    source = image.resize((new_width, new_height), Image.LANCZOS)
+    
+    # Apply resize option using percentages
+    if resize_option == "Full":
+        resize_percentage = 100
+    elif resize_option == "50%":
+        resize_percentage = 50
+    elif resize_option == "33%":
+        resize_percentage = 33
+    elif resize_option == "25%":
+        resize_percentage = 25
+    else:  # Custom
+        resize_percentage = custom_resize_percentage
+    
+    # Calculate new dimensions based on percentage
+    resize_factor = resize_percentage / 100
+    new_width = int(source.width * resize_factor)
+    new_height = int(source.height * resize_factor)
+    
+    # Ensure minimum size of 64 pixels
+    new_width = max(new_width, 64)
+    new_height = max(new_height, 64)
+    
+    # Resize the image
+    source = source.resize((new_width, new_height), Image.LANCZOS)
+    
+    # Calculate the overlap in pixels based on the percentage
+    overlap_x = int(new_width * (overlap_percentage / 100))
+    overlap_y = int(new_height * (overlap_percentage / 100))
+    
+    # Ensure minimum overlap of 1 pixel
+    overlap_x = max(overlap_x, 1)
+    overlap_y = max(overlap_y, 1)
+    
+    # Calculate margins based on alignment
+    if alignment == "Middle":
+        margin_x = (target_size[0] - new_width) // 2
+        margin_y = (target_size[1] - new_height) // 2
+    elif alignment == "Left":
+        margin_x = 0
+        margin_y = (target_size[1] - new_height) // 2
+    elif alignment == "Right":
+        margin_x = target_size[0] - new_width
+        margin_y = (target_size[1] - new_height) // 2
+    elif alignment == "Top":
+        margin_x = (target_size[0] - new_width) // 2
+        margin_y = 0
+    elif alignment == "Bottom":
+        margin_x = (target_size[0] - new_width) // 2
+        margin_y = target_size[1] - new_height
+    
+    # Adjust margins to eliminate gaps
+    margin_x = max(0, min(margin_x, target_size[0] - new_width))
+    margin_y = max(0, min(margin_y, target_size[1] - new_height))
+    
+    # Create a new background image with white margins and paste the resized source image
+    background = Image.new('RGB', target_size, (255, 255, 255))
+    background.paste(source, (margin_x, margin_y))
+    
+    # Create the mask
+    mask = Image.new('L', target_size, 255)
+    mask_draw = ImageDraw.Draw(mask)
+    
+    # Calculate overlap areas
+    white_gaps_patch = 2
+    left_overlap = margin_x + overlap_x if overlap_left else margin_x + white_gaps_patch
+    right_overlap = margin_x + new_width - overlap_x if overlap_right else margin_x + new_width - white_gaps_patch
+    top_overlap = margin_y + overlap_y if overlap_top else margin_y + white_gaps_patch
+    bottom_overlap = margin_y + new_height - overlap_y if overlap_bottom else margin_y + new_height - white_gaps_patch
+    
+    if alignment == "Left":
+        left_overlap = margin_x + overlap_x if overlap_left else margin_x
+    elif alignment == "Right":
+        right_overlap = margin_x + new_width - overlap_x if overlap_right else margin_x + new_width
+    elif alignment == "Top":
+        top_overlap = margin_y + overlap_y if overlap_top else margin_y
+    elif alignment == "Bottom":
+        bottom_overlap = margin_y + new_height - overlap_y if overlap_bottom else margin_y + new_height
+    
+    # Draw the mask
+    mask_draw.rectangle([
+        (left_overlap, top_overlap),
+        (right_overlap, bottom_overlap)
+    ], fill=0)
+    
+    return background, mask
+
+def preview_image_and_mask(image, width, height, overlap_percentage, resize_option, custom_resize_percentage, alignment, overlap_left, overlap_right, overlap_top, overlap_bottom):
+    """Creates a preview showing the mask overlay."""
+    background, mask = prepare_image_and_mask(image, width, height, overlap_percentage, resize_option, custom_resize_percentage, alignment, overlap_left, overlap_right, overlap_top, overlap_bottom)
+    
+    # Create a preview image showing the mask
+    preview = background.copy().convert('RGBA')
+    
+    # Create a semi-transparent red overlay
+    red_overlay = Image.new('RGBA', background.size, (255, 0, 0, 64))  # Reduced alpha to 64 (25% opacity)
+    
+    # Convert black pixels in the mask to semi-transparent red
+    red_mask = Image.new('RGBA', background.size, (0, 0, 0, 0))
+    red_mask.paste(red_overlay, (0, 0), mask)
+    
+    # Overlay the red mask on the background
+    preview = Image.alpha_composite(preview, red_mask)
+    
+    return preview
 
 # --- Model Loading ---
 dtype = torch.bfloat16
@@ -146,18 +271,57 @@ pipe = QwenImageEditPipeline.from_pretrained("Qwen/Qwen-Image-Edit", torch_dtype
 pipe.transformer.__class__ = QwenImageTransformer2DModel
 pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
 
-
 # --- Ahead-of-time compilation ---
 optimize_pipeline_(pipe, image=Image.new("RGB", (1024, 1024)), prompt="prompt")
 
 # --- UI Constants and Helpers ---
 MAX_SEED = np.iinfo(np.int32).max
 
-# --- Main Inference Function (with hardcoded negative prompt) ---
+def preload_presets(target_ratio, ui_width, ui_height):
+    """Updates the width and height sliders based on the selected aspect ratio."""
+    if target_ratio == "9:16":
+        changed_width = 720
+        changed_height = 1280
+        return changed_width, changed_height, gr.update()
+    elif target_ratio == "16:9":
+        changed_width = 1280
+        changed_height = 720
+        return changed_width, changed_height, gr.update()
+    elif target_ratio == "1:1":
+        changed_width = 1024
+        changed_height = 1024
+        return changed_width, changed_height, gr.update()
+    elif target_ratio == "Custom":
+        return ui_width, ui_height, gr.update(open=True)
+
+def select_the_right_preset(user_width, user_height):
+    if user_width == 720 and user_height == 1280:
+        return "9:16"
+    elif user_width == 1280 and user_height == 720:
+        return "16:9"
+    elif user_width == 1024 and user_height == 1024:
+        return "1:1"
+    else:
+        return "Custom"
+
+def toggle_custom_resize_slider(resize_option):
+    return gr.update(visible=(resize_option == "Custom"))
+
+# --- Main Inference Function (with outpainting preprocessing) ---
 @spaces.GPU(duration=120)
 def infer(
     image,
     prompt,
+    width,
+    height,
+    overlap_percentage,
+    resize_option,
+    custom_resize_percentage,
+    alignment,
+    overlap_left,
+    overlap_right,
+    overlap_top,
+    overlap_bottom,
     seed=42,
     randomize_seed=False,
     true_guidance_scale=4.0,
@@ -166,7 +330,7 @@ def infer(
     progress=gr.Progress(track_tqdm=True),
 ):
     """
-    Generates an image using the local Qwen-Image diffusers pipeline.
+    Generates an outpainted image using the Qwen-Image-Edit pipeline.
     """
     # Hardcode the negative prompt as requested
     negative_prompt = " "
@@ -177,7 +341,7 @@ def infer(
     # Set up the generator for reproducibility
     generator = torch.Generator(device=device).manual_seed(seed)
     
-    print(f"Calling pipeline with prompt: '{prompt}'")
+    print(f"Original Prompt: '{prompt}'")
     print(f"Negative Prompt: '{negative_prompt}'")
     print(f"Seed: {seed}, Steps: {num_inference_steps}")
 
@@ -185,9 +349,27 @@ def infer(
         prompt = polish_prompt(prompt, image)
         print(f"Rewritten Prompt: {prompt}")
 
-    # Generate the image
-    image = pipe(
-        image,
+    # Prepare the image with white margins for outpainting
+    outpaint_image, mask = prepare_image_and_mask(
+        image, width, height, overlap_percentage,
+        resize_option, custom_resize_percentage, alignment,
+        overlap_left, overlap_right, overlap_top, overlap_bottom
+    )
+    
+    # Check if expansion is possible
+    if not can_expand(image.width, image.height, width, height, alignment):
+        alignment = "Middle"
+        outpaint_image, mask = prepare_image_and_mask(
+            image, width, height, overlap_percentage,
+            resize_option, custom_resize_percentage, "Middle",
+            overlap_left, overlap_right, overlap_top, overlap_bottom
+        )
+    
+    print(f"Outpaint dimensions: {outpaint_image.size}")
+
+    # Generate the image with outpainting preprocessing
+    result_image = pipe(
+        outpaint_image,  # Use the preprocessed image with white margins
         prompt=prompt,
         negative_prompt=negative_prompt,
         num_inference_steps=num_inference_steps,
@@ -195,7 +377,7 @@ def infer(
         true_cfg_scale=true_guidance_scale,
     ).images[0]
 
-    return image, seed
+    return result_image, seed
 
 # --- Examples and UI Layout ---
 examples = []
@@ -206,6 +388,12 @@ css = """
     max-width: 1024px;
 }
 #edit_text{margin-top: -62px !important}
+.preview-container {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 10px;
+    margin-top: 10px;
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -216,59 +404,174 @@ with gr.Blocks(css=css) as demo:
         </div>
         """)
         gr.Markdown("""
+        ## Qwen-Image Edit with Outpainting
+        
+        Extend your images beyond their original boundaries with intelligent outpainting. The model will generate new content that seamlessly blends with your original image.
+        
         [Learn more](https://github.com/QwenLM/Qwen-Image) about the Qwen-Image series. 
-        Try on [Qwen Chat](https://chat.qwen.ai/), or [download model](https://huggingface.co/Qwen/Qwen-Image-Edit) to run locally with ComfyUI or diffusers.
+        Try on [Qwen Chat](https://chat.qwen.ai/), or [download model](https://huggingface.co/Qwen/Qwen-Image-Edit) to run locally.
         """)
+        
         with gr.Row():
             with gr.Column():
-                input_image = gr.Image(label="Input Image", show_label=False, type="pil")
+                input_image = gr.Image(label="Input Image", type="pil")
+                
                 prompt = gr.Text(
                     label="Prompt",
-                    show_label=False,
-                    placeholder="describe the edit instruction",
+                    placeholder="Describe what should appear in the extended areas",
                     container=False,
                 )
-                run_button = gr.Button("Edit!", variant="primary")
-
-            result = gr.Image(label="Result", show_label=False, type="pil")
-
-        with gr.Accordion("Advanced Settings", open=False):
-            # Negative prompt UI element is removed here
-
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
-            )
-
-            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-
-            with gr.Row():
-
-                true_guidance_scale = gr.Slider(
-                    label="True guidance scale",
-                    minimum=1.0,
-                    maximum=10.0,
-                    step=0.1,
-                    value=1.0
-                )
-
-                num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=1,
-                    maximum=50,
-                    step=1,
-                    value=50,
-                )
+                
+                with gr.Row():
+                    target_ratio = gr.Radio(
+                        label="Target Ratio",
+                        choices=["9:16", "16:9", "1:1", "Custom"],
+                        value="16:9",
+                        scale=2
+                    )
+                    alignment_dropdown = gr.Dropdown(
+                        choices=["Middle", "Left", "Right", "Top", "Bottom"],
+                        value="Middle",
+                        label="Alignment"
+                    )
+                
+                run_button = gr.Button("Outpaint!", variant="primary")
+                
+                with gr.Accordion("Outpainting Settings", open=False) as settings_panel:
+                    with gr.Row():
+                        width_slider = gr.Slider(
+                            label="Target Width",
+                            minimum=512,
+                            maximum=2048,
+                            step=8,
+                            value=1280,
+                        )
+                        height_slider = gr.Slider(
+                            label="Target Height",
+                            minimum=512,
+                            maximum=2048,
+                            step=8,
+                            value=720,
+                        )
+                    
+                    with gr.Group():
+                        overlap_percentage = gr.Slider(
+                            label="Mask overlap (%)",
+                            minimum=1,
+                            maximum=50,
+                            value=10,
+                            step=1,
+                            info="Controls the blending area between original and new content"
+                        )
+                        
+                        with gr.Row():
+                            overlap_top = gr.Checkbox(label="Overlap Top", value=True)
+                            overlap_right = gr.Checkbox(label="Overlap Right", value=True)
+                        with gr.Row():
+                            overlap_left = gr.Checkbox(label="Overlap Left", value=True)
+                            overlap_bottom = gr.Checkbox(label="Overlap Bottom", value=True)
+                    
+                    with gr.Row():
+                        resize_option = gr.Radio(
+                            label="Resize input image",
+                            choices=["Full", "50%", "33%", "25%", "Custom"],
+                            value="Full",
+                            info="How much of the target canvas the original image should occupy"
+                        )
+                        custom_resize_percentage = gr.Slider(
+                            label="Custom resize (%)",
+                            minimum=1,
+                            maximum=100,
+                            step=1,
+                            value=50,
+                            visible=False
+                        )
+                    
+                    preview_button = gr.Button("Preview alignment and mask", variant="secondary")
+
+                with gr.Accordion("Advanced Settings", open=False):
+                    seed = gr.Slider(
+                        label="Seed",
+                        minimum=0,
+                        maximum=MAX_SEED,
+                        step=1,
+                        value=0,
+                    )
+
+                    randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+
+                    with gr.Row():
+                        true_guidance_scale = gr.Slider(
+                            label="True guidance scale",
+                            minimum=1.0,
+                            maximum=10.0,
+                            step=0.1,
+                            value=1.0
+                        )
+
+                        num_inference_steps = gr.Slider(
+                            label="Number of inference steps",
+                            minimum=1,
+                            maximum=50,
+                            step=1,
+                            value=50,
+                        )
+
+                    rewrite_prompt = gr.Checkbox(
+                        label="Enhance prompt (using HF Inference)", 
+                        value=True
+                    )
 
-            rewrite_prompt = gr.Checkbox(
-                label="Enhance prompt (using HF Inference)", 
-                value=True
-            )
-
-        # gr.Examples(examples=examples, inputs=[prompt], outputs=[result, seed], fn=infer, cache_examples=False)
+            with gr.Column():
+                result = gr.Image(label="Result", type="pil")
+                
+                with gr.Column(visible=False) as preview_container:
+                    preview_image = gr.Image(label="Preview (red area will be generated)", type="pil")
+
+    # Event handlers
+    target_ratio.change(
+        fn=preload_presets,
+        inputs=[target_ratio, width_slider, height_slider],
+        outputs=[width_slider, height_slider, settings_panel],
+        queue=False,
+    )
+    
+    width_slider.change(
+        fn=select_the_right_preset,
+        inputs=[width_slider, height_slider],
+        outputs=[target_ratio],
+        queue=False,
+    )
+    
+    height_slider.change(
+        fn=select_the_right_preset,
+        inputs=[width_slider, height_slider],
+        outputs=[target_ratio],
+        queue=False,
+    )
+    
+    resize_option.change(
+        fn=toggle_custom_resize_slider,
+        inputs=[resize_option],
+        outputs=[custom_resize_percentage],
+        queue=False,
+    )
+    
+    preview_button.click(
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=[preview_container],
+        queue=False,
+    ).then(
+        fn=preview_image_and_mask,
+        inputs=[
+            input_image, width_slider, height_slider, overlap_percentage,
+            resize_option, custom_resize_percentage, alignment_dropdown,
+            overlap_left, overlap_right, overlap_top, overlap_bottom
+        ],
+        outputs=preview_image,
+        queue=False,
+    )
 
     gr.on(
         triggers=[run_button.click, prompt.submit],
@@ -276,7 +579,16 @@ with gr.Blocks(css=css) as demo:
         inputs=[
             input_image,
             prompt,
-            # negative_prompt is no longer an input from the UI
+            width_slider,
+            height_slider,
+            overlap_percentage,
+            resize_option,
+            custom_resize_percentage,
+            alignment_dropdown,
+            overlap_left,
+            overlap_right,
+            overlap_top,
+            overlap_bottom,
             seed,
             randomize_seed,
             true_guidance_scale,