update app

app.py

@@ -1,106 +1,69 @@
 import os
+import io
 import gc
-import gradio as gr
-import numpy as np
+import uuid
+import json
+import base64
 import random
+import threading
+import concurrent.futures
+from pathlib import Path
+from typing import List, Optional
+
 import spaces
+import numpy as np
 import torch
-from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
 from PIL import Image
-from pathlib import Path
-import concurrent.futures
-import threading
-from typing import Iterable
-
-from gradio.themes import Soft
-from gradio.themes.utils import colors, fonts, sizes
-
-colors.orange_red = colors.Color(
-    name="orange_red",
-    c50="#FFF0E5",
-    c100="#FFE0CC",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
-)
 
-class OrangeRedTheme(Soft):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red,
-        neutral_hue: colors.Color | str = colors.slate,
-        text_size: sizes.Size | str = sizes.text_lg,
-        font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
-        ),
-        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
-        ),
-    ):
-        super().__init__(
-            primary_hue=primary_hue,
-            secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue,
-            text_size=text_size,
-            font=font,
-            font_mono=font_mono,
-        )
-        super().set(
-            background_fill_primary="*primary_50",
-            background_fill_primary_dark="*primary_900",
-            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
-            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
-            button_primary_text_color="white",
-            button_primary_text_color_hover="white",
-            button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_secondary_text_color="black",
-            button_secondary_text_color_hover="white",
-            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
-            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
-            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
-            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
-            slider_color="*secondary_500",
-            slider_color_dark="*secondary_600",
-            block_title_text_weight="600",
-            block_border_width="3px",
-            block_shadow="*shadow_drop_lg",
-            button_primary_shadow="*shadow_drop_lg",
-            button_large_padding="11px",
-            color_accent_soft="*primary_100",
-            block_label_background_fill="*primary_200",
-        )
+from gradio import Server
+from fastapi import Request, UploadFile, File, Form
+from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
 
-orange_red_theme = OrangeRedTheme()
+HF_TOKEN = os.environ.get("HF_TOKEN")
 
-dtype  = torch.bfloat16
-device = "cuda" if torch.cuda.is_available() else "cpu"
+app = Server()
+
+BASE_DIR     = Path(__file__).resolve().parent
+STATIC_DIR   = BASE_DIR / "static"
+OUTPUT_DIR   = BASE_DIR / "outputs"
+EXAMPLES_DIR = BASE_DIR / "examples"
+
+STATIC_DIR.mkdir(exist_ok=True)
+OUTPUT_DIR.mkdir(exist_ok=True)
 
 MAX_SEED       = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
-EXAMPLES_DIR   = Path("examples")
+
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+dtype  = torch.bfloat16
+
+if torch.cuda.is_available():
+    print("current device:", torch.cuda.current_device())
+    print("device name:",    torch.cuda.get_device_name(torch.cuda.current_device()))
+    DEVICE_LABEL = torch.cuda.get_device_name(torch.cuda.current_device()).lower()
+else:
+    DEVICE_LABEL = str(DEVICE).lower()
+
+print("CUDA_VISIBLE_DEVICES =", os.environ.get("CUDA_VISIBLE_DEVICES"))
+print("torch.__version__ =",    torch.__version__)
+print("Using device:",          DEVICE)
+
+from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
 
 print("Loading 4B Distilled model (Standard VAE)...")
 pipe_standard = Flux2KleinPipeline.from_pretrained(
     "black-forest-labs/FLUX.2-klein-4B",
     torch_dtype=dtype,
+    token=HF_TOKEN,
 )
 pipe_standard.enable_model_cpu_offload()
+print("Standard pipeline loaded.")
 
 print("Loading Small Decoder VAE...")
 vae_small = AutoencoderKLFlux2.from_pretrained(
     "black-forest-labs/FLUX.2-small-decoder",
     torch_dtype=dtype,
+    token=HF_TOKEN,
 )
 
 print("Loading 4B Distilled model (Small Decoder VAE)...")
@@ -108,89 +71,54 @@ pipe_small_decoder = Flux2KleinPipeline.from_pretrained(
     "black-forest-labs/FLUX.2-klein-4B",
     vae=vae_small,
     torch_dtype=dtype,
+    token=HF_TOKEN,
 )
 pipe_small_decoder.enable_model_cpu_offload()
+print("Small-decoder pipeline loaded.")
 
 pipe_lock_standard = threading.Lock()
 pipe_lock_small    = threading.Lock()
 
+
+# ─────────────────────────── helpers ────────────────────────────────────────
+
 def calc_dimensions(pil_img: Image.Image):
-    """
-    Given a PIL image return (width, height) snapped to multiples of 8,
-    fitting within 1024 px on the long side, min 256 px on each side.
-    Uses round() so we match the reference app exactly.
-    """
     iw, ih = pil_img.size
     aspect = iw / ih
-
-    if aspect >= 1:          # landscape / square
+    if aspect >= 1:
         new_width  = 1024
         new_height = int(round(1024 / aspect))
-    else:                    # portrait
+    else:
         new_height = 1024
         new_width  = int(round(1024 * aspect))
-
-    # snap to 8-pixel grid with round(), clamp to [256, 1024]
     new_width  = max(256, min(1024, round(new_width  / 8) * 8))
     new_height = max(256, min(1024, round(new_height / 8) * 8))
     return new_width, new_height
 
 
-def update_dimensions_from_image(image_list):
-    """
-    Called by the gallery .upload() event.
-    Returns updated slider values for width and height.
-    """
-    if not image_list:
-        return 1024, 1024
-
-    # gallery items arrive as PIL images when type="pil"
-    item = image_list[0]
-    img  = item[0] if isinstance(item, tuple) else item
-
-    if isinstance(img, str):
-        img = Image.open(img).convert("RGB")
-    elif not isinstance(img, Image.Image):
-        return 1024, 1024
-
-    return calc_dimensions(img)
-
-def parse_and_resize_images(input_images, width: int, height: int):
-    """
-    Parse the gallery input and resize every frame to (width, height).
-    Returns a list[PIL.Image] or None.
-    """
-    if input_images is None:
-        return None
-
-    raw_list = []
-
-    if isinstance(input_images, str):
-        if os.path.exists(input_images):
-            raw_list = [Image.open(input_images).convert("RGB")]
-    elif isinstance(input_images, Image.Image):
-        raw_list = [input_images.convert("RGB")]
-    elif isinstance(input_images, list):
-        for item in input_images:
-            try:
-                src = item[0] if isinstance(item, tuple) else item
-                if isinstance(src, str):
-                    raw_list.append(Image.open(src).convert("RGB"))
-                elif isinstance(src, Image.Image):
-                    raw_list.append(src.convert("RGB"))
-                elif hasattr(src, "name"):
-                    raw_list.append(Image.open(src.name).convert("RGB"))
-            except Exception as e:
-                print(f"Skipping invalid image: {e}")
-
-    if not raw_list:
-        return None
-
-    resized = [
-        img.resize((width, height), Image.LANCZOS)
-        for img in raw_list
-    ]
-    return resized
+def parse_and_resize_images(paths: list[str], width: int, height: int):
+    result = []
+    for p in paths:
+        try:
+            img = Image.open(p).convert("RGB")
+            result.append(img.resize((width, height), Image.LANCZOS))
+        except Exception as e:
+            print(f"Skipping invalid image {p}: {e}")
+    return result or None
+
+
+def image_to_base64(img: Image.Image) -> str:
+    buf = io.BytesIO()
+    img.save(buf, format="PNG")
+    return base64.b64encode(buf.getvalue()).decode("utf-8")
+
+
+def save_image(img: Image.Image, prefix: str = "output") -> str:
+    filename = f"{prefix}_{uuid.uuid4().hex}.png"
+    path = OUTPUT_DIR / filename
+    img.save(path, format="PNG")
+    return filename
+
 
 def run_pipeline(pipe, lock, kwargs, seed):
     with lock:
