Update app.py

app.py

@@ -1,79 +1,53 @@
+# -*- coding: utf-8 -*-
 import gradio as gr
 import spaces
 import torch
 from diffusers import AutoencoderKL, TCDScheduler
 from diffusers.models.model_loading_utils import load_state_dict
-# Removed ImageSlider import
+# Remove ImageSlider import as it's no longer needed
+# from gradio_imageslider import ImageSlider
 from huggingface_hub import hf_hub_download
 
-# Ensure these custom modules are accessible in the environment
-# If running locally, they should be in the same directory or installed
-try:
-    from controlnet_union import ControlNetModel_Union
-    from pipeline_fill_sd_xl import StableDiffusionXLFillPipeline
-except ImportError as e:
-    print(f"Error importing custom modules: {e}")
-    print("Please ensure 'controlnet_union.py' and 'pipeline_fill_sd_xl.py' are in the working directory or installed.")
-    # Optionally, try installing if running in a suitable environment
-    # import os
-    # os.system("pip install git+https://github.com/UNION-AI-Research/FILL-Context-Aware-Outpainting.git") # Or wherever the package is hosted
-    # Re-try import might be needed depending on environment setup
-    exit()
-
+from controlnet_union import ControlNetModel_Union
+from pipeline_fill_sd_xl import StableDiffusionXLFillPipeline
 
 from PIL import Image, ImageDraw
 import numpy as np
-import os # For checking example files
-
-# --- Model Loading ---
-# Use environment variable for model cache if needed
-# HUGGINGFACE_HUB_CACHE = os.environ.get("HUGGINGFACE_HUB_CACHE", None)
 
-try:
-    config_file = hf_hub_download(
-        "xinsir/controlnet-union-sdxl-1.0",
-        filename="config_promax.json",
-        # cache_dir=HUGGINGFACE_HUB_CACHE
-    )
+# --- Model Loading (Keep as is) ---
+config_file = hf_hub_download(
+    "xinsir/controlnet-union-sdxl-1.0",
+    filename="config_promax.json",
+)
+
+config = ControlNetModel_Union.load_config(config_file)
+controlnet_model = ControlNetModel_Union.from_config(config)
+model_file = hf_hub_download(
+    "xinsir/controlnet-union-sdxl-1.0",
+    filename="diffusion_pytorch_model_promax.safetensors",
+)
+state_dict = load_state_dict(model_file)
+model, _, _, _, _ = ControlNetModel_Union._load_pretrained_model(
+    controlnet_model, state_dict, model_file, "xinsir/controlnet-union-sdxl-1.0"
+)
+model.to(device="cuda", dtype=torch.float16)
+
+vae = AutoencoderKL.from_pretrained(
+    "madebyollin/sdxl-vae-fp16-fix", torch_dtype=torch.float16
+).to("cuda")
+
+pipe = StableDiffusionXLFillPipeline.from_pretrained(
+    "SG161222/RealVisXL_V5.0_Lightning",
+    torch_dtype=torch.float16,
+    vae=vae,
+    controlnet=model,
+    variant="fp16",
+).to("cuda")
+
+pipe.scheduler = TCDScheduler.from_config(pipe.scheduler.config)
+
+# --- Helper Functions (Keep as is, except infer) ---
 
-    config = ControlNetModel_Union.load_config(config_file)
-    controlnet_model = ControlNetModel_Union.from_config(config)
-    model_file = hf_hub_download(
-        "xinsir/controlnet-union-sdxl-1.0",
-        filename="diffusion_pytorch_model_promax.safetensors",
-        # cache_dir=HUGGINGFACE_HUB_CACHE
-    )
-
-    sstate_dict = load_state_dict(model_file)
-    model, _, _, _, _ = ControlNetModel_Union._load_pretrained_model(
-        controlnet_model, sstate_dict, model_file, "xinsir/controlnet-union-sdxl-1.0"
-    )
-    model.to(device="cuda", dtype=torch.float16)
-    print("ControlNet loaded successfully.")
-
-    vae = AutoencoderKL.from_pretrained(
-        "madebyollin/sdxl-vae-fp16-fix", torch_dtype=torch.float16, # cache_dir=HUGGINGFACE_HUB_CACHE
-    ).to("cuda")
-    print("VAE loaded successfully.")
-
-    pipe = StableDiffusionXLFillPipeline.from_pretrained(
-        "SG161222/RealVisXL_V5.0_Lightning",
-        torch_dtype=torch.float16,
-        vae=vae,
-        controlnet=model,
-        variant="fp16",
-        # cache_dir=HUGGINGFACE_HUB_CACHE
-    ).to("cuda")
-    print("Pipeline loaded successfully.")
-
-    pipe.scheduler = TCDScheduler.from_config(pipe.scheduler.config)
-    print("Scheduler configured.")
-
-except Exception as e:
-    print(f"Error during model loading: {e}")
-    raise e
-
-# --- Helper 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:
@@ -83,308 +57,212 @@ def can_expand(source_width, source_height, target_width, target_height, alignme
     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):
