update app

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
@@ -18,11 +18,14 @@ from PIL import Image
 from gradio import Server
 from fastapi import Request, UploadFile, File, Form
 from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
+
 from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
 
-HF_TOKEN = os.environ.get("HF_TOKEN")
+dtype = torch.bfloat16
+device = "cuda" if torch.cuda.is_available() else "cpu"
 
-app = Server()
+MAX_SEED = np.iinfo(np.int32).max
+MAX_IMAGE_SIZE = 1024
 
 BASE_DIR = Path(__file__).resolve().parent
 STATIC_DIR = BASE_DIR / "static"
@@ -32,24 +35,15 @@ 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
-
-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()
+    DEVICE_LABEL = str(device).lower()
 
 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()
 
@@ -57,7 +51,6 @@ 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)...")
@@ -65,7 +58,6 @@ 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()
 
@@ -76,38 +68,40 @@ pipe_lock_small = threading.Lock()
 def calc_dimensions(pil_img: Image.Image):
     iw, ih = pil_img.size
     aspect = iw / ih
-
     if aspect >= 1:
         new_width = 1024
         new_height = int(round(1024 / aspect))
     else:
         new_height = 1024
         new_width = int(round(1024 * aspect))
-
     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 parse_and_resize_images(input_images, width: int, height: int):
-    if not input_images:
+    if input_images is None:
         return None
-
     raw_list = []
-    for item in input_images:
-        try:
-            if isinstance(item, str):
-                raw_list.append(Image.open(item).convert("RGB"))
-            elif isinstance(item, Image.Image):
-                raw_list.append(item.convert("RGB"))
-            else:
-                raw_list.append(Image.open(item).convert("RGB"))
-        except Exception as e:
-            print(f"Skipping invalid image: {e}")
-
+    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
-
     return [img.resize((width, height), Image.LANCZOS) for img in raw_list]
 
 
@@ -118,6 +112,12 @@ def run_pipeline(pipe, lock, kwargs, seed):
     return result
 
 
+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
@@ -128,7 +128,7 @@ def save_image(img: Image.Image, prefix: str = "output") -> str:
 @spaces.GPU(duration=120)
 def infer(
     prompt,
-    input_images=None,
+    image_paths=None,
     seed=42,
     randomize_seed=False,
     width=1024,
@@ -140,27 +140,40 @@ def infer(
     if torch.cuda.is_available():
         torch.cuda.empty_cache()
 
-    if not prompt or not prompt.strip():
+    if not prompt or not str(prompt).strip():
         raise ValueError("Please enter a prompt.")
 
+    if isinstance(seed, str):
+        seed = int(seed)
+    if isinstance(randomize_seed, str):
+        randomize_seed = randomize_seed.lower() == "true"
+    if isinstance(width, str):
+        width = int(width)
+    if isinstance(height, str):
+        height = int(height)
+    if isinstance(num_inference_steps, str):
+        num_inference_steps = int(num_inference_steps)
+    if isinstance(guidance_scale, str):
+        guidance_scale = float(guidance_scale)
+
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
 
     image_list = None
-    if input_images and len(input_images) > 0:
-        first_img = input_images[0]
-        if isinstance(first_img, str):
-            first_pil = Image.open(first_img).convert("RGB")
-        elif isinstance(first_img, Image.Image):
-            first_pil = first_img.convert("RGB")
-        else:
-            first_pil = Image.open(first_img).convert("RGB")
-
-        width, height = calc_dimensions(first_pil)
-        image_list = parse_and_resize_images(input_images, width, height)
-    else:
-        width = max(256, min(MAX_IMAGE_SIZE, round(int(width) / 8) * 8))
-        height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
+    if image_paths:
+        pil_images = []
+        for p in image_paths:
+            try:
+                pil_images.append(Image.open(p).convert("RGB"))
+            except Exception as e:
+                print(f"Skipping image {p}: {e}")
+
+        if pil_images:
+            width, height = calc_dimensions(pil_images[0])
+            image_list = [img.resize((width, height), Image.LANCZOS) for img in pil_images]
+
+    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,
@@ -194,21 +207,21 @@ def get_example_items():
         "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."),
-                    }
-                )
+                items.append({
+                    "file": name,
+                    "url": f"/example-file/{name}",
+                    "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
+                })
     return items
 
 
+app = Server()
+
+
 @app.get("/example-file/{filename}")
 async def example_file(filename: str):
     path = EXAMPLES_DIR / filename
@@ -226,14 +239,14 @@ async def download_file(filename: str):
 
 
 @app.post("/api/compare")
-async def compare_api(
+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: str = Form("1.0"),
+    guidance_scale: str = Form("1.0"),
     images: Optional[List[UploadFile]] = File(None),
 ):
     temp_paths = []
