Update app.py

app.py

@@ -1,15 +1,15 @@
-
 import os
-import gc
 import io
+import gc
 import uuid
 import json
 import base64
 import random
 import threading
 import concurrent.futures
+import subprocess
 from pathlib import Path
-from typing import List, Optional, Iterable
+from typing import List, Optional
 
 import spaces
 import numpy as np
@@ -19,9 +19,9 @@ 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
 
+# --- App Configuration & Directories ---
 app = Server()
 
 BASE_DIR = Path(__file__).resolve().parent
@@ -35,78 +35,70 @@ OUTPUT_DIR.mkdir(exist_ok=True)
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
-dtype = torch.bfloat16
-DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+dtype  = torch.bfloat16
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
 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 = DEVICE
+    DEVICE_LABEL = str(device).lower()
 
+# --- Model Loading ---
 print("Loading 4B Distilled model (Standard VAE)...")
 pipe_standard = Flux2KleinPipeline.from_pretrained(
     "black-forest-labs/FLUX.2-klein-4B",
     torch_dtype=dtype,
-)
+).to(device)
 pipe_standard.enable_model_cpu_offload()
 
 print("Loading Small Decoder VAE...")
 vae_small = AutoencoderKLFlux2.from_pretrained(
     "black-forest-labs/FLUX.2-small-decoder",
     torch_dtype=dtype,
-)
+).to(device)
 
 print("Loading 4B Distilled model (Small Decoder VAE)...")
 pipe_small_decoder = Flux2KleinPipeline.from_pretrained(
     "black-forest-labs/FLUX.2-klein-4B",
     vae=vae_small,
     torch_dtype=dtype,
-)
+).to(device)
 pipe_small_decoder.enable_model_cpu_offload()
 
 pipe_lock_standard = threading.Lock()
-pipe_lock_small = threading.Lock()
-
-
-def image_to_base64(img: Image.Image) -> str:
-    buf = io.BytesIO()
-    img.save(buf, format="PNG")
-    return base64.b64encode(buf.getvalue()).decode("utf-8")
-
-
-def save_image(img: Image.Image, prefix: str = "output") -> str:
-    filename = f"{prefix}_{uuid.uuid4().hex}.png"
-    path = OUTPUT_DIR / filename
-    img.save(path, format="PNG")
-    return filename
-
+pipe_lock_small    = threading.Lock()
 
+# --- Utility Functions ---
 def calc_dimensions(pil_img: Image.Image):
     iw, ih = pil_img.size
     aspect = iw / ih
+
     if aspect >= 1:
-        new_width = 1024
+        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_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(image_paths: list, width: int, height: int):
-    raw_list = []
+def parse_and_resize_images(image_paths: List[str], width: int, height: int):
+    if not image_paths:
+        return None
+    
+    resized = []
     for path in image_paths:
         try:
             img = Image.open(path).convert("RGB")
-            raw_list.append(img)
+            resized.append(img.resize((width, height), Image.LANCZOS))
         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]
-
+            
+    return resized if resized else None
 
 def run_pipeline(pipe, lock, kwargs, seed):
     with lock:
@@ -114,80 +106,67 @@ def run_pipeline(pipe, lock, kwargs, seed):
         result = pipe(**kwargs, generator=gen).images[0]
     return result
 
-
-def get_example_items():
-    example_prompts = {
-        "1.jpg": "Change the weather to stormy.",
-        "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
-        "3.jpg": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
-        "4.jpg": "Make the texture high-resolution.",
-    }
-    items = []
-    if EXAMPLES_DIR.exists():
-        for name in sorted(os.listdir(EXAMPLES_DIR)):
-            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
-                items.append({
-                    "file": name,
-                    "url": f"/example-file/{name}",
-                    "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
-                })
-    return items
-
-
-@app.get("/example-file/{filename}")
-async def example_file(filename: str):
-    path = EXAMPLES_DIR / filename
-    if not path.exists():
-        return JSONResponse({"error": "Example not found"}, status_code=404)
-    return FileResponse(path)
-
-
-@app.get("/download/{filename}")
-async def download_file(filename: str):
+def save_image(img: Image.Image, prefix: str = "output") -> str:
+    filename = f"{prefix}_{uuid.uuid4().hex}.png"
     path = OUTPUT_DIR / filename
-    if not path.exists():
-        return JSONResponse({"error": "File not found"}, status_code=404)
-    return FileResponse(path, filename=filename, media_type="image/png")
-
+    img.save(path, format="PNG")
+    return filename
 
+# --- Inference Function ---
 @spaces.GPU(duration=120)
-def run_inference(image_paths, prompt, seed, randomize_seed, width, height, steps, guidance_scale):
+def infer(
+    prompt: str,
+    image_paths: List[str] = None,
+    seed: int = 42,
+    randomize_seed: bool = False,
+    width: int = 1024,
+    height: int = 1024,
+    num_inference_steps: int = 4,
+    guidance_scale: float = 1.0,
+):
     gc.collect()
     if torch.cuda.is_available():
         torch.cuda.empty_cache()
 
+    if not prompt or not prompt.strip():
+        raise ValueError("Please enter a prompt.")
+
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
 
     image_list = None
-    if image_paths:
+    if image_paths and len(image_paths) > 0:
         try:
             first_pil = Image.open(image_paths[0]).convert("RGB")
             width, height = calc_dimensions(first_pil)
-        except Exception:
-            pass
-        image_list = parse_and_resize_images(image_paths, width, height)
+            image_list = parse_and_resize_images(image_paths, width, height)
+        except Exception as e:
+            print(f"Error processing upload: {e}")
 
-    width = max(256, min(MAX_IMAGE_SIZE, round(int(width) / 8) * 8))
+    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,
         height=height,
         width=width,
-        num_inference_steps=steps,
+        num_inference_steps=num_inference_steps,
         guidance_scale=guidance_scale,
     )
     if image_list is not None:
         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_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)
+        
+        concurrent.futures.wait(
+            [future_std, future_small],
+            return_when=concurrent.futures.ALL_COMPLETED,
+        )
 
     out_standard = future_std.result()
-    out_small = future_small.result()
+    out_small    = future_small.result()
 
     gc.collect()
     if torch.cuda.is_available():
@@ -196,6 +175,42 @@ def run_inference(image_paths, prompt, seed, randomize_seed, width, height, step
     return out_standard, out_small, seed
 
 
+# --- FastAPI Endpoints ---
+def get_example_items():
+    example_prompts = {
+        "1.jpg": "Change the weather to stormy.",
+        "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
+        "3.jpg": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
+        "4.jpg": "Make the texture high-resolution.",
+    }
+
+    items = []
+    if EXAMPLES_DIR.exists():
+        for name in sorted(os.listdir(EXAMPLES_DIR)):
+            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
+                items.append(
+                    {
+                        "file": name,
+                        "url": f"/example-file/{name}",
+                        "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
+                    }
+                )
+    return items
+
+@app.get("/example-file/{filename}")
+async def example_file(filename: str):
+    path = EXAMPLES_DIR / filename
+    if not path.exists():
+        return JSONResponse({"error": "Example not found"}, status_code=404)
+    return FileResponse(path)
+
+@app.get("/download/{filename}")
+async def download_file(filename: str):
+    path = OUTPUT_DIR / filename
+    if not path.exists():
+        return JSONResponse({"error": "File not found"}, status_code=404)
+    return FileResponse(path, filename=filename, media_type="image/png")
+
 @app.post("/api/compare")
 async def compare_images(
     prompt: str = Form(...),
@@ -204,7 +219,7 @@ async def compare_images(
     width: str = Form("1024"),
     height: str = Form("1024"),
     steps: str = Form("4"),
-    guidance_scale: str = Form("1.0"),
+    guidance: str = Form("1.0"),
     images: Optional[List[UploadFile]] = File(None),
 ):
     temp_paths = []
@@ -212,42 +227,34 @@ async def compare_images(
         image_paths = []
         if images:
             for upload in images:
+                if not upload.filename: continue
                 suffix = Path(upload.filename).suffix or ".png"
-                temp_name = f"upload_{uuid.uuid4().hex}{suffix}"
-                temp_path = OUTPUT_DIR / temp_name
+                temp_path = OUTPUT_DIR / f"upload_{uuid.uuid4().hex}{suffix}"
                 content = await upload.read()
                 with open(temp_path, "wb") as f:
                     f.write(content)
                 temp_paths.append(str(temp_path))
                 image_paths.append(str(temp_path))
 
-        out_standard, out_small, used_seed = run_inference(
-            image_paths=image_paths,
+        result_std, result_small, used_seed = infer(
             prompt=prompt,
+            image_paths=image_paths,
             seed=int(seed),
-            randomize_seed=randomize_seed.lower() == "true",
+            randomize_seed=(randomize_seed.lower() == "true"),
             width=int(width),
             height=int(height),
-            steps=int(steps),
-            guidance_scale=float(guidance_scale),
+            num_inference_steps=int(steps),
+            guidance_scale=float(guidance),
         )
 
-        std_filename = save_image(out_standard, prefix="standard")
-        small_filename = save_image(out_small, prefix="small")
+        std_filename = save_image(result_std, prefix="std")
+        small_filename = save_image(result_small, prefix="small")
 
         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),
-            },
+            "std_url": f"/download/{std_filename}",
+            "small_url": f"/download/{small_filename}",
             "device": DEVICE_LABEL,
         })
 