@@ -198,51 +126,55 @@ def run_pipeline(pipe, lock, kwargs, seed):
         result = pipe(**kwargs, generator=gen).images[0]
     return result
 
+
+def get_example_items():
+    example_prompts = {
+        "1.jpg": "Change the weather to stormy.",
+        "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
+        "3.jpg": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
+        "4.jpg": "Make the texture high-resolution.",
+    }
+    items = []
+    if EXAMPLES_DIR.exists():
+        for name in sorted(os.listdir(EXAMPLES_DIR)):
+            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
+                items.append({
+                    "file":   name,
+                    "url":    f"/example-file/{name}",
+                    "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
+                })
+    return items
+
+
+# ─────────────────────────── inference ──────────────────────────────────────
+
 @spaces.GPU(duration=120)
 def infer(
-    prompt,
-    input_images=None,
-    seed=42,
-    randomize_seed=False,
-    width=1024,
-    height=1024,
-    num_inference_steps=4,
-    guidance_scale=1.0,
-    progress=gr.Progress(track_tqdm=True),
+    image_paths: list[str],
+    prompt: str,
+    seed: int,
+    randomize_seed: bool,
+    width: int,
+    height: int,
+    steps: int,
+    guidance_scale: float,
 ):
     gc.collect()
-    torch.cuda.empty_cache()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
 
-    if not prompt or not prompt.strip():
-        raise gr.Error("Please enter a prompt.")
+    if not prompt or not str(prompt).strip():
+        raise ValueError("Please enter a prompt.")
 
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
 
-    # ── width / height: derive from the first uploaded image if present ──
     image_list = None
-    if input_images:
-        # Re-derive dimensions from the actual first image so they are
-        # always consistent with what the pipeline will receive.
-        item = (
-            input_images[0][0]
-            if isinstance(input_images[0], tuple)
-            else input_images[0]
-        )
-        if isinstance(item, str):
-            first_pil = Image.open(item).convert("RGB")
-        elif isinstance(item, Image.Image):
-            first_pil = item.convert("RGB")
-        else:
-            first_pil = None
+    if image_paths:
+        first = Image.open(image_paths[0]).convert("RGB")
+        width, height = calc_dimensions(first)
+        image_list = parse_and_resize_images(image_paths, width, height)
 
-        if first_pil is not None:
-            width, height = calc_dimensions(first_pil)
-
-        # parse + resize all images to the final (width, height)
-        image_list = parse_and_resize_images(input_images, width, height)
-
-    # ensure dims are multiples of 8 even for text-only runs
     width  = max(256, min(MAX_IMAGE_SIZE, round(int(width)  / 8) * 8))
     height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
 
@@ -250,236 +182,1054 @@ def infer(
         prompt=prompt,
         height=height,
         width=width,
-        num_inference_steps=num_inference_steps,
+        num_inference_steps=steps,
         guidance_scale=guidance_scale,
     )
     if image_list is not None:
         shared_kwargs["image"] = image_list
 
-    progress(0.30, desc="Launching both pipelines simultaneously...")
-
     with concurrent.futures.ThreadPoolExecutor(max_workers=2) as executor:
-        future_std   = executor.submit(
-            run_pipeline, pipe_standard,     pipe_lock_standard, shared_kwargs, seed
-        )
-        future_small = executor.submit(
-            run_pipeline, pipe_small_decoder, pipe_lock_small,    shared_kwargs, seed
-        )
-        concurrent.futures.wait(
-            [future_std, future_small],
-            return_when=concurrent.futures.ALL_COMPLETED,
-        )
-
-    progress(0.80, desc="✅ Both pipelines done!")
+        future_std   = executor.submit(run_pipeline, pipe_standard,     pipe_lock_standard, shared_kwargs, seed)
+        future_small = executor.submit(run_pipeline, pipe_small_decoder, pipe_lock_small,    shared_kwargs, seed)
+        concurrent.futures.wait([future_std, future_small], return_when=concurrent.futures.ALL_COMPLETED)
 
     out_standard = future_std.result()
     out_small    = future_small.result()
 
     gc.collect()
-    torch.cuda.empty_cache()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
 
     return out_standard, out_small, seed
 
 
-@spaces.GPU(duration=120)
-def infer_example(prompt):
-    out_std, out_small, seed_used = infer(
-        prompt=prompt,
-        input_images=None,
-        seed=0,
-        randomize_seed=True,
-        width=1024,
-        height=1024,
-        num_inference_steps=4,
-        guidance_scale=1.0,
-    )
-    return out_std, out_small, seed_used
+# ─────────────────────────── routes ─────────────────────────────────────────
 
+@app.get("/example-file/{filename}")
+async def example_file(filename: str):
+    path = EXAMPLES_DIR / filename
+    if not path.exists():
+        return JSONResponse({"error": "Example not found"}, status_code=404)
+    return FileResponse(path)
 
-def get_example_items():
-    example_prompts = {
-        "1.jpg": "Change the weather to stormy.",
-        "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
-        "3.jpg": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
-        "4.jpg": "Make the texture high-resolution.",
-    }
-    items = []
-    if EXAMPLES_DIR.exists():
-        for name in sorted(os.listdir(EXAMPLES_DIR)):
-            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
-                items.append({
-                    "file":   name,
-                    "path":   str(EXAMPLES_DIR / name),
-                    "prompt": example_prompts.get(
-                        name, "Edit this image while preserving composition."
-                    ),
-                })
-    return items
 