-    if image is None:
-        raise gr.Error("Input image not provided.")
-    try:
-        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
-        elif resize_option == "Custom":
-            resize_percentage = custom_resize_percentage
-        else:
-             raise ValueError(f"Invalid resize option: {resize_option}")
-
-
-        # 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)
-
-        # Ensure dimensions fit within target (can happen if original image is tiny and resize % is large)
-        new_width = min(new_width, target_size[0])
-        new_height = min(new_height, target_size[1])
-
-        # 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 if overlap is enabled, otherwise 0
-        overlap_x = max(overlap_x, 1) if overlap_left or overlap_right else 0
-        overlap_y = max(overlap_y, 1) if overlap_top or overlap_bottom else 0
-
-        # 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
-        else:
-             raise ValueError(f"Invalid alignment: {alignment}")
-
-
-        # Adjust margins to ensure image is fully within bounds (should be redundant with min check above)
-        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 and paste the resized source image
-        background = Image.new('RGB', target_size, (255, 255, 255)) # White background
-        background.paste(source, (margin_x, margin_y))
-
-        # Create the mask (initially all black - meaning keep everything)
-        mask_np = np.zeros(target_size[::-1], dtype=np.uint8) # Use numpy for easier slicing [::-1] for (height, width)
-
-        # Calculate the coordinates of the *source image* area within the target canvas
-        source_left = margin_x
-        source_top = margin_y
-        source_right = margin_x + new_width
-        source_bottom = margin_y + new_height
-
-        # Calculate the coordinates of the *unmasked* area (area to keep from source)
-        unmasked_left = source_left + overlap_x if overlap_left else source_left
-        unmasked_top = source_top + overlap_y if overlap_top else source_top
-        unmasked_right = source_right - overlap_x if overlap_right else source_right
-        unmasked_bottom = source_bottom - overlap_y if overlap_bottom else source_bottom
-
-        # Special handling for edge alignments to ensure the edge itself is kept if overlap disabled
-        if alignment == "Left" and not overlap_left:
-            unmasked_left = source_left
-        if alignment == "Right" and not overlap_right:
-            unmasked_right = source_right
-        if alignment == "Top" and not overlap_top:
-            unmasked_top = source_top
-        if alignment == "Bottom" and not overlap_bottom:
-            unmasked_bottom = source_bottom
-
-        # Ensure coordinates are valid and clipped to the source image area within the canvas
-        unmasked_left = max(source_left, min(unmasked_left, source_right))
-        unmasked_top = max(source_top, min(unmasked_top, source_bottom))
-        unmasked_right = max(source_left, min(unmasked_right, source_right))
-        unmasked_bottom = max(source_top, min(unmasked_bottom, source_bottom))
-
-        # Create the final mask: White (255) = Area to inpaint/outpaint, Black (0) = Area to keep
-        final_mask_np = np.ones(target_size[::-1], dtype=np.uint8) * 255 # Start with all white (change everything)
-        if unmasked_right > unmasked_left and unmasked_bottom > unmasked_top:
-             # Set the area to keep (calculated unmasked rectangle) to black (0)
-             final_mask_np[unmasked_top:unmasked_bottom, unmasked_left:unmasked_right] = 0
-
-        mask = Image.fromarray(final_mask_np)
-
-        return background, mask
-    except Exception as e:
-        print(f"Error in prepare_image_and_mask: {e}")
-        raise gr.Error(f"Failed to prepare image and mask: {e}")
-
+    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 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):
-    if image is None:
-        return None # Or return a placeholder image/message
-    try:
-        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)
+    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 preview image showing the mask
+    preview = background.copy().convert('RGBA')
 
-        # Create a semi-transparent red overlay for the masked (inpainting/outpainting) area
-        red_overlay = Image.new('RGBA', background.size, (255, 0, 0, 100)) # 100 alpha (~40% opacity)
+    # Create a semi-transparent red overlay
+    red_overlay = Image.new('RGBA', background.size, (255, 0, 0, 64))  # Reduced alpha to 64 (25% opacity)
 
-        # The mask is white (255) where outpainting happens. Use this directly.
-        preview.paste(red_overlay, (0, 0), mask) # Paste red where mask is white
+    # 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)
 
-        return preview
-    except Exception as e:
-        print(f"Error during preview generation: {e}")
-        # Return the original background or an error placeholder
-        if 'background' in locals():
-             return background.convert('RGBA')
-        else:
-             return Image.new('RGBA', (width, height), (200, 200, 200, 255)) # Grey placeholder
+    # Overlay the red mask on the background
+    preview = Image.alpha_composite(preview, red_mask)
 
+    return preview
 
-@spaces.GPU(duration=60) # Adjusted duration slightly
-def infer(image, width, height, overlap_percentage, num_inference_steps, resize_option, custom_resize_percentage, prompt_input, alignment, overlap_left, overlap_right, overlap_top, overlap_bottom, progress=gr.Progress(track_tqdm=True)):
+@spaces.GPU(duration=24)
+def infer(image, width, height, overlap_percentage, num_inference_steps, resize_option, custom_resize_percentage, prompt_input, alignment, overlap_left, overlap_right, overlap_top, overlap_bottom):
     if image is None:
-         raise gr.Error("Please provide an input image.")
+        raise gr.Error("Please upload an input image.")
+
+    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)
 