@@ -255,1590 +262,556 @@ async def compare_images(
         return JSONResponse({"success": False, "error": str(e)}, status_code=500)
     finally:
         for p in temp_paths:
-            try:
-                if os.path.exists(p):
-                    os.remove(p)
-            except Exception:
-                pass
-
+            if os.path.exists(p):
+                os.remove(p)
 
+# --- Frontend ---
 @app.get("/", response_class=HTMLResponse)
 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 Decoder Comparator</title>
+  <title>Flux.2-4B-Decoder-Comparator</title>
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap');
-
     :root {{
-      --bg: #2c2c2c;
-      --bg-2: #3c3c3c;
-      --bg-3: #1e1e1e;
-      --surface: #3c3c3c;
-      --surface-2: #454545;
-      --surface-3: #4e4e4e;
-      --border: #555555;
-      --border-focus: #e95420;
-      --text: #eeeeee;
-      --text-dim: #aaaaaa;
-      --text-muted: #888888;
-      --orange: #e95420;
-      --orange-hover: #c7461a;
-      --orange-light: #f47045;
-      --orange-soft: rgba(233,84,32,0.15);
-      --orange-border: rgba(233,84,32,0.4);
-      --green: #4caf50;
-      --green-soft: rgba(76,175,80,0.15);
-      --input-bg: #252525;
-      --scrollbar: #555;
-      --radius: 4px;
-      --shadow: 0 2px 8px rgba(0,0,0,0.4);
-      --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
-    }}
-
-    * {{ box-sizing: border-box; margin: 0; padding: 0; }}
-
-    html, body {{
-      background: var(--bg-3);
-      color: var(--text);
-      font-family: 'Ubuntu', sans-serif;
+      --ub-aubergine: #2C001E;
+      --ub-aubergine-dark: #1f0015;
+      --ub-orange: #E95420;
+      --ub-orange-hover: #c4461a;
+      --ub-panel: #3D3D3D;
+      --ub-panel-light: #4f4f4f;
+      --ub-border: rgba(255,255,255,0.1);
+      --ub-text: #FFFFFF;
+      --ub-muted: #b0b0b0;
+      --ub-input: #2b2b2b;
+      --panel-radius: 8px;
+    }}
+
+    * {{ box-sizing: border-box; font-family: 'Ubuntu', sans-serif; }}
+
+    body {{
+      margin: 0; padding: 0;
+      background: var(--ub-aubergine);
+      color: var(--ub-text);
       min-height: 100vh;
-      overflow-x: hidden;
-    }}
-
-    ::-webkit-scrollbar {{ width: 6px; height: 6px; }}
-    ::-webkit-scrollbar-track {{ background: var(--bg-3); }}
-    ::-webkit-scrollbar-thumb {{ background: var(--scrollbar); border-radius: 3px; }}
-
-    /* ── TOP BAR ── */
-    .topbar {{
-      height: 52px;
-      background: #1a1a1a;
-      border-bottom: 1px solid #111;
       display: flex;
-      align-items: center;
-      padding: 0 20px;
-      gap: 12px;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }}
-
-    .topbar-dots {{
-      display: flex;
-      gap: 7px;
-    }}
-
-    .dot {{
-      width: 13px;
-      height: 13px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }}
-
-    .dot-red {{ background: #e95420; }}
-    .dot-yellow {{ background: #f4c21b; }}
-    .dot-green {{ background: #4caf50; }}
-
-    .topbar-title {{
-      margin-left: 8px;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-dim);
-      font-family: 'Ubuntu Mono', monospace;
-      letter-spacing: 0.02em;
-    }}
-
-    .topbar-right {{
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }}
-
-    .status-chip {{
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--text-dim);
-      font-family: 'Ubuntu Mono', monospace;
+      flex-direction: column;
     }}
 
-    .status-dot {{
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background: var(--text-muted);
-      transition: background 0.3s;
+    .topbar {{
+      background: var(--ub-aubergine-dark);
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--ub-border);
+      text-align: center;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+      color: var(--ub-orange);
     }}
 
-    .status-dot.running {{ background: var(--orange); box-shadow: 0 0 6px var(--orange); animation: pulse 1s ease-in-out infinite; }}
-    .status-dot.done {{ background: var(--green); }}
-
-    @keyframes pulse {{ 0%,100% {{ opacity:1; }} 50% {{ opacity:0.4; }} }}
-
-    /* ── LAYOUT ── */
-    .app {{
+    .container {{
       max-width: 1300px;
       margin: 0 auto;
-      padding: 24px 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-    }}
-
-    /* ── HERO ── */
-    .hero {{
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 24px 28px;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 20px;
-      box-shadow: var(--shadow);
-    }}
-
-    .hero-left {{ display: flex; flex-direction: column; gap: 10px; }}
-
-    .hero-eyebrow {{
-      font-size: 12px;
-      font-weight: 400;
-      color: var(--orange-light);
-      font-family: 'Ubuntu Mono', monospace;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }}
-
-    .hero-title {{
-      font-size: 26px;
-      font-weight: 700;
-      color: var(--text);
-      line-height: 1.15;
-      letter-spacing: -0.01em;
+      padding: 30px 20px;
+      flex: 1;
+      width: 100%;
     }}
 
-    .hero-title span {{ color: var(--orange); }}
-
-    .hero-desc {{
-      font-size: 14px;
-      color: var(--text-dim);
-      line-height: 1.6;
-      max-width: 560px;
+    .header-text {{
+      text-align: center;
+      margin-bottom: 30px;
     }}
-
-    .hero-badges {{
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      margin-top: 4px;
+    .header-text h1 {{
+      margin: 0 0 10px 0;
+      font-size: 2.2rem;
     }}
-
-    .badge {{
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 5px 10px;
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 500;
-      font-family: 'Ubuntu Mono', monospace;
-      border: 1px solid;
+    .header-text p {{
+      color: var(--ub-muted);
+      margin: 0;
     }}
 
-    .badge-orange {{ color: #f4a07a; background: var(--orange-soft); border-color: var(--orange-border); }}
-    .badge-green  {{ color: #86efac; background: var(--green-soft);  border-color: rgba(76,175,80,0.4); }}
-    .badge-gray   {{ color: var(--text-dim); background: rgba(255,255,255,0.06); border-color: var(--border); }}
-
-    /* ── MAIN GRID ── */
-    .main-grid {{
+    .layout {{
       display: grid;
-      grid-template-columns: 380px 1fr;
-      gap: 20px;
+      grid-template-columns: 400px 1fr;
+      gap: 24px;
       align-items: start;
     }}
 
-    /* ── PANEL ── */
     .panel {{
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-      box-shadow: var(--shadow);
-    }}
-
-    .panel-header {{
-      height: 46px;
-      background: #282828;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      gap: 10px;
-    }}
-
-    .panel-header-icon {{
-      width: 20px;
-      height: 20px;
-      color: var(--orange);
-      flex-shrink: 0;
-    }}
-
-    .panel-header-title {{
-      font-size: 13px;
-      font-weight: 700;
-      color: var(--text);
-      letter-spacing: 0.01em;
-      text-transform: uppercase;
-      font-family: 'Ubuntu Mono', monospace;
-    }}
-
-    .panel-header-badge {{
-      margin-left: auto;
-      padding: 3px 8px;
-      background: var(--orange-soft);
-      border: 1px solid var(--orange-border);
-      border-radius: var(--radius);
-      font-size: 11px;
-      font-weight: 700;
-      color: var(--orange-light);
-      font-family: 'Ubuntu Mono', monospace;
-    }}
-
-    .panel-body {{
-      padding: 16px;
+      background: var(--ub-panel);
+      border-radius: var(--panel-radius);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
       display: flex;
       flex-direction: column;
-      gap: 14px;
+      overflow: hidden;
     }}
 
-    /* ── FORM ELEMENTS ── */
-    .field {{ display: flex; flex-direction: column; gap: 6px; }}
-
-    .field-label {{
-      font-size: 12px;
-      font-weight: 700;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      font-family: 'Ubuntu Mono', monospace;
-      display: flex;
-      align-items: center;
-      gap: 6px;
+    .panel-header {{
+      padding: 16px 20px;
+      background: rgba(0,0,0,0.2);
+      border-bottom: 1px solid var(--ub-border);
+      font-weight: 500;
+      font-size: 1.1rem;
     }}
 
-    .field-label-dot {{
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-      background: var(--orange);
-      flex-shrink: 0;
-    }}
+    .panel-body {{ padding: 20px; }}
 
-    .field-hint {{
-      font-size: 11px;
-      color: var(--text-muted);
-      line-height: 1.5;
+    /* Input Forms */
+    .form-group {{ margin-bottom: 20px; }}
+    .label {{
+      display: block; font-weight: 500; font-size: 14px;
+      color: var(--ub-muted); margin-bottom: 8px;
     }}
 
-    textarea, input[type="number"], input[type="text"] {{
+    .textarea, .input {{
       width: 100%;
-      background: var(--input-bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-family: 'Ubuntu', sans-serif;
-      font-size: 14px;
+      background: var(--ub-input);
+      border: 1px solid var(--ub-border);
+      color: var(--ub-text);
+      padding: 12px;
+      border-radius: 4px;
       outline: none;
-      transition: border-color 0.2s;
+      font-size: 14px;
     }}
+    .textarea:focus, .input:focus {{ border-color: var(--ub-orange); }}
+    .textarea {{ min-height: 100px; resize: vertical; }}
 
-    textarea:focus, input[type="number"]:focus, input[type="text"]:focus {{
-      border-color: var(--border-focus);
+    /* Upload Zone */
+    .upload-zone {{
+      background: var(--ub-input);
+      border: 1px dashed var(--ub-muted);
+      border-radius: 4px;
+      padding: 20px;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.2s;
     }}
-
-    textarea {{
-      padding: 10px 12px;
-      min-height: 90px;
-      resize: vertical;
-      line-height: 1.55;
+    .upload-zone:hover, .upload-zone.dragover {{
+      border-color: var(--ub-orange);
+      background: rgba(233,84,32,0.05);
     }}
-
-    input[type="number"] {{
-      padding: 8px 10px;
+    .upload-zone input[type="file"] {{ display: none; }}
+    
+    .preview-grid {{
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+      gap: 10px; margin-top: 10px;
     }}
-
-    input[type="range"] {{
-      -webkit-appearance: none;
-      width: 100%;
-      height: 4px;
-      background: var(--surface-3);
-      border-radius: 2px;
-      outline: none;
+    .thumb {{
+      position: relative; aspect-ratio: 1;
+      border-radius: 4px; overflow: hidden;
+      border: 1px solid var(--ub-border);
     }}
-
-    input[type="range"]::-webkit-slider-thumb {{
-      -webkit-appearance: none;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--orange);
-      cursor: pointer;
-      box-shadow: 0 0 6px rgba(233,84,32,0.5);
+    .thumb img {{ width: 100%; height: 100%; object-fit: cover; display: block; }}
+    .thumb-remove {{
+      position: absolute; top: 4px; right: 4px;
+      background: rgba(0,0,0,0.7); color: white;
+      border: none; border-radius: 50%; width: 20px; height: 20px;
+      display: flex; align-items: center; justify-content: center;
+      cursor: pointer; font-size: 12px;
     }}
 
-    /* ── UPLOAD ZONE ── */
-    .upload-zone {{
-      background: var(--input-bg);
-      border: 2px dashed var(--border);
-      border-radius: var(--radius);
-      transition: border-color 0.2s, background 0.2s;
-      cursor: pointer;
+    /* Buttons */
+    .btn {{
+      width: 100%; padding: 14px; border: none; border-radius: 4px;
+      font-size: 16px; font-weight: 700; cursor: pointer;
+      transition: opacity 0.2s, background 0.2s;
     }}
-
-    .upload-zone:hover {{
-      border-color: var(--orange);
-      background: rgba(233,84,32,0.05);
+    .btn-primary {{
+      background: var(--ub-orange); color: white;
+      box-shadow: 0 4px 12px rgba(233,84,32,0.3);
     }}
+    .btn-primary:hover {{ background: var(--ub-orange-hover); }}
+    .btn:disabled {{ opacity: 0.6; cursor: not-allowed; }}
 
-    .upload-zone.dragover {{
-      border-color: var(--orange);
-      background: var(--orange-soft);
+    /* Advanced Accordion */
+    .advanced-toggle {{
+      width: 100%; background: none; border: none; color: var(--ub-orange);
+      text-align: left; padding: 10px 0; font-weight: 500; cursor: pointer;
+      display: flex; justify-content: space-between;
     }}
+    .advanced-body {{ display: none; padding-top: 10px; }}
+    .advanced-body.open {{ display: block; }}
+    .grid-2 {{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }}
 
-    .upload-zone input[type="file"] {{ display: none; }}
-
-    .upload-placeholder {{
-      padding: 24px 16px;
+    /* SLIDER CONTAINER */
+    .slider-stage {{
+      position: relative;
+      width: 100%;
+      height: 600px;
+      background: #111;
+      border-radius: 4px;
+      overflow: hidden;
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 10px;
+    }}
+    .slider-empty {{
+      color: var(--ub-muted);
       text-align: center;
-      cursor: pointer;
-      border: none;
-      background: transparent;
-      width: 100%;
-      color: var(--text);
     }}
-
-    .upload-icon-wrap {{
-      width: 48px;
-      height: 48px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--orange);
+    
+    .slider-img {{
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+      display: none;
+      user-select: none;
+      -webkit-user-drag: none;
     }}
-
-    .upload-text-main {{
-      font-size: 13px;
-      font-weight: 700;
-      color: var(--text);
+    
+    /* The Small Decoder image sits on top and gets clipped */
+    #imgSmall {{
+      clip-path: inset(0 50% 0 0); 
     }}
 
-    .upload-text-sub {{
-      font-size: 12px;
-      color: var(--text-muted);
+    .slider-handle {{
+      position: absolute;
+      left: 50%;
+      top: 0; bottom: 0;
+      width: 4px;
+      background: var(--ub-orange);
+      cursor: ew-resize;
+      display: none;
+      z-index: 10;
     }}
-
-    /* ── PREVIEW GRID ── */
-    .preview-container {{
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
+    .slider-handle::after {{
+      content: '◀ ▶';
+      position: absolute;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px; height: 30px;
+      background: var(--ub-orange);
+      color: white;
+      border-radius: 15px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 10px; font-weight: bold;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.5);
     }}
 
-    .preview-header {{
-      display: flex;
-      align-items: center;
+    .slider-labels {{
+      position: absolute;
+      top: 15px; left: 15px; right: 15px;
+      display: none;
       justify-content: space-between;
+      pointer-events: none;
+      z-index: 5;
     }}
-
-    .preview-count {{
-      font-size: 12px;
-      font-family: 'Ubuntu Mono', monospace;
-      color: var(--orange-light);
-      font-weight: 700;
+    .badge {{
+      background: rgba(0,0,0,0.6);
+      color: white;
+      padding: 6px 12px;
+      border-radius: 20px;
+      font-size: 13px;
+      backdrop-filter: blur(4px);
     }}
 
-    .preview-clear {{
-      padding: 3px 8px;
-      background: transparent;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text-muted);
-      font-size: 11px;
-      font-family: 'Ubuntu', sans-serif;
-      cursor: pointer;
-      transition: all 0.2s;
+    .loader {{
+      position: absolute; inset: 0;
+      background: rgba(0,0,0,0.7);
+      display: none; flex-direction: column;
+      align-items: center; justify-content: center;
+      z-index: 20;
     }}
-
-    .preview-clear:hover {{
-      border-color: var(--orange);
-      color: var(--orange);
+    .spinner {{
+      width: 40px; height: 40px;
+      border: 4px solid rgba(255,255,255,0.2);
+      border-top-color: var(--ub-orange);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 15px;
     }}
 
-    .preview-grid {{
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
+    /* Examples */
+    .examples-section {{ margin-top: 40px; }}
+    .examples-section h3 {{ border-bottom: 1px solid var(--ub-border); padding-bottom: 10px; }}
+    .examples-grid {{
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
     }}
-
-    .thumb {{
-      position: relative;
-      aspect-ratio: 1/1;
-      border-radius: var(--radius);
-      overflow: hidden;
-      border: 1px solid var(--border);
-      background: #111;
-      cursor: grab;
-    }}
-
-    .thumb.dragging {{ opacity: 0.5; border-color: var(--orange); }}
-
-    .thumb img {{
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }}
-
-    .thumb-overlay {{
-      position: absolute;
-      inset: 0;
-      background: rgba(0,0,0,0);
-      transition: background 0.2s;
-      display: flex;
-      align-items: flex-start;
-      justify-content: flex-end;
-      padding: 5px;
-    }}
-
-    .thumb:hover .thumb-overlay {{ background: rgba(0,0,0,0.35); }}
-
-    .thumb-remove {{
-      width: 22px;
-      height: 22px;
-      border-radius: 50%;
-      background: rgba(20,20,20,0.9);
-      border: 1px solid var(--border);
-      color: white;
-      font-size: 14px;
-      line-height: 1;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: opacity 0.2s;
-    }}
-
-    .thumb:hover .thumb-remove {{ opacity: 1; }}
-
-    .thumb-num {{
-      position: absolute;
-      bottom: 5px;
-      left: 5px;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: var(--orange);
-      color: white;
-      font-size: 10px;
-      font-weight: 700;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: 'Ubuntu Mono', monospace;
-    }}
-
-    .upload-add-more {{
-      aspect-ratio: 1/1;
-      border-radius: var(--radius);
-      border: 2px dashed var(--border);
-      background: var(--input-bg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      color: var(--text-muted);
-      font-size: 24px;
-      transition: all 0.2s;
-    }}
-
-    .upload-add-more:hover {{
-      border-color: var(--orange);
-      color: var(--orange);
-    }}
-
-    /* ── ADVANCED ── */
-    .advanced-toggle {{
-      width: 100%;
-      padding: 8px 12px;
-      background: var(--input-bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text-dim);
-      font-family: 'Ubuntu', sans-serif;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      transition: all 0.2s;
-    }}
-
-    .advanced-toggle:hover {{ border-color: var(--orange); color: var(--text); }}
-
-    .chevron {{
-      transition: transform 0.25s;
-      font-size: 10px;
-    }}
-
-    .chevron.open {{ transform: rotate(180deg); }}
-
-    .advanced-body {{
-      display: none;
-      flex-direction: column;
-      gap: 12px;
-      padding: 12px;
-      background: var(--input-bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      margin-top: -6px;
-    }}
-
-    .advanced-body.open {{ display: flex; }}
-
-    .adv-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }}
-
-    .slider-row {{ display: flex; flex-direction: column; gap: 5px; }}
-
-    .slider-label-row {{
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 12px;
-      color: var(--text-dim);
-      font-family: 'Ubuntu Mono', monospace;
-    }}
-
-    .slider-val {{
-      color: var(--orange-light);
-      font-weight: 700;
-    }}
-
-    .checkbox-row {{
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-      color: var(--text-dim);
-    }}
-
-    .checkbox-row input {{ width: 15px; height: 15px; accent-color: var(--orange); }}
-
-    /* ── RUN BUTTON ── */
-    .run-btn {{
-      width: 100%;
-      height: 44px;
-      background: var(--orange);
-      border: none;
-      border-radius: var(--radius);
-      color: white;
-      font-family: 'Ubuntu', sans-serif;
-      font-size: 15px;
-      font-weight: 700;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      letter-spacing: 0.02em;
-      transition: background 0.2s, transform 0.1s;
-      box-shadow: 0 2px 10px rgba(233,84,32,0.35);
-    }}
-
-    .run-btn:hover {{ background: var(--orange-hover); transform: translateY(-1px); }}
-    .run-btn:active {{ transform: translateY(0); }}
-    .run-btn:disabled {{ background: var(--surface-3); box-shadow: none; cursor: not-allowed; transform: none; }}
-
-    /* ── RESULT PANEL ── */
-    .result-panel {{
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-      box-shadow: var(--shadow);
-    }}
-
-    .result-header {{
-      height: 46px;
-      background: #282828;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      gap: 12px;
-    }}
-
-    .result-header-title {{
-      font-size: 13px;
-      font-weight: 700;
-      color: var(--text);
-      text-transform: uppercase;
-      font-family: 'Ubuntu Mono', monospace;
-    }}
-
-    .result-meta-row {{
-      margin-left: auto;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }}
-
-    .meta-chip {{
-      padding: 3px 8px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      font-size: 11px;
-      font-family: 'Ubuntu Mono', monospace;
-      color: var(--text-dim);
-    }}
-
-    .meta-chip span {{ color: var(--orange-light); font-weight: 700; }}
-
-    /* ── IMAGE SLIDER ── */
-    .slider-stage {{
-      position: relative;
-      background: #111;
-      overflow: hidden;
-    }}
-
-    .slider-stage.empty {{
-      min-height: 480px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }}
-
-    .empty-state {{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 14px;
-      color: var(--text-muted);
-      text-align: center;
-      padding: 40px;
-    }}
-
-    .empty-icon {{
-      width: 64px;
-      height: 64px;
-      border: 1px solid var(--border);
-      background: var(--surface-2);
-      border-radius: var(--radius);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--orange);
-    }}
-
-    .empty-title {{
-      font-size: 15px;
-      font-weight: 700;
-      color: var(--text);
-    }}
-
-    .empty-sub {{
-      font-size: 13px;
-      color: var(--text-muted);
-    }}
-
-    /* compare slider */
-    .compare-wrap {{
-      position: relative;
-      user-select: none;
-      display: none;
-    }}
-
-    .compare-wrap.visible {{ display: block; }}
-
-    .compare-img {{
-      display: block;
-      width: 100%;
-      height: auto;
-    }}
-
-    .compare-overlay {{
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      overflow: hidden;
-    }}
-
-    .compare-overlay img {{
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: left top;
-    }}
-
-    .compare-handle {{
-      position: absolute;
-      top: 0;
-      height: 100%;
-      width: 2px;
-      background: white;
-      cursor: ew-resize;
-      z-index: 10;
-    }}
-
-    .compare-handle::before {{
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      background: white;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
-    }}
-
-    .compare-handle::after {{
-      content: '◀ ▶';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 10px;
-      color: #333;
-      pointer-events: none;
-      white-space: nowrap;
-    }}
-
-    /* labels on compare */
-    .compare-label {{
-      position: absolute;
-      top: 12px;
-      padding: 4px 10px;
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 700;
-      font-family: 'Ubuntu Mono', monospace;
-      pointer-events: none;
-      z-index: 5;
-    }}
-
-    .compare-label-left {{
-      left: 12px;
-      background: rgba(233,84,32,0.9);
-      color: white;
-    }}
-
-    .compare-label-right {{
-      right: 12px;
-      background: rgba(40,40,40,0.85);
-      color: var(--text);
-      border: 1px solid var(--border);
-    }}
-
-    /* ── RESULT FOOTER ── */
-    .result-footer {{
-      padding: 12px 16px;
-      border-top: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex-wrap: wrap;
-      background: #282828;
-    }}
-
-    .dl-btn {{
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 700;
-      font-family: 'Ubuntu', sans-serif;
-      text-decoration: none;
-      border: 1px solid var(--border);
-      background: var(--surface-2);
-      color: var(--text);
-      cursor: pointer;
-      transition: all 0.2s;
-    }}
-
-    .dl-btn:hover {{ border-color: var(--orange); color: var(--orange); }}
-    .dl-btn.hidden {{ display: none; }}
-
-    .seed-display {{
-      margin-left: auto;
-      font-family: 'Ubuntu Mono', monospace;
-      font-size: 12px;
-      color: var(--text-muted);
-    }}
-
-    .seed-display span {{ color: var(--orange-light); font-weight: 700; }}
-
-    /* ── LOADER ── */
-    .loader-overlay {{
-      position: absolute;
-      inset: 0;
-      background: rgba(20,20,20,0.75);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      gap: 16px;
-      z-index: 20;
-    }}
-
-    .loader-overlay.active {{ display: flex; }}
-
-    .loader-ring {{
-      width: 52px;
-      height: 52px;
-      border-radius: 50%;
-      border: 3px solid rgba(233,84,32,0.25);
-      border-top-color: var(--orange);
-      animation: spin 0.85s linear infinite;
-    }}
-
-    .loader-text {{
-      font-size: 13px;
-      font-weight: 500;
-      color: white;
-      font-family: 'Ubuntu Mono', monospace;
-      letter-spacing: 0.05em;
+    .ex-card {{
+      background: var(--ub-panel); border-radius: 4px; overflow: hidden;
+      cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
     }}
+    .ex-card:hover {{ transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }}
+    .ex-card img {{ width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }}
+    .ex-card p {{ padding: 12px; margin: 0; font-size: 13px; color: var(--ub-muted); line-height: 1.4; }}
 
     @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
 
-    /* ── EXAMPLES ── */
-    .examples-panel {{
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-      box-shadow: var(--shadow);
-    }}
-
-    .examples-header {{
-      height: 46px;
-      background: #282828;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      gap: 10px;
-    }}
-
-    .examples-grid {{
-      padding: 16px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-      gap: 14px;
-    }}
-
-    .example-card {{
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-      cursor: pointer;
-      transition: border-color 0.2s, transform 0.15s;
-    }}
-
-    .example-card:hover {{
-      border-color: var(--orange);
-      transform: translateY(-2px);
-    }}
-
-    .example-img-wrap {{
-      position: relative;
-      aspect-ratio: 4/3;
-      overflow: hidden;
-    }}
-
-    .example-img-wrap img {{
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-      transition: transform 0.3s;
-    }}
-
-    .example-card:hover .example-img-wrap img {{ transform: scale(1.04); }}
-
-    .example-card-body {{
-      padding: 10px 12px;
-    }}
-
-    .example-prompt {{
-      font-size: 12px;
-      color: var(--text-dim);
-      line-height: 1.5;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }}
-
-    .use-example-btn {{
-      margin-top: 8px;
-      width: 100%;
-      padding: 5px;
-      background: var(--orange-soft);
-      border: 1px solid var(--orange-border);
-      border-radius: var(--radius);
-      color: var(--orange-light);
-      font-size: 11px;
-      font-weight: 700;
-      font-family: 'Ubuntu Mono', monospace;
-      cursor: pointer;
-      transition: background 0.2s;
-    }}
-
-    .use-example-btn:hover {{ background: rgba(233,84,32,0.25); }}
-
-    /* ── TOAST ── */
-    .toast-wrap {{
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }}
-
-    .toast {{
-      display: flex;
-      align-items: flex-start;
-      gap: 10px;
-      padding: 12px 14px;
-      background: #1e1e1e;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow-lg);
-      min-width: 240px;
-      max-width: 340px;
-      animation: slideIn 0.25s ease;
-    }}
-
-    .toast-error {{ border-color: rgba(239,68,68,0.5); }}
-    .toast-success {{ border-color: rgba(76,175,80,0.5); }}
-
-    .toast-msg {{ font-size: 13px; color: var(--text); flex: 1; line-height: 1.45; }}
-
-    .toast-close {{
-      background: transparent;
-      border: none;
-      color: var(--text-muted);
-      font-size: 16px;
-      cursor: pointer;
-      line-height: 1;
-      padding: 0;
-    }}
-
-    @keyframes slideIn {{
-      from {{ transform: translateX(20px); opacity: 0; }}
-      to   {{ transform: translateX(0);    opacity: 1; }}
-    }}
-
-    /* ── RESPONSIVE ── */
     @media (max-width: 900px) {{
-      .main-grid {{ grid-template-columns: 1fr; }}
-      .hero {{ flex-direction: column; }}
-    }}
-
-    @media (max-width: 600px) {{
-      .app {{ padding: 14px 12px; }}
-      .hero-title {{ font-size: 20px; }}
-      .adv-grid {{ grid-template-columns: 1fr; }}
-      .preview-grid {{ grid-template-columns: repeat(3, 1fr); }}
+      .layout {{ grid-template-columns: 1fr; }}
+      .slider-stage {{ height: 400px; }}
     }}
   </style>
 </head>
 <body>
 
-  <div class="toast-wrap" id="toastWrap"></div>
-
-  <!-- TOP BAR -->
-  <div class="topbar">
-    <div class="topbar-dots">
-      <div class="dot dot-red"></div>
-      <div class="dot dot-yellow"></div>
-      <div class="dot dot-green"></div>
-    </div>
-    <div class="topbar-title">flux2-klein — vae-decoder-comparator</div>
-    <div class="topbar-right">
-      <div class="status-chip">
-        <div class="status-dot" id="statusDot"></div>
-        <span id="statusText">idle</span>
-      </div>
-      <div class="status-chip" style="color:var(--orange-light);">{DEVICE_LABEL}</div>
-    </div>
-  </div>
+  <div class="topbar">Flux.2-4B VAE Decoder Comparator</div>
 
-  <div class="app">
-
-    <!-- HERO -->
-    <div class="hero">
-      <div class="hero-left">
-        <div class="hero-eyebrow">black-forest-labs / flux.2-klein-4b / decoder comparison</div>
-        <h1 class="hero-title">FLUX.2 <span>Decoder</span> Comparator</h1>
-        <p class="hero-desc">
-          Run both <strong>Standard VAE</strong> and <strong>Small Decoder</strong> in parallel on the same prompt,
-          then compare results interactively with a drag slider.
-        </p>
-        <div class="hero-badges">
-          <span class="badge badge-orange">⚡ parallel inference</span>
-          <span class="badge badge-green">🖼 image-to-image</span>
-          <span class="badge badge-gray">4-step distilled</span>
-          <span class="badge badge-gray">flux.2-klein-4b</span>
-        </div>
-      </div>
+  <div class="container">
+    <div class="header-text">
+      <h1>Standard vs. Small Decoder</h1>
+      <p>Upload an image, enter a prompt, and use the slider to compare outputs in real-time.</p>
     </div>
 
-    <!-- MAIN -->
-    <div class="main-grid">
-
-      <!-- INPUT PANEL -->
+    <div class="layout">
       <div class="panel">
-        <div class="panel-header">
-          <svg class="panel-header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 4v16M4 12h16"/>
-          </svg>
-          <span class="panel-header-title">Input</span>
-          <span class="panel-header-badge">CONFIGURE</span>
-        </div>
+        <div class="panel-header">Settings</div>
         <div class="panel-body">
-
-          <!-- Upload -->
-          <div class="field">
-            <div class="field-label"><span class="field-label-dot"></span>Input Images <span style="color:var(--text-muted);font-weight:400;">(optional)</span></div>
-            <div class="upload-zone" id="uploadZone">
-              <input id="fileInput" type="file" accept="image/*" multiple />
-              <button class="upload-placeholder" id="uploadPlaceholder" type="button">
-                <div class="upload-icon-wrap">
-                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                    <polyline points="17 8 12 3 7 8"/>
-                    <line x1="12" y1="3" x2="12" y2="15"/>
-                  </svg>
-                </div>
-                <div class="upload-text-main">Drop images or click to browse</div>
-                <div class="upload-text-sub">PNG, JPG, WEBP · multiple files supported</div>
-              </button>
-            </div>
-            <div id="previewContainer" style="display:none;">
-              <div class="preview-container">
-                <div class="preview-header">
-                  <span class="preview-count" id="previewCount">0 images</span>
-                  <button class="preview-clear" id="clearImagesBtn" type="button">Clear all</button>
-                </div>
-                <div class="preview-grid" id="previewGrid"></div>
-              </div>
+          <div class="form-group">
+            <label class="label">Input Images (Optional)</label>
+            <div class="upload-zone" id="dropZone">
+              <input type="file" id="fileInput" multiple accept="image/*" />
+              <div id="uploadText">Click or Drag & Drop images here</div>
+              <div class="preview-grid" id="previewGrid"></div>
             </div>
-            <div class="field-hint">First image auto-sets width &amp; height preserving aspect ratio.</div>
           </div>
 
-          <!-- Prompt -->
-          <div class="field">
-            <label class="field-label" for="prompt"><span class="field-label-dot"></span>Edit Prompt</label>
-            <textarea id="prompt" placeholder="Describe the edit — e.g. 'Change the weather to stormy'"></textarea>
+          <div class="form-group">
+            <label class="label">Prompt</label>
+            <textarea id="promptInput" class="textarea" placeholder="Describe the edit or generation..."></textarea>
           </div>
 
-          <!-- Advanced -->
-          <div class="field">
-            <button class="advanced-toggle" id="advancedToggle" type="button">
-              <span>Advanced Settings</span>
-              <span class="chevron" id="chevron">▼</span>
-            </button>
-            <div class="advanced-body" id="advancedBody">
-              <div class="adv-grid">
-                <div class="slider-row">
-                  <div class="slider-label-row">
-                    <span>seed</span>
-                    <span class="slider-val" id="seedVal">0</span>
-                  </div>
-                  <input type="range" id="seed" min="0" max="{MAX_SEED}" step="1" value="0"
-                         oninput="document.getElementById('seedVal').textContent=this.value" />
-                </div>
-                <div class="slider-row">
-                  <div class="slider-label-row">
-                    <span>steps</span>
-                    <span class="slider-val" id="stepsVal">4</span>
-                  </div>
-                  <input type="range" id="steps" min="1" max="20" step="1" value="4"
-                         oninput="document.getElementById('stepsVal').textContent=this.value" />
-                </div>
-                <div class="slider-row">
-                  <div class="slider-label-row">
-                    <span>width</span>
-                    <span class="slider-val" id="widthVal">1024</span>
-                  </div>
-                  <input type="range" id="width" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024"
-                         oninput="document.getElementById('widthVal').textContent=this.value" />
-                </div>
-                <div class="slider-row">
-                  <div class="slider-label-row">
-                    <span>height</span>
-                    <span class="slider-val" id="heightVal">1024</span>
-                  </div>
-                  <input type="range" id="height" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024"
-                         oninput="document.getElementById('heightVal').textContent=this.value" />
-                </div>
-                <div class="slider-row">
-                  <div class="slider-label-row">
-                    <span>guidance</span>
-                    <span class="slider-val" id="guidanceVal">1.0</span>
-                  </div>
-                  <input type="range" id="guidance" min="0" max="10" step="0.1" value="1.0"
-                         oninput="document.getElementById('guidanceVal').textContent=parseFloat(this.value).toFixed(1)" />
-                </div>
+          <button class="advanced-toggle" id="advToggle">
+            <span>Advanced Settings</span> <span id="advIcon">▼</span>
+          </button>
+          
+          <div class="advanced-body" id="advBody">
+            <div class="grid-2">
+              <div class="form-group">
+                <label class="label">Seed</label>
+                <input type="number" id="seed" class="input" value="0">
+              </div>
+              <div class="form-group">
+                <label class="label">Steps</label>
+                <input type="number" id="steps" class="input" value="4">
+              </div>
+              <div class="form-group">
+                <label class="label">Width</label>
+                <input type="number" id="width" class="input" value="1024" step="8">
+              </div>
+              <div class="form-group">
+                <label class="label">Height</label>
+                <input type="number" id="height" class="input" value="1024" step="8">
+              </div>
+              <div class="form-group" style="grid-column: span 2;">
+                <label class="label">Guidance Scale</label>
+                <input type="number" id="guidance" class="input" value="1.0" step="0.1">
               </div>
-              <div class="checkbox-row">
-                <input type="checkbox" id="randomizeSeed" checked />
-                <label for="randomizeSeed">Randomize seed on each run</label>
+              <div class="form-group" style="grid-column: span 2;">
+                <label style="display:flex; align-items:center; gap:8px; font-size:14px;">
+                  <input type="checkbox" id="randomize" checked> Randomize Seed
+                </label>
               </div>
             </div>
           </div>
 
-          <!-- Run -->
-          <button class="run-btn" id="runBtn" type="button">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <polygon points="5 3 19 12 5 21 5 3"/>
-            </svg>
-            Run Comparison
-          </button>
-
+          <button class="btn btn-primary" id="runBtn" style="margin-top: 20px;">Run Comparison</button>
         </div>
       </div>
 
-      <!-- RESULT PANEL -->
-      <div class="result-panel">
-        <div class="result-header">
-          <span class="result-header-title">Comparison Slider</span>
-          <div class="result-meta-row">
-            <div class="meta-chip">standard vs <span>small</span> decoder</div>
-            <div class="meta-chip" id="resultStatusChip">waiting</div>
-          </div>
-        </div>
-
-        <!-- stage -->
-        <div class="slider-stage empty" id="sliderStage">
-
-          <!-- empty -->
-          <div class="empty-state" id="emptyState">
-            <div class="empty-icon">
-              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-                <rect x="3" y="3" width="18" height="18" rx="2"/>
-                <path d="M3 9h18M9 21V9"/>
+      <div class="panel">
+        <div class="panel-header">Comparison View</div>
+        <div class="panel-body" style="padding:0;">
+          <div class="slider-stage" id="sliderStage">
+            <div class="slider-empty" id="sliderEmpty">
+              <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:10px; opacity:0.5;">
+                <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
               </svg>
+              <div>Results will appear here</div>
             </div>
-            <div class="empty-title">No comparison yet</div>
-            <div class="empty-sub">Run the pipeline to compare both decoders side by side</div>
-          </div>
 
-          <!-- compare widget -->
-          <div class="compare-wrap" id="compareWrap">
-            <!-- RIGHT image (small decoder, base layer) -->
-            <img class="compare-img" id="imgSmall" alt="Small Decoder" />
-            <span class="compare-label compare-label-right">Small Decoder</span>
-
-            <!-- LEFT image (standard, overlay) -->
-            <div class="compare-overlay" id="compareOverlay">
-              <img id="imgStandard" alt="Standard Decoder" />
+            <img id="imgStd" class="slider-img" alt="Standard Decoder" />
+            <img id="imgSmall" class="slider-img" alt="Small Decoder" />
+            
+            <div class="slider-labels" id="sliderLabels">
+              <div class="badge">Standard Decoder</div>
+              <div class="badge">Small Decoder</div>
             </div>
-            <span class="compare-label compare-label-left" id="leftLabel">Standard Decoder</span>
 
-            <!-- drag handle -->
-            <div class="compare-handle" id="compareHandle"></div>
-          </div>
+            <div class="slider-handle" id="sliderHandle"></div>
 
-          <!-- loader -->
-          <div class="loader-overlay" id="loaderOverlay">
-            <div class="loader-ring"></div>
-            <div class="loader-text" id="loaderText">running both pipelines...</div>
+            <div class="loader" id="loader">
+              <div class="spinner"></div>
+              <div style="font-weight: 500;">Running both models...</div>
+            </div>
           </div>
         </div>
-
-        <!-- footer -->
-        <div class="result-footer">
-          <a class="dl-btn hidden" id="dlStandard" download="standard_decoder.png">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-            </svg>
-            Standard
-          </a>
-          <a class="dl-btn hidden" id="dlSmall" download="small_decoder.png">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-            </svg>
-            Small
-          </a>
-          <div class="seed-display">seed: <span id="usedSeed">—</span></div>
-        </div>
       </div>
     </div>
 
-    <!-- EXAMPLES -->
-    <div class="examples-panel" id="examplesSection">
-      <div class="examples-header">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2.5">
-          <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
-          <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
-        </svg>
-        <span class="panel-header-title">Examples</span>
-      </div>
+    <div class="examples-section">
+      <h3>Examples</h3>
       <div class="examples-grid" id="examplesGrid"></div>
     </div>
-
-  </div><!-- /app -->
+  </div>
 
   <script>
     const examples = {examples_json};
-
-    /* ── state ── */
-    const state = {{
-      files: [],
-      advancedOpen: false,
-      stdUrl: null,
-      smallUrl: null,
+    let filesState = [];
+
+    // UI Elements
+    const dropZone = document.getElementById('dropZone');
+    const fileInput = document.getElementById('fileInput');
+    const previewGrid = document.getElementById('previewGrid');
+    const uploadText = document.getElementById('uploadText');
+    const promptInput = document.getElementById('promptInput');
+    const runBtn = document.getElementById('runBtn');
+    
+    // Slider Elements
+    const sliderStage = document.getElementById('sliderStage');
+    const imgStd = document.getElementById('imgStd');
+    const imgSmall = document.getElementById('imgSmall');
+    const sliderHandle = document.getElementById('sliderHandle');
+    const sliderLabels = document.getElementById('sliderLabels');
+    const sliderEmpty = document.getElementById('sliderEmpty');
+    const loader = document.getElementById('loader');
+
+    // Advanced Toggle
+    document.getElementById('advToggle').onclick = function() {{
+      const body = document.getElementById('advBody');
+      body.classList.toggle('open');
+      document.getElementById('advIcon').innerText = body.classList.contains('open') ? '▲' : '▼';
     }};
 
-    /* ── refs ── */
-    const uploadZone       = document.getElementById('uploadZone');
-    const fileInput        = document.getElementById('fileInput');
-    const uploadPlaceholder= document.getElementById('uploadPlaceholder');
-    const previewContainer = document.getElementById('previewContainer');
-    const previewGrid      = document.getElementById('previewGrid');
-    const previewCount     = document.getElementById('previewCount');
-    const clearImagesBtn   = document.getElementById('clearImagesBtn');
-
-    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 chevron          = document.getElementById('chevron');
-
-    const runBtn           = document.getElementById('runBtn');
-
-    const sliderStage      = document.getElementById('sliderStage');
-    const emptyState       = document.getElementById('emptyState');
-    const compareWrap      = document.getElementById('compareWrap');
-    const imgSmall         = document.getElementById('imgSmall');
-    const imgStandard      = document.getElementById('imgStandard');
-    const compareOverlay   = document.getElementById('compareOverlay');
-    const compareHandle    = document.getElementById('compareHandle');
-
-    const loaderOverlay    = document.getElementById('loaderOverlay');
-    const loaderText       = document.getElementById('loaderText');
-    const resultStatusChip = document.getElementById('resultStatusChip');
-
-    const dlStandard       = document.getElementById('dlStandard');
-    const dlSmall          = document.getElementById('dlSmall');
-    const usedSeed         = document.getElementById('usedSeed');
-
-    const toastWrap        = document.getElementById('toastWrap');
-    const examplesGrid     = document.getElementById('examplesGrid');
-
-    const statusDot        = document.getElementById('statusDot');
-    const statusText       = document.getElementById('statusText');
-
-    /* ── toast ── */
-    function toast(msg, type='info') {{
-      const el = document.createElement('div');
-      el.className = 'toast' + (type==='error' ? ' toast-error' : type==='success' ? ' toast-success' : '');
-      el.innerHTML = `<span class="toast-msg">${{msg}}</span><button class="toast-close" onclick="this.parentElement.remove()">×</button>`;
-      toastWrap.appendChild(el);
-      setTimeout(() => el.remove(), 4500);
-    }}
-
-    /* ── status ── */
-    function setStatus(running) {{
-      statusDot.className = 'status-dot' + (running ? ' running' : '');
-      statusText.textContent = running ? 'running' : 'idle';
-      resultStatusChip.textContent = running ? 'processing…' : (state.stdUrl ? 'done' : 'waiting');
-      runBtn.disabled = running;
-      runBtn.style.opacity = running ? '0.7' : '1';
-    }}
-
-    /* ── advanced ── */
-    advancedToggle.addEventListener('click', () => {{
-      state.advancedOpen = !state.advancedOpen;
-      advancedBody.classList.toggle('open', state.advancedOpen);
-      chevron.classList.toggle('open', state.advancedOpen);
-    }});
-
-    /* ── file handling ── */
-    function addFiles(fileList) {{
-      const valid = Array.from(fileList).filter(f => f.type.startsWith('image/'));
-      if (!valid.length) {{ toast('Please upload valid image files.', 'error'); return; }}
-      state.files = [...state.files, ...valid];
-      renderPreviews();
-    }}
-
+    // --- File Upload Logic ---
     function renderPreviews() {{
       previewGrid.innerHTML = '';
-      if (!state.files.length) {{
-        previewContainer.style.display = 'none';
-        uploadPlaceholder.style.display = 'flex';
-        return;
-      }}
-      previewContainer.style.display = 'block';
-      uploadPlaceholder.style.display = 'none';
-      previewCount.textContent = state.files.length + ' image' + (state.files.length > 1 ? 's' : '');
-
-      state.files.forEach((file, idx) => {{
-        const wrap = document.createElement('div');
-        wrap.className = 'thumb';
-        wrap.draggable = true;
-
-        const img = document.createElement('img');
-        img.src = URL.createObjectURL(file);
-        img.alt = file.name;
-
-        const overlay = document.createElement('div');
-        overlay.className = 'thumb-overlay';
-
-        const rm = document.createElement('button');
-        rm.type = 'button';
-        rm.className = 'thumb-remove';
-        rm.innerHTML = '×';
-        rm.title = 'Remove';
-        rm.addEventListener('click', (e) => {{
-          e.stopPropagation();
-          state.files.splice(idx, 1);
-          renderPreviews();
+      if(filesState.length > 0) {{
+        uploadText.style.display = 'none';
+        filesState.forEach((f, i) => {{
+          const div = document.createElement('div');
+          div.className = 'thumb';
+          const img = document.createElement('img');
+          img.src = URL.createObjectURL(f);
+          const btn = document.createElement('button');
+          btn.className = 'thumb-remove';
+          btn.innerText = '×';
+          btn.onclick = (e) => {{ e.stopPropagation(); filesState.splice(i, 1); renderPreviews(); }};
+          div.appendChild(img); div.appendChild(btn);
+          previewGrid.appendChild(div);
         }});
-        overlay.appendChild(rm);
-
-        const num = document.createElement('div');
-        num.className = 'thumb-num';
-        num.textContent = idx + 1;
-
-        wrap.appendChild(img);
-        wrap.appendChild(overlay);
-        wrap.appendChild(num);
-        previewGrid.appendChild(wrap);
-      }});
-
-      /* add-more tile */
-      const addMore = document.createElement('div');
-      addMore.className = 'upload-add-more';
-      addMore.title = 'Add more images';
-      addMore.innerHTML = '+';
-      addMore.addEventListener('click', () => fileInput.click());
-      previewGrid.appendChild(addMore);
+      }} else {{
+        uploadText.style.display = 'block';
+      }}
     }}
 
-    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 = ''; }});
+    dropZone.onclick = (e) => {{ if(e.target === dropZone || e.target === uploadText) fileInput.click(); }};
+    fileInput.onchange = (e) => {{ filesState.push(...Array.from(e.target.files)); renderPreviews(); fileInput.value=''; }};
+    dropZone.ondragover = (e) => {{ e.preventDefault(); dropZone.classList.add('dragover'); }};
+    dropZone.ondragleave = () => dropZone.classList.remove('dragover');
+    dropZone.ondrop = (e) => {{
+      e.preventDefault(); dropZone.classList.remove('dragover');
+      if(e.dataTransfer.files.length) {{ filesState.push(...Array.from(e.dataTransfer.files)); renderPreviews(); }}
+    }};
 
-    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);
+    // --- Examples Logic ---
+    async function loadExample(url, filename, text) {{
+      try {{
+        const res = await fetch(url);
+        const blob = await res.blob();
+        filesState = [new File([blob], filename, {{type: blob.type}})];
+        renderPreviews();
+        promptInput.value = text;
+        window.scrollTo({{top: 0, behavior: 'smooth'}});
+      }} catch (e) {{ alert('Failed to load example image.'); }}
+    }}
+
+    const exGrid = document.getElementById('examplesGrid');
+    examples.forEach(ex => {{
+      const card = document.createElement('div');
+      card.className = 'ex-card';
+      card.innerHTML = `<img src="${{ex.url}}"><p>${{ex.prompt}}</p>`;
+      card.onclick = () => loadExample(ex.url, ex.file, ex.prompt);
+      exGrid.appendChild(card);
     }});
 
-    clearImagesBtn.addEventListener('click', () => {{ state.files = []; renderPreviews(); }});
-
-    /* ── compare slider ── */
-    let dragging = false;
-    let sliderPct = 50;
-
-    function setSliderPct(pct) {{
-      sliderPct = Math.max(0, Math.min(100, pct));
-      compareHandle.style.left = sliderPct + '%';
-      compareOverlay.style.width = sliderPct + '%';
-    }}
-
-    compareHandle.addEventListener('mousedown', (e) => {{ dragging = true; e.preventDefault(); }});
+    // --- Image Slider Logic ---
+    let isDragging = false;
+    
+    function updateSlider(clientX) {{
+      const rect = sliderStage.getBoundingClientRect();
+      // Clamp x between 0 and width
+      let pos = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      let percent = (pos / rect.width) * 100;
+      
+      sliderHandle.style.left = percent + '%';
+      // Clip the small image (which is on top) from the right side inward
+      imgSmall.style.clipPath = `inset(0 ${{100 - percent}}% 0 0)`;
+    }}
+
+    sliderHandle.addEventListener('mousedown', () => isDragging = true);
+    window.addEventListener('mouseup', () => isDragging = false);
     window.addEventListener('mousemove', (e) => {{
-      if (!dragging) return;
-      const rect = compareWrap.getBoundingClientRect();
-      const pct = ((e.clientX - rect.left) / rect.width) * 100;
-      setSliderPct(pct);
+      if (!isDragging) return;
+      updateSlider(e.clientX);
     }});
-    window.addEventListener('mouseup', () => dragging = false);
-
-    compareHandle.addEventListener('touchstart', (e) => {{ dragging = true; }}, {{passive:true}});
+    
+    // Touch support for slider
+    sliderHandle.addEventListener('touchstart', () => isDragging = true);
+    window.addEventListener('touchend', () => isDragging = false);
     window.addEventListener('touchmove', (e) => {{
-      if (!dragging) return;
-      const touch = e.touches[0];
-      const rect = compareWrap.getBoundingClientRect();
-      const pct = ((touch.clientX - rect.left) / rect.width) * 100;
-      setSliderPct(pct);
-    }}, {{passive:true}});
-    window.addEventListener('touchend', () => dragging = false);
-
-    /* ── show comparison ── */
-    function showComparison(stdUrl, smallUrl) {{
-      state.stdUrl = stdUrl;
-      state.smallUrl = smallUrl;
-
-      imgStandard.onload = () => {{
-        sliderStage.classList.remove('empty');
-        emptyState.style.display = 'none';
-        compareWrap.classList.add('visible');
-        setSliderPct(50);
-      }};
-
-      imgSmall.src = smallUrl + '?t=' + Date.now();
-      imgStandard.src = stdUrl + '?t=' + Date.now();
-
-      dlStandard.href = stdUrl;
-      dlStandard.classList.remove('hidden');
-      dlSmall.href = smallUrl;
-      dlSmall.classList.remove('hidden');
-    }}
+      if (!isDragging) return;
+      updateSlider(e.touches[0].clientX);
+    }});
 
-    /* ── submit ── */
-    async function submitRun() {{
-      const prompt = promptEl.value.trim();
-      if (!prompt) {{ toast('Please enter a prompt.', 'error'); return; }}
+    // --- Form Submission ---
+    runBtn.onclick = async () => {{
+      const prompt = promptInput.value.trim();
+      if(!prompt) return alert("Enter a prompt");
 
       const fd = new FormData();
       fd.append('prompt', prompt);
-      fd.append('seed', seedEl.value);
-      fd.append('randomize_seed', String(randomizeSeedEl.checked));
-      fd.append('width', widthEl.value);
-      fd.append('height', heightEl.value);
-      fd.append('steps', stepsEl.value);
-      fd.append('guidance_scale', parseFloat(guidanceEl.value).toFixed(1));
-      state.files.forEach(f => fd.append('images', f));
-
-      setStatus(true);
-      loaderOverlay.classList.add('active');
+      fd.append('seed', document.getElementById('seed').value);
+      fd.append('randomize_seed', document.getElementById('randomize').checked);
+      fd.append('width', document.getElementById('width').value);
+      fd.append('height', document.getElementById('height').value);
+      fd.append('steps', document.getElementById('steps').value);
+      fd.append('guidance', document.getElementById('guidance').value);
+      
+      filesState.forEach(f => fd.append('images', f));
+
+      loader.style.display = 'flex';
+      runBtn.disabled = true;
 
       try {{
-        const res  = await fetch('/api/compare', {{ method:'POST', body:fd }});
+        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.');
-
-        showComparison(data.standard.image_url, data.small.image_url);
-        usedSeed.textContent = String(data.seed);
-        resultStatusChip.textContent = 'done';
-        toast('Comparison ready!', 'success');
-      }} catch(err) {{
-        toast(err.message || 'Unexpected error.', 'error');
+        
+        if(data.success) {{
+          imgStd.src = data.std_url;
+          imgSmall.src = data.small_url;
+          
+          imgStd.onload = () => {{
+            sliderEmpty.style.display = 'none';
+            imgStd.style.display = 'block';
+            imgSmall.style.display = 'block';
+            sliderHandle.style.display = 'block';
+            sliderLabels.style.display = 'flex';
+            
+            // Reset slider to center
+            const rect = sliderStage.getBoundingClientRect();
+            updateSlider(rect.left + rect.width / 2);
+          }};
+        }} else {{
+          alert('Error: ' + data.error);
+        }}
+      }} catch(e) {{
+        alert('Failed to connect to server.');
       }} finally {{
-        setStatus(false);
-        loaderOverlay.classList.remove('active');
+        loader.style.display = 'none';
+        runBtn.disabled = false;
       }}
-    }}
-
-    runBtn.addEventListener('click', submitRun);
-    promptEl.addEventListener('keydown', (e) => {{ if (e.ctrlKey && e.key==='Enter') submitRun(); }});
-
-    /* ── examples ── */
-    async function fileFromUrl(url, name) {{
-      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() {{
-      examplesGrid.innerHTML = '';
-      examples.forEach(item => {{
-        const card = document.createElement('div');
-        card.className = 'example-card';
-
-        const imgWrap = document.createElement('div');
-        imgWrap.className = 'example-img-wrap';
-        const img = document.createElement('img');
-        img.src = item.url;
-        img.alt = item.file;
-        img.loading = 'lazy';
-        imgWrap.appendChild(img);
-
-        const body = document.createElement('div');
-        body.className = 'example-card-body';
-
-        const p = document.createElement('p');
-        p.className = 'example-prompt';
-        p.textContent = item.prompt;
-
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = 'use-example-btn';
-        btn.textContent = '↳ Use this example';
-        btn.addEventListener('click', async (e) => {{
-          e.stopPropagation();
-          try {{
-            btn.textContent = 'Loading…';
-            btn.disabled = true;
-            const file = await fileFromUrl(item.url, item.file);
-            state.files = [file];
-            renderPreviews();
-            promptEl.value = item.prompt;
-            toast('Example loaded.', 'success');
-          }} catch(err) {{
-            toast(err.message, 'error');
-          }} finally {{
-            btn.textContent = '↳ Use this example';
-            btn.disabled = false;
-          }}
-        }});
-
-        body.appendChild(p);
-        body.appendChild(btn);
-        card.appendChild(imgWrap);
-        card.appendChild(body);
-        examplesGrid.appendChild(card);
-      }});
-    }}
-
-    /* ── init ── */
-    setStatus(false);
-    renderPreviews();
-    renderExamples();
+    }};
   </script>
 </body>
-</html>"""
-
+</html>
+"""
 
-app.launch()
+app.launch()