Update app.py

app.py

@@ -1,47 +1,70 @@
-import os
-import io
-import math
-import tempfile
-from typing import Tuple
-
 import gradio as gr
 import spaces
-from PIL import Image, ImageDraw, ImageOps
 import torch
+from diffusers import AutoencoderKL, TCDScheduler
+from diffusers.models.model_loading_utils import load_state_dict
+from gradio_imageslider import ImageSlider
+from huggingface_hub import hf_hub_download
 
-# ===== Pipeline setup =====
-# We try to keep quality similar to your current Space by using SDXL Inpainting.
-# If CUDA isn't available, it'll fall back to CPU (slower).
-try:
-    from diffusers import StableDiffusionXLInpaintPipeline
-except Exception as e:
-    raise RuntimeError("diffusers is required. Please ensure requirements.txt includes diffusers>=0.27.0") from e
+from controlnet_union import ControlNetModel_Union
+from pipeline_fill_sd_xl import StableDiffusionXLFillPipeline
 
-DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
-DTYPE = torch.float16 if DEVICE == "cuda" else torch.float32
+from PIL import Image, ImageDraw
+import numpy as np
+import tempfile
 
-# Prefer the official SDXL inpaint checkpoint
-MODEL_ID = os.environ.get("INPAINT_MODEL_ID", "diffusers/stable-diffusion-xl-1.0-inpainting-0.1")
 
-def _load_pipe():
-    pipe = StableDiffusionXLInpaintPipeline.from_pretrained(
-        MODEL_ID, torch_dtype=DTYPE
-    )
-    if DEVICE == "cuda":
-        pipe = pipe.to("cuda")
-        try:
-            pipe.enable_xformers_memory_efficient_attention()
-        except Exception:
-            pass
-    else:
-        pipe = pipe.to("cpu")
-    return pipe
+# ---------------------------
+# Load ControlNet-Union + VAE + SDXL Fill pipeline (same as your Space)
+# ---------------------------
+
+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)
+
+# Load the state dictionary
+model_file = hf_hub_download(
+    "xinsir/controlnet-union-sdxl-1.0",
+    filename="diffusion_pytorch_model_promax.safetensors",
+)
+state_dict = load_state_dict(model_file)
+
+# Extract the keys from the state_dict
+loaded_keys = list(state_dict.keys())
+
+# Call the method and store all returns in a variable
+result = ControlNetModel_Union._load_pretrained_model(
+    controlnet_model, state_dict, model_file, "xinsir/controlnet-union-sdxl-1.0", loaded_keys
+)
 
-pipe = _load_pipe()
+# Use the first element from the result
+model = result[0]
+model = model.to(device="cuda", dtype=torch.float16)
 
-# ===== Helpers =====
+vae = AutoencoderKL.from_pretrained(
+    "madebyollin/sdxl-vae-fp16-fix", torch_dtype=torch.float16
+).to("cuda")
 