-    try:
-        # --- Preparation ---
-        progress(0.1, desc="Preparing image and mask...")
-        original_alignment = alignment
+    if not can_expand(background.width, background.height, width, height, alignment):
+        # Optionally provide feedback or default to middle
+        # gr.Warning(f"Cannot expand image with '{alignment}' alignment as source dimension is larger than target. Defaulting to 'Middle'.")
+        alignment = "Middle"
+        # Recalculate background and mask if alignment changed due to this check
         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)
 
-        # --- Alignment Check & Correction ---
-        # Get dimensions *after* initial placement and resize
-        pasted_source_img_width = int(image.width * min(width / image.width, height / image.height) * (custom_resize_percentage if resize_option=='Custom' else {'Full':100, '50%':50, '33%':33, '25%':25}[resize_option])/100)
-        pasted_source_img_height = int(image.height * min(width / image.width, height / image.height) * (custom_resize_percentage if resize_option=='Custom' else {'Full':100, '50%':50, '33%':33, '25%':25}[resize_option])/100)
-        pasted_source_img_width = max(64, min(pasted_source_img_width, width))
-        pasted_source_img_height = max(64, min(pasted_source_img_height, height))
-
-        needs_reprepare = False
-        if alignment in ("Left", "Right") and pasted_source_img_width >= width:
-            print(f"Warning: Source width ({pasted_source_img_width}) >= target width ({width}) with {alignment} alignment. Forcing Middle alignment.")
-            alignment = "Middle"
-            needs_reprepare = True
-        if alignment in ("Top", "Bottom") and pasted_source_img_height >= height:
-            print(f"Warning: Source height ({pasted_source_img_height}) >= target height ({height}) with {alignment} alignment. Forcing Middle alignment.")
-            alignment = "Middle"
-            needs_reprepare = True
-
-        if needs_reprepare and alignment != original_alignment:
-            print("Re-preparing mask due to alignment change.")
-            progress(0.15, desc="Re-preparing mask for Middle alignment...")
-            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)
-
-        # ControlNet expects the image with the *original* content visible in the non-masked area
-        cnet_image = background.copy()
-        # In some ControlNet inpainting setups, you might mask the control image too,
-        # but Union ControlNet Fill often works well with the unmasked source pasted onto the background.
-        # cnet_image.paste(0, mask=ImageOps.invert(mask)) # Optional: Black out masked area in CNet image
-
-        # --- Prompt Encoding ---
-        progress(0.2, desc="Encoding prompt...")
-        final_prompt = f"{prompt_input}, high quality, 4k" if prompt_input else "high quality, 4k" # Add default tags if no prompt
-        negative_prompt = "low quality, blurry, noisy, text, words, letters, watermark, signature, username, artist name, deformed, distorted, disfigured, bad anatomy, extra limbs, missing limbs"
-
-
-        # Note: TCD/Lightning pipelines often work better *without* explicit negative prompts encoded
-        # Try encoding only the positive prompt first
-        (
-            prompt_embeds,
-            _, # negative_prompt_embeds (set to None or handle differently for TCD)
-            pooled_prompt_embeds,
-            _, # negative_pooled_prompt_embeds
-        ) = pipe.encode_prompt(final_prompt, "cuda", False) # do_classifier_free_guidance=False for TCD
-
-
-        # --- Inference ---
-        progress(0.3, desc="Starting diffusion process...")
-        print(f"Running inference with {num_inference_steps} steps...")
-        pipeline_output = pipe(
-            prompt_embeds=prompt_embeds,
-            negative_prompt_embeds=None, # Pass None for TCD/Lightning
-            pooled_prompt_embeds=pooled_prompt_embeds,
-            negative_pooled_prompt_embeds=None, # Pass None for TCD/Lightning
-            image=background,           # Initial state for masked area (background with source)
-            mask_image=mask,            # Mask (white = change)
-            control_image=cnet_image,   # ControlNet input
-            num_inference_steps=num_inference_steps,
-            guidance_scale=0.0,         # Crucial for TCD/Lightning
-            controlnet_conditioning_scale=0.8, # Default for FILL pipeline, adjust if needed
-            output_type="pil"           # Ensure PIL output
-            # Add tqdm=True if supported by the custom pipeline and using gr.Progress without track_tqdm
-        )
-
-        # --- Process Output ---
-        progress(0.9, desc="Processing results...")
-        # Check if the pipeline returned a standard output object or a generator
-        output_image = None
-        if hasattr(pipeline_output, 'images'): # Standard diffusers output
-            print("Pipeline returned a standard output object.")
-            if len(pipeline_output.images) > 0:
-                output_image = pipeline_output.images[0]
-            else:
-                 raise ValueError("Pipeline output contained no images.")
-        # Check if it's iterable (generator) - less likely with direct call and output_type='pil' but good practice
-        elif hasattr(pipeline_output, '__iter__') and not isinstance(pipeline_output, dict):
-            print("Pipeline returned a generator, iterating to get the final image.")
-            last_item = None
-            for item in pipeline_output:
-                last_item = item
-             # Try to extract image from the last yielded item (structure can vary)
-            if isinstance(last_item, tuple) and len(last_item) > 0 and isinstance(last_item[0], Image.Image):
-                output_image = last_item[0]
-            elif isinstance(last_item, dict) and 'images' in last_item and len(last_item['images']) > 0:
-                output_image = last_item['images'][0]
-            elif isinstance(last_item, Image.Image):
-                output_image = last_item
-            elif hasattr(last_item, 'images') and len(last_item.images) > 0: # Handle case where object yielded early
-                 output_image = last_item.images[0]
-
-            if output_image is None:
-                raise ValueError("Pipeline generator did not yield a valid final image structure.")
-        else:
-            raise TypeError(f"Unexpected pipeline output type: {type(pipeline_output)}. Cannot extract image.")
-
-        print("Inference complete.")
-        progress(1.0, desc="Done!")
-        return output_image
-
-    except Exception as e:
-        print(f"Error during inference: {e}")
-        import traceback
-        traceback.print_exc() # Print full traceback to console/logs
-        raise gr.Error(f"Inference failed: {e}")
-
-
-def clear_result(*args):
-    """Clears the result Image and related components."""
-    updates = {
-        result: gr.update(value=None),
-        use_as_input_button: gr.update(visible=False),
-    }
-    # If preview image is passed as an arg, clear it too
-    if len(args) > 0 and isinstance(args[0], gr.Image):
-         updates[args[0]] = gr.update(value=None) # Assuming preview_image is the first optional arg
-    return updates
-
-
-# --- UI Helper Functions ---
+
+    cnet_image = background.copy()
+    # Apply mask to create the input for controlnet (black out non-masked area)
+    # cnet_image.paste(0, (0, 0), mask) # This line seems incorrect for inpainting/outpainting, usually the unmasked area is kept
+    # The pipeline expects the original image content where mask=0 and potentially noise/latents where mask=1
+    # Let's keep the original image content in the unmasked area and let the pipeline handle the masked area.
+    # The `StableDiffusionXLFillPipeline` likely uses the `image` input and `mask` differently than standard inpainting.
+    # Based on typical diffusers pipelines, `image` is often the *original* content placed on the canvas.
+    # Let's pass `background` as the image input for the pipeline.
+
+    final_prompt = f"{prompt_input} , high quality, 4k" if prompt_input else "high quality, 4k"
+
+    (
+        prompt_embeds,
+        negative_prompt_embeds,
+        pooled_prompt_embeds,
+        negative_pooled_prompt_embeds,
+    ) = pipe.encode_prompt(final_prompt, "cuda", True, negative_prompt="") # Add default negative prompt
+
+    # The pipeline expects the `image` and `mask_image` arguments for inpainting/outpainting
+    # `image` should be the canvas with the original image placed.
+    # `mask_image` defines the area to be filled (white=fill, black=keep).
+    # Our mask is inverted (black=keep, white=fill). Invert it.
+    inverted_mask = Image.fromarray(255 - np.array(mask))
+
+    # Run the pipeline
+    # Note: The generator inside the pipeline call is not used here as we only need the final result.
+    # We iterate once to get the final image.
+    generated_image = None
+    for img_output in pipe(
+        prompt_embeds=prompt_embeds,
+        negative_prompt_embeds=negative_prompt_embeds,
+        pooled_prompt_embeds=pooled_prompt_embeds,
+        negative_pooled_prompt_embeds=negative_pooled_prompt_embeds,
+        image=background, # Pass the background with the source image placed
+        mask_image=inverted_mask, # Pass the inverted mask (white = area to fill)
+        control_image=background, # ControlNet Union might need the full image context
+        num_inference_steps=num_inference_steps,
+        output_type="pil" # Ensure PIL images are returned
+    ):
+        generated_image = img_output[0] # The pipeline returns a list containing the image
+
+    if generated_image is None:
+         raise gr.Error("Image generation failed.")
+
+    # The pipeline should return the complete image already composited.
+    # No need to manually paste.
+    final_image = generated_image.convert("RGB")
+
+    # Yield only the final generated image
+    yield final_image
+
+
+def clear_result():
+    """Clears the result Image component."""
+    return gr.update(value=None)
+
 def preload_presets(target_ratio, ui_width, ui_height):
     """Updates the width and height sliders based on the selected aspect ratio."""
