Update app.py

app.py

@@ -1,6 +1,6 @@
 import os
-import io
 import gc
+import io
 import uuid
 import json
 import base64
@@ -8,7 +8,7 @@ import random
 import threading
 import concurrent.futures
 from pathlib import Path
-from typing import List, Optional
+from typing import List, Optional, Iterable
 
 import spaces
 import numpy as np
@@ -19,10 +19,9 @@ from gradio import Server
 from fastapi import Request, UploadFile, File, Form
 from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
 
-HF_TOKEN = os.environ.get("HF_TOKEN")
-
-app = Server()
+from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
 
+# ── paths & constants ────────────────────────────────────────────────────────
 BASE_DIR     = Path(__file__).resolve().parent
 STATIC_DIR   = BASE_DIR / "static"
 OUTPUT_DIR   = BASE_DIR / "outputs"
@@ -34,36 +33,31 @@ OUTPUT_DIR.mkdir(exist_ok=True)
 MAX_SEED       = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
+# ── device ───────────────────────────────────────────────────────────────────
 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()
+    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("Using device:", DEVICE)
 
+# ── load models ──────────────────────────────────────────────────────────────
 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)...")
@@ -71,17 +65,15 @@ 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()
 
+print("All models loaded.")
 
-# ─────────────────────────── helpers ────────────────────────────────────────
-
+# ── helpers ───────────────────────────────────────────────────────────────────
 def calc_dimensions(pil_img: Image.Image):
     iw, ih = pil_img.size
     aspect = iw / ih
@@ -103,20 +95,20 @@ def parse_and_resize_images(paths: list[str], width: int, height: int):
             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}")
+            print(f"Skipping 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")
+    return base64.b64encode(buf.getvalue()).decode()
 
 
 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")
+    (OUTPUT_DIR / filename).parent.mkdir(parents=True, exist_ok=True)
+    img.save(OUTPUT_DIR / filename, format="PNG")
     return filename
 
 
@@ -141,13 +133,14 @@ def get_example_items():
                 items.append({
                     "file":   name,
                     "url":    f"/example-file/{name}",
-                    "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
+                    "prompt": example_prompts.get(
+                        name, "Edit this image while preserving composition."
+                    ),
                 })
     return items
 
 
-# ─────────────────────────── inference ──────────────────────────────────────
-
+# ── inference ─────────────────────────────────────────────────────────────────
 @spaces.GPU(duration=120)
 def infer(
     image_paths: list[str],
@@ -163,20 +156,20 @@ def infer(
     if torch.cuda.is_available():
         torch.cuda.empty_cache()
 
-    if not prompt or not str(prompt).strip():
+    if not prompt.strip():
         raise ValueError("Please enter a prompt.")
 
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
 
-    image_list = None
     if image_paths:
-        first = Image.open(image_paths[0]).convert("RGB")
-        width, height = calc_dimensions(first)
+        first_pil = Image.open(image_paths[0]).convert("RGB")
+        width, height = calc_dimensions(first_pil)
         image_list = parse_and_resize_images(image_paths, width, height)
-
-    width  = max(256, min(MAX_IMAGE_SIZE, round(int(width)  / 8) * 8))
-    height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
+    else:
+        image_list = None
+        width  = max(256, min(MAX_IMAGE_SIZE, round(int(width)  / 8) * 8))
+        height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
 
     shared_kwargs = dict(
         prompt=prompt,
@@ -185,13 +178,20 @@ def infer(
         num_inference_steps=steps,
         guidance_scale=guidance_scale,
     )
-    if image_list is not None:
+    if image_list:
         shared_kwargs["image"] = image_list
 
     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)
+        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()
@@ -203,13 +203,15 @@ def infer(
     return out_standard, out_small, seed
 
 
-# ─────────────────────────── routes ─────────────────────────────────────────
+# ── app ───────────────────────────────────────────────────────────────────────
+app = Server()
+
 
 @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 JSONResponse({"error": "Not found"}, status_code=404)
     return FileResponse(path)
 
 
@@ -217,19 +219,19 @@ async def example_file(filename: str):
 async def download_file(filename: str):
     path = OUTPUT_DIR / filename
     if not path.exists():
-        return JSONResponse({"error": "File not found"}, status_code=404)
+        return JSONResponse({"error": "Not found"}, status_code=404)
     return FileResponse(path, filename=filename, media_type="image/png")
 
 
 @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"),
+async def compare(
+    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 = []
@@ -241,39 +243,32 @@ async def compare_images(
                 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_path.write_bytes(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),
+            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),
         )
 
-        fn_std   = save_image(out_std,   prefix="std")
+        fn_std   = save_image(out_std,   prefix="standard")
         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,
+            "success":          True,
+            "seed":             used_seed,
+            "standard_url":     f"/download/{fn_std}",
+            "small_url":        f"/download/{fn_small}",
+            "standard_base64":  image_to_base64(out_std),
+            "small_base64":     image_to_base64(out_small),
+            "device":           DEVICE_LABEL,
         })
 
     except Exception as e:
@@ -295,9 +290,9 @@ async def homepage(request: Request):
     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>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Flux.2 Decoder Comparator</title>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
 
@@ -322,7 +317,7 @@ async def homepage(request: Request):
       --input-bg:    #0f1017;
     }}
 