-def can_expand(source_width: int, source_height: int, target_width: int, target_height: int, alignment: str) -> bool:
+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)
+
+
+# ---------------------------
+# Helpers (unchanged behavior)
+# ---------------------------
+
+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
@@ -49,228 +72,192 @@ def can_expand(source_width: int, source_height: int, target_width: int, target_
         return False
     return True
 
-def _resize_input_for_option(img: Image.Image, resize_option: str, custom_resize_percentage: float) -> Image.Image:
+
+def prepare_image_and_mask(image, width, height, overlap_percentage,
+                           resize_option, custom_resize_percentage, alignment,
+                           overlap_left, overlap_right, overlap_top, overlap_bottom):
+    target_size = (int(width), int(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":
-        return img
-    if resize_option in ("50%", "33%", "25%"):
-        pct = {"50%": 50, "33%": 33, "25%": 25}[resize_option]
+        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":
-        pct = max(1, min(400, int(custom_resize_percentage)))
+        resize_percentage = max(1, min(400, int(custom_resize_percentage)))
     else:
-        return img
-    w, h = img.size
-    nw = max(1, int(w * pct / 100.0))
-    nh = max(1, int(h * pct / 100.0))
-    return img.resize((nw, nh), Image.LANCZOS)
-
-def _place_rect(canvas_w: int, canvas_h: int, img_w: int, img_h: int, alignment: str) -> Tuple[int, int]:
-    """Top-left placement for given alignment."""
-    if alignment == "Left":
-        x = 0
-        y = (canvas_h - img_h) // 2
+        resize_percentage = 100
+
+    # Apply the resize percentage to the already fitted source
+    resize_factor = resize_percentage / 100.0
+    new_width = max(64, int(source.width * resize_factor))
+    new_height = max(64, int(source.height * resize_factor))
+    source = source.resize((new_width, new_height), Image.LANCZOS)
+
+    # Calculate the overlap in pixels based on the percentage
+    overlap_x = max(1, int(new_width * (float(overlap_percentage) / 100.0)))
+    overlap_y = max(1, int(new_height * (float(overlap_percentage) / 100.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":
-        x = canvas_w - img_w
-        y = (canvas_h - img_h) // 2
+        margin_x = target_size[0] - new_width
+        margin_y = (target_size[1] - new_height) // 2
     elif alignment == "Top":
-        x = (canvas_w - img_w) // 2
-        y = 0
+        margin_x = (target_size[0] - new_width) // 2
+        margin_y = 0
     elif alignment == "Bottom":
-        x = (canvas_w - img_w) // 2
-        y = canvas_h - img_h
-    else:  # Middle
-        x = (canvas_w - img_w) // 2
-        y = (canvas_h - img_h) // 2
-    return x, y
-
-def _apply_side_overlaps(x, y, ow, oh, margin, overlap_left, overlap_right, overlap_top, overlap_bottom):
-    left = x + (margin if overlap_left else 0)
-    top = y + (margin if overlap_top else 0)
-    right = x + ow - (margin if overlap_right else 0)
-    bottom = y + oh - (margin if overlap_bottom else 0)
-    # ensure rectangle is valid
-    if right <= left: right = left + 1
-    if bottom <= top: bottom = top + 1
-    return left, top, right, bottom
-
-def prepare_image_and_mask(
-    image: Image.Image,
-    target_w: int,
-    target_h: int,
-    overlap_percentage: float,
-    resize_option: str,
-    custom_resize_percentage: float,
-    alignment: str,
-    overlap_left: bool,
-    overlap_right: bool,
-    overlap_top: bool,
-    overlap_bottom: bool,
-):
-    """
-    Returns (background, mask) for inpainting:
-      - background: RGB, input pasted onto a larger canvas
-      - mask: L (white = to generate, black = keep)
-    """
-    if image is None:
-        return None, None
+        margin_x = (target_size[0] - new_width) // 2
+        margin_y = target_size[1] - new_height
+    else:
+        margin_x = (target_size[0] - new_width) // 2
+        margin_y = (target_size[1] - new_height) // 2
 
-    if image.mode != "RGB":
-        image = image.convert("RGB")
+    # 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))
 
-    # Optional initial resize for the input
-    image = _resize_input_for_option(image, resize_option, custom_resize_percentage)
+    # 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))
 
-    # Canvas size
-    cw, ch = int(target_w), int(target_h)
-    iw, ih = image.size
-    cw = max(cw, iw)
-    ch = max(ch, ih)
+    # Create the mask
+    mask = Image.new('L', target_size, 255)
+    mask_draw = ImageDraw.Draw(mask)
 
-    base = Image.new("RGB", (cw, ch), (0, 0, 0))
-    x, y = _place_rect(cw, ch, iw, ih, alignment)
-    base.paste(image, (x, y))
+    # Calculate overlap areas
+    white_gaps_patch = 2
 
-    # Mask creation: white outside the "keep" rect
-    mask = Image.new("L", (cw, ch), 255)
-    draw = ImageDraw.Draw(mask)
+    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
 
-    margin = int(min(iw, ih) * max(0.0, float(overlap_percentage)) / 100.0)
-    margin = max(0, min(margin, min(iw, ih)//3))
+    # Tighten edges further depending on chosen alignment
+    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
 
-    left, top, right, bottom = _apply_side_overlaps(
-        x, y, iw, ih, margin, overlap_left, overlap_right, overlap_top, overlap_bottom
-    )
-    draw.rectangle([left, top, right, bottom], fill=0)
-
-    return base, mask
-
-# ===== Core inference (UI) =====
-
-@spaces.GPU(duration=60)
-def infer(
-    image: Image.Image,
-    width: int = 720,
-    height: int = 1280,
-    overlap_percentage: float = 10.0,
-    num_inference_steps: int = 8,
-    resize_option: str = "Full",
-    custom_resize_percentage: float = 50.0,
-    prompt_input: str = "",
-    alignment: str = "Middle",
-    overlap_left: bool = True,
-    overlap_right: bool = True,
-    overlap_top: bool = True,
-    overlap_bottom: bool = True,
-):
-    """
-    UI endpoint that returns an ImageSlider-compatible tuple:
-      (control_preview_image, generated_image)
-    """
-    if image is None:
-        return None
+    # Draw the mask (black = keep, white = generate)
+    mask_draw.rectangle([
+        (left_overlap, top_overlap),
+        (right_overlap, bottom_overlap)
+    ], fill=0)
+
+    return background, mask
 
-    # safety: if alignment can't expand, center instead
-    iw, ih = image.size
-    if not can_expand(iw, ih, int(width), int(height), alignment):
-        alignment = "Middle"
 
+def preview_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, int(width), int(height), float(overlap_percentage),
-        resize_option, float(custom_resize_percentage), alignment,
+        image, width, height, overlap_percentage,
+        resize_option, custom_resize_percentage, alignment,
         overlap_left, overlap_right, overlap_top, overlap_bottom
     )
-    if background is None:
-        return None
 
-    # Control preview: show masked area in black overlay
-    control_preview = background.copy()
-    control_overlay = Image.new("RGB", control_preview.size, (0, 0, 0))
-    control_preview.paste(control_overlay, (0, 0), mask)
-
-    # Seed/generator
-    generator = None
-    if DEVICE == "cuda":
-        generator = torch.Generator(device="cuda")
-    if generator is not None:
-        generator.manual_seed(torch.seed())
-
-    # Run inpainting
-    result = pipe(
-        prompt=prompt_input or "",
-        image=background,
-        mask_image=mask,
-        guidance_scale=3.5,
-        num_inference_steps=int(num_inference_steps),
-        generator=generator,
-    )
-    out = result.images[0]
-
-    # Return slider tuple
-    return (control_preview, out)
-
-# ===== Preview helper =====
-
-def preview_image_and_mask(
-    image: Image.Image,
-    width: int,
-    height: int,
-    overlap_percentage: float,
-    resize_option: str,
-    custom_resize_percentage: float,
-    alignment: str,
-    overlap_left: bool,
-    overlap_right: bool,
-    overlap_top: bool,
-    overlap_bottom: bool,
-):
-    """
-    Return a single preview image for the UI.
-    """
-    if image is None:
-        return None
+    # Create a preview image showing the mask overlay
+    preview = background.copy().convert('RGBA')
+    red_overlay = Image.new('RGBA', background.size, (255, 0, 0, 64))
+    red_mask = Image.new('RGBA', background.size, (0, 0, 0, 0))
+    red_mask.paste(red_overlay, (0, 0), mask)
+    preview = Image.alpha_composite(preview, red_mask)
+    return preview
+
+
+# ---------------------------
+# Main UI inference (returns ImageSlider tuple)
+# ---------------------------
+
+@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):
 
     background, mask = prepare_image_and_mask(
-        image, int(width), int(height), float(overlap_percentage),
-        resize_option, float(custom_resize_percentage), alignment,
+        image, width, height, overlap_percentage,
+        resize_option, custom_resize_percentage, alignment,
         overlap_left, overlap_right, overlap_top, overlap_bottom
     )
-    if background is None:
-        return None
 
-    preview = background.copy()
-    overlay = Image.new("RGBA", preview.size, (255, 0, 0, 90))
-    preview.paste(overlay, (0, 0), mask)
-    return preview
-
-# ===== img2img-style API (single image path string) =====
+    if not can_expand(background.width, background.height, width, height, alignment):
+        alignment = "Middle"
 
-@spaces.GPU(duration=60)
+    cnet_image = background.copy()
+    cnet_image.paste(0, (0, 0), mask)
+
+    final_prompt = f"{prompt_input} , high quality, 4k" if prompt_input else "high quality, 4k"
+
+    # Encode prompt + run pipeline yielding previews then final
+    with torch.autocast(device_type="cuda", dtype=torch.float16):
+        (
+            prompt_embeds,
+            negative_prompt_embeds,
+            pooled_prompt_embeds,
+            negative_pooled_prompt_embeds,
+        ) = pipe.encode_prompt(final_prompt, "cuda", True)
+
+        for image 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=cnet_image,
+            num_inference_steps=num_inference_steps
+        ):
+            # Streaming preview to slider (left = control, right = preview)
+            yield cnet_image, image
+
+    # Final composite (place the original inside the masked area)
+    image = image.convert("RGBA")
+    cnet_image.paste(image, (0, 0), mask)
+    yield background, cnet_image
+
+
+# ---------------------------
+# img2img-style API: /process_images (single file path string)
+# ---------------------------
+
+@spaces.GPU(duration=24)
 def process_images(
-    image: Image.Image,
-    prompt: str = "",
-    strength: float = 0.75,          # kept for client parity; unused by SDXL inpaint
-    seed: int = 0,
-    inference_step: int = 8,
-    width: int = 720,
-    height: int = 1280,
-    overlap_percentage: float = 10.0,
-    alignment: str = "Middle",
+    image,                 # PIL image from handle_file
+    prompt="",             # str
+    strength=0.75,         # kept for client parity; unused
+    seed=0,                # int
+    inference_step=8,      # int
+    width=720,             # int
+    height=1280,           # int
+    overlap_percentage=10, # float
+    alignment="Middle",    # str
 ):
-    """
-    Adapter endpoint to match your img2img client contract:
-      - accepts a single file input
-      - returns a single file path (string)
-      - internally reuses the same preparation and inpaint call as the UI
-    """
     if image is None:
         return None
 
-    iw, ih = image.size
-    if not can_expand(iw, ih, int(width), int(height), alignment):
-        alignment = "Middle"
-
-    # Use the same defaults as the UI
+    # Use same prep as UI
     resize_option = "Full"
-    custom_resize_percentage = 50.0
+    custom_resize_percentage = 50
     overlap_left = overlap_right = overlap_top = overlap_bottom = True
 
     background, mask = prepare_image_and_mask(
@@ -279,109 +266,278 @@ def process_images(
         overlap_left, overlap_right, overlap_top, overlap_bottom
     )
 
-    # Seed handling
-    if seed is None:
-        seed = 0
-    generator = torch.Generator(device=DEVICE) if DEVICE == "cuda" else None
-    if generator is not None and int(seed) != 0:
-        generator.manual_seed(int(seed))
-
-    result = pipe(
-        prompt=prompt or "",
-        image=background,
-        mask_image=mask,
-        guidance_scale=3.5,
-        num_inference_steps=int(inference_step),
-        generator=generator,
-    )
-    out = result.images[0]
+    cnet_image = background.copy()
+    cnet_image.paste(0, (0, 0), mask)
+
+    final_prompt = f"{prompt} , high quality, 4k" if prompt else "high quality, 4k"
+
+    last_img = None
+    with torch.autocast(device_type="cuda", dtype=torch.float16):
+        (
+            prompt_embeds,
+            negative_prompt_embeds,
+            pooled_prompt_embeds,
+            negative_pooled_prompt_embeds,
+        ) = pipe.encode_prompt(final_prompt, "cuda", True)
+
+        for gen_img 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=cnet_image,
+            num_inference_steps=int(inference_step)
+        ):
+            last_img = gen_img
+
+    if last_img is None:
+        return None
 
-    # Save to temp file and return PATH
     with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
-        out.save(tmp.name)
+        last_img.save(tmp.name)
         return tmp.name
 
-# ===== Gradio UI =====
-
-with gr.Blocks(css="#wrap {max-width: 1100px; margin: 0 auto;}") as demo:
-    gr.Markdown("## ReSize Image Outpainting")
-
-    with gr.Row(elem_id="wrap"):
-        with gr.Column():
-            input_image = gr.Image(label="Input Image", type="pil", sources=["upload", "clipboard"], height=380)
-
-            with gr.Row():
-                width_slider = gr.Slider(256, 2048, value=720, step=8, label="Target Width")
-                height_slider = gr.Slider(256, 2048, value=1280, step=8, label="Target Height")
-
-            with gr.Row():
-                overlap_percentage = gr.Slider(0, 30, value=10, step=1, label="Mask overlap (%)")
-                num_inference_steps = gr.Slider(4, 50, value=8, step=1, label="Steps")
-
-            resize_option = gr.Radio(
-                ["Full", "50%", "33%", "25%", "Custom"], value="Full", label="Resize input image"
-            )
-            custom_resize_percentage = gr.Slider(1, 400, value=50, step=1, label="Custom resize (%)")
 
-            alignment_dropdown = gr.Dropdown(
-                ["Middle", "Left", "Right", "Top", "Bottom"], value="Middle", label="Alignment"
-            )
-
-            with gr.Row():
-                overlap_left = gr.Checkbox(value=True, label="Overlap Left")
-                overlap_right = gr.Checkbox(value=True, label="Overlap Right")
-                overlap_top = gr.Checkbox(value=True, label="Overlap Top")
-                overlap_bottom = gr.Checkbox(value=True, label="Overlap Bottom")
-
-            prompt_input = gr.Textbox(label="Prompt (Optional)", placeholder="extend the scene softly")
-
-            with gr.Row():
-                preview_button = gr.Button("Preview")
-                generate_button = gr.Button("Generate")
-
-        with gr.Column():
-            preview_image = gr.Image(label="Preview", height=300)
-            slider = gr.Image(label="Generated Image (control vs result)", height=380, show_label=True)
-
-    # Reactive helpers
-    def toggle_custom_resize_slider(resize_option):
-        return gr.update(visible=(resize_option == "Custom"))
+# ---------------------------
+# Misc helpers & UI wiring
+# ---------------------------
+
+def clear_result():
+    """Clears the result ImageSlider."""
+    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."""
+    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()
+    else:
+        return ui_width, ui_height, gr.update()
+
+def select_the_right_preset(user_width, user_height):
+    """Chooses the closest preset by ratio (for display)."""
+    ratio = user_width / max(1, user_height)
+    if abs(ratio - (9/16)) < 0.05:
+        return "9:16"
+    if abs(ratio - (16/9)) < 0.05:
+        return "16:9"
+    if abs(ratio - 1.0) < 0.05:
+        return "1:1"
+    return "Custom"
+
+def toggle_custom_resize_slider(resize_option):
+    """Controls visibility of the custom resize slider."""
+    return gr.update(visible=(resize_option == "Custom"))
+
+def use_output_as_input(x):
+    """API bridge for ImageSlider -> Image. Returns right-hand image as next input."""
+    if not x:
+        return None
+    if isinstance(x, (list, tuple)) and len(x) >= 2:
+        # return the generated (right) image
+        return x[1]
+    return None
+
+def update_history(new_image, history):
+    """Updates the history gallery with the new image."""
+    if history is None:
+        history = []
+    history.insert(0, new_image)
+    return history
+
+
+css = """
+.gradio-container {
+    width: 1200px !important;
+}
+"""
+
+title = """<h1 align="center">Re-Size Image Outpaint</h1>
+<p align="center">Extend images with ControlNet-Union SDXL fill — with an ImageSlider preview.</p>
+"""
+
+with gr.Blocks(theme="soft", css=css) as demo:
+    with gr.Column():
+        gr.HTML(title)
+
+        with gr.Row():
+            with gr.Column():
+                input_image = gr.Image(
+                    type="pil",
+                    label="Input Image"
+                )
+
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        prompt_input = gr.Textbox(label="Prompt (Optional)")
+
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        target_ratio = gr.Radio(
+                            ["9:16", "16:9", "1:1", "Custom"], value="9:16", label="Expected Ratio"
+                        )
+                        with gr.Row():
+                            width_slider = gr.Slider(
+                                label="Target Width",
+                                minimum=512,
+                                maximum=1536,
+                                step=8,
+                                value=720,
+                            )
+                            height_slider = gr.Slider(
+                                label="Target Height",
+                                minimum=720,
+                                maximum=1536,
+                                step=8,
+                                value=1280,
+                            )
+
+                        num_inference_steps = gr.Slider(label="Steps", minimum=4, maximum=12, step=1, value=8)
+                        with gr.Group():
+                            overlap_percentage = gr.Slider(
+                                label="Mask overlap (%)",
+                                minimum=1,
+                                maximum=50,
+                                value=10,
+                                step=1
+                            )
+                            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.Column(scale=1):
+                        with gr.Group():
+                            resize_option = gr.Radio(
+                                label="Resize input image",
+                                choices=["Full", "50%", "33%", "25%", "Custom"],
+                                value="Full"
+                            )
+                            # FIX: set visibility here, do NOT call .update() on a component
+                            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 and mask")
+
+                gr.Examples(
+                    examples=[
+                        ["./examples/example_2.jpg", 1440, 810, "Left"],
+                        ["./examples/example_3.jpg", 1024, 1024, "Top"],
+                        ["./examples/example_3.jpg", 1024, 1024, "Bottom"],
+                    ],
+                    inputs=[input_image, width_slider, height_slider, target_ratio],
+                    label="Quick examples",
+                )
+
+            with gr.Column():
+                preview_image = gr.Image(label="Preview", height=300)
+                result = ImageSlider(
+                    label="Generated Image",
+                    elem_id="gen_slider",
+                    show_label=True,
+                    interactive=False,
+                )
+                run_button = gr.Button("Generate", variant="primary")
+                use_as_input_button = gr.Button("Use output as input", visible=False)
+                history_gallery = gr.Gallery(label="History", columns=4, height=220)
+
+    # Radio preset to width/height
+    target_ratio.change(
+        fn=preload_presets,
+        inputs=[target_ratio, width_slider, height_slider],
+        outputs=[width_slider, height_slider, gr.State()],
+        queue=False
+    )
 
-    custom_resize_percentage.update(visible=False)
+    # Toggle custom resize slider visibility
     resize_option.change(
         fn=toggle_custom_resize_slider,
-        inputs=resize_option,
-        outputs=custom_resize_percentage
+        inputs=[resize_option],
+        outputs=[custom_resize_percentage],
+        queue=False
     )
 
-    # Hook buttons
+    # Generate flow: clear slider -> stream infer -> update history -> show "use as input"
+    run_button.click(
+        fn=clear_result,
+        inputs=None,
+        outputs=result,
+    ).then(
+        fn=infer,
+        inputs=[input_image, width_slider, height_slider, overlap_percentage, num_inference_steps,
+                resize_option, custom_resize_percentage, prompt_input, target_ratio,
+                overlap_left, overlap_right, overlap_top, overlap_bottom],
+        outputs=result,
+    ).then(
+        # Safely update history only if the result is not None
+        fn=lambda x, history: update_history(x[1], history) if x else history,
+        inputs=[result, history_gallery],
+        outputs=history_gallery,
+    ).then(
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=use_as_input_button,
+    )
+
+    # Enter in prompt also triggers generate flow
+    prompt_input.submit(
+        fn=clear_result,
+        inputs=None,
+        outputs=result,
+    ).then(
+        fn=infer,
+        inputs=[input_image, width_slider, height_slider, overlap_percentage, num_inference_steps,
+                resize_option, custom_resize_percentage, prompt_input, target_ratio,
+                overlap_left, overlap_right, overlap_top, overlap_bottom],
+        outputs=result,
+    ).then(
+        fn=lambda x, history: update_history(x[1], history) if x else history,
+        inputs=[result, history_gallery],
+        outputs=history_gallery,
+    ).then(
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=use_as_input_button,
+    )
+
+    # Preview button
     preview_button.click(
         fn=preview_image_and_mask,
         inputs=[input_image, width_slider, height_slider, overlap_percentage,
-                resize_option, custom_resize_percentage, alignment_dropdown,
+                resize_option, custom_resize_percentage, target_ratio,
                 overlap_left, overlap_right, overlap_top, overlap_bottom],
         outputs=preview_image,
-        api_name="/preview_image_and_mask"
+        queue=False
     )
 
-    def _infer_wrapper(image, width, height, overlap_percentage, num_inference_steps,
-                       resize_option, custom_resize_percentage, prompt_input, alignment,
-                       overlap_left, overlap_right, overlap_top, overlap_bottom):
-        res = 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)
-        return res
-
-    generate_button.click(
-        fn=_infer_wrapper,
-        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],
-        outputs=slider,
-        api_name="/infer"
+    # Use output as next input (ImageSlider -> Image)
+    use_as_input_button.click(
+        fn=use_output_as_input,
+        inputs=[result],
+        outputs=[input_image],
+        queue=False
     )
 
     # ===== Hidden API binding for img2img-compatible client =====
+    # Returns a single PATH string (so your client can copy/handle it exactly like img2img)
     api_output_path = gr.Textbox(visible=False)
     api_trigger = gr.Button(visible=False)
     api_trigger.click(
@@ -395,7 +551,7 @@ with gr.Blocks(css="#wrap {max-width: 1100px; margin: 0 auto;}") as demo:
             width_slider,            # width
             height_slider,           # height
             overlap_percentage,      # overlap_percentage
-            alignment_dropdown       # alignment
+            target_ratio             # alignment (reusing same dropdown in this UI)
         ],
         outputs=[api_output_path],
         api_name="/process_images"