-    settings_update = gr.update() # Default: no change to accordion state
     if target_ratio == "9:16":
         changed_width = 720
         changed_height = 1280
+        return changed_width, changed_height, gr.update(open=False) # Close accordion
     elif target_ratio == "16:9":
         changed_width = 1280
         changed_height = 720
+        return changed_width, changed_height, gr.update(open=False) # Close accordion
     elif target_ratio == "1:1":
         changed_width = 1024
         changed_height = 1024
+        return changed_width, changed_height, gr.update(open=False) # Close accordion
     elif target_ratio == "Custom":
-        changed_width = ui_width   # Keep current slider values
-        changed_height = ui_height
-        settings_update = gr.update(open=True) # Open accordion for custom
-    else: # Should not happen
-         changed_width = ui_width
-         changed_height = ui_height
-
-    return changed_width, changed_height, settings_update
+        # Keep current slider values but open the accordion
+        return ui_width, ui_height, gr.update(open=True)
 
 def select_the_right_preset(user_width, user_height):
-    """Updates the radio button based on the current slider values."""
+    """Selects the preset radio button based on current width/height."""
     if user_width == 720 and user_height == 1280:
         return "9:16"
     elif user_width == 1280 and user_height == 720:
@@ -400,245 +278,186 @@ def toggle_custom_resize_slider(resize_option):
 
 def update_history(new_image, history):
     """Updates the history gallery with the new image."""