-EXAMPLE_ITEMS = get_example_items()
-
-css = """
-#col-container {
-    margin: 0 auto;
-    max-width: 1100px;
-}
-#main-title h1 {
-    font-size: 2.4em !important;
-}
-.vae-badge {
-    font-weight: 700;
-    font-size: 0.95em;
-    text-align: center;
-    padding: 4px 16px;
-    border-radius: 20px;
-    display: block;
-    margin-bottom: 6px;
-}
-"""
-
-with gr.Blocks() as demo:
-
-    with gr.Column(elem_id="col-container"):
-
-        gr.Markdown(
-            "# **Flux.2-4B-Decoder-Comparator**",
-            elem_id="main-title",
-        )
-        gr.Markdown(
-            "Compare **FLUX.2-klein-4B** side-by-side with "
-            "[small decoder](https://huggingface.co/black-forest-labs/FLUX.2-small-decoder)."
-        )
+@app.get("/download/{filename}")
+async def download_file(filename: str):
+    path = OUTPUT_DIR / filename
+    if not path.exists():
+        return JSONResponse({"error": "File not found"}, status_code=404)
+    return FileResponse(path, filename=filename, media_type="image/png")
 
-        with gr.Row(equal_height=True):
-
-            with gr.Column():
-                input_images = gr.Gallery(
-                    label="Input Images",
-                    type="pil",
-                    columns=2,
-                    rows=1,
-                    height=300,
-                    allow_preview=True,
-                )
-
-                prompt = gr.Text(
-                    label="Prompt",
-                    max_lines=1,
-                    show_label=True,
-                    placeholder="e.g., A black cat holding a sign that says hello world...",
-                )
-
-                run_button = gr.Button("Run Comparison", variant="primary")
-
-            with gr.Column():
-                with gr.Row():
-                    with gr.Column():
-                        result_standard = gr.Image(
-                            label="Standard Decoder",
-                            show_label=True,
-                            interactive=False,
-                            format="png",
-                            height=250,
-                        )
-                    with gr.Column():
-                        result_small = gr.Image(
-                            label="Small Decoder",
-                            show_label=True,
-                            interactive=False,
-                            format="png",
-                            height=250,
-                        )
-
-                seed_output = gr.Number(label="Seed Used", precision=0, visible=False)
-
-                with gr.Accordion("Advanced Settings", open=False, visible=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():
-                        width = gr.Slider(
-                            label="Width",
-                            minimum=256,
-                            maximum=MAX_IMAGE_SIZE,
-                            step=8,
-                            value=1024,
-                        )
-                        height_slider = gr.Slider(
-                            label="Height",
-                            minimum=256,
-                            maximum=MAX_IMAGE_SIZE,
-                            step=8,
-                            value=1024,
-                        )
-
-                    with gr.Row():
-                        num_inference_steps = gr.Slider(
-                            label="Inference Steps",
-                            minimum=1,
-                            maximum=20,
-                            step=1,
-                            value=4,
-                        )
-                        guidance_scale = gr.Slider(
-                            label="Guidance Scale",
-                            minimum=0.0,
-                            maximum=10.0,
-                            step=0.1,
-                            value=1.0,
-                        )
-
-        gr.Examples(
-            examples=[
-                [["examples/I1.jpg", "examples/I2.jpg"], "Make her wear these glasses in Image 2."],
-                [["examples/1.jpg"], "Change the weather to stormy."],
-                [["examples/2.jpg"], "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition."],
-                [["examples/3.jpg"], "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent."],
-                [["examples/4.jpg"], "Make the texture high-resolution."],
-            ],
-            inputs=[input_images, prompt],
-            outputs=[result_standard, result_small, seed_output],
-            fn=infer_example,
-            cache_examples=False,
-            label="Examples",
-        )
 
-        gr.Markdown(
-            "[*](https://huggingface.co/black-forest-labs/FLUX.2-klein-4B) "
-            "Experimental Space — FLUX.2 [klein] 4B VAE Decoder Comparison."
+@app.post("/api/compare")
+async def compare_images(
+    prompt:          str  = Form(...),
+    seed:            str  = Form("0"),
+    randomize_seed:  str  = Form("true"),
+    width:           str  = Form("1024"),
+    height:          str  = Form("1024"),
+    steps:           str  = Form("4"),
+    guidance_scale:  str  = Form("1.0"),
+    images: Optional[List[UploadFile]] = File(None),
+):
+    temp_paths = []
+    try:
+        image_paths = []
+        if images:
+            for upload in images:
+                suffix    = Path(upload.filename).suffix or ".png"
+                temp_name = f"upload_{uuid.uuid4().hex}{suffix}"
+                temp_path = OUTPUT_DIR / temp_name
+                content   = await upload.read()
+                with open(temp_path, "wb") as f:
+                    f.write(content)
+                temp_paths.append(str(temp_path))
+                image_paths.append(str(temp_path))
+
+        out_std, out_small, used_seed = infer(
+            image_paths   = image_paths,
+            prompt        = prompt,
+            seed          = int(seed),
+            randomize_seed= randomize_seed.lower() == "true",
+            width         = int(width),
+            height        = int(height),
+            steps         = int(steps),
+            guidance_scale= float(guidance_scale),
         )
 
-    input_images.upload(
-        fn=update_dimensions_from_image,
-        inputs=[input_images],
-        outputs=[width, height_slider],
-    )
+        fn_std   = save_image(out_std,   prefix="std")
+        fn_small = save_image(out_small, prefix="small")
+
+        return JSONResponse({
+            "success": True,
+            "seed":    used_seed,
+            "standard": {
+                "image_url":    f"/download/{fn_std}",
+                "download_url": f"/download/{fn_std}",
+                "image_base64": image_to_base64(out_std),
+            },
+            "small": {
+                "image_url":    f"/download/{fn_small}",
+                "download_url": f"/download/{fn_small}",
+                "image_base64": image_to_base64(out_small),
+            },
+            "device": DEVICE_LABEL,
+        })
+
+    except Exception as e:
+        return JSONResponse({"success": False, "error": str(e)}, status_code=500)
+    finally:
+        for p in temp_paths:
+            try:
+                if os.path.exists(p):
+                    os.remove(p)
+            except Exception:
+                pass
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage(request: Request):
+    examples      = get_example_items()
+    examples_json = json.dumps(examples)
+
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FLUX.2 Klein – Decoder Comparator</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
+
+    :root {{
+      --bg:          #0b0b10;
+      --panel:       #111218;
+      --panel-2:     #151621;
+      --panel-3:     #1b1d2a;
+      --border:      #242638;
+      --muted:       #9ca3af;
+      --text:        #f5f7fb;
+      --text-dim:    #c5cad3;
+      --purple:      #7c3aed;
+      --purple-hover:#6d28d9;
+      --purple-soft: rgba(124,58,237,0.14);
+      --green:       #22c55e;
+      --green-soft:  rgba(34,197,94,0.14);
+      --red:         #ef4444;
+      --red-soft:    rgba(239,68,68,0.14);
+      --orange:      #f97316;
+      --orange-soft: rgba(249,115,22,0.14);
+      --input-bg:    #0f1017;
+    }}
+
+    * {{ box-sizing: border-box; border-radius: 0 !important; }}
+
+    html, body {{
+      margin: 0; padding: 0;
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'Outfit', sans-serif;
+      min-height: 100%;
+    }}
+
+    body {{ overflow-x: hidden; }}
+
+    .app-shell {{
+      min-height: 100vh;
+      background: linear-gradient(to bottom, rgba(124,58,237,0.08), transparent 160px), var(--bg);
+    }}
+
+    .topbar {{
+      height: 56px;
+      border-bottom: 1px solid var(--border);
+      background: #0a0b11;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 24px;
+      color: #d7cdfc;
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+    }}
+
+    .container {{
+      max-width: 1440px;
+      margin: 0 auto;
+      padding: 28px;
+    }}
+
+    /* ── hero ── */
+    .hero {{
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 24px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--border);
+    }}
+    .hero-left {{ display: flex; flex-direction: column; gap: 14px; }}
+    .eyebrow {{ color: var(--muted); font-size: 13px; font-weight: 500; }}
+    .title-row {{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }}
+    .title {{ font-size: 40px; line-height: 1; font-weight: 800; margin: 0; letter-spacing: -0.03em; }}
+    .hero-tags {{ display: flex; flex-wrap: wrap; gap: 10px; }}
+    .tag {{
+      display: inline-flex; align-items: center; gap: 8px;
+      height: 34px; padding: 0 12px;
+      border: 1px solid var(--border);
+      font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
+    }}
+    .tag svg {{ width: 15px; height: 15px; flex-shrink: 0; }}
+    .tag-purple {{ color: #d8ccff; background: var(--purple-soft); border-color: rgba(124,58,237,0.35); }}
+    .tag-green  {{ color: #bbf7d0; background: var(--green-soft);  border-color: rgba(34,197,94,0.35);  }}
+    .tag-orange {{ color: #fed7aa; background: var(--orange-soft); border-color: rgba(249,115,22,0.35); }}
+    .hero-actions {{ display: flex; gap: 10px; flex-shrink: 0; }}
+    .ghost-btn {{
+      height: 40px; padding: 0 14px;
+      border: 1px solid var(--border);
+      background: var(--panel); color: var(--text);
+      font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer;
+    }}
+    .ghost-btn:hover {{ background: var(--panel-2); }}
+
+    /* ── two-col layout ── */
+    .layout {{
+      display: grid;
+      grid-template-columns: 420px 1fr;
+      gap: 24px;
+      align-items: start;
+    }}
+
+    /* ── generic panel ── */
+    .panel {{
+      background: var(--panel);
+      border: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }}
+    .panel-header {{
+      height: 62px; min-height: 62px;
+      border-bottom: 1px solid var(--border);
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 0 18px; background: #101119;
+    }}
+    .panel-title {{ font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }}
+    .panel-header-right {{ display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }}
+    .status-pill {{
+      padding: 5px 8px;
+      background: var(--panel-3); border: 1px solid var(--border);
+      color: var(--muted); font-size: 12px; line-height: 1;
+      transition: all 0.2s ease;
+    }}
+    .status-pill.active {{ background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: #fbbf24; }}
+    .status-pill.idle   {{ background: var(--panel-3); border: 1px solid var(--border); color: var(--muted); }}
+    .panel-body {{ flex: 1; padding: 18px; overflow: auto; }}
+
+    /* ── form ── */
+    .form-stack {{ display: flex; flex-direction: column; gap: 18px; }}
+    .form-group {{ display: flex; flex-direction: column; gap: 10px; }}
+    .label {{ font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }}
+    .hint  {{ color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: -4px; }}
+
+    textarea, input, button, select {{ font-family: 'Outfit', sans-serif; }}
+
+    .input, .textarea {{
+      width: 100%; background: var(--input-bg); border: 1px solid var(--border);
+      color: var(--text); outline: none; padding: 14px; font-size: 15px;
+    }}
+    .input:focus, .textarea:focus {{ border-color: #3a3d56; background: #11131b; }}
+    .textarea {{ min-height: 110px; resize: vertical; line-height: 1.55; }}
+
+    /* ── upload zone ── */
+    .upload-wrap {{
+      background: var(--input-bg); border: 1px dashed #32354b;
+      min-height: 140px;
+      display: flex; flex-direction: column; gap: 14px; padding: 14px; cursor: pointer;
+    }}
+    .upload-wrap.dragover {{ border-color: var(--purple); background: rgba(124,58,237,0.08); }}
+    .upload-wrap input[type="file"] {{ display: none; }}
+    .upload-placeholder {{
+      min-height: 110px; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 14px;
+      background: transparent; border: none; color: var(--text-dim);
+      cursor: pointer; padding: 16px; text-align: center;
+    }}
+    .upload-icon {{
+      width: 48px; height: 48px;
+      border: 1px solid var(--border); background: var(--panel-2);
+      display: flex; align-items: center; justify-content: center; color: #d8ccff;
+    }}
+    .preview-grid {{
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px;
+    }}
+    .thumb {{ position: relative; aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--border); background: #0b0c12; }}
+    .thumb img {{ width: 100%; height: 100%; object-fit: cover; display: block; }}
+    .thumb-remove {{
+      position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
+      border: 1px solid var(--border); background: rgba(11,11,16,0.88);
+      color: white; cursor: pointer; display: flex;
+      align-items: center; justify-content: center; font-size: 15px; line-height: 1;
+    }}
+
+    /* ── advanced ── */
+    .advanced {{ border: 1px solid var(--border); background: #0f1017; }}
+    .advanced-toggle {{
+      width: 100%; height: 48px; border: none;
+      border-bottom: 1px solid var(--border); background: transparent;
+      color: var(--text); display: flex; align-items: center; justify-content: space-between;
+      padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 600;
+    }}
+    .advanced-toggle:hover {{ background: #121420; }}
+    .advanced-body {{ display: none; padding: 14px; }}
+    .advanced-body.open {{ display: block; }}
+    .advanced-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }}
+    .checkbox-row {{
+      margin-top: 14px; display: flex; align-items: center; gap: 10px;
+      color: var(--text-dim); font-size: 14px; font-weight: 500;
+    }}
+    .checkbox-row input {{ width: 16px; height: 16px; accent-color: var(--purple); }}
+
+    /* ── actions ── */
+    .actions {{
+      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 8px;
+    }}
+    .btn {{
+      height: 48px; border: 1px solid var(--border);
+      background: var(--panel-2); color: var(--text);
+      cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
+    }}
+    .btn:hover {{ background: #1a1d29; }}
+    .btn-primary {{ background: var(--purple); border-color: var(--purple); color: white; }}
+    .btn-primary:hover {{ background: var(--purple-hover); border-color: var(--purple-hover); }}
+    .btn:disabled {{ opacity: 0.6; cursor: not-allowed; }}
+
+    /* ── result panel ── */
+    .result-shell {{ display: flex; flex-direction: column; gap: 16px; }}
+
+    /* ── comparison slider ── */
+    .compare-wrap {{
+      position: relative;
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      border: 1px solid var(--border);
+      background: #0d0e14;
+      overflow: hidden;
+      user-select: none;
+      touch-action: none;
+    }}
+
+    .compare-empty {{
+      position: absolute; inset: 0;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      gap: 14px; color: var(--text-dim); text-align: center; padding: 24px;
+      z-index: 1;
+    }}
+    .compare-empty-box {{
+      width: 72px; height: 72px;
+      border: 1px solid var(--border); background: var(--panel-2);
+      display: flex; align-items: center; justify-content: center; color: #d8ccff;
+    }}
+
+    /* right image fills whole area */
+    .cmp-right {{
+      position: absolute; inset: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+      display: none;
+    }}
+
+    /* left image clipped */
+    .cmp-left-clip {{
+      position: absolute; inset: 0;
+      overflow: hidden;
+      width: 50%;           /* updated by JS */
+    }}
+    .cmp-left {{
+      position: absolute; inset: 0;
+      width: 100%;          /* viewport width, not clip width */
+      height: 100%;
+      object-fit: contain;
+      display: none;
+    }}
+
+    /* divider line */
+    .cmp-divider {{
+      position: absolute; top: 0; bottom: 0;
+      left: 50%;            /* updated by JS */
+      width: 2px;
+      background: white;
+      transform: translateX(-50%);
+      z-index: 10;
+      display: none;
+      pointer-events: none;
+    }}
+
+    /* handle knob */
+    .cmp-handle {{
+      position: absolute;
+      top: 50%; left: 50%;  /* updated by JS */
+      transform: translate(-50%, -50%);
+      width: 44px; height: 44px;
+      border-radius: 50% !important;
+      background: white;
+      border: 3px solid rgba(0,0,0,0.25);
+      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
+      z-index: 11;
+      display: none;
+      cursor: ew-resize;
+      align-items: center; justify-content: center;
+      color: #111;
+    }}
+    .cmp-handle svg {{ width: 20px; height: 20px; flex-shrink: 0; }}
+
+    /* labels */
+    .cmp-label {{
+      position: absolute; top: 10px;
+      padding: 4px 10px;
+      background: rgba(11,11,16,0.82);
+      border: 1px solid var(--border);
+      font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
+      z-index: 9; display: none; pointer-events: none;
+    }}
+    .cmp-label-left  {{ left: 10px;  color: #d8ccff; border-color: rgba(124,58,237,0.5); }}
+    .cmp-label-right {{ right: 10px; color: #bbf7d0; border-color: rgba(34,197,94,0.5);  }}
+
+    /* download buttons row */
+    .dl-row {{
+      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+    }}
+    .dl-btn {{
+      height: 38px; border: 1px solid var(--border);
+      background: var(--panel-2); color: var(--text-dim);
+      cursor: pointer; font-size: 13px; font-weight: 600;
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+      text-decoration: none;
+    }}
+    .dl-btn:hover {{ background: #1a1d29; color: var(--text); }}
+    .dl-btn svg {{ width: 15px; height: 15px; flex-shrink: 0; }}
+
+    /* ── meta cards ── */
+    .result-meta {{ display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }}
+    .meta-card {{
+      border: 1px solid var(--border); background: var(--panel-2);
+      padding: 12px 14px; flex: 1 1 160px;
+    }}
+    .meta-label {{ font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 6px; }}
+    .meta-value {{ font-size: 14px; font-weight: 700; color: var(--text); word-break: break-word; line-height: 1.45; text-transform: lowercase; }}
+
+    /* ── loader ── */
+    .loader {{
+      position: absolute; inset: 0;
+      display: none; align-items: center; justify-content: center;
+      flex-direction: column; gap: 14px;
+      background: rgba(7,8,12,0.5);
+      backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
+      z-index: 20; pointer-events: none;
+    }}
+    .circle-loader {{
+      width: 58px; height: 58px;
+      border-radius: 50% !important;
+      border: 4px solid rgba(255,255,255,0.14);
+      border-top-color: #ffffff; border-right-color: #c4b5fd;
+      animation: spin 0.9s linear infinite;
+      box-shadow: 0 0 20px rgba(124,58,237,0.18);
+    }}
+    .loader span {{ font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }}
+
+    /* ── examples ── */
+    .examples-panel {{
+      margin-top: 24px; background: var(--panel); border: 1px solid var(--border); overflow: hidden;
+    }}
+    .examples-header {{
+      height: 58px; border-bottom: 1px solid var(--border);
+      display: flex; align-items: center; padding: 0 18px;
+      font-size: 20px; font-weight: 700; background: #101119;
+    }}
+    .examples-body {{ padding: 18px; }}
+    .examples-grid {{
+      display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
+    }}
+    .example-card {{
+      background: #0f1017; border: 1px solid var(--border); cursor: pointer; overflow: hidden;
+    }}
+    .example-card:hover {{ border-color: #3a3d56; background: #121420; }}
+    .example-card img {{
+      width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
+      border-bottom: 1px solid var(--border);
+    }}
+    .example-body {{ padding: 12px; }}
+    .example-body p {{ margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; font-weight: 500; }}
+
+    /* ── toast ── */
+    .toast-wrap {{
+      position: fixed; top: 18px; right: 18px; z-index: 9999;
+      display: flex; flex-direction: column; gap: 10px;
+    }}
+    .toast {{
+      min-width: 260px; max-width: 360px;
+      background: #141623; border: 1px solid var(--border);
+      color: var(--text); padding: 12px 14px;
+      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+    }}
+    .toast button {{ border: none; background: transparent; color: var(--text); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }}
+
+    @keyframes spin {{ from {{ transform: rotate(0deg); }} to {{ transform: rotate(360deg); }} }}
+
+    @media (max-width: 1100px) {{
+      .layout {{ grid-template-columns: 1fr; }}
+      .examples-grid {{ grid-template-columns: repeat(2, minmax(0,1fr)); }}
+    }}
+    @media (max-width: 640px) {{
+      .container {{ padding: 16px; }}
+      .title {{ font-size: 28px; }}
+      .advanced-grid, .actions, .dl-row {{ grid-template-columns: 1fr; }}
+      .examples-grid {{ grid-template-columns: 1fr; }}
+    }}
+  </style>
+</head>
+<body>
+  <div class="toast-wrap" id="toastWrap"></div>
+
+  <div class="app-shell">
+    <div class="topbar">FLUX.2-klein-4B · Standard vs Small Decoder · Side-by-Side Comparison</div>
+
+    <div class="container">
+
+      <!-- hero -->
+      <section class="hero">
+        <div class="hero-left">
+          <div class="eyebrow">black-forest-labs / flux.2-klein-4b / decoder-compare</div>
+          <div class="title-row">
+            <h1 class="title">Decoder Comparator</h1>
+          </div>
+          <div class="hero-tags">
+            <div class="tag tag-purple">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 3v18"/><path d="M3 12h18"/>
+              </svg>
+              <span>4B Distilled</span>
+            </div>
+            <div class="tag tag-green">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="5" width="18" height="14"/>
+                <path d="M8 13l2.5-2.5L13 13"/><path d="M13 13l2-2 3 3"/>
+              </svg>
+              <span>Standard VAE vs Small Decoder</span>
+            </div>
+            <div class="tag tag-orange">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/>
+              </svg>
+              <span>Parallel Inference</span>
+            </div>
+          </div>
+        </div>
+        <div class="hero-actions">
+          <button class="ghost-btn" type="button"
+            onclick="document.getElementById('examplesSection').scrollIntoView({{behavior:'smooth'}})">
+            Examples
+          </button>
+        </div>
+      </section>
+
+      <!-- main layout -->
+      <section class="layout">
+
+        <!-- LEFT: Input panel -->
+        <div class="panel">
+          <div class="panel-header">
+            <h2 class="panel-title">Input</h2>
+            <div class="panel-header-right">
+              <span class="status-pill idle" id="runStatus">Idle</span>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div class="form-stack">
+
+              <div class="form-group">
+                <div class="label">Images <span style="color:var(--muted);font-weight:400;">(optional)</span></div>
+                <div class="upload-wrap" id="uploadZone">
+                  <input id="fileInput" type="file" accept="image/*" multiple />
+                  <button class="upload-placeholder" id="uploadPlaceholder" type="button">
+                    <div class="upload-icon">
+                      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8">
+                        <path d="M12 4v10"/><path d="M8.5 7.5 12 4l3.5 3.5"/>
+                        <path d="M4 16.5h16"/><path d="M6 20h12"/>
+                      </svg>
+                    </div>
+                    <div>
+                      <div style="font-weight:700;color:var(--text);margin-bottom:4px;">Upload images</div>
+                      <div style="font-size:13px;color:var(--muted);">Drag & drop or click to browse</div>
+                    </div>
+                  </button>
+                  <div class="preview-grid" id="previewGrid" style="display:none;"></div>
+                </div>
+                <div class="hint">First image auto-fits width/height to preserve aspect ratio.</div>
+              </div>
+
+              <div class="form-group">
+                <label class="label" for="prompt">Prompt</label>
+                <textarea id="prompt" class="textarea"
+                  placeholder="e.g. Change the weather to stormy…"></textarea>
+              </div>
+
+              <div class="advanced">
+                <button class="advanced-toggle" id="advancedToggle" type="button">
+                  <span>Advanced Settings</span>
+                  <span id="advancedIcon" style="font-size:22px;font-weight:700;line-height:1;">+</span>
+                </button>
+                <div class="advanced-body" id="advancedBody">
+                  <div class="advanced-grid">
+                    <div class="form-group">
+                      <label class="label" for="seed">Seed</label>
+                      <input id="seed" class="input" type="number" min="0" max="{MAX_SEED}" value="0" />
+                    </div>
+                    <div class="form-group">
+                      <label class="label" for="steps">Steps</label>
+                      <input id="steps" class="input" type="number" min="1" max="20" value="4" />
+                    </div>
+                    <div class="form-group">
+                      <label class="label" for="width">Width</label>
+                      <input id="width" class="input" type="number" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024" />
+                    </div>
+                    <div class="form-group">
+                      <label class="label" for="height">Height</label>
+                      <input id="height" class="input" type="number" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024" />
+                    </div>
+                    <div class="form-group">
+                      <label class="label" for="guidance">Guidance Scale</label>
+                      <input id="guidance" class="input" type="number" min="0" max="10" step="0.1" value="1.0" />
+                    </div>
+                  </div>
+                  <div class="checkbox-row">
+                    <input id="randomizeSeed" type="checkbox" checked />
+                    <label for="randomizeSeed">Randomize seed</label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="actions">
+                <button class="btn btn-primary" id="runBtn" type="button">Run Comparison</button>
+                <button class="btn" id="clearBtn" type="button">Clear</button>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+        <!-- RIGHT: Result panel -->
+        <div class="panel">
+          <div class="panel-header">
+            <h2 class="panel-title">Result</h2>
+            <div class="panel-header-right">
+              <span style="font-size:12px;color:var(--muted);">Drag the handle to compare</span>
+              <span class="status-pill idle" id="resultStatus">Idle</span>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div class="result-shell">
+
+              <!-- Comparison slider -->
+              <div class="compare-wrap" id="compareWrap">
+
+                <!-- empty state -->
+                <div class="compare-empty" id="compareEmpty">
+                  <div class="compare-empty-box">
+                    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.8">
+                      <rect x="4" y="5" width="16" height="11"/>
+                      <path d="M8 12l2.5-2.5L13 12"/><path d="M13 12l2-2 2 2"/>
+                      <path d="M12 16v4"/>
+                    </svg>
+                  </div>
+                  <div>
+                    <div style="font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px;">No output yet</div>
+                    <div style="font-size:14px;color:var(--muted);">Run the comparison to see results here</div>
+                  </div>
+                </div>
+
+                <!-- right image (small decoder) — full area -->
+                <img id="cmpRight" class="cmp-right" alt="Small Decoder" />
+
+                <!-- left image clip + image (standard) -->
+                <div class="cmp-left-clip" id="cmpLeftClip">
+                  <img id="cmpLeft" class="cmp-left" alt="Standard Decoder" />
+                </div>
+
+                <!-- divider & handle -->
+                <div class="cmp-divider" id="cmpDivider"></div>
+                <div class="cmp-handle"  id="cmpHandle">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+                    <path d="M8 5l-5 7 5 7"/><path d="M16 5l5 7-5 7"/>
+                  </svg>
+                </div>
+
+                <!-- labels -->
+                <div class="cmp-label cmp-label-left"  id="labelLeft">STANDARD</div>
+                <div class="cmp-label cmp-label-right" id="labelRight">SMALL&nbsp;DEC</div>
+
+                <!-- loader overlay -->
+                <div class="loader" id="loaderOverlay">
+                  <div class="circle-loader"></div>
+                  <span>Running both pipelines…</span>
+                </div>
+
+              </div>
+
+              <!-- download row -->
+              <div class="dl-row">
+                <a id="dlStd" class="dl-btn" download>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+                    <path d="M12 4v10"/><path d="m7.5 10.5 4.5 4.5 4.5-4.5"/><path d="M5 20h14"/>
+                  </svg>
+                  Download Standard
+                </a>
+                <a id="dlSmall" class="dl-btn" download>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+                    <path d="M12 4v10"/><path d="m7.5 10.5 4.5 4.5 4.5-4.5"/><path d="M5 20h14"/>
+                  </svg>
+                  Download Small Dec
+                </a>
+              </div>
+
+              <!-- meta -->
+              <div class="result-meta">
+                <div class="meta-card">
+                  <div class="meta-label">seed used</div>
+                  <div class="meta-value" id="usedSeed">—</div>
+                </div>
+                <div class="meta-card">
+                  <div class="meta-label">device</div>
+                  <div class="meta-value" id="deviceValue">{DEVICE_LABEL}</div>
+                </div>
+                <div class="meta-card">
+                  <div class="meta-label">pipelines</div>
+                  <div class="meta-value">parallel · 2×</div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- examples -->
+      <section class="examples-panel" id="examplesSection">
+        <div class="examples-header">Examples</div>
+        <div class="examples-body">
+          <div class="examples-grid" id="examplesGrid"></div>
+        </div>
+      </section>
+
+    </div><!-- /container -->
+  </div><!-- /app-shell -->
+
+  <script>
+    /* ─────────── data from server ─────────── */
+    const examples   = {examples_json};
+    const MAX_SEED   = {MAX_SEED};
+    const DEVICE_LBL = "{DEVICE_LABEL}";
+
+    /* ─────────── state ─────────── */
+    const state = {{ files: [], advancedOpen: false, hasResult: false }};
+
+    /* ─────────── element refs ─────────── */
+    const uploadZone        = document.getElementById("uploadZone");
+    const fileInput         = document.getElementById("fileInput");
+    const uploadPlaceholder = document.getElementById("uploadPlaceholder");
+    const previewGrid       = document.getElementById("previewGrid");
+    const promptEl          = document.getElementById("prompt");
+    const seedEl            = document.getElementById("seed");
+    const stepsEl           = document.getElementById("steps");
+    const widthEl           = document.getElementById("width");
+    const heightEl          = document.getElementById("height");
+    const guidanceEl        = document.getElementById("guidance");
+    const randomizeSeedEl   = document.getElementById("randomizeSeed");
+    const advancedToggle    = document.getElementById("advancedToggle");
+    const advancedBody      = document.getElementById("advancedBody");
+    const advancedIcon      = document.getElementById("advancedIcon");
+    const runBtn            = document.getElementById("runBtn");
+    const clearBtn          = document.getElementById("clearBtn");
+    const runStatus         = document.getElementById("runStatus");
+    const resultStatus      = document.getElementById("resultStatus");
+    const compareEmpty      = document.getElementById("compareEmpty");
+    const compareWrap       = document.getElementById("compareWrap");
+    const cmpLeft           = document.getElementById("cmpLeft");
+    const cmpLeftClip       = document.getElementById("cmpLeftClip");
+    const cmpRight          = document.getElementById("cmpRight");
+    const cmpDivider        = document.getElementById("cmpDivider");
+    const cmpHandle         = document.getElementById("cmpHandle");
+    const labelLeft         = document.getElementById("labelLeft");
+    const labelRight        = document.getElementById("labelRight");
+    const loaderOverlay     = document.getElementById("loaderOverlay");
+    const usedSeed          = document.getElementById("usedSeed");
+    const deviceValue       = document.getElementById("deviceValue");
+    const dlStd             = document.getElementById("dlStd");
+    const dlSmall           = document.getElementById("dlSmall");
+    const examplesGrid      = document.getElementById("examplesGrid");
+    const toastWrap         = document.getElementById("toastWrap");
+
+    /* ─────────── toast ─────────── */
+    function showToast(msg) {{
+      const t   = document.createElement("div");
+      t.className = "toast";
+      const txt = document.createElement("div");
+      txt.textContent = msg;
+      const btn = document.createElement("button");
+      btn.type = "button"; btn.innerHTML = "&times;";
+      btn.addEventListener("click", () => t.remove());
+      t.appendChild(txt); t.appendChild(btn);
+      toastWrap.appendChild(t);
+      setTimeout(() => t.remove(), 4500);
+    }}
+
+    /* ─────────── status helpers ─────────── */
+    function setStatus(pill, active) {{
+      pill.textContent = active ? "Active" : "Idle";
+      pill.classList.remove("active", "idle");
+      pill.classList.add(active ? "active" : "idle");
+    }}
+
+    function setLoading(loading) {{
+      loaderOverlay.style.display = loading ? "flex" : "none";
+      runBtn.disabled  = loading;
+      clearBtn.disabled = loading;
+      setStatus(runStatus,    loading);
+      setStatus(resultStatus, loading);
+    }}
+
+    /* ─────────── advanced ─────────── */
+    function setAdvanced(open) {{
+      state.advancedOpen = open;
+      advancedBody.classList.toggle("open", open);
+      advancedIcon.textContent = open ? "−" : "+";
+    }}
+    advancedToggle.addEventListener("click", () => setAdvanced(!state.advancedOpen));
+
+    /* ─────────── upload ─────────── */
+    function createThumb(file, index) {{
+      const wrap = document.createElement("div");
+      wrap.className = "thumb";
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(file); img.alt = file.name;
+      const rm  = document.createElement("button");
+      rm.type = "button"; rm.className = "thumb-remove"; rm.innerHTML = "&times;";
+      rm.addEventListener("click", e => {{
+        e.stopPropagation();
+        state.files.splice(index, 1);
+        renderPreviews();
+      }});
+      wrap.appendChild(img); wrap.appendChild(rm);
+      return wrap;
+    }}
+
+    function renderPreviews() {{
+      previewGrid.innerHTML = "";
+      if (!state.files.length) {{
+        uploadPlaceholder.style.display = "flex";
+        previewGrid.style.display = "none";
+        return;
+      }}
+      uploadPlaceholder.style.display = "none";
+      previewGrid.style.display = "grid";
+      state.files.forEach((f, i) => previewGrid.appendChild(createThumb(f, i)));
+    }}
+
+    function addFiles(list) {{
+      const valid = Array.from(list).filter(f => f.type.startsWith("image/"));
+      if (!valid.length) {{ showToast("Please upload valid image files."); return; }}
+      state.files = [...state.files, ...valid];
+      renderPreviews();
+    }}
+
+    uploadPlaceholder.addEventListener("click",    () => fileInput.click());
+    uploadZone.addEventListener("click", e => {{ if (e.target === uploadZone) fileInput.click(); }});
+    fileInput.addEventListener("change", e => {{ addFiles(e.target.files); fileInput.value = ""; }});
+    uploadZone.addEventListener("dragover",  e => {{ e.preventDefault(); uploadZone.classList.add("dragover"); }});
+    uploadZone.addEventListener("dragleave", () => uploadZone.classList.remove("dragover"));
+    uploadZone.addEventListener("drop", e => {{
+      e.preventDefault(); uploadZone.classList.remove("dragover");
+      if (e.dataTransfer.files?.length) addFiles(e.dataTransfer.files);
+    }});
+
+    /* ─────────── comparison slider ─────────── */
+    let sliderPct = 50;   // 0–100
+
+    function applySlider(pct) {{
+      sliderPct = Math.max(1, Math.min(99, pct));
+      const p = sliderPct + "%";
+      cmpLeftClip.style.width = p;
+      cmpLeft.style.width     = compareWrap.offsetWidth + "px";
+      cmpDivider.style.left   = p;
+      cmpHandle.style.left    = p;
+    }}
+
+    function pctFromEvent(e) {{
+      const rect = compareWrap.getBoundingClientRect();
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      return ((clientX - rect.left) / rect.width) * 100;
+    }}
+
+    let dragging = false;
+
+    cmpHandle.addEventListener("mousedown",  () => {{ dragging = true; }});
+    cmpHandle.addEventListener("touchstart", () => {{ dragging = true; }}, {{ passive: true }});
+
+    window.addEventListener("mousemove",  e => {{ if (dragging) applySlider(pctFromEvent(e)); }});
+    window.addEventListener("touchmove",  e => {{ if (dragging) applySlider(pctFromEvent(e)); }}, {{ passive: true }});
+    window.addEventListener("mouseup",    () => {{ dragging = false; }});
+    window.addEventListener("touchend",   () => {{ dragging = false; }});
+
+    /* also let clicking anywhere on the wrap jump the slider */
+    compareWrap.addEventListener("click", e => {{
+      if (!state.hasResult) return;
+      if (e.target === cmpHandle) return;
+      applySlider(pctFromEvent(e));
+    }});
+
+    window.addEventListener("resize", () => {{
+      if (state.hasResult) applySlider(sliderPct);
+    }});
+
+    function showCompareResult(stdUrl, smallUrl) {{
+      /* reveal images */
+      cmpRight.src = smallUrl + "?t=" + Date.now();
+      cmpLeft.src  = stdUrl   + "?t=" + Date.now();
+
+      let loaded = 0;
+      function onLoad() {{
+        loaded++;
+        if (loaded < 2) return;
+        /* show all slider elements */
+        compareEmpty.style.display     = "none";
+        cmpRight.style.display         = "block";
+        cmpLeft.style.display          = "block";
+        cmpDivider.style.display       = "block";
+        cmpHandle.style.display        = "flex";
+        labelLeft.style.display        = "block";
+        labelRight.style.display       = "block";
+        state.hasResult = true;
+        sliderPct = 50;
+        applySlider(50);
+      }}
+
+      cmpRight.onload = onLoad;
+      cmpLeft.onload  = onLoad;
+    }}
+
+    /* ─────────── clear ─────────── */
+    function clearAll() {{
+      state.files = []; state.hasResult = false;
+      renderPreviews();
+      promptEl.value      = "";
+      seedEl.value        = "0";
+      stepsEl.value       = "4";
+      widthEl.value       = "1024";
+      heightEl.value      = "1024";
+      guidanceEl.value    = "1.0";
+      randomizeSeedEl.checked = true;
+
+      /* reset compare area */
+      cmpRight.style.display   = "none"; cmpRight.src = "";
+      cmpLeft.style.display    = "none"; cmpLeft.src  = "";
+      cmpDivider.style.display = "none";
+      cmpHandle.style.display  = "none";
+      labelLeft.style.display  = "none";
+      labelRight.style.display = "none";
+      compareEmpty.style.display = "flex";
+
+      dlStd.removeAttribute("href");
+      dlSmall.removeAttribute("href");
+      usedSeed.textContent    = "—";
+      deviceValue.textContent = DEVICE_LBL;
+
+      setLoading(false);
+      setAdvanced(false);
+    }}
+    clearBtn.addEventListener("click", clearAll);
+
+    /* ─────────── submit ─────────── */
+    async function submitCompare() {{
+      const prompt = promptEl.value.trim();
+      if (!prompt) {{ showToast("Please enter a prompt."); return; }}
+
+      const fd = new FormData();
+      fd.append("prompt",         prompt);
+      fd.append("seed",           seedEl.value      || "0");
+      fd.append("randomize_seed", String(randomizeSeedEl.checked));
+      fd.append("width",          widthEl.value     || "1024");
+      fd.append("height",         heightEl.value    || "1024");
+      fd.append("steps",          stepsEl.value     || "4");
+      fd.append("guidance_scale", guidanceEl.value  || "1.0");
+      state.files.forEach(f => fd.append("images", f));
+
+      setLoading(true);
+
+      try {{
+        const res  = await fetch("/api/compare", {{ method: "POST", body: fd }});
+        const data = await res.json();
+        if (!res.ok || !data.success) throw new Error(data.error || "Processing failed.");
+
+        usedSeed.textContent    = String(data.seed);
+        deviceValue.textContent = (data.device || DEVICE_LBL).toLowerCase();
+
+        dlStd.href   = data.standard.download_url;
+        dlSmall.href = data.small.download_url;
+
+        showCompareResult(data.standard.image_url, data.small.image_url);
+
+      }} catch (err) {{
+        showToast(err.message || "An unexpected error occurred.");
+      }} finally {{
+        setLoading(false);
+      }}
+    }}
+
+    runBtn.addEventListener("click", submitCompare);
+
+    /* ─────────── examples ─────────── */
+    async function fileFromUrl(url, filename="example.jpg") {{
+      const r = await fetch(url);
+      if (!r.ok) throw new Error("Failed to fetch example image.");
+      const blob = await r.blob();
+      return new File([blob], filename, {{ type: blob.type || "image/jpeg" }});
+    }}
+
+    function renderExamples() {{
+      examplesGrid.innerHTML = "";
+      examples.forEach(item => {{
+        const card = document.createElement("div");
+        card.className = "example-card";
+        const img  = document.createElement("img");
+        img.src = item.url; img.alt = item.file;
+        const body = document.createElement("div");
+        body.className = "example-body";
+        const p = document.createElement("p");
+        p.textContent = item.prompt;
+        body.appendChild(p); card.appendChild(img); card.appendChild(body);
+        card.addEventListener("click", async () => {{
+          try {{
+            const f = await fileFromUrl(item.url, item.file);
+            state.files = [f]; renderPreviews();
+            promptEl.value = item.prompt;
+            showToast("Example loaded — click Run Comparison.");
+          }} catch (e) {{ showToast(e.message || "Failed to load example."); }}
+        }});
+        examplesGrid.appendChild(card);
+      }});
+    }}
+
+    /* ─────────── init ─────────── */
+    setAdvanced(false);
+    setLoading(false);
+    renderExamples();
+    renderPreviews();
+  </script>
+</body>
+</html>"""
 
-    gr.on(
-        triggers=[run_button.click, prompt.submit],
-        fn=infer,
-        inputs=[
-            prompt,
-            input_images,
-            seed,
-            randomize_seed,
-            width,
-            height_slider,
-            num_inference_steps,
-            guidance_scale,
-        ],
-        outputs=[result_standard, result_small, seed_output],
-    )
 
-if __name__ == "__main__":
-    demo.queue(max_size=20).launch(
-        theme=orange_red_theme, css=css,
-        mcp_server=True,
-        ssr_mode=False,
-        show_error=True,
-    )
+app.launch()