-    * {{ box-sizing: border-box; border-radius: 0 !important; }}
+    *, *::before, *::after {{ box-sizing: border-box; border-radius: 0 !important; }}
 
     html, body {{
       margin: 0; padding: 0;
@@ -336,9 +331,12 @@ async def homepage(request: Request):
 
     .app-shell {{
       min-height: 100vh;
-      background: linear-gradient(to bottom, rgba(124,58,237,0.08), transparent 160px), var(--bg);
+      background:
+        linear-gradient(to bottom, rgba(124,58,237,0.08), transparent 160px),
+        var(--bg);
     }}
 
+    /* ── topbar ── */
     .topbar {{
       height: 56px;
       border-bottom: 1px solid var(--border);
@@ -346,13 +344,13 @@ async def homepage(request: Request):
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 24px;
       color: #d7cdfc;
       font-size: 14px;
       font-weight: 600;
       letter-spacing: 0.02em;
     }}
 
+    /* ── layout ── */
     .container {{
       max-width: 1440px;
       margin: 0 auto;
@@ -368,11 +366,15 @@ async def homepage(request: Request):
       margin-bottom: 24px;
       padding-bottom: 20px;
       border-bottom: 1px solid var(--border);
+      flex-wrap: wrap;
     }}
     .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; }}
+    .title {{
+      font-size: 44px; 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;
@@ -381,853 +383,1005 @@ async def homepage(request: Request):
       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; }}
+    .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;
+      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); }}
+    .ghost-btn:hover {{ background:var(--panel-2); }}
 