@@ -250,29 +263,35 @@ async def compare_api(
                 temp_paths.append(str(temp_path))
                 image_paths.append(str(temp_path))
 
-        out_std, out_small, used_seed = infer(
-            images=image_paths if image_paths else None,
+        out_standard, out_small, used_seed = infer(
             prompt=prompt,
-            seed=int(seed),
-            randomize_seed=randomize_seed.lower() == "true",
-            width=int(width),
-            height=int(height),
-            num_inference_steps=int(steps),
-            guidance_scale=float(guidance),
+            image_paths=image_paths if image_paths else None,
+            seed=seed,
+            randomize_seed=randomize_seed,
+            width=width,
+            height=height,
+            num_inference_steps=steps,
+            guidance_scale=guidance_scale,
         )
 
-        std_filename = save_image(out_std, prefix="std")
+        std_filename = save_image(out_standard, prefix="standard")
         small_filename = save_image(out_small, prefix="small")
 
-        return JSONResponse(
-            {
-                "success": True,
-                "seed": used_seed,
-                "std_url": f"/download/{std_filename}",
-                "small_url": f"/download/{small_filename}",
-                "device": DEVICE_LABEL,
-            }
-        )
+        return JSONResponse({
+            "success": True,
+            "seed": used_seed,
+            "standard": {
+                "image_url": f"/download/{std_filename}",
+                "download_url": f"/download/{std_filename}",
+                "image_base64": image_to_base64(out_standard),
+            },
+            "small": {
+                "image_url": f"/download/{small_filename}",
+                "download_url": f"/download/{small_filename}",
+                "image_base64": image_to_base64(out_small),
+            },
+            "device": DEVICE_LABEL,
+        })
 
     except Exception as e:
         return JSONResponse({"success": False, "error": str(e)}, status_code=500)
@@ -290,497 +309,1492 @@ async def homepage(request: Request):
     examples = get_example_items()
     examples_json = json.dumps(examples)
 
-    return f"""
-<!DOCTYPE html>
+    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-4B VAE Decoder Comparison</title>
+  <title>FLUX.2 Klein — Decoder Comparator</title>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap');
 
     :root {{
-      --bg: #111111;
-      --panel: #1E1E1E;
-      --panel-2: #252525;
-      --panel-3: #2d2d2d;
-      --border: #333333;
-      --text: #ffffff;
-      --muted: #aaaaaa;
-      --ubuntu-orange: #E95420;
-      --ubuntu-orange-hover: #c74316;
-      --ubuntu-aubergine: #2C001E;
-      --ubuntu-aubergine-light: #44002e;
-      --input-bg: #151515;
-      --same-height: 800px;
-    }}
-
-    * {{ box-sizing: border-box; font-family: 'Ubuntu', sans-serif; }}
-    
+      --bg: #2c001e;
+      --surface: #380028;
+      --surface-2: #44003a;
+      --surface-3: #3d0032;
+      --border: #6e1a5a;
+      --border-soft: #531445;
+      --text: #fff0f5;
+      --text-dim: #d4a8c7;
+      --text-muted: #a06080;
+      --orange: #e95420;
+      --orange-hover: #c7431a;
+      --orange-soft: rgba(233,84,32,0.15);
+      --orange-border: rgba(233,84,32,0.4);
+      --purple: #77216f;
+      --purple-light: #ad7fa8;
+      --green: #4caf50;
+      --green-soft: rgba(76,175,80,0.15);
+      --input-bg: #240018;
+      --mono: 'Ubuntu Mono', monospace;
+      --sans: 'Ubuntu', sans-serif;
+    }}
+
+    *, *::before, *::after {{
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }}
+
     html, body {{
-      margin: 0; padding: 0;
-      background: var(--bg); color: var(--text);
-      min-height: 100%; overflow-x: hidden;
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--sans);
+      min-height: 100%;
+      overflow-x: hidden;
     }}
 
+    /* ── topbar ── */
     .topbar {{
-      height: 60px;
-      background: var(--ubuntu-aubergine);
-      border-bottom: 2px solid var(--ubuntu-orange);
-      display: flex; align-items: center; justify-content: center;
-      color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 0.02em;
+      height: 52px;
+      background: #1a0012;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      padding: 0 28px;
+      gap: 14px;
     }}
 
-    .container {{ max-width: 1440px; margin: 0 auto; padding: 28px; }}
+    .topbar-logo {{
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: 700;
+      font-size: 15px;
+      color: var(--text);
+      letter-spacing: 0.01em;
+    }}
+
+    .topbar-logo-dot {{
+      width: 10px;
+      height: 10px;
+      border-radius: 50% !important;
+      background: var(--orange);
+      flex-shrink: 0;
+    }}
+
+    .topbar-sep {{
+      flex: 1;
+    }}
+
+    .topbar-badge {{
+      font-size: 12px;
+      font-family: var(--mono);
+      color: var(--text-muted);
+      border: 1px solid var(--border-soft);
+      padding: 3px 10px;
+      border-radius: 2px !important;
+    }}
+
+    /* ── layout ── */
+    .container {{
+      max-width: 1320px;
+      margin: 0 auto;
+      padding: 32px 28px;
+    }}
+
+    /* ── hero ── */
+    .hero {{
+      margin-bottom: 32px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid var(--border-soft);
+    }}
+
+    .hero-eyebrow {{
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text-muted);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }}
+
+    .hero-title {{
+      font-size: 38px;
+      font-weight: 700;
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+      margin-bottom: 12px;
+    }}
+
+    .hero-title span {{
+      color: var(--orange);
+    }}
 
-    .hero {{ margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }}
-    .title {{ font-size: 38px; line-height: 1.2; font-weight: 700; margin: 0 0 10px 0; }}
-    .subtitle {{ color: var(--muted); font-size: 16px; font-weight: 300; margin: 0; }}
+    .hero-desc {{
+      font-size: 15px;
+      color: var(--text-dim);
+      line-height: 1.6;
+      max-width: 680px;
+    }}
+
+    .hero-tags {{
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 16px;
+    }}
+
+    .tag {{
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      height: 28px;
+      padding: 0 10px;
+      font-size: 12px;
+      font-weight: 500;
+      font-family: var(--mono);
+      border: 1px solid var(--border-soft);
+      color: var(--text-dim);
+      background: var(--surface-2);
+    }}
 
-    .layout {{
-      display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: stretch;
+    .tag-orange {{
+      color: #ffb399;
+      background: var(--orange-soft);
+      border-color: var(--orange-border);
     }}
 
+    /* ── main grid ── */
+    .main-grid {{
+      display: grid;
+      grid-template-columns: 400px 1fr;
+      gap: 20px;
+      align-items: start;
+    }}
+
+    /* ── panel ── */
     .panel {{
-      background: var(--panel); border: 1px solid var(--border);
-      min-height: var(--same-height); height: var(--same-height);
-      display: flex; flex-direction: column; overflow: hidden;
-      border-radius: 6px;
+      background: var(--surface);
+      border: 1px solid var(--border);
     }}
 
     .panel-header {{
-      height: 62px; min-height: 62px; border-bottom: 1px solid var(--border);
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0 20px; background: #1a1a1a;
+      height: 50px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      background: #1e0018;
     }}
 
-    .panel-title {{ font-size: 20px; font-weight: 500; margin: 0; color: var(--text); }}
-    
-    .status-pill {{
-      padding: 6px 12px; background: var(--panel-3); border: 1px solid var(--border);
-      color: var(--muted); font-size: 12px; font-weight: 500; border-radius: 20px;
-      transition: all 0.2s ease;
+    .panel-title {{
+      font-size: 13px;
+      font-weight: 700;
+      font-family: var(--mono);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--text-dim);
     }}
-    .status-pill.active {{
-      background: rgba(233, 84, 32, 0.15); border-color: var(--ubuntu-orange); color: var(--ubuntu-orange);
+
+    .panel-body {{
+      padding: 16px;
+    }}
+
+    /* ── form ── */
+    .form-stack {{
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }}
+
+    .form-group {{
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }}
+
+    .label {{
+      font-size: 11px;
+      font-weight: 700;
+      font-family: var(--mono);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-muted);
     }}
 
-    .panel-body {{ flex: 1; padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 20px; }}
+    .hint {{
+      font-size: 12px;
+      color: var(--text-muted);
+      line-height: 1.5;
+    }}
 
-    .label {{ font-size: 14px; font-weight: 500; color: #ddd; margin-bottom: 8px; display: block; }}
-    .hint {{ color: var(--muted); font-size: 12px; margin-top: 6px; }}
+    textarea, input, button, select {{
+      font-family: var(--sans);
+    }}
 
     .input, .textarea {{
-      width: 100%; background: var(--input-bg); border: 1px solid var(--border);
-      color: var(--text); outline: none; padding: 12px; font-size: 15px; border-radius: 4px;
+      width: 100%;
+      background: var(--input-bg);
+      border: 1px solid var(--border-soft);
+      color: var(--text);
+      outline: none;
+      padding: 10px 12px;
+      font-size: 14px;
+      transition: border-color 0.15s ease;
+    }}
+
+    .input:focus, .textarea:focus {{
+      border-color: var(--orange);
+    }}
+
+    .textarea {{
+      min-height: 90px;
+      resize: vertical;
+      line-height: 1.55;
+    }}
+
+    /* ── upload zone ── */
+    .upload-zone {{
+      background: var(--input-bg);
+      border: 1px dashed var(--border);
+      min-height: 140px;
+      cursor: pointer;
+      position: relative;
+      transition: border-color 0.15s ease, background 0.15s ease;
+    }}
+
+    .upload-zone.dragover {{
+      border-color: var(--orange);
+      background: var(--orange-soft);
     }}
-    .input:focus, .textarea:focus {{ border-color: var(--ubuntu-orange); background: #111; }}
-    .textarea {{ min-height: 120px; resize: vertical; }}
 
-    .upload-wrap {{
-      background: var(--input-bg); border: 2px dashed var(--border); border-radius: 6px;
-      min-height: 200px; display: flex; flex-direction: column; gap: 14px; padding: 14px; cursor: pointer;
-      transition: border-color 0.2s ease;
+    .upload-zone input[type="file"] {{
+      display: none;
     }}
-    .upload-wrap.dragover {{ border-color: var(--ubuntu-orange); background: rgba(233, 84, 32, 0.05); }}
-    .upload-wrap input[type="file"] {{ display: none; }}
-    
+
     .upload-placeholder {{
-      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
-      gap: 12px; color: var(--muted); background: transparent; border: none; cursor: pointer;
+      min-height: 138px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 20px;
+      text-align: center;
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      color: var(--text-dim);
+      width: 100%;
+    }}
+
+    .upload-icon-wrap {{
+      width: 48px;
+      height: 48px;
+      border: 1px solid var(--border);
+      background: var(--surface-2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--orange);
+      flex-shrink: 0;
+    }}
+
+    .upload-title {{
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--text);
+    }}
+
+    .upload-sub {{
+      font-size: 12px;
+      color: var(--text-muted);
+    }}
+
+    /* ── image preview grid ── */
+    .preview-strip {{
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 10px;
+    }}
+
+    .thumb {{
+      position: relative;
+      width: 72px;
+      height: 72px;
+      border: 1px solid var(--border);
+      overflow: hidden;
+      background: #0f0010;
+      flex-shrink: 0;
+    }}
+
+    .thumb img {{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
     }}
-    
-    .preview-grid {{ display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }}
-    .thumb {{ position: relative; aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; }}
-    .thumb img {{ width: 100%; height: 100%; object-fit: cover; display: block; }}
+
     .thumb-remove {{
-      position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
-      background: rgba(0,0,0,0.7); border: none; color: white; border-radius: 50%;
-      cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      width: 20px;
+      height: 20px;
+      border: 1px solid var(--border);
+      background: rgba(26,0,18,0.88);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      line-height: 1;
+    }}
+
+    .thumb-add {{
+      width: 72px;
+      height: 72px;
+      border: 1px dashed var(--border);
+      background: transparent;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 22px;
+      flex-shrink: 0;
+      transition: border-color 0.15s ease, color 0.15s ease;
+    }}
+
+    .thumb-add:hover {{
+      border-color: var(--orange);
+      color: var(--orange);
+    }}
+
+    /* ── advanced ── */
+    .advanced-wrap {{
+      border: 1px solid var(--border-soft);
+      background: #1e0018;
     }}
 
-    .advanced {{ border: 1px solid var(--border); background: var(--input-bg); border-radius: 4px; }}
     .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 16px; cursor: pointer; font-size: 14px; font-weight: 500;
+      width: 100%;
+      height: 42px;
+      border: none;
+      border-bottom: 1px solid transparent;
+      background: transparent;
+      color: var(--text-dim);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 12px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 700;
+      font-family: var(--mono);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      transition: background 0.15s ease;
+    }}
+
+    .advanced-toggle:hover {{
+      background: var(--surface-2);
+    }}
+
+    .advanced-toggle.open {{
+      border-bottom-color: var(--border-soft);
+    }}
+
+    .advanced-body {{
+      display: none;
+      padding: 14px;
+    }}
+
+    .advanced-body.open {{
+      display: block;
+    }}
+
+    .adv-grid {{
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }}
+
+    .range-wrap {{
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }}
+
+    .range-row {{
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }}
+
+    .range-row input[type="range"] {{
+      flex: 1;
+      accent-color: var(--orange);
+      cursor: pointer;
+    }}
+
+    .range-val {{
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text-dim);
+      min-width: 42px;
+      text-align: right;
+    }}
+
+    .checkbox-row {{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--text-dim);
+      margin-top: 10px;
+    }}
+
+    .checkbox-row input[type="checkbox"] {{
+      accent-color: var(--orange);
+      width: 14px;
+      height: 14px;
+    }}
+
+    /* ── actions ── */
+    .actions {{
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      margin-top: 4px;
     }}
-    .advanced-body {{ display: none; padding: 16px; }}
-    .advanced-body.open {{ display: block; }}
-    .advanced-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }}
 
-    .actions {{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }}
     .btn {{
-      height: 48px; border: none; background: var(--panel-2); color: var(--text);
-      cursor: pointer; font-size: 15px; font-weight: 500; border-radius: 4px; transition: background 0.2s;
+      height: 44px;
+      border: 1px solid var(--border);
+      background: var(--surface-2);
+      color: var(--text);
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 700;
+      font-family: var(--mono);
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      transition: background 0.15s ease, border-color 0.15s ease;
     }}
-    .btn:hover {{ background: var(--panel-3); }}
-    .btn-primary {{ background: var(--ubuntu-orange); color: white; }}
-    .btn-primary:hover {{ background: var(--ubuntu-orange-hover); }}
 
-    /* Result Stage & Slider */
-    .result-stage {{
-      position: relative; flex: 1; border: 1px solid var(--border); background: #0a0a0a;
-      border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;
+    .btn:hover {{
+      background: var(--surface-3);
+      border-color: var(--purple-light);
     }}
-    
-    .slider-container {{
-      position: relative; width: 100%; height: 100%; display: none;
+
+    .btn:disabled {{
+      opacity: 0.5;
+      cursor: not-allowed;
+    }}
+
+    .btn-primary {{
+      background: var(--orange);
+      border-color: var(--orange);
+      color: white;
+    }}
+
+    .btn-primary:hover:not(:disabled) {{
+      background: var(--orange-hover);
+      border-color: var(--orange-hover);
+    }}
+
+    /* ── result panel ── */
+    .result-panel {{
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }}
+
+    /* ── image slider ── */
+    .slider-wrap {{
+      position: relative;
+      width: 100%;
+      aspect-ratio: 4/3;
+      background: #0f0010;
+      overflow: hidden;
+      user-select: none;
+      min-height: 400px;
+    }}
+
+    .slider-wrap.has-images {{
+      aspect-ratio: unset;
+    }}
+
+    .slider-img {{
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }}
+
+    .slider-img-left {{
+      z-index: 1;
+      clip-path: inset(0 50% 0 0);
     }}
-    .slider-container img {{
-      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-      object-fit: contain; pointer-events: none;
+
+    .slider-img-right {{
+      z-index: 1;
     }}
-    
-    .resize-layer {{
-      position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden;
+
+    .slider-divider {{
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: 2px;
+      background: white;
+      z-index: 3;
+      transform: translateX(-50%);
+      pointer-events: none;
     }}
-    
+
     .slider-handle {{
-      position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
-      background: var(--ubuntu-orange); cursor: ew-resize; transform: translateX(-50%); z-index: 10;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      background: white;
+      border-radius: 50% !important;
+      z-index: 4;
+      cursor: ew-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1a0012;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
+    }}
+
+    .slider-label-left,
+    .slider-label-right {{
+      position: absolute;
+      top: 12px;
+      z-index: 5;
+      font-family: var(--mono);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      padding: 4px 10px;
+      pointer-events: none;
+    }}
+
+    .slider-label-left {{
+      left: 12px;
+      background: var(--orange);
+      color: white;
+    }}
+
+    .slider-label-right {{
+      right: 12px;
+      background: rgba(0,0,0,0.65);
+      color: var(--text);
+      border: 1px solid var(--border);
+    }}
+
+    .slider-empty {{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 14px;
+      color: var(--text-muted);
+      text-align: center;
+      height: 100%;
+      min-height: 400px;
+    }}
+
+    .empty-icon {{
+      width: 64px;
+      height: 64px;
+      border: 1px solid var(--border-soft);
+      background: var(--surface-2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--purple-light);
+    }}
+
+    /* ── loader ── */
+    .loader-overlay {{
+      position: absolute;
+      inset: 0;
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      background: rgba(26,0,18,0.7);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      z-index: 10;
+    }}
+
+    .spin-ring {{
+      width: 52px;
+      height: 52px;
+      border-radius: 50% !important;
+      border: 3px solid rgba(255,255,255,0.1);
+      border-top-color: var(--orange);
+      border-right-color: #ff8c66;
+      animation: spin 0.85s linear infinite;
+    }}
+
+    .loader-text {{
+      font-family: var(--mono);
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--text);
+      letter-spacing: 0.04em;
+    }}
+
+    @keyframes spin {{
+      from {{ transform: rotate(0deg); }}
+      to {{ transform: rotate(360deg); }}
+    }}
+
+    /* ── meta bar ── */
+    .meta-bar {{
+      border-top: 1px solid var(--border);
+      display: flex;
+      gap: 0;
+    }}
+
+    .meta-item {{
+      flex: 1;
+      padding: 10px 14px;
+      border-right: 1px solid var(--border);
+    }}
+
+    .meta-item:last-child {{
+      border-right: none;
+    }}
+
+    .meta-label {{
+      font-family: var(--mono);
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      margin-bottom: 3px;
+    }}
+
+    .meta-value {{
+      font-family: var(--mono);
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--text);
+    }}
+
+    /* ── download bar ── */
+    .download-bar {{
+      border-top: 1px solid var(--border);
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0;
+    }}
+
+    .dl-btn {{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 44px;
+      border: none;
+      border-right: 1px solid var(--border);
+      background: transparent;
+      color: var(--text-dim);
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      cursor: pointer;
+      text-decoration: none;
+      transition: background 0.15s ease, color 0.15s ease;
+    }}
+
+    .dl-btn:last-child {{
+      border-right: none;
+    }}
+
+    .dl-btn:hover {{
+      background: var(--surface-2);
+      color: var(--text);
+    }}
+
+    .dl-btn:not([href]) {{
+      opacity: 0.35;
+      pointer-events: none;
+    }}
+
+    /* ── status pill ── */
+    .status-pill {{
+      font-family: var(--mono);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      padding: 3px 8px;
+      border: 1px solid var(--border-soft);
+      color: var(--text-muted);
+      background: var(--surface-3);
+      transition: all 0.2s ease;
+    }}
+
+    .status-pill.running {{
+      background: var(--orange-soft);
+      border-color: var(--orange-border);
+      color: #ffb399;
+    }}
+
+    /* ── examples ── */
+    .examples-section {{
+      margin-top: 24px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+    }}
+
+    .examples-header {{
+      height: 50px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      background: #1e0018;
     }}
-    .slider-handle::after {{
-      content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-      background: var(--ubuntu-orange); color: white; border-radius: 50%; width: 36px; height: 36px;
-      display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 0 10px rgba(0,0,0,0.5);
+
+    .examples-title {{
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-muted);
     }}
 
-    .badge {{
-      position: absolute; bottom: 16px; padding: 6px 12px; background: rgba(0,0,0,0.7);
-      color: white; font-size: 13px; font-weight: 500; border-radius: 20px; z-index: 5;
-      border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(4px);
+    .examples-body {{
+      padding: 16px;
     }}
-    .badge-left {{ left: 16px; }}
-    .badge-right {{ right: 16px; }}
 
-    .result-empty {{
-      display: flex; flex-direction: column; align-items: center; justify-content: center;
-      gap: 12px; color: var(--muted); text-align: center;
+    .examples-grid {{
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 12px;
     }}
-    .loader {{
-      position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
-      flex-direction: column; gap: 16px; background: rgba(17,17,17,0.7); backdrop-filter: blur(5px); z-index: 20;
+
+    .example-card {{
+      background: var(--input-bg);
+      border: 1px solid var(--border-soft);
+      cursor: pointer;
+      overflow: hidden;
+      transition: border-color 0.15s ease, background 0.15s ease;
     }}
-    .spinner {{
-      width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.1);
-      border-top-color: var(--ubuntu-orange); border-radius: 50%; animation: spin 1s linear infinite;
+
+    .example-card:hover {{
+      border-color: var(--orange);
+      background: var(--surface-2);
     }}
 
-    .meta-bar {{ display: flex; gap: 16px; }}
-    .meta-item {{ flex: 1; padding: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; }}
-    .meta-label {{ font-size: 12px; color: var(--muted); margin-bottom: 4px; }}
-    .meta-value {{ font-size: 14px; font-weight: 500; color: var(--text); }}
+    .example-card img {{
+      width: 100%;
+      aspect-ratio: 1/1;
+      object-fit: cover;
+      display: block;
+      border-bottom: 1px solid var(--border-soft);
+    }}
 
-    .examples-panel {{ margin-top: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }}
-    .examples-header {{ padding: 16px 20px; font-size: 18px; font-weight: 500; background: #1a1a1a; border-bottom: 1px solid var(--border); }}
-    .examples-grid {{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px; }}
-    .example-card {{ background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; overflow: hidden; transition: border-color 0.2s; }}
-    .example-card:hover {{ border-color: var(--ubuntu-orange); }}
-    .example-card img {{ width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--border); }}
-    .example-body {{ padding: 12px; font-size: 13px; color: var(--muted); line-height: 1.4; }}
+    .example-card-body {{
+      padding: 10px;
+    }}
+
+    .example-card-body p {{
+      font-size: 12px;
+      color: var(--text-dim);
+      line-height: 1.5;
+      margin: 0;
+    }}
+
+    /* ── toast ── */
+    .toast-wrap {{
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }}
+
+    .toast {{
+      min-width: 240px;
+      max-width: 340px;
+      background: #1a0012;
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 10px 12px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 10px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+      font-size: 13px;
+    }}
+
+    .toast button {{
+      border: none;
+      background: transparent;
+      color: var(--text-muted);
+      font-size: 16px;
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+      flex-shrink: 0;
+    }}
+
+    .toast button:hover {{
+      color: var(--text);
+    }}
+
+    /* ── responsive ── */
+    @media (max-width: 1100px) {{
+      .main-grid {{
+        grid-template-columns: 360px 1fr;
+      }}
+    }}
 
-    @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
+    @media (max-width: 860px) {{
+      .main-grid {{
+        grid-template-columns: 1fr;
+      }}
+      .examples-grid {{
+        grid-template-columns: repeat(2, 1fr);
+      }}
+    }}
 
-    @media (max-width: 1024px) {{
-      .layout {{ grid-template-columns: 1fr; }}
-      .panel {{ height: auto; min-height: 500px; }}
-      .examples-grid {{ grid-template-columns: repeat(2, 1fr); }}
+    @media (max-width: 520px) {{
+      .container {{
+        padding: 16px;
+      }}
+      .hero-title {{
+        font-size: 28px;
+      }}
+      .examples-grid {{
+        grid-template-columns: 1fr;
+      }}
+      .adv-grid {{
+        grid-template-columns: 1fr;
+      }}
+      .actions {{
+        grid-template-columns: 1fr;
+      }}
     }}
   </style>
 </head>
 <body>
 
-  <div class="topbar">Flux.2 Klein 4B Comparison Suite</div>
+<div class="toast-wrap" id="toastWrap"></div>
 
-  <div class="container">
-    <section class="hero">
-      <h1 class="title">VAE Decoder Comparison</h1>
-      <p class="subtitle">Compare <strong>FLUX.2-klein-4B Standard VAE</strong> vs <strong>Small Decoder VAE</strong> seamlessly.</p>
-    </section>
+<!-- topbar -->
+<div class="topbar">
+  <div class="topbar-logo">
+    <div class="topbar-logo-dot"></div>
+    FLUX.2 Klein — Decoder Comparator
+  </div>
+  <div class="topbar-sep"></div>
+  <div class="topbar-badge">FLUX.2-klein-4B</div>
+</div>
+
+<div class="container">
+
+  <!-- hero -->
+  <section class="hero">
+    <div class="hero-eyebrow">black-forest-labs / flux.2-klein-4B / vae-comparison</div>
+    <h1 class="hero-title">VAE <span>Decoder</span> Comparator</h1>
+    <p class="hero-desc">
+      Compare <strong>FLUX.2-klein-4B</strong> with Standard VAE versus the
+      <strong>Small Decoder</strong> side-by-side using an interactive image slider.
+      Both pipelines run simultaneously on the same seed.
+    </p>
+    <div class="hero-tags">
+      <div class="tag tag-orange">4-step inference</div>
+      <div class="tag">image-to-image</div>
+      <div class="tag">parallel pipelines</div>
+      <div class="tag">vae comparison</div>
+    </div>
+  </section>
+
+  <!-- main grid -->
+  <div class="main-grid">
+
+    <!-- ── left: input panel ── -->
+    <div class="panel">
+      <div class="panel-header">
+        <span class="panel-title">Input</span>
+        <span class="status-pill" id="statusPill">Idle</span>
+      </div>
+      <div class="panel-body">
+        <div class="form-stack">
 
-    <section class="layout">
-      
-      <div class="panel">
-        <div class="panel-header">
-          <h2 class="panel-title">Inputs</h2>
-          <span class="status-pill">Ready</span>
-        </div>
-        <div class="panel-body">
-          
-          <div>
-            <span class="label">Input Images</span>
-            <div class="upload-wrap" id="uploadZone">
+          <!-- upload -->
+          <div class="form-group">
+            <div class="label">Images (optional)</div>
+            <div class="upload-zone" id="uploadZone">
               <input id="fileInput" type="file" accept="image/*" multiple />
-              <div class="upload-placeholder" id="uploadPlaceholder">
-                <svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                  <path d="M12 4v16m-8-8h16"></path>
-                </svg>
-                <span>Click or drag images to upload</span>
-              </div>
-              <div class="preview-grid" id="previewGrid" style="display:none;"></div>
+              <button class="upload-placeholder" id="uploadPlaceholder" type="button">
+                <div class="upload-icon-wrap">
+                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M12 4v10"/>
+                    <path d="M8.5 7.5 12 4l3.5 3.5"/>
+                    <rect x="3" y="15" width="18" height="5" rx="0"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="upload-title">Drop images here or click to browse</div>
+                  <div class="upload-sub">PNG, JPG, WEBP · multiple files supported</div>
+                </div>
+              </button>
+              <div class="preview-strip" id="previewStrip" style="display:none;"></div>
             </div>
-            <div class="hint">Upload one or more images. The first image determines standard dimensions.</div>
+            <div class="hint">First image aspect-ratio auto-sets width &amp; height.</div>
           </div>
 
-          <div>
-            <label class="label" for="prompt">Generation Prompt</label>
-            <textarea id="prompt" class="textarea" placeholder="A black cat holding a sign that says hello world..."></textarea>
+          <!-- prompt -->
+          <div class="form-group">
+            <label class="label" for="prompt">Prompt</label>
+            <textarea id="prompt" class="textarea" rows="3"
+              placeholder="e.g. Change the weather to stormy..."></textarea>
           </div>
 
-          <div class="advanced">
-            <button class="advanced-toggle" id="advancedToggle">
-              Advanced Configuration <span>+</span>
+          <!-- advanced -->
+          <div class="advanced-wrap">
+            <button class="advanced-toggle" id="advToggle" type="button">
+              <span>Advanced Settings</span>
+              <span id="advIcon">+</span>
             </button>
-            <div class="advanced-body" id="advancedBody">
-              <div class="advanced-grid">
-                <div>
-                  <label class="label">Width</label>
-                  <input id="width" class="input" type="number" step="8" value="1024" />
+            <div class="advanced-body" id="advBody">
+              <div class="adv-grid">
+
+                <div class="range-wrap form-group">
+                  <div class="label">Width</div>
+                  <div class="range-row">
+                    <input id="width" type="range" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024" />
+                    <span class="range-val" id="widthVal">1024</span>
+                  </div>
                 </div>
-                <div>
-                  <label class="label">Height</label>
-                  <input id="height" class="input" type="number" step="8" value="1024" />
-                </div>
-                <div>
-                  <label class="label">Inference Steps</label>
-                  <input id="steps" class="input" type="number" value="4" />
+
+                <div class="range-wrap form-group">
+                  <div class="label">Height</div>
+                  <div class="range-row">
+                    <input id="height" type="range" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024" />
+                    <span class="range-val" id="heightVal">1024</span>
+                  </div>
                 </div>
-                <div>
-                  <label class="label">Guidance Scale</label>
-                  <input id="guidance" class="input" type="number" step="0.1" value="1.0" />
+
+                <div class="range-wrap form-group">
+                  <div class="label">Steps</div>
+                  <div class="range-row">
+                    <input id="steps" type="range" min="1" max="20" step="1" value="4" />
+                    <span class="range-val" id="stepsVal">4</span>
+                  </div>
                 </div>
-                <div>
-                  <label class="label">Seed</label>
-                  <input id="seed" class="input" type="number" value="0" />
+
+                <div class="range-wrap form-group">
+                  <div class="label">Guidance</div>
+                  <div class="range-row">
+                    <input id="guidance" type="range" min="0" max="10" step="0.1" value="1.0" />
+                    <span class="range-val" id="guidanceVal">1.0</span>
+                  </div>
                 </div>
-                <div style="display: flex; align-items: center; gap: 8px; margin-top: 24px;">
-                  <input id="randomizeSeed" type="checkbox" checked />
-                  <label for="randomizeSeed" style="font-size: 14px; color: #ddd;">Randomize Seed</label>
+
+                <div class="range-wrap form-group" style="grid-column:1/-1;">
+                  <div class="label">Seed</div>
+                  <div class="range-row">
+                    <input id="seed" type="range" min="0" max="{MAX_SEED}" step="1" value="0" />
+                    <span class="range-val" id="seedVal">0</span>
+                  </div>
                 </div>
+
+              </div>
+              <div class="checkbox-row">
+                <input id="randomizeSeed" type="checkbox" checked />
+                <label for="randomizeSeed">Randomize seed on each run</label>
               </div>
             </div>
           </div>
 
+          <!-- actions -->
           <div class="actions">
-            <button class="btn" id="clearBtn">Clear</button>
-            <button class="btn btn-primary" id="runBtn">Generate Comparison</button>
+            <button class="btn btn-primary" id="runBtn" type="button">Compare</button>
+            <button class="btn" id="clearBtn" type="button">Clear</button>
           </div>
-        </div>
-      </div>
 
-      <div class="panel">
-        <div class="panel-header">
-          <h2 class="panel-title">Output</h2>
-          <span class="status-pill" id="resultStatus">Idle</span>
         </div>
-        <div class="panel-body" style="padding-bottom: 0;">
-          
-          <div class="result-stage" id="resultStage">
-            <div class="result-empty" id="outputEmpty">
-              <svg width="48" height="48" fill="none" stroke="#555" stroke-width="1.5" viewBox="0 0 24 24">
-                <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-                <circle cx="8.5" cy="8.5" r="1.5"></circle>
-                <path d="M21 15l-5-5L5 21"></path>
-              </svg>
-              <span>Images will appear here</span>
-            </div>
+      </div>
+    </div>
 
-            <div class="slider-container" id="sliderContainer">
-              <img id="imgSmall" alt="Small Decoder Output" />
-              <div class="badge badge-right">Small Decoder</div>
-              
-              <div class="resize-layer" id="resizeLayer">
-                <img id="imgStandard" alt="Standard VAE Output" />
-                <div class="badge badge-left">Standard VAE</div>
-              </div>
-              
-              <div class="slider-handle" id="sliderHandle"></div>
-            </div>
+    <!-- ── right: result panel ── -->
+    <div class="panel result-panel">
+      <div class="panel-header">
+        <span class="panel-title">Result — Image Slider</span>
+        <span class="status-pill" id="resultStatus">Waiting</span>
+      </div>
 
-            <div class="loader" id="loaderOverlay">
-              <div class="spinner"></div>
-              <span style="font-weight: 500;">Processing Pipelines Concurrently...</span>
-            </div>
+      <!-- slider -->
+      <div class="slider-wrap" id="sliderWrap">
+
+        <!-- empty state -->
+        <div class="slider-empty" id="sliderEmpty">
+          <div class="empty-icon">
+            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.6">
+              <rect x="3" y="5" width="18" height="14"/>
+              <path d="M8 12l2.5-2.5L13 12"/>
+              <path d="M13 12l2-2 2 2"/>
+            </svg>
           </div>
-
-          <div class="meta-bar">
-            <div class="meta-item">
-              <div class="meta-label">Seed Used</div>
-              <div class="meta-value" id="usedSeed">-</div>
-            </div>
-            <div class="meta-item">
-              <div class="meta-label">Hardware</div>
-              <div class="meta-value" id="deviceValue">{DEVICE_LABEL}</div>
-            </div>
+          <div>
+            <div style="font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px;">No output yet</div>
+            <div style="font-size:13px; color:var(--text-muted);">Run a comparison to see results here</div>
           </div>
-          <br/>
         </div>
+
+        <!-- right image (small decoder) -->
+        <img id="imgRight" class="slider-img slider-img-right" alt="Small Decoder" style="display:none;" />
+        <!-- left image (standard) -->
+        <img id="imgLeft" class="slider-img slider-img-left" alt="Standard Decoder" style="display:none;" />
+
+        <!-- labels -->
+        <div class="slider-label-left" id="lblLeft" style="display:none;">Standard</div>
+        <div class="slider-label-right" id="lblRight" style="display:none;">Small Decoder</div>
+
+        <!-- divider + handle -->
+        <div class="slider-divider" id="sliderDivider" style="display:none;"></div>
+        <div class="slider-handle" id="sliderHandle" style="display:none;">
+          <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M7 5l-4 5 4 5"/>
+            <path d="M13 5l4 5-4 5"/>
+          </svg>
+        </div>
+
+        <!-- loader -->
+        <div class="loader-overlay" id="loaderOverlay">
+          <div class="spin-ring"></div>
+          <div class="loader-text">Running both pipelines…</div>
+        </div>
+
       </div>
-    </section>
 
-    <section class="examples-panel">
-      <div class="examples-header">Example Prompts & Reference Images</div>
-      <div class="examples-grid" id="examplesGrid"></div>
-    </section>
-  </div>
+      <!-- meta bar -->
+      <div class="meta-bar">
+        <div class="meta-item">
+          <div class="meta-label">Seed Used</div>
+          <div class="meta-value" id="metaSeed">—</div>
+        </div>
+        <div class="meta-item">
+          <div class="meta-label">Device</div>
+          <div class="meta-value" id="metaDevice">{DEVICE_LABEL}</div>
+        </div>
+        <div class="meta-item">
+          <div class="meta-label">Resolution</div>
+          <div class="meta-value" id="metaRes">—</div>
+        </div>
+      </div>
 
-  <script>
-    const examples = {examples_json};
-    const state = {{ files: [] }};
-
-    // UI Elements
-    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 advancedToggle = document.getElementById("advancedToggle");
-    const advancedBody = document.getElementById("advancedBody");
-    
-    const runBtn = document.getElementById("runBtn");
-    const clearBtn = document.getElementById("clearBtn");
-    
-    const resultStatus = document.getElementById("resultStatus");
-    const outputEmpty = document.getElementById("outputEmpty");
-    const sliderContainer = document.getElementById("sliderContainer");
-    const imgStandard = document.getElementById("imgStandard");
-    const imgSmall = document.getElementById("imgSmall");
-    const loaderOverlay = document.getElementById("loaderOverlay");
-
-    // Toggle Advanced
-    advancedToggle.addEventListener("click", () => {{
-      advancedBody.classList.toggle("open");
-      advancedToggle.innerHTML = `Advanced Configuration <span>${{advancedBody.classList.contains('open') ? '−' : '+'}}</span>`;
-    }});
+      <!-- download bar -->
+      <div class="download-bar">
+        <a class="dl-btn" id="dlStandard">
+          <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M10 3v10"/><path d="M6 9l4 4 4-4"/><path d="M3 17h14"/>
+          </svg>
+          Standard VAE
+        </a>
+        <a class="dl-btn" id="dlSmall">
+          <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M10 3v10"/><path d="M6 9l4 4 4-4"/><path d="M3 17h14"/>
+          </svg>
+          Small Decoder
+        </a>
+      </div>
 
-    // Upload Logic
-    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((file, idx) => {{
-        const div = document.createElement("div"); div.className = "thumb";
-        const img = document.createElement("img"); img.src = URL.createObjectURL(file);
-        const btn = document.createElement("button"); btn.className = "thumb-remove"; btn.innerHTML = "×";
-        btn.onclick = (e) => {{ e.stopPropagation(); state.files.splice(idx, 1); renderPreviews(); }};
-        div.append(img, btn); previewGrid.appendChild(div);
-      }});
-    }}
+    </div>
+  </div>
 
-    uploadZone.addEventListener("click", (e) => {{ if(e.target === uploadZone || e.target.closest('.upload-placeholder')) fileInput.click(); }});
-    fileInput.addEventListener("change", (e) => {{
-      const valid = Array.from(e.target.files).filter(f => f.type.startsWith("image/"));
-      state.files.push(...valid); renderPreviews(); fileInput.value = "";
+  <!-- examples -->
+  <section class="examples-section">
+    <div class="examples-header">
+      <span class="examples-title">Examples</span>
+    </div>
+    <div class="examples-body">
+      <div class="examples-grid" id="examplesGrid"></div>
+    </div>
+  </section>
+
+</div><!-- /container -->
+
+<script>
+  const examples = {examples_json};
+
+  /* ── state ── */
+  const state = {{
+    files: [],
+    advOpen: false,
+    sliderPct: 50,
+    dragging: false,
+    hasResult: false,
+  }};
+
+  /* ── element refs ── */
+  const uploadZone      = document.getElementById("uploadZone");
+  const fileInput       = document.getElementById("fileInput");
+  const uploadPlaceholder = document.getElementById("uploadPlaceholder");
+  const previewStrip    = document.getElementById("previewStrip");
+
+  const promptEl        = document.getElementById("prompt");
+  const seedEl          = document.getElementById("seed");
+  const seedValEl       = document.getElementById("seedVal");
+  const widthEl         = document.getElementById("width");
+  const widthValEl      = document.getElementById("widthVal");
+  const heightEl        = document.getElementById("height");
+  const heightValEl     = document.getElementById("heightVal");
+  const stepsEl         = document.getElementById("steps");
+  const stepsValEl      = document.getElementById("stepsVal");
+  const guidanceEl      = document.getElementById("guidance");
+  const guidanceValEl   = document.getElementById("guidanceVal");
+  const randomizeSeedEl = document.getElementById("randomizeSeed");
+
+  const advToggle       = document.getElementById("advToggle");
+  const advBody         = document.getElementById("advBody");
+  const advIcon         = document.getElementById("advIcon");
+
+  const runBtn          = document.getElementById("runBtn");
+  const clearBtn        = document.getElementById("clearBtn");
+
+  const statusPill      = document.getElementById("statusPill");
+  const resultStatus    = document.getElementById("resultStatus");
+
+  const sliderWrap      = document.getElementById("sliderWrap");
+  const sliderEmpty     = document.getElementById("sliderEmpty");
+  const imgLeft         = document.getElementById("imgLeft");
+  const imgRight        = document.getElementById("imgRight");
+  const lblLeft         = document.getElementById("lblLeft");
+  const lblRight        = document.getElementById("lblRight");
+  const sliderDivider   = document.getElementById("sliderDivider");
+  const sliderHandle    = document.getElementById("sliderHandle");
+  const loaderOverlay   = document.getElementById("loaderOverlay");
+
+  const metaSeed        = document.getElementById("metaSeed");
+  const metaDevice      = document.getElementById("metaDevice");
+  const metaRes         = document.getElementById("metaRes");
+  const dlStandard      = document.getElementById("dlStandard");
+  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.onclick = () => t.remove();
+    t.appendChild(txt);
+    t.appendChild(btn);
+    toastWrap.appendChild(t);
+    setTimeout(() => t.remove(), 4500);
+  }}
+
+  /* ── range bindings ── */
+  function bindRange(input, display, isFloat) {{
+    input.addEventListener("input", () => {{
+      display.textContent = isFloat
+        ? parseFloat(input.value).toFixed(1)
+        : input.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) {{
-        const valid = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith("image/"));
-        state.files.push(...valid); renderPreviews();
-      }}
+  }}
+  bindRange(widthEl,    widthValEl,    false);
+  bindRange(heightEl,   heightValEl,   false);
+  bindRange(stepsEl,    stepsValEl,    false);
+  bindRange(guidanceEl, guidanceValEl, true);
+  bindRange(seedEl,     seedValEl,     false);
+
+  /* ── advanced panel ── */
+  advToggle.addEventListener("click", () => {{
+    state.advOpen = !state.advOpen;
+    advBody.classList.toggle("open", state.advOpen);
+    advToggle.classList.toggle("open", state.advOpen);
+    advIcon.textContent = state.advOpen ? "−" : "+";
+  }});
+
+  /* ── 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.title = "Remove";
+    rm.addEventListener("click", (e) => {{
+      e.stopPropagation();
+      state.files.splice(index, 1);
+      renderPreviews();
     }});
+    wrap.appendChild(img);
+    wrap.appendChild(rm);
+    return wrap;
+  }}
+
+  function renderPreviews() {{
+    previewStrip.innerHTML = "";
+    if (!state.files.length) {{
+      uploadPlaceholder.style.display = "flex";
+      previewStrip.style.display = "none";
+      return;
+    }}
+    uploadPlaceholder.style.display = "none";
+    previewStrip.style.display = "flex";
+    state.files.forEach((f, i) => previewStrip.appendChild(createThumb(f, i)));
+
+    /* add-more button */
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "thumb-add";
+    addBtn.title = "Add more images";
+    addBtn.innerHTML = "+";
+    addBtn.onclick = () => fileInput.click();
+    previewStrip.appendChild(addBtn);
+  }}
+
+  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);
+  }});
+
+  /* ── image comparison slider ── */
+  function setSliderPct(pct) {{
+    state.sliderPct = Math.max(2, Math.min(98, pct));
+    imgLeft.style.clipPath = `inset(0 ${{100 - state.sliderPct}}% 0 0)`;
+    sliderDivider.style.left = state.sliderPct + "%";
+    sliderHandle.style.left  = state.sliderPct + "%";
+  }}
+
+  function pctFromEvent(e) {{
+    const rect = sliderWrap.getBoundingClientRect();
+    const x    = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+    return (x / rect.width) * 100;
+  }}
+
+  sliderHandle.addEventListener("mousedown",  () => state.dragging = true);
+  sliderHandle.addEventListener("touchstart", () => state.dragging = true, {{passive: true}});
+  window.addEventListener("mouseup",   () => state.dragging = false);
+  window.addEventListener("touchend",  () => state.dragging = false);
+  window.addEventListener("mousemove", (e) => {{ if (state.dragging) setSliderPct(pctFromEvent(e)); }});
+  window.addEventListener("touchmove", (e) => {{ if (state.dragging) setSliderPct(pctFromEvent(e)); }}, {{passive: true}});
+  sliderWrap.addEventListener("click", (e) => {{
+    if (!state.hasResult) return;
+    if (e.target !== sliderHandle) setSliderPct(pctFromEvent(e));
+  }});
+
+  /* ── loading state ── */
+  function setLoading(loading) {{
+    loaderOverlay.style.display  = loading ? "flex" : "none";
+    runBtn.disabled  = loading;
+    clearBtn.disabled = loading;
+    runBtn.style.opacity  = loading ? "0.65" : "1";
+    clearBtn.style.opacity = loading ? "0.65" : "1";
+
+    statusPill.textContent = loading ? "Running" : "Idle";
+    statusPill.classList.toggle("running", loading);
+    resultStatus.textContent = loading ? "Processing" : (state.hasResult ? "Done" : "Waiting");
+    resultStatus.classList.toggle("running", loading);
+  }}
+
+  /* ── show result images ── */
+  function showResults(stdUrl, smallUrl, seed, device, w, h) {{
+    state.hasResult = true;
+
+    imgLeft.src  = stdUrl   + "?t=" + Date.now();
+    imgRight.src = smallUrl + "?t=" + Date.now();
+
+    imgLeft.style.display  = "block";
+    imgRight.style.display = "block";
+    sliderEmpty.style.display = "none";
+    lblLeft.style.display  = "block";
+    lblRight.style.display = "block";
+    sliderDivider.style.display = "block";
+    sliderHandle.style.display  = "flex";
+
+    setSliderPct(50);
+
+    metaSeed.textContent   = String(seed);
+    metaDevice.textContent = (device || "{DEVICE_LABEL}").toLowerCase();
+    metaRes.textContent    = w && h ? `${{w}} × ${{h}}` : "—";
+
+    dlStandard.href     = stdUrl;
+    dlStandard.download = "standard_vae.png";
+    dlSmall.href        = smallUrl;
+    dlSmall.download    = "small_decoder.png";
+  }}
+
+  /* ── clear ── */
+  function clearAll() {{
+    state.files = [];
+    state.hasResult = false;
+    renderPreviews();
+    promptEl.value = "";
+    widthEl.value = "1024"; widthValEl.textContent = "1024";
+    heightEl.value = "1024"; heightValEl.textContent = "1024";
+    stepsEl.value = "4"; stepsValEl.textContent = "4";
+    guidanceEl.value = "1.0"; guidanceValEl.textContent = "1.0";
+    seedEl.value = "0"; seedValEl.textContent = "0";
+    randomizeSeedEl.checked = true;
+
+    imgLeft.style.display  = "none";
+    imgRight.style.display = "none";
+    imgLeft.removeAttribute("src");
+    imgRight.removeAttribute("src");
+    sliderEmpty.style.display = "flex";
+    lblLeft.style.display     = "none";
+    lblRight.style.display    = "none";
+    sliderDivider.style.display = "none";
+    sliderHandle.style.display  = "none";
+
+    metaSeed.textContent   = "—";
+    metaDevice.textContent = "{DEVICE_LABEL}";
+    metaRes.textContent    = "—";
+    dlStandard.removeAttribute("href");
+    dlSmall.removeAttribute("href");
+
+    setLoading(false);
+  }}
+
+  clearBtn.addEventListener("click", clearAll);
+
+  /* ── submit ── */
+  async function submitCompare() {{
+    const prompt = promptEl.value.trim();
+    if (!prompt) {{ showToast("Please enter a prompt."); return; }}
+
+    const formData = new FormData();
+    formData.append("prompt",          prompt);
+    formData.append("seed",            seedEl.value || "0");
+    formData.append("randomize_seed",  String(randomizeSeedEl.checked));
+    formData.append("width",           widthEl.value || "1024");
+    formData.append("height",          heightEl.value || "1024");
+    formData.append("steps",           stepsEl.value || "4");
+    formData.append("guidance_scale",  guidanceEl.value || "1.0");
+    state.files.forEach(f => formData.append("images", f));
+
+    setLoading(true);
+    try {{
+      const res  = await fetch("/api/compare", {{ method: "POST", body: formData }});
+      const data = await res.json();
+      if (!res.ok || !data.success) throw new Error(data.error || "Processing failed.");
+
+      showResults(
+        data.standard.image_url,
+        data.small.image_url,
+        data.seed,
+        data.device,
+        parseInt(widthEl.value),
+        parseInt(heightEl.value),
+      );
+    }} catch (err) {{
+      showToast(err.message || "An unexpected error occurred.");
+    }} finally {{
+      setLoading(false);
+    }}
+  }}
+
+  runBtn.addEventListener("click", submitCompare);
+  promptEl.addEventListener("keydown", (e) => {{
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) submitCompare();
+  }});
+
+  /* ── examples ── */
+  async function fileFromUrl(url, filename) {{
+    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], 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;
+      img.loading = "lazy";
+
+      const body = document.createElement("div");
+      body.className = "example-card-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.");
+        }} catch (err) {{
+          showToast(err.message || "Failed to load example.");
+        }}
+      }});
 
-    // Examples
-    async function loadExample(url, prompt) {{
-      try {{
-        const res = await fetch(url);
-        const blob = await res.blob();
-        state.files = [new File([blob], "example.jpg", {{ type: blob.type }})];
-        renderPreviews();
-        promptEl.value = prompt;
-      }} catch(err) {{ alert("Failed to load example."); }}
-    }}
-
-    const examplesGrid = document.getElementById("examplesGrid");
-    examples.forEach(ex => {{
-      const card = document.createElement("div"); card.className = "example-card";
-      card.innerHTML = `<img src="${{ex.url}}" alt="Example" /><div class="example-body">${{ex.prompt}}</div>`;
-      card.onclick = () => loadExample(ex.url, ex.prompt);
       examplesGrid.appendChild(card);
     }});
+  }}
 
-    // Clear
-    clearBtn.onclick = () => {{
-      state.files = []; renderPreviews();
-      promptEl.value = ""; sliderContainer.style.display = "none";
-      outputEmpty.style.display = "flex"; resultStatus.innerText = "Idle";
-      resultStatus.classList.remove("active");
-    }};
-
-    // Slider Logic
-    const resizeLayer = document.getElementById("resizeLayer");
-    const sliderHandle = document.getElementById("sliderHandle");
-    let isDragging = false;
-    
-    sliderHandle.addEventListener("mousedown", () => isDragging = true);
-    document.addEventListener("mouseup", () => isDragging = false);
-    document.addEventListener("mousemove", (e) => {{
-      if (!isDragging) return;
-      const rect = sliderContainer.getBoundingClientRect();
-      let x = e.clientX - rect.left;
-      let percent = Math.max(0, Math.min(100, (x / rect.width) * 100));
-      resizeLayer.style.width = percent + "%";
-      sliderHandle.style.left = percent + "%";
-    }});
-
-    // Form Submission
-    runBtn.onclick = async () => {{
-      if (!promptEl.value.trim()) return alert("Please enter a prompt.");
-      
-      const formData = new FormData();
-      formData.append("prompt", promptEl.value);
-      formData.append("width", document.getElementById("width").value);
-      formData.append("height", document.getElementById("height").value);
-      formData.append("steps", document.getElementById("steps").value);
-      formData.append("guidance", document.getElementById("guidance").value);
-      formData.append("seed", document.getElementById("seed").value);
-      formData.append("randomize_seed", document.getElementById("randomizeSeed").checked);
-      state.files.forEach(f => formData.append("images", f));
-
-      loaderOverlay.style.display = "flex";
-      resultStatus.innerText = "Processing..."; resultStatus.classList.add("active");
-      runBtn.disabled = true;
-
-      try {{
-        const res = await fetch("/api/compare", {{ method: "POST", body: formData }});
-        const data = await res.json();
-        
-        if (!data.success) throw new Error(data.error);
-
-        // Reset Slider Position
-        resizeLayer.style.width = "50%";
-        sliderHandle.style.left = "50%";
-
-        imgStandard.src = data.std_url + "?t=" + Date.now();
-        imgSmall.src = data.small_url + "?t=" + Date.now();
-        
-        outputEmpty.style.display = "none";
-        sliderContainer.style.display = "block";
-        document.getElementById("usedSeed").innerText = data.seed;
-        resultStatus.innerText = "Completed";
-        
-      }} catch (err) {{
-        alert("Error: " + err.message);
-        resultStatus.innerText = "Error";
-      }} finally {{
-        loaderOverlay.style.display = "none";
-        runBtn.disabled = false;
-        setTimeout(() => resultStatus.classList.remove("active"), 2000);
-      }}
-    }};
-  </script>
+  /* ── init ── */
+  renderPreviews();
+  renderExamples();
+  setSliderPct(50);
+</script>
 </body>
-</html>
-"""
+</html>"""
+
 
 app.launch()