-    if not isinstance(new_image, Image.Image): # Don't add if generation failed (None)
-         return history or [] # Return current or empty list
-
+    if new_image is None: # Don't add None to history
+        return history
     if history is None:
         history = []
+    # Prepend the new image (as PIL) to the history list
     history.insert(0, new_image)
-    # Limit history size (optional)
+    # Limit history size if desired (e.g., keep last 12)
     max_history = 12
     if len(history) > max_history:
         history = history[:max_history]
     return history
 
-# --- Gradio UI Definition ---
+# --- Gradio UI ---
+
 css = """
 .gradio-container {
-    max-width: 1200px !important; /* Use max-width for responsiveness */
-    margin: auto !important; /* Center the container */
-    padding: 10px; /* Add some padding */
-}
-h1 { text-align: center; margin-bottom: 15px;}
-footer { display: none !important; /* More reliable way to hide footer */ }
-
-/* Ensure result image takes reasonable space */
-#result-image img {
-    max-height: 768px; /* Adjust max height as needed */
-    object-fit: contain;
-    width: 100%; /* Allow image to use column width */
-    height: auto;
-    display: block; /* Prevent extra space below image */
-    margin: auto; /* Center image within its container */
-}
-#input-image img {
-     max-height: 400px;
-     object-fit: contain;
-     width: 100%;
-     height: auto;
-     display: block;
-     margin: auto;
-}
-#preview-image img {
-     max-height: 250px; /* Smaller preview */
-     object-fit: contain;
-     width: 100%;
-     height: auto;
-     display: block;
-     margin: auto;
-}
-
-#history-gallery .thumbnail-item { /* Style history items */
-    height: 100px !important;
-    overflow: hidden; /* Hide overflow */
+    max-width: 1200px !important; /* Limit overall width */
+    margin: auto; /* Center the container */
 }
-#history-gallery .gallery {
-    grid-template-rows: repeat(auto-fill, 100px) !important;
-    gap: 4px !important; /* Add small gap */
+/* Ensure gallery items are reasonably sized */
+#history_gallery .thumbnail-item {
+    height: 100px !important; /* Adjust as needed */
 }
-#history-gallery .thumbnail-item img {
-    object-fit: contain !important; /* Ensure history previews fit */
-    height: 100%;
-    width: 100%;
+#history_gallery .gallery {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; /* Adjust column size */
 }
 
-/* Make Checkboxes smaller and closer */
-.gradio-checkboxgroup .wrap {
-    gap: 0.5rem 1rem !important; /* Adjust spacing */
-}
-.gradio-checkbox label span {
-    font-size: 0.9em; /* Slightly smaller label text */
-}
-.gradio-checkbox input {
-    transform: scale(0.9); /* Slightly smaller checkbox */
-}
-
-/* Style Accordion */
-.gradio-accordion .label-wrap { /* Target the label wrapper */
-    border: 1px solid #e0e0e0;
-    border-radius: 5px;
-    padding: 8px 12px;
-    background-color: #f9f9f9;
-}
 """
 
-title = """<h1 align="center">🖼️ Diffusers Image Outpaint Lightning ⚡</h1>"""
+title = """<h1 align="center">Diffusers Image Outpaint</h1>
+<div align="center">Drop an image you would like to extend, pick your expected ratio and hit Generate.</div>
+<div style="display: flex; justify-content: center; align-items: center; text-align: center;">
+    <p style="display: flex;gap: 6px;">
+         <a href="https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint?duplicate=true">
+            <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
+        </a> to skip the queue and enjoy faster inference on the GPU of your choice
+    </p>
+</div>
+"""
 
-# --- Example Files Handling ---
-# Create examples directory if it doesn't exist
-if not os.path.exists("./examples"):
-    os.makedirs("./examples")
+with gr.Blocks(css=css) as demo:
+    with gr.Column():
+        gr.HTML(title)
 