-    /* ── two-col layout ── */
-    .layout {{
+    /* ── main grid ── */
+    .main-grid {{
       display: grid;
       grid-template-columns: 420px 1fr;
       gap: 24px;
       align-items: start;
     }}
 
-    /* ── generic panel ── */
+    /* ── 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;
+      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;
     }}
-    .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;
+      padding:5px 8px;
+      background:var(--panel-3);
+      border:1px solid var(--border);
+      color:var(--muted);
+      font-size:12px; line-height:1;
+      transition: all .2s;
     }}
-    .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; }}
+    .status-pill.active {{
+      background:rgba(245,158,11,0.12);
+      border-color:rgba(245,158,11,0.35);
+      color:#fbbf24;
+    }}
+    .panel-body {{ padding:18px; }}
 
     /* ── 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; }}
+    .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; }}
+    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;
+      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; }}
+    .input:focus, .textarea:focus {{
+      border-color:#3a3d56; background:#11131b;
+    }}
+    .textarea {{ min-height:120px; resize:vertical; line-height:1.55; }}
 
-    /* ── upload zone ── */
+    /* ── upload ── */
     .upload-wrap {{
-      background: var(--input-bg); border: 1px dashed #32354b;
-      min-height: 140px;
-      display: flex; flex-direction: column; gap: 14px; padding: 14px; cursor: pointer;
+      background:var(--input-bg);
+      border:1px dashed #32354b;
+      min-height:180px;
+      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.dragover {{ border-color: var(--purple); background: rgba(124,58,237,0.08); }}
-    .upload-wrap input[type="file"] {{ display: none; }}
+    .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;
+      min-height:150px;
+      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;
+      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;
+      display:grid;
+      grid-template-columns:repeat(auto-fill,minmax(88px,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 {{
+      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;
+      position:absolute; top:5px; right:5px;
+      width:22px; height:22px;
+      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:14px; line-height:1;
     }}
 
     /* ── advanced ── */
-    .advanced {{ border: 1px solid var(--border); background: #0f1017; }}
+    .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; }}
+      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;
+      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);
     }}
-    .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;
+      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;
+      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: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;
+    .result-shell {{ display:flex; flex-direction:column; gap:16px; }}
+
+    /* ── image slider ── */
+    .slider-wrap {{
+      position:relative;
+      width:100%;
+      aspect-ratio:16/9;
+      min-height:340px;
+      border:1px solid var(--border);
+      background:#0d0e14;
+      overflow:hidden;
+      user-select: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;
+    /* empty state */
+    .slider-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;
+    .slider-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;
+    /* images */
+    .slider-img {{
+      position:absolute; inset:0;
+      width:100%; height:100%;
+      object-fit:contain;
+      display:none;
     }}
+    .slider-img.visible {{ display:block; }}
 
-    /* left image clipped */
-    .cmp-left-clip {{
-      position: absolute; inset: 0;
-      overflow: hidden;
-      width: 50%;           /* updated by JS */
+    /* clip the "before" (standard) image on the left */
+    #imgBefore {{
+      clip-path: inset(0 50% 0 0);
+      z-index:2;
     }}
-    .cmp-left {{
-      position: absolute; inset: 0;
-      width: 100%;          /* viewport width, not clip width */
-      height: 100%;
-      object-fit: contain;
-      display: none;
+    #imgAfter {{
+      z-index:1;
     }}
 
     /* 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; }}
+    .slider-divider {{
+      position:absolute;
+      top:0; bottom:0;
+      left:50%;
+      width:2px;
+      background:rgba(255,255,255,0.7);
+      z-index:5;
+      pointer-events:none;
+      display:none;
+    }}
+    .slider-divider.visible {{ display:block; }}
+
+    /* handle */
+    .slider-handle {{
+      position:absolute;
+      top:50%; left:50%;
+      transform:translate(-50%,-50%);
+      width:44px; height:44px;
+      border:2px solid white;
+      background:rgba(17,18,24,0.85);
+      display:none;
+      align-items:center; justify-content:center;
+      z-index:6; cursor:ew-resize;
+      box-shadow:0 2px 12px rgba(0,0,0,0.5);
+    }}
+    .slider-handle.visible {{ display:flex; }}
+    .slider-handle svg {{ pointer-events:none; }}
 
     /* 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;
+    .slider-label {{
+      position:absolute;
+      top:12px;
+      padding:5px 10px;
+      font-size:12px; font-weight:700;
+      letter-spacing:0.04em;
+      background:rgba(11,11,16,0.82);
+      border:1px solid var(--border);
+      color:var(--text);
+      z-index:7;
+      pointer-events:none;
+      display: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;
+    .slider-label.visible {{ display:block; }}
+    #labelBefore {{ left:12px; color:#d8ccff; border-color:rgba(124,58,237,0.4); }}
+    #labelAfter  {{ right:12px; color:#bbf7d0; border-color:rgba(34,197,94,0.4); }}
+
+    /* download buttons overlay */
+    .dl-bar {{
+      position:absolute; bottom:12px; right:12px;
+      display:none; gap:8px; z-index:8;
     }}
+    .dl-bar.visible {{ display:flex; }}
     .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;
+      height:34px; padding:0 10px;
+      border:1px solid var(--border);
+      background:rgba(17,18,24,0.88);
+      color:white; font-family:'Outfit',sans-serif;
+      font-size:12px; font-weight:700;
+      text-decoration:none; cursor:pointer;
+      display:flex; align-items:center; gap:6px;
+    }}
+
+    /* 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.55);
+      backdrop-filter:blur(8px);
+      -webkit-backdrop-filter:blur(8px);
+      z-index:10;
+    }}
+    .circle-loader {{
+      width:58px; height:58px;
+      border-radius:50% !important;
+      border:4px solid rgba(255,255,255,0.14);
+      border-top-color:#fff;
+      border-right-color:#c4b5fd;
+      animation:spin .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;
+    }}
+    @keyframes spin {{
+      from {{ transform:rotate(0deg); }}
+      to   {{ transform:rotate(360deg); }}
     }}
-    .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; }}
+    .result-meta {{
+      display:flex; gap:12px; flex-wrap:wrap;
+    }}
     .meta-card {{
-      border: 1px solid var(--border); background: var(--panel-2);
-      padding: 12px 14px; flex: 1 1 160px;
+      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;
+    .meta-label {{
+      font-size:12px; color:var(--muted);
+      letter-spacing:0.04em; margin-bottom:6px;
     }}
-    .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);
+    .meta-value {{
+      font-size:14px; font-weight:700;
+      color:var(--text); word-break:break-word;
+      line-height:1.45;
     }}
-    .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;
+      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;
+      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-body {{ padding:18px; }}
     .examples-grid {{
-      display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
+      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;
+      background:#0f1017;
+      border:1px solid var(--border);
+      cursor:pointer; overflow:hidden;
+    }}
+    .example-card:hover {{
+      border-color:#3a3d56; background:#121420;
     }}
-    .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);
+      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;
     }}
-    .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;
+      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);
+      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;
     }}
-    .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)); }}
+    /* ── responsive ── */
+    @media(max-width:1100px) {{
+      .main-grid {{ 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; }}
+    @media(max-width:640px) {{
+      .container {{ padding:16px; }}
+      .title {{ font-size:32px; }}
+      .advanced-grid, .actions {{ grid-template-columns:1fr; }}
+      .examples-grid {{ grid-template-columns:1fr; }}
+      .result-meta {{ flex-direction:column; }}
     }}
   </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 class="toast-wrap" id="toastWrap"></div>
+
+<div class="app-shell">
+  <div class="topbar">Flux.2 Klein 4B — Standard vs Small Decoder 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>
+        <h1 class="title">Decoder Comparator</h1>
+        <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>Inference</span>
           </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 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>image-to-image</span>
+          </div>
+          <div class="tag tag-orange">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="9"/>
+              <path d="M8 12h8"/><path d="M12 8v8"/>
+            </svg>
+            <span>side-by-side slider</span>
           </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="hero-actions">
+        <button class="ghost-btn" type="button"
+          onclick="document.getElementById('examplesSection').scrollIntoView({{behavior:'smooth'}})">
+          Examples
+        </button>
+      </div>
+    </section>
+
+    <!-- main grid -->
+    <div class="main-grid">
+
+      <!-- INPUT PANEL -->
+      <div class="panel">
+        <div class="panel-header">
+          <h2 class="panel-title">Input</h2>
+          <div class="panel-header-right">
+            <span class="status-pill" id="inputStatus">Form</span>
           </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>
+        <div class="panel-body">
+          <div class="form-stack">
+
+            <div class="form-group">
+              <div class="label">Images (optional)</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 one or more images
                     </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 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="form-group">
-                <label class="label" for="prompt">Prompt</label>
-                <textarea id="prompt" class="textarea"
-                  placeholder="e.g. Change the weather to stormy…"></textarea>
+              <div class="hint">
+                First image sets width &amp; height automatically (aspect-ratio preserved, max 1024 px).
               </div>
+            </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 class="form-group">
+              <label class="label" for="prompt">Prompt</label>
+              <textarea id="prompt" class="textarea"
+                placeholder="Describe what you want to generate or edit…"></textarea>
+            </div>
+
+            <!-- advanced -->
+            <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="checkbox-row">
-                    <input id="randomizeSeed" type="checkbox" checked />
-                    <label for="randomizeSeed">Randomize seed</label>
+                  <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 class="actions">
+              <button class="btn btn-primary" id="runBtn" type="button">Compare</button>
+              <button class="btn" id="clearBtn" type="button">Clear</button>
             </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><!-- /input panel -->
+
+      <!-- RESULT PANEL -->
+      <div class="panel">
+        <div class="panel-header">
+          <h2 class="panel-title">Result</h2>
+          <div class="panel-header-right">
+            <span style="font-size:13px;color:var(--muted);">drag the handle to compare</span>
+            <span class="status-pill" id="resultStatus">Idle</span>
           </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 class="panel-body">
+          <div class="result-shell">
+
+            <!-- ── image comparison slider ── -->
+            <div class="slider-wrap" id="sliderWrap">
+
+              <!-- empty placeholder -->
+              <div class="slider-empty" id="sliderEmpty">
+                <div class="slider-empty-box">
+                  <svg viewBox="0 0 24 24" width="30" height="30" 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>
-                    <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 style="font-size:14px;color:var(--muted);">
+                    Both results will appear here as a draggable comparison
                   </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>
+              <!-- after = small decoder (right / background) -->
+              <img id="imgAfter"  class="slider-img" alt="Small Decoder output"/>
+              <!-- before = standard decoder (left / foreground, clipped) -->
+              <img id="imgBefore" class="slider-img" alt="Standard Decoder output"/>
 
-                <!-- 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>
+              <!-- divider -->
+              <div class="slider-divider" id="sliderDivider"></div>
 
+              <!-- handle -->
+              <div class="slider-handle" id="sliderHandle">
+                <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
+                     stroke="white" stroke-width="2.2">
+                  <path d="M8 5l-5 7 5 7"/><path d="M16 5l5 7-5 7"/>
+                </svg>
               </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"/>
+              <!-- labels -->
+              <div class="slider-label" id="labelBefore">Standard Decoder</div>
+              <div class="slider-label" id="labelAfter">Small Decoder</div>
+
+              <!-- download bar -->
+              <div class="dl-bar" id="dlBar">
+                <a class="dl-btn" id="dlStandard" download title="Download standard">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
+                       stroke="currentColor" stroke-width="2.4">
+                    <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
+                  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"/>
+                <a class="dl-btn" id="dlSmall" download title="Download small">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
+                       stroke="currentColor" stroke-width="2.4">
+                    <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
+                  Small
                 </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>
+              <!-- loader -->
+              <div class="loader" id="loaderOverlay">
+                <div class="circle-loader"></div>
+                <span>Running both pipelines…</span>
               </div>
 
+            </div><!-- /slider-wrap -->
+
+            <!-- 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">slider position</div>
+                <div class="meta-value" id="sliderPct">50 %</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>
         </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);
+      </div><!-- /result panel -->
+
+    </div><!-- /main-grid -->
+
+    <!-- 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 ─────────────────────────────────────────────────────────────────── */
+const examples = {examples_json};
+
+/* ─── state ─────────────────────────────────────────────────────────────────── */
+const state = {{
+  files: [],
+  advancedOpen: false,
+  sliderPct: 50,
+  dragging: 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 resultStatus      = document.getElementById("resultStatus");
+const loaderOverlay     = document.getElementById("loaderOverlay");
+const toastWrap         = document.getElementById("toastWrap");
+
+/* slider elements */
+const sliderWrap        = document.getElementById("sliderWrap");
+const sliderEmpty       = document.getElementById("sliderEmpty");
+const imgBefore         = document.getElementById("imgBefore");   // standard
+const imgAfter          = document.getElementById("imgAfter");    // small
+const sliderDivider     = document.getElementById("sliderDivider");
+const sliderHandle      = document.getElementById("sliderHandle");
+const labelBefore       = document.getElementById("labelBefore");
+const labelAfter        = document.getElementById("labelAfter");
+const dlBar             = document.getElementById("dlBar");
+const dlStandard        = document.getElementById("dlStandard");
+const dlSmall           = document.getElementById("dlSmall");
+
+const usedSeedEl        = document.getElementById("usedSeed");
+const deviceValueEl     = document.getElementById("deviceValue");
+const sliderPctEl       = document.getElementById("sliderPct");
+
+/* ─── 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 ─────────────────────────────────────────────────────────────────── */
+function setResultStatus(active) {{
+  resultStatus.textContent = active ? "Active" : "Idle";
+  resultStatus.classList.toggle("active", active);
+}}
+
+function setLoading(loading) {{
+  loaderOverlay.style.display = loading ? "flex" : "none";
+  runBtn.disabled   = loading;
+  clearBtn.disabled = loading;
+  runBtn.style.opacity = clearBtn.style.opacity = loading ? "0.8" : "1";
+  runBtn.style.cursor  = clearBtn.style.cursor  = loading ? "not-allowed" : "pointer";
+  setResultStatus(loading);
+}}
+
+/* ─── advanced ───────────────────────────────────────────────────────────────── */
+function setAdvanced(open) {{
+  state.advancedOpen = open;
+  advancedBody.classList.toggle("open", open);
+  advancedIcon.textContent = open ? "−" : "+";
+}}
+advancedToggle.addEventListener("click", () => setAdvanced(!state.advancedOpen));
+
+/* ─── slider logic ───────────────────────────────────────────────────────────── */
+function applySlider(pct) {{
+  state.sliderPct = pct;
+  const p = pct.toFixed(1);
+
+  /* clip the "before" (standard) image so only left portion shows */
+  imgBefore.style.clipPath = `inset(0 ${{(100 - pct).toFixed(1)}}% 0 0)`;
+
+  /* position divider & handle */
+  sliderDivider.style.left = p + "%";
+  sliderHandle.style.left  = p + "%";
+
+  /* update meta */
+  sliderPctEl.textContent = Math.round(pct) + " %";
+}}
+
+function pctFromEvent(e) {{
+  const rect = sliderWrap.getBoundingClientRect();
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+  return Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
+}}
+
+sliderHandle.addEventListener("mousedown",  (e) => {{ state.dragging = true; e.preventDefault(); }});
+sliderHandle.addEventListener("touchstart", (e) => {{ state.dragging = true; }}, {{ passive: true }});
+
+window.addEventListener("mousemove", (e) => {{
+  if (!state.dragging) return;
+  applySlider(pctFromEvent(e));
+}});
+window.addEventListener("touchmove", (e) => {{
+  if (!state.dragging) return;
+  applySlider(pctFromEvent(e));
+}}, {{ passive: true }});
+
+window.addEventListener("mouseup",  () => {{ state.dragging = false; }});
+window.addEventListener("touchend", () => {{ state.dragging = false; }});
+
+/* also allow clicking anywhere on the wrap to jump */
+sliderWrap.addEventListener("click", (e) => {{
+  if (e.target === sliderHandle) return;
+  if (!imgBefore.classList.contains("visible")) return;
+  applySlider(pctFromEvent(e));
+}});
+
+function showSlider(standardUrl, smallUrl) {{
+  sliderEmpty.style.display = "none";
+
+  imgBefore.src = standardUrl;
+  imgAfter.src  = smallUrl;
+  imgBefore.classList.add("visible");
+  imgAfter.classList.add("visible");
+
+  sliderDivider.classList.add("visible");
+  sliderHandle.classList.add("visible");
+  labelBefore.classList.add("visible");
+  labelAfter.classList.add("visible");
+  dlBar.classList.add("visible");
+
+  applySlider(50);
+}}
+
+/* ─── 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);
+}});
+
+/* ─── clear ──────────────────────────────────────────────────────────────────── */
+function clearAll() {{
+  state.files = [];
+  renderPreviews();
+  promptEl.value = "";
+  seedEl.value = "0"; stepsEl.value = "4";
+  widthEl.value = "1024"; heightEl.value = "1024";
+  guidanceEl.value = "1.0";
+  randomizeSeedEl.checked = true;
+
+  imgBefore.classList.remove("visible"); imgBefore.removeAttribute("src");
+  imgAfter.classList.remove("visible");  imgAfter.removeAttribute("src");
+  sliderDivider.classList.remove("visible");
+  sliderHandle.classList.remove("visible");
+  labelBefore.classList.remove("visible");
+  labelAfter.classList.remove("visible");
+  dlBar.classList.remove("visible");
+  sliderEmpty.style.display = "flex";
+
+  usedSeedEl.textContent   = "—";
+  deviceValueEl.textContent = "{DEVICE_LABEL}";
+  sliderPctEl.textContent   = "50 %";
+
+  setResultStatus(false);
+  setAdvanced(false);
+  setLoading(false);
+}}
+clearBtn.addEventListener("click", clearAll);
+
+/* ─── examples ───────────────────────────────────────────────────────────────── */
+async function fileFromUrl(url, name = "example.jpg") {{
+  const res = await fetch(url);
+  if (!res.ok) throw new Error("Failed to fetch example image.");
+  const blob = await res.blob();
+  return new File([blob], name, {{ type: blob.type || "image/jpeg" }});
+}}
+
+function renderExamples() {{
+  const grid = document.getElementById("examplesGrid");
+  grid.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();
-      }});
-      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;
+        promptEl.value = item.prompt;
+        showToast("Example loaded.");
+      }} catch(err) {{
+        showToast(err.message || "Failed to load example.");
       }}
-      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);
+    grid.appendChild(card);
+  }});
+}}
+
+/* ─── 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.");
+
+    /* show slider */
+    showSlider(
+      data.standard_url + "?t=" + Date.now(),
+      data.small_url    + "?t=" + Date.now()
+    );
+
+    dlStandard.href = data.standard_url;
+    dlSmall.href    = data.small_url;
+
+    usedSeedEl.textContent    = String(data.seed);
+    deviceValueEl.textContent = (data.device || "{DEVICE_LABEL}").toLowerCase();
+
+  }} catch(err) {{
+    showToast(err.message || "An unexpected error occurred.");
+  }} finally {{
     setLoading(false);
-    renderExamples();
-    renderPreviews();
-  </script>
+  }}
+}}
+
+runBtn.addEventListener("click", submitCompare);
+promptEl.addEventListener("keydown", e => {{
+  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) submitCompare();
+}});
+
+/* ─── init ───────────────────────────────────────────────────────────────────── */
+setAdvanced(false);
+setResultStatus(false);
+renderExamples();
+renderPreviews();
+applySlider(50);
+</script>
 </body>
 </html>"""