-# Check for example images and provide defaults or placeholders if missing
-example_files = {
-    "ex1": "./examples/example_1.webp",
-    "ex2": "./examples/example_2.jpg",
-    "ex3": "./examples/example_3.jpg"
-}
-default_image_path = None # Will be set to the first available example
-
-# You might want to download example images if they don't exist
-# from huggingface_hub import hf_hub_download
-# def download_example(repo_id, filename, local_path):
-#     if not os.path.exists(local_path):
-#         try:
-#             hf_hub_download(repo_id=repo_id, filename=filename, local_dir="./examples", local_dir_use_symlinks=False)
-#             print(f"Downloaded {filename}")
-#         except Exception as e:
-#             print(f"Failed to download example {filename}: {e}")
-#             return False # Indicate failure
-#     return os.path.exists(local_path)
-
-# Example: download_example("path/to/your/example-repo", "example_1.webp", example_files["ex1"])
-# For now, we just check existence
-
-examples_available = {key: os.path.exists(path) for key, path in example_files.items()}
-
-example_list = []
-if examples_available["ex1"]:
-    example_list.append([example_files["ex1"], "A wide landscape view of the mountains", 1280, 720, "Middle"])
-    if default_image_path is None: default_image_path = example_files["ex1"]
-if examples_available["ex2"]:
-     example_list.append([example_files["ex2"], "Full body shot of the astronaut on the moon", 720, 1280, "Middle"])
-     if default_image_path is None: default_image_path = example_files["ex2"]
-if examples_available["ex3"]:
-     example_list.append([example_files["ex3"], "Expanding the sky and ground around the subject", 1024, 1024, "Middle"])
-     example_list.append([example_files["ex3"], "Expanding downwards from the subject", 1024, 1024, "Top"])
-     example_list.append([example_files["ex3"], "Expanding upwards from the subject", 1024, 1024, "Bottom"])
-     if default_image_path is None: default_image_path = example_files["ex3"]
-
-if not example_list:
-    print("Warning: No example images found in ./examples/. Examples section will be empty.")
-    # Optionally create a placeholder image
-    # placeholder = Image.new('RGB', (512, 512), color = 'grey')
-    # placeholder_path = "./examples/placeholder.png"
-    # placeholder.save(placeholder_path)
-    # example_list.append([placeholder_path, "Placeholder", 1024, 1024, "Middle"])
-    # default_image_path = placeholder_path
-
-# --- UI ---
-with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo: # Added a theme
-    gr.HTML(title)
-
-    with gr.Row():
-        with gr.Column(scale=1): # Left column for inputs
-            input_image = gr.Image(
-                value=default_image_path, # Load default example
-                type="pil",
-                label="Input Image",
-                elem_id="input-image"
-            )
-
-            prompt_input = gr.Textbox(label="Prompt", placeholder="Describe the scene to expand (optional but recommended)...", lines=2)
-
-            with gr.Row():
-                target_ratio = gr.Radio(
-                    label="Target Aspect Ratio",
-                    choices=["9:16", "16:9", "1:1", "Custom"],
-                    value="9:16",
-                    scale=2
-                )
-                alignment_dropdown = gr.Dropdown(
-                    choices=["Middle", "Left", "Right", "Top", "Bottom"],
-                    value="Middle",
-                    label="Align Source Image",
-                    scale=1
+        with gr.Row():
+            with gr.Column(scale=1): # Input column
+                input_image = gr.Image(
+                    type="pil",
+                    label="Input Image"
                 )
 
-            with gr.Accordion(label="Advanced settings", open=False) as settings_panel:
                 with gr.Row():
-                     width_slider = gr.Slider(
-                         label="Target Width", minimum=512, maximum=2048, step=64, value=720
-                     )
-                     height_slider = gr.Slider(
-                         label="Target Height", minimum=512, maximum=2048, step=64, value=1280
-                     )
-                num_inference_steps = gr.Slider(
-                    label="Steps (TCD/Lightning: 1-8)", minimum=1, maximum=12, step=1, value=4
-                )
-
-                with gr.Group():
-                    overlap_percentage = gr.Slider(
-                        label="Mask Overlap with Source (%)", minimum=0, maximum=50, value=12, step=1
-                    )
-                    gr.Markdown("Select edges to overlap:", scale=0) # Add context
-                    with gr.Row(elem_classes="gradio-checkboxgroup"): # Apply CSS class
-                        overlap_top = gr.Checkbox(label="Top", value=True, scale=1)
-                        overlap_bottom = gr.Checkbox(label="Bottom", value=True, scale=1)
-                        overlap_left = gr.Checkbox(label="Left", value=True, scale=1)
-                        overlap_right = gr.Checkbox(label="Right", value=True, scale=1)
-
+                    with gr.Column(scale=2):
+                        prompt_input = gr.Textbox(label="Prompt (Optional)", placeholder="Describe the desired extended scene...")
+                    with gr.Column(scale=1, min_width=150):
+                        run_button = gr.Button("Generate", variant="primary")
 
                 with gr.Row():
-                    resize_option = gr.Radio(
-                        label="Resize source within target",
-                        choices=["Full", "50%", "33%", "25%", "Custom"],
-                        value="Full",
-                         scale=2
+                    target_ratio = gr.Radio(
+                        label="Target Ratio",
+                        choices=["9:16", "16:9", "1:1", "Custom"],
+                        value="9:16",
+                        scale=2
                     )
-                    custom_resize_percentage = gr.Slider(
-                        label="Custom resize (%)", minimum=1, maximum=100, step=1, value=50, visible=False, scale=1
+
+                    alignment_dropdown = gr.Dropdown(
+                        choices=["Middle", "Left", "Right", "Top", "Bottom"],
+                        value="Middle",
+                        label="Align Source Image"
                     )
 
-                preview_button = gr.Button("Preview Mask & Alignment")
-                preview_image = gr.Image(label="Mask Preview (Red = Outpaint Area)", type="pil", interactive=False, elem_id="preview-image")
+                with gr.Accordion(label="Advanced settings", open=False) as settings_panel:
+                    with gr.Column():
+                        with gr.Row():
+                            width_slider = gr.Slider(
+                                label="Target Width (px)",
+                                minimum=512, # Lowered min slightly
+                                maximum=2048, # Increased max slightly
+                                step=64, # SDXL optimal step
+                                value=720,
+                            )
+                            height_slider = gr.Slider(
+                                label="Target Height (px)",
+                                minimum=512, # Lowered min slightly
+                                maximum=2048, # Increased max slightly
+                                step=64, # SDXL optimal step
+                                value=1280,
+                            )
+
+                        num_inference_steps = gr.Slider(label="Steps", minimum=4, maximum=20, step=1, value=8) # Increased max steps slightly
+                        with gr.Group():
+                            overlap_percentage = gr.Slider(
+                                label="Mask overlap (%)",
+                                minimum=1,
+                                maximum=50,
+                                value=10,
+                                step=1,
+                                info="How much the new area overlaps the original image."
+                            )
+                            gr.Markdown("Select sides to overlap (influences mask generation):")
+                            with gr.Row():
+                                overlap_top = gr.Checkbox(label="Top", value=True)
+                                overlap_right = gr.Checkbox(label="Right", value=True)
+                            with gr.Row():
+                                overlap_left = gr.Checkbox(label="Left", value=True)
+                                overlap_bottom = gr.Checkbox(label="Bottom", value=True)
+                        with gr.Row():
+                            resize_option = gr.Radio(
+                                label="Resize input image before placing",
+                                choices=["Full", "50%", "33%", "25%", "Custom"],
+                                value="Full",
+                                info="Scales the source image down before placing it on the target canvas."
+                            )
+                            custom_resize_percentage = gr.Slider(
+                                label="Custom resize (%)",
+                                minimum=1,
+                                maximum=100,
+                                step=1,
+                                value=50,
+                                visible=False
+                            )
+
+                        with gr.Column():
+                            preview_button = gr.Button("Preview Alignment & Mask")
+
 
-            if example_list:
                 gr.Examples(
-                    examples=example_list,
-                    inputs=[input_image, prompt_input, width_slider, height_slider, alignment_dropdown],
-                    label="Examples (Click to load)",
-                    examples_per_page=10
+                    examples=[
+                        ["./examples/example_1.webp", 1280, 720, "Middle", "A wide landscape view of the mountains"],
+                        ["./examples/example_2.jpg", 1440, 810, "Left", "Full body shot of the cat sitting on a rug"],
+                        ["./examples/example_3.jpg", 1024, 1024, "Top", "The cloudy sky above the building"],
+                        ["./examples/example_3.jpg", 1024, 1024, "Bottom", "The street below the building"],
+                    ],
+                    inputs=[input_image, width_slider, height_slider, alignment_dropdown, prompt_input],
+                    label="Examples (Click to load)"
                 )
-            else:
-                 gr.Markdown("_(No example files found in ./examples)_")
 
-            run_button = gr.Button("Generate", variant="primary")
-
-
-        with gr.Column(scale=1): # Right column for output
-            result = gr.Image(label="Generated Image", type="pil", interactive=False, elem_id="result-image")
-            use_as_input_button = gr.Button("Use Result as Input Image", visible=False)
+            with gr.Column(scale=1): # Output column
+                # Replace ImageSlider with gr.Image
+                result_image = gr.Image(
+                    label="Generated Image",
+                    interactive=False,
+                    show_download_button=True,
+                    type="pil" # Ensure output is PIL for history
+                )
+                with gr.Row():
+                    use_as_input_button = gr.Button("Use as Input", visible=False)
+                    clear_button = gr.Button("Clear Output") # Added clear button
+
+                preview_mask_image = gr.Image(label="Alignment & Mask Preview", interactive=False)
+
+                history_gallery = gr.Gallery(
+                    label="History",
+                    columns=4, # Adjust columns as needed
+                    object_fit="contain",
+                    interactive=False,
+                    show_label=True,
+                    elem_id="history_gallery",
+                    height=300 # Set a fixed height for the gallery area
+                    )
 
-            history_gallery = gr.Gallery(
-                label="History", columns=6, object_fit="contain", interactive=False,
-                height=110, elem_id="history-gallery"
-            )
 
-    # --- Event Handling ---
+    # --- Event Handlers ---
 
-    # Function to set result as input and clear result area
-    def use_output_as_input_and_clear(output_image):
-        return {
-            input_image: gr.update(value=output_image),
-            result: gr.update(value=None), # Clear result after using it
-            use_as_input_button: gr.update(visible=False) # Hide button again
-        }
+    def use_output_as_input(output_pil_image):
+        """Sets the generated output PIL image as the new input image."""
+        # output_image comes directly from result_image which is PIL type
+        return gr.update(value=output_pil_image)
 
     use_as_input_button.click(
-        fn=use_output_as_input_and_clear,
-        inputs=[result],
-        outputs=[input_image, result, use_as_input_button]
+        fn=use_output_as_input,
+        inputs=[result_image], # Input is the single result image
+        outputs=[input_image]
+    )
+
+    clear_button.click(
+        fn=lambda: (gr.update(value=None), gr.update(visible=False), gr.update(value=None)), # Clear image, hide button, clear preview
+        inputs=None,
+        outputs=[result_image, use_as_input_button, preview_mask_image],
+        queue=False
     )
 
     target_ratio.change(
@@ -648,16 +467,18 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo: # Added a theme
         queue=False
     )
 
+    # Link sliders back to ratio selector and potentially open accordion
     width_slider.change(
-        fn=select_the_right_preset,
+        fn=lambda w, h: (select_the_right_preset(w, h), gr.update() if select_the_right_preset(w, h) == "Custom" else gr.update()),
         inputs=[width_slider, height_slider],
-        outputs=[target_ratio],
+        outputs=[target_ratio, settings_panel],
         queue=False
     )
+
     height_slider.change(
-        fn=select_the_right_preset,
+         fn=lambda w, h: (select_the_right_preset(w, h), gr.update() if select_the_right_preset(w, h) == "Custom" else gr.update()),
         inputs=[width_slider, height_slider],
-        outputs=[target_ratio],
+        outputs=[target_ratio, settings_panel],
         queue=False
     )
 
@@ -668,77 +489,58 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo: # Added a theme
         queue=False
     )
 
-    # Consolidate common inputs for generation
+    # Define common inputs for generation
     gen_inputs = [
         input_image, width_slider, height_slider, overlap_percentage, num_inference_steps,
         resize_option, custom_resize_percentage, prompt_input, alignment_dropdown,
         overlap_left, overlap_right, overlap_top, overlap_bottom
     ]
-    gen_outputs = [result] # Single output image
 
-    # Chain generation logic for Run button
-    run_trigger = run_button.click(
-        fn=clear_result, # Clear previous result first
-        inputs=[], # No inputs needed for clear
-        outputs=[result, use_as_input_button], # Components to clear/hide
-        queue=False
+    # Define common steps after generation
+    def handle_output(generated_image, current_history):
+        # generated_image is the single PIL image from infer
+        new_history = update_history(generated_image, current_history)
+        button_visibility = gr.update(visible=True) if generated_image else gr.update(visible=False)
+        return generated_image, new_history, button_visibility
+
+    run_button.click(
+        fn=lambda: (gr.update(value=None), gr.update(visible=False)), # Clear result and hide button first
+        inputs=None,
+        outputs=[result_image, use_as_input_button],
+        queue=False # Don't queue the clearing part
     ).then(
-        fn=infer,
+        fn=infer, # Run the generation
         inputs=gen_inputs,
-        outputs=gen_outputs,
-    )
-
-    # After generation finishes (successfully or not), update history and button visibility
-    run_trigger.then(
-        fn=lambda res_img, hist: update_history(res_img, hist),
-        inputs=[result, history_gallery],
-        outputs=[history_gallery],
-        queue=False # Update history immediately
+        outputs=result_image, # Output is the single generated image
     ).then(
-        # Show the 'Use as Input' button only if generation was successful (result is not None)
-        fn=lambda res_img: gr.update(visible=isinstance(res_img, Image.Image)),
-        inputs=[result],
-        outputs=[use_as_input_button],
-        queue=False # Show button immediately
+        fn=handle_output, # Process output: update history, show button
+        inputs=[result_image, history_gallery],
+        outputs=[result_image, history_gallery, use_as_input_button] # Update result again (no change), history, and button visibility
     )
 
-
-    # Chain generation logic for Enter key in Prompt textbox
-    submit_trigger = prompt_input.submit(
-         fn=clear_result,
-        inputs=[],
-        outputs=[result, use_as_input_button],
-        queue=False
+    prompt_input.submit(
+         fn=lambda: (gr.update(value=None), gr.update(visible=False)), # Clear result and hide button first
+        inputs=None,
+        outputs=[result_image, use_as_input_button],
+        queue=False # Don't queue the clearing part
     ).then(
-        fn=infer,
+        fn=infer, # Run the generation
         inputs=gen_inputs,
-        outputs=gen_outputs,
-    )
-
-    submit_trigger.then(
-        fn=lambda res_img, hist: update_history(res_img, hist),
-        inputs=[result, history_gallery],
-        outputs=[history_gallery],
-         queue=False
+        outputs=result_image, # Output is the single generated image
     ).then(
-        fn=lambda res_img: gr.update(visible=isinstance(res_img, Image.Image)),
-        inputs=[result],
-        outputs=[use_as_input_button],
-        queue=False
+        fn=handle_output, # Process output: update history, show button
+        inputs=[result_image, history_gallery],
+        outputs=[result_image, history_gallery, use_as_input_button] # Update result again (no change), history, and button visibility
     )
 
-    # Preview button logic
-    preview_inputs = [
-        input_image, width_slider, height_slider, overlap_percentage, resize_option,
-        custom_resize_percentage, alignment_dropdown, overlap_left, overlap_right,
-        overlap_top, overlap_bottom
-    ]
+
     preview_button.click(
         fn=preview_image_and_mask,
-        inputs=preview_inputs,
-        outputs=preview_image,
-        queue=False
+        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_mask_image, # Output to the preview image component
+        queue=False # Preview should be fast
     )
 
-# Launch the interface
-demo.queue(max_size=10).launch(ssr_mode=False, show_error=True, debug=True) # Add debug=True for more logs
+# Launch the app
+demo.queue(max_size=12).launch(share=False, ssr_mode=False, show_error=True)