Update app.py

app.py

@@ -1,6 +1,6 @@
 import os
-import gc
 import io
+import gc
 import uuid
 import json
 import base64
@@ -8,179 +8,167 @@ import random
 import threading
 import concurrent.futures
 from pathlib import Path
-from typing import List, Optional, Iterable
+from typing import List, Optional
 
-import spaces
 import numpy as np
+import spaces
 import torch
 from PIL import Image
+from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
 
 from gradio import Server
 from fastapi import Request, UploadFile, File, Form
 from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
 
-from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
+# -------------------------------------------------------------------------
+# App Setup & Directories
+# -------------------------------------------------------------------------
+app = Server()
 
-# ── paths & constants ────────────────────────────────────────────────────────
-BASE_DIR     = Path(__file__).resolve().parent
-STATIC_DIR   = BASE_DIR / "static"
-OUTPUT_DIR   = BASE_DIR / "outputs"
+BASE_DIR = Path(__file__).resolve().parent
+OUTPUT_DIR = BASE_DIR / "outputs"
 EXAMPLES_DIR = BASE_DIR / "examples"
 
-STATIC_DIR.mkdir(exist_ok=True)
 OUTPUT_DIR.mkdir(exist_ok=True)
+EXAMPLES_DIR.mkdir(exist_ok=True)
 
-MAX_SEED       = np.iinfo(np.int32).max
+MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
-# ── device ───────────────────────────────────────────────────────────────────
-DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 dtype  = torch.bfloat16
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
 if torch.cuda.is_available():
-    DEVICE_LABEL = torch.cuda.get_device_name(
-        torch.cuda.current_device()
-    ).lower()
+    print("current device:", torch.cuda.current_device())
+    print("device name:", torch.cuda.get_device_name(torch.cuda.current_device()))
+    DEVICE_LABEL = torch.cuda.get_device_name(torch.cuda.current_device()).lower()
 else:
     DEVICE_LABEL = str(DEVICE).lower()
 
-print("Using device:", DEVICE)
-
-# ── load models ──────────────────────────────────────────────────────────────
+# -------------------------------------------------------------------------
+# Model Loading
+# -------------------------------------------------------------------------
 print("Loading 4B Distilled model (Standard VAE)...")
 pipe_standard = Flux2KleinPipeline.from_pretrained(
     "black-forest-labs/FLUX.2-klein-4B",
     torch_dtype=dtype,
-)
-pipe_standard.enable_model_cpu_offload()
+).to(DEVICE)
+# pipe_standard.enable_model_cpu_offload() # Uncomment if memory is tight
 
 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,
-)
-pipe_small_decoder.enable_model_cpu_offload()
+).to(DEVICE)
+# pipe_small_decoder.enable_model_cpu_offload() # Uncomment if memory is tight
 
 pipe_lock_standard = threading.Lock()
 pipe_lock_small    = threading.Lock()
 
-print("All models loaded.")
 
-# ── helpers ───────────────────────────────────────────────────────────────────
+# -------------------------------------------------------------------------
+# Image Processing Utilities
+# -------------------------------------------------------------------------
+def save_image(img: Image.Image, prefix: str = "output") -> str:
+    filename = f"{prefix}_{uuid.uuid4().hex}.png"
+    path = OUTPUT_DIR / filename
+    img.save(path, format="PNG")
+    return filename
+
 def calc_dimensions(pil_img: Image.Image):
     iw, ih = pil_img.size
     aspect = iw / ih
-    if aspect >= 1:
+
+    if aspect >= 1:          # landscape / square
         new_width  = 1024
         new_height = int(round(1024 / aspect))
-    else:
+    else:                    # portrait
         new_height = 1024
         new_width  = int(round(1024 * aspect))
+
+    # snap to 8-pixel grid with round(), clamp to [256, 1024]
     new_width  = max(256, min(1024, round(new_width  / 8) * 8))
     new_height = max(256, min(1024, round(new_height / 8) * 8))
     return new_width, new_height
 
+def parse_and_resize_images(input_paths: List[str], width: int, height: int):
+    if not input_paths:
+        return None
 
-def parse_and_resize_images(paths: list[str], width: int, height: int):
-    result = []
-    for p in paths:
+    raw_list = []
+    for src in input_paths:
         try:
-            img = Image.open(p).convert("RGB")
-            result.append(img.resize((width, height), Image.LANCZOS))
+            if os.path.exists(src):
+                raw_list.append(Image.open(src).convert("RGB"))
         except Exception as e:
-            print(f"Skipping image {p}: {e}")
-    return result or None
-
-
-def image_to_base64(img: Image.Image) -> str:
-    buf = io.BytesIO()
-    img.save(buf, format="PNG")
-    return base64.b64encode(buf.getvalue()).decode()
-
+            print(f"Skipping invalid image: {e}")
 
-def save_image(img: Image.Image, prefix: str = "output") -> str:
-    filename = f"{prefix}_{uuid.uuid4().hex}.png"
-    (OUTPUT_DIR / filename).parent.mkdir(parents=True, exist_ok=True)
-    img.save(OUTPUT_DIR / filename, format="PNG")
-    return filename
+    if not raw_list:
+        return None
 
+    resized = [
+        img.resize((width, height), Image.LANCZOS)
+        for img in raw_list
+    ]
+    return resized
 
 def run_pipeline(pipe, lock, kwargs, seed):
     with lock:
-        gen    = torch.Generator(device="cpu").manual_seed(seed)
+        gen    = torch.Generator(device=DEVICE).manual_seed(seed)
         result = pipe(**kwargs, generator=gen).images[0]
     return result
 
-
-def get_example_items():
-    example_prompts = {
-        "1.jpg": "Change the weather to stormy.",
-        "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
-        "3.jpg": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
-        "4.jpg": "Make the texture high-resolution.",
-    }
-    items = []
-    if EXAMPLES_DIR.exists():
-        for name in sorted(os.listdir(EXAMPLES_DIR)):
-            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
-                items.append({
-                    "file":   name,
-                    "url":    f"/example-file/{name}",
-                    "prompt": example_prompts.get(
-                        name, "Edit this image while preserving composition."
-                    ),
-                })
-    return items
-
-
-# ── inference ─────────────────────────────────────────────────────────────────
+# -------------------------------------------------------------------------
+# Inference Function
+# -------------------------------------------------------------------------
 @spaces.GPU(duration=120)
 def infer(
-    image_paths: list[str],
     prompt: str,
+    input_paths: List[str],
     seed: int,
     randomize_seed: bool,
     width: int,
     height: int,
-    steps: int,
+    num_inference_steps: int,
     guidance_scale: float,
 ):
     gc.collect()
     if torch.cuda.is_available():
         torch.cuda.empty_cache()
 
-    if not prompt.strip():
+    if not prompt or not prompt.strip():
         raise ValueError("Please enter a prompt.")
 
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
 
-    if image_paths:
-        first_pil = Image.open(image_paths[0]).convert("RGB")
+    image_list = None
+    if input_paths:
+        first_pil = Image.open(input_paths[0]).convert("RGB")
         width, height = calc_dimensions(first_pil)
-        image_list = parse_and_resize_images(image_paths, width, height)
-    else:
-        image_list = None
-        width  = max(256, min(MAX_IMAGE_SIZE, round(int(width)  / 8) * 8))
-        height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
+        image_list = parse_and_resize_images(input_paths, width, height)
+
+    width  = max(256, min(MAX_IMAGE_SIZE, round(int(width)  / 8) * 8))
+    height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
 
     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:
+    if image_list is not None:
         shared_kwargs["image"] = image_list
 
+    # Run both models concurrently
     with concurrent.futures.ThreadPoolExecutor(max_workers=2) as executor:
         future_std   = executor.submit(
             run_pipeline, pipe_standard,     pipe_lock_standard, shared_kwargs, seed
@@ -203,35 +191,25 @@ def infer(
     return out_standard, out_small, seed
 
 
-# ── app ───────────────────────────────────────────────────────────────────────
-app = Server()
-
-
-@app.get("/example-file/{filename}")
-async def example_file(filename: str):
-    path = EXAMPLES_DIR / filename
-    if not path.exists():
-        return JSONResponse({"error": "Not found"}, status_code=404)
-    return FileResponse(path)
-
-
+# -------------------------------------------------------------------------
+# API Endpoints
+# -------------------------------------------------------------------------
 @app.get("/download/{filename}")
 async def download_file(filename: str):
     path = OUTPUT_DIR / filename
     if not path.exists():
-        return JSONResponse({"error": "Not found"}, status_code=404)
+        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(
-    prompt:           str  = Form(...),
-    seed:             str  = Form("0"),
-    randomize_seed:   str  = Form("true"),
-    width:            str  = Form("1024"),
-    height:           str  = Form("1024"),
-    steps:            str  = Form("4"),
-    guidance_scale:   str  = Form("1.0"),
+async def compare_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"),
     images: Optional[List[UploadFile]] = File(None),
 ):
     temp_paths = []
@@ -239,36 +217,37 @@ async def compare(
         image_paths = []
         if images:
             for upload in images:
-                suffix    = Path(upload.filename).suffix or ".png"
+                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
-                content   = await upload.read()
-                temp_path.write_bytes(content)
+                content = await upload.read()
+                with open(temp_path, "wb") as f:
+                    f.write(content)
                 temp_paths.append(str(temp_path))
                 image_paths.append(str(temp_path))
 
         out_std, out_small, used_seed = infer(
-            image_paths    = image_paths,
-            prompt         = prompt,
-            seed           = int(seed),
-            randomize_seed = randomize_seed.lower() == "true",
-            width          = int(width),
-            height         = int(height),
-            steps          = int(steps),
-            guidance_scale = float(guidance_scale),
+            prompt=prompt,
+            input_paths=image_paths,
+            seed=int(seed),
+            randomize_seed=randomize_seed.lower() == "true",
+            width=int(width),
+            height=int(height),
+            num_inference_steps=int(steps),
+            guidance_scale=float(guidance)
         )
 
-        fn_std   = save_image(out_std,   prefix="standard")
-        fn_small = save_image(out_small, prefix="small")
+        std_filename = save_image(out_std, prefix="std")
+        sml_filename = save_image(out_small, prefix="sml")
 
         return JSONResponse({
-            "success":          True,
-            "seed":             used_seed,
-            "standard_url":     f"/download/{fn_std}",
-            "small_url":        f"/download/{fn_small}",
-            "standard_base64":  image_to_base64(out_std),
-            "small_base64":     image_to_base64(out_small),
-            "device":           DEVICE_LABEL,
+            "success": True,
+            "seed": used_seed,
+            "std_url": f"/download/{std_filename}",
+            "sml_url": f"/download/{sml_filename}",
+            "device": DEVICE_LABEL,
         })
 
     except Exception as e:
@@ -282,1108 +261,451 @@ async def compare(
                 pass
 
 
+# -------------------------------------------------------------------------
+# Frontend Template
+# -------------------------------------------------------------------------
 @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>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Flux.2-4B-Decoder-Comparator</title>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
 
     :root {{
-      --bg:          #0b0b10;
-      --panel:       #111218;
-      --panel-2:     #151621;
-      --panel-3:     #1b1d2a;
-      --border:      #242638;
-      --muted:       #9ca3af;
-      --text:        #f5f7fb;
-      --text-dim:    #c5cad3;
-      --purple:      #7c3aed;
-      --purple-hover:#6d28d9;
-      --purple-soft: rgba(124,58,237,0.14);
-      --green:       #22c55e;
-      --green-soft:  rgba(34,197,94,0.14);
-      --red:         #ef4444;
-      --red-soft:    rgba(239,68,68,0.14);
-      --orange:      #f97316;
-      --orange-soft: rgba(249,115,22,0.14);
-      --input-bg:    #0f1017;
-    }}
-
-    *, *::before, *::after {{ box-sizing: border-box; border-radius: 0 !important; }}
+      /* Ubuntu Brand Colors */
+      --ubuntu-orange: #E95420;
+      --ubuntu-orange-hover: #C7481B;
+      --ubuntu-aubergine: #77216F;
+      --ubuntu-aubergine-dark: #2C001E;
+      --ubuntu-warm-grey: #AEA79F;
+      
+      --bg: #111111;
+      --panel: #1e1e1e;
+      --panel-2: #252525;
+      --border: #333333;
+      --muted: #9CA3AF;
+      --text: #F5F7FB;
+      --text-dim: #D1D5DB;
+      --input-bg: #181818;
+      --same-height: 760px;
+    }}
+
+    * {{ box-sizing: border-box; border-radius: 4px; }}
 
     html, body {{
       margin: 0; padding: 0;
       background: var(--bg);
       color: var(--text);
-      font-family: 'Outfit', sans-serif;
+      font-family: 'Ubuntu', sans-serif;
       min-height: 100%;
+      overflow-x: hidden;
     }}
 
-    body {{ overflow-x: hidden; }}
-
-    .app-shell {{
-      min-height: 100vh;
-      background:
-        linear-gradient(to bottom, rgba(124,58,237,0.08), transparent 160px),
-        var(--bg);
-    }}
-
-    /* ── topbar ── */
     .topbar {{
-      height: 56px;
-      border-bottom: 1px solid var(--border);
-      background: #0a0b11;
+      height: 60px;
+      border-bottom: 2px solid var(--ubuntu-orange);
+      background: var(--ubuntu-aubergine-dark);
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #d7cdfc;
-      font-size: 14px;
-      font-weight: 600;
-      letter-spacing: 0.02em;
+      padding: 0 24px;
+      color: white;
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
     }}
 
-    /* ── layout ── */
     .container {{
       max-width: 1440px;
       margin: 0 auto;
       padding: 28px;
     }}
 
-    /* ── hero ── */
-    .hero {{
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 16px;
-      margin-bottom: 24px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid var(--border);
-      flex-wrap: wrap;
-    }}
-    .hero-left {{ display: flex; flex-direction: column; gap: 14px; }}
-    .eyebrow {{ color: var(--muted); font-size: 13px; font-weight: 500; }}
-    .title {{
-      font-size: 44px; line-height: 1;
-      font-weight: 800; margin: 0;
-      letter-spacing: -0.03em;
-    }}
-    .hero-tags {{ display: flex; flex-wrap: wrap; gap: 10px; }}
-    .tag {{
-      display: inline-flex; align-items: center; gap: 8px;
-      height: 34px; padding: 0 12px;
-      border: 1px solid var(--border);
-      font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
-    }}
-    .tag svg {{ width: 15px; height: 15px; flex-shrink: 0; }}
-    .tag-purple {{ color:#d8ccff; background:var(--purple-soft); border-color:rgba(124,58,237,0.35); }}
-    .tag-green  {{ color:#bbf7d0; background:var(--green-soft);  border-color:rgba(34,197,94,0.35);  }}
-    .tag-orange {{ color:#fed7aa; background:var(--orange-soft); border-color:rgba(249,115,22,0.35); }}
-    .hero-actions {{ display:flex; gap:10px; flex-shrink:0; }}
-    .ghost-btn {{
-      height:40px; padding:0 14px;
-      border:1px solid var(--border);
-      background:var(--panel); color:var(--text);
-      font-family:'Outfit',sans-serif; font-size:14px; font-weight:600;
-      cursor:pointer;
-    }}
-    .ghost-btn:hover {{ background:var(--panel-2); }}
+    .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 8px 0; color: white; }}
+    .subtitle {{ color: var(--ubuntu-warm-grey); font-size: 16px; margin:0; }}
+    .subtitle a {{ color: var(--ubuntu-orange); text-decoration: none; }}
 
-    /* ── main grid ── */
-    .main-grid {{
+    .layout {{
       display: grid;
-      grid-template-columns: 420px 1fr;
+      grid-template-columns: 450px 1fr;
       gap: 24px;
-      align-items: start;
+      align-items: stretch;
     }}
 
-    /* ── panel ── */
     .panel {{
       background: var(--panel);
       border: 1px solid var(--border);
+      min-height: var(--same-height);
       display: flex;
       flex-direction: column;
     }}
+
     .panel-header {{
-      height: 62px; min-height: 62px;
+      height: 56px;
       border-bottom: 1px solid var(--border);
-      display: flex; align-items: center;
-      justify-content: space-between;
-      padding: 0 18px;
-      background: #101119;
-    }}
-    .panel-title {{
-      font-size: 20px; font-weight: 700;
-      letter-spacing: -0.02em; margin: 0;
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 0 18px; background: var(--panel-2);
     }}
-    .panel-header-right {{
-      display:flex; align-items:center; gap:8px;
-      color:var(--muted); font-size:13px; font-weight:600;
-    }}
-    .status-pill {{
-      padding:5px 8px;
-      background:var(--panel-3);
-      border:1px solid var(--border);
-      color:var(--muted);
-      font-size:12px; line-height:1;
-      transition: all .2s;
-    }}
-    .status-pill.active {{
-      background:rgba(245,158,11,0.12);
-      border-color:rgba(245,158,11,0.35);
-      color:#fbbf24;
-    }}
-    .panel-body {{ padding:18px; }}
-
-    /* ── form ── */
-    .form-stack {{ display:flex; flex-direction:column; gap:18px; }}
-    .form-group {{ display:flex; flex-direction:column; gap:10px; }}
-    .label {{
-      font-size:14px; font-weight:600;
-      color:var(--muted); letter-spacing:0.02em;
-    }}
-    .hint {{ color:var(--muted); font-size:13px; line-height:1.5; margin-top:-4px; }}
-
-    textarea, input, button, select {{ font-family:'Outfit',sans-serif; }}
+    .panel-title {{ font-size: 18px; font-weight: 700; margin: 0; color: white; }}
+    
+    .panel-body {{ padding: 18px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 16px; }}
 
+    .label {{ font-size: 14px; font-weight: 500; color: var(--text-dim); margin-bottom: 6px; display: block; }}
+    
     .input, .textarea {{
-      width:100%; background:var(--input-bg);
-      border:1px solid var(--border);
-      color:var(--text); outline:none;
-      padding:14px; font-size:15px;
-    }}
-    .input:focus, .textarea:focus {{
-      border-color:#3a3d56; background:#11131b;
+      width: 100%;
+      background: var(--input-bg);
+      border: 1px solid var(--border);
+      color: var(--text);
+      outline: none; padding: 12px; font-size: 15px; font-family: 'Ubuntu', sans-serif;
     }}
-    .textarea {{ min-height:120px; resize:vertical; line-height:1.55; }}
+    .input:focus, .textarea:focus {{ border-color: var(--ubuntu-orange); }}
+    .textarea {{ min-height: 120px; resize: vertical; }}
 
-    /* ── upload ── */
     .upload-wrap {{
-      background:var(--input-bg);
-      border:1px dashed #32354b;
-      min-height:180px;
-      display:flex; flex-direction:column;
-      gap:14px; padding:14px; cursor:pointer;
-    }}
-    .upload-wrap.dragover {{
-      border-color:var(--purple);
-      background:rgba(124,58,237,0.08);
-    }}
-    .upload-wrap input[type="file"] {{ display:none; }}
-    .upload-placeholder {{
-      min-height:150px;
-      display:flex; flex-direction:column;
-      align-items:center; justify-content:center;
-      gap:14px; background:transparent;
-      border:none; color:var(--text-dim);
-      cursor:pointer; padding:16px; text-align:center;
-    }}
-    .upload-icon {{
-      width:48px; height:48px;
-      border:1px solid var(--border);
-      background:var(--panel-2);
-      display:flex; align-items:center;
-      justify-content:center; color:#d8ccff;
-    }}
-    .preview-grid {{
-      display:grid;
-      grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
-      gap:10px;
-    }}
-    .thumb {{
-      position:relative; aspect-ratio:1/1;
-      overflow:hidden; border:1px solid var(--border);
-      background:#0b0c12;
-    }}
-    .thumb img {{ width:100%; height:100%; object-fit:cover; display:block; }}
+      background: var(--input-bg); border: 1px dashed var(--border);
+      min-height: 160px; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; padding: 14px; cursor: pointer; text-align: center;
+    }}
+    .upload-wrap:hover {{ border-color: var(--ubuntu-orange); }}
+    .upload-wrap input[type="file"] {{ display: none; }}
+    
+    .preview-grid {{ display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; width:100%; display:none; }}
+    .thumb {{ position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); }}
+    .thumb img {{ width: 100%; height: 100%; object-fit: cover; }}
     .thumb-remove {{
-      position:absolute; top:5px; right:5px;
-      width:22px; height:22px;
-      border:1px solid var(--border);
-      background:rgba(11,11,16,0.88);
-      color:white; cursor:pointer;
-      display:flex; align-items:center;
-      justify-content:center;
-      font-size:14px; line-height:1;
+      position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
+      background: rgba(0,0,0,0.8); color: white; border: none; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 50%;
     }}
 
-    /* ── advanced ── */
-    .advanced {{ border:1px solid var(--border); background:#0f1017; }}
     .advanced-toggle {{
-      width:100%; height:48px;
-      border:none; border-bottom:1px solid var(--border);
-      background:transparent; color:var(--text);
-      display:flex; align-items:center;
-      justify-content:space-between;
-      padding:0 14px; cursor:pointer;
-      font-size:14px; font-weight:600;
-    }}
-    .advanced-toggle:hover {{ background:#121420; }}
-    .advanced-body {{ display:none; padding:14px; }}
-    .advanced-body.open {{ display:block; }}
-    .advanced-grid {{
-      display:grid;
-      grid-template-columns:1fr 1fr;
-      gap:14px;
-    }}
-    .checkbox-row {{
-      margin-top:14px;
-      display:flex; align-items:center;
-      gap:10px; color:var(--text-dim);
-      font-size:14px; font-weight:500;
-    }}
-    .checkbox-row input {{
-      width:16px; height:16px;
-      accent-color:var(--purple);
+      width: 100%; height: 40px; border: 1px solid var(--border); background: var(--panel-2);
+      color: var(--text); display: flex; align-items: center; justify-content: space-between;
+      padding: 0 14px; cursor: pointer; font-weight: 500;
     }}
+    .advanced-body {{ display: none; padding: 14px; background: var(--input-bg); border: 1px solid var(--border); border-top: none; }}
+    .advanced-body.open {{ display: block; }}
+    
+    .grid-2 {{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }}
 
-    /* ── actions ── */
-    .actions {{
-      display:grid;
-      grid-template-columns:1fr 1fr;
-      gap:12px; padding-top:8px;
-    }}
+    .actions {{ display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: auto; }}
     .btn {{
-      height:48px; border:1px solid var(--border);
-      background:var(--panel-2); color:var(--text);
-      cursor:pointer; font-size:15px;
-      font-weight:700; letter-spacing:0.01em;
-    }}
-    .btn:hover {{ background:#1a1d29; }}
-    .btn-primary {{
-      background:var(--purple);
-      border-color:var(--purple); color:white;
-    }}
-    .btn-primary:hover {{
-      background:var(--purple-hover);
-      border-color:var(--purple-hover);
+      height: 48px; border: none; font-size: 16px; font-weight: 700; cursor: pointer;
+      font-family: 'Ubuntu', sans-serif; transition: background 0.2s; color: white;
+    }}
+    .btn-primary {{ background: var(--ubuntu-orange); }}
+    .btn-primary:hover {{ background: var(--ubuntu-orange-hover); }}
+
+    /* --- Slider CSS --- */
+    .result-shell {{ position: relative; flex: 1; min-height: 400px; border: 1px solid var(--border); background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }}
+    
+    .comparison-container {{
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: none; /* Hidden until loaded */
+    }}
+    
+    .comparison-container img {{
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+      pointer-events: none;
+    }}
+    
+    #imgStd {{ z-index: 1; }}
+    #imgSml {{ z-index: 2; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }}
+
+    .slider-input {{
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      outline: none;
+      background: transparent;
+      -webkit-appearance: none;
+      margin: 0;
+      z-index: 4;
+      cursor: ew-resize;
+    }}
+    
+    .slider-input::-webkit-slider-thumb {{
+      -webkit-appearance: none;
+      width: 40px; height: 1000px;
+      background: transparent;
+      cursor: ew-resize;
+    }}
+
+    .slider-line {{
+      position: absolute;
+      top: 0; bottom: 0; left: 50%;
+      width: 4px;
+      background: var(--ubuntu-orange);
+      z-index: 3;
+      transform: translateX(-50%);
+      pointer-events: none;
+    }}
+    
+    .slider-pill {{
+      position: absolute;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px; height: 32px;
+      background: var(--ubuntu-orange);
+      border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      z-index: 3; color: white;
+    }}
+
+    .decoder-label {{
+      position: absolute; top: 16px; padding: 6px 12px; background: rgba(0,0,0,0.6);
+      color: white; font-size: 13px; font-weight: 700; border-radius: 4px; z-index: 3;
+      backdrop-filter: blur(4px);
+    }}
+    .decoder-label.left {{ left: 16px; }}
+    .decoder-label.right {{ right: 16px; }}
+
+    .empty-state {{
+      position: absolute; inset:0; display: flex; flex-direction: column; align-items: center;
+      justify-content: center; color: var(--text-dim); text-align: center; padding: 20px; z-index: 0;
     }}
 
-    /* ── result panel ── */
-    .result-shell {{ display:flex; flex-direction:column; gap:16px; }}
-
-    /* ── image slider ── */
-    .slider-wrap {{
-      position:relative;
-      width:100%;
-      aspect-ratio:16/9;
-      min-height:340px;
-      border:1px solid var(--border);
-      background:#0d0e14;
-      overflow:hidden;
-      user-select:none;
-    }}
-
-    /* empty state */
-    .slider-empty {{
-      position:absolute; inset:0;
-      display:flex; flex-direction:column;
-      align-items:center; justify-content:center;
-      gap:14px; color:var(--text-dim);
-      text-align:center; padding:24px;
-      z-index:1;
-    }}
-    .slider-empty-box {{
-      width:72px; height:72px;
-      border:1px solid var(--border);
-      background:var(--panel-2);
-      display:flex; align-items:center;
-      justify-content:center; color:#d8ccff;
-    }}
-
-    /* images */
-    .slider-img {{
-      position:absolute; inset:0;
-      width:100%; height:100%;
-      object-fit:contain;
-      display:none;
-    }}
-    .slider-img.visible {{ display:block; }}
-
-    /* clip the "before" (standard) image on the left */
-    #imgBefore {{
-      clip-path: inset(0 50% 0 0);
-      z-index:2;
-    }}
-    #imgAfter {{
-      z-index:1;
-    }}
-
-    /* divider line */
-    .slider-divider {{
-      position:absolute;
-      top:0; bottom:0;
-      left:50%;
-      width:2px;
-      background:rgba(255,255,255,0.7);
-      z-index:5;
-      pointer-events:none;
-      display:none;
-    }}
-    .slider-divider.visible {{ display:block; }}
-
-    /* handle */
-    .slider-handle {{
-      position:absolute;
-      top:50%; left:50%;
-      transform:translate(-50%,-50%);
-      width:44px; height:44px;
-      border:2px solid white;
-      background:rgba(17,18,24,0.85);
-      display:none;
-      align-items:center; justify-content:center;
-      z-index:6; cursor:ew-resize;
-      box-shadow:0 2px 12px rgba(0,0,0,0.5);
-    }}
-    .slider-handle.visible {{ display:flex; }}
-    .slider-handle svg {{ pointer-events:none; }}
-
-    /* labels */
-    .slider-label {{
-      position:absolute;
-      top:12px;
-      padding:5px 10px;
-      font-size:12px; font-weight:700;
-      letter-spacing:0.04em;
-      background:rgba(11,11,16,0.82);
-      border:1px solid var(--border);
-      color:var(--text);
-      z-index:7;
-      pointer-events:none;
-      display:none;
-    }}
-    .slider-label.visible {{ display:block; }}
-    #labelBefore {{ left:12px; color:#d8ccff; border-color:rgba(124,58,237,0.4); }}
-    #labelAfter  {{ right:12px; color:#bbf7d0; border-color:rgba(34,197,94,0.4); }}
-
-    /* download buttons overlay */
-    .dl-bar {{
-      position:absolute; bottom:12px; right:12px;
-      display:none; gap:8px; z-index:8;
-    }}
-    .dl-bar.visible {{ display:flex; }}
-    .dl-btn {{
-      height:34px; padding:0 10px;
-      border:1px solid var(--border);
-      background:rgba(17,18,24,0.88);
-      color:white; font-family:'Outfit',sans-serif;
-      font-size:12px; font-weight:700;
-      text-decoration:none; cursor:pointer;
-      display:flex; align-items:center; gap:6px;
-    }}
-
-    /* loader */
     .loader {{
-      position:absolute; inset:0;
-      display:none; align-items:center;
-      justify-content:center; flex-direction:column;
-      gap:14px;
-      background:rgba(7,8,12,0.55);
-      backdrop-filter:blur(8px);
-      -webkit-backdrop-filter:blur(8px);
-      z-index:10;
-    }}
-    .circle-loader {{
-      width:58px; height:58px;
-      border-radius:50% !important;
-      border:4px solid rgba(255,255,255,0.14);
-      border-top-color:#fff;
-      border-right-color:#c4b5fd;
-      animation:spin .9s linear infinite;
-      box-shadow:0 0 20px rgba(124,58,237,0.18);
-    }}
-    .loader span {{
-      font-size:14px; font-weight:600;
-      color:#fff; letter-spacing:0.02em;
-    }}
-    @keyframes spin {{
-      from {{ transform:rotate(0deg); }}
-      to   {{ transform:rotate(360deg); }}
+      position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
+      flex-direction: column; gap: 14px; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 10;
     }}
+    .spinner {{ width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.2); border-top-color: var(--ubuntu-orange); border-radius: 50%; animation: spin 1s linear infinite; }}
+    @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
 
-    /* ── meta cards ── */
-    .result-meta {{
-      display:flex; gap:12px; flex-wrap:wrap;
-    }}
-    .meta-card {{
-      border:1px solid var(--border);
-      background:var(--panel-2);
-      padding:12px 14px;
-      flex:1 1 160px;
-    }}
-    .meta-label {{
-      font-size:12px; color:var(--muted);
-      letter-spacing:0.04em; margin-bottom:6px;
-    }}
-    .meta-value {{
-      font-size:14px; font-weight:700;
-      color:var(--text); word-break:break-word;
-      line-height:1.45;
-    }}
-
-    /* ── examples ── */
-    .examples-panel {{
-      margin-top:24px;
-      background:var(--panel);
-      border:1px solid var(--border);
-      overflow:hidden;
-    }}
-    .examples-header {{
-      height:58px;
-      border-bottom:1px solid var(--border);
-      display:flex; align-items:center;
-      padding:0 18px;
-      font-size:20px; font-weight:700;
-      background:#101119;
-    }}
-    .examples-body {{ padding:18px; }}
-    .examples-grid {{
-      display:grid;
-      grid-template-columns:repeat(4,minmax(0,1fr));
-      gap:14px;
-    }}
-    .example-card {{
-      background:#0f1017;
-      border:1px solid var(--border);
-      cursor:pointer; overflow:hidden;
-    }}
-    .example-card:hover {{
-      border-color:#3a3d56; background:#121420;
-    }}
-    .example-card img {{
-      width:100%; aspect-ratio:1/1;
-      object-fit:cover; display:block;
-      border-bottom:1px solid var(--border);
-    }}
-    .example-body {{
-      padding:12px;
-    }}
-    .example-body p {{
-      margin:0; color:var(--text-dim);
-      font-size:13px; line-height:1.5; font-weight:500;
-    }}
-
-    /* ── toast ── */
-    .toast-wrap {{
-      position:fixed; top:18px; right:18px;
-      z-index:9999;
-      display:flex; flex-direction:column; gap:10px;
-    }}
-    .toast {{
-      min-width:260px; max-width:360px;
-      background:#141623;
-      border:1px solid var(--border);
-      color:var(--text); padding:12px 14px;
-      display:flex; align-items:flex-start;
-      justify-content:space-between; gap:12px;
-      box-shadow:0 10px 30px rgba(0,0,0,0.35);
-    }}
-    .toast button {{
-      border:none; background:transparent;
-      color:var(--text); font-size:18px;
-      cursor:pointer; padding:0; line-height:1;
-    }}
-
-    /* ── responsive ── */
-    @media(max-width:1100px) {{
-      .main-grid {{ grid-template-columns:1fr; }}
-      .examples-grid {{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
-    }}
-    @media(max-width:640px) {{
-      .container {{ padding:16px; }}
-      .title {{ font-size:32px; }}
-      .advanced-grid, .actions {{ grid-template-columns:1fr; }}
-      .examples-grid {{ grid-template-columns:1fr; }}
-      .result-meta {{ flex-direction:column; }}
+    @media (max-width: 980px) {{
+      .layout {{ grid-template-columns: 1fr; }}
+      .panel {{ min-height: auto; }}
+      .result-shell {{ min-height: 500px; }}
     }}
   </style>
 </head>
 <body>
-<div class="toast-wrap" id="toastWrap"></div>
-
-<div class="app-shell">
-  <div class="topbar">Flux.2 Klein 4B — Standard vs Small Decoder Comparison</div>
+  <div class="topbar">FLUX.2 Experimental Space</div>
 
   <div class="container">
+    <div class="hero">
+      <h1 class="title">Flux.2-4B-Decoder-Comparator</h1>
+      <p class="subtitle">Compare <b>FLUX.2-klein-4B</b> side-by-side with <a href="#" target="_blank">small decoder</a>.</p>
+    </div>
 
-    <!-- hero -->
-    <section class="hero">
-      <div class="hero-left">
-        <div class="eyebrow">black-forest-labs / flux.2-klein-4b / decoder-compare</div>
-        <h1 class="title">Decoder Comparator</h1>
-        <div class="hero-tags">
-          <div class="tag tag-purple">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M12 3v18"/><path d="M3 12h18"/>
-            </svg>
-            <span>Inference</span>
-          </div>
-          <div class="tag tag-green">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="3" y="5" width="18" height="14"/>
-              <path d="M8 13l2.5-2.5L13 13"/><path d="M13 13l2-2 3 3"/>
-            </svg>
-            <span>image-to-image</span>
-          </div>
-          <div class="tag tag-orange">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="9"/>
-              <path d="M8 12h8"/><path d="M12 8v8"/>
-            </svg>
-            <span>side-by-side slider</span>
-          </div>
-        </div>
-      </div>
-      <div class="hero-actions">
-        <button class="ghost-btn" type="button"
-          onclick="document.getElementById('examplesSection').scrollIntoView({{behavior:'smooth'}})">
-          Examples
-        </button>
-      </div>
-    </section>
-
-    <!-- main grid -->
-    <div class="main-grid">
-
-      <!-- INPUT PANEL -->
+    <div class="layout">
       <div class="panel">
-        <div class="panel-header">
-          <h2 class="panel-title">Input</h2>
-          <div class="panel-header-right">
-            <span class="status-pill" id="inputStatus">Form</span>
-          </div>
-        </div>
+        <div class="panel-header"><h2 class="panel-title">Inputs</h2></div>
         <div class="panel-body">
-          <div class="form-stack">
-
-            <div class="form-group">
-              <div class="label">Images (optional)</div>
-              <div class="upload-wrap" id="uploadZone">
-                <input id="fileInput" type="file" accept="image/*" multiple/>
-                <button class="upload-placeholder" id="uploadPlaceholder" type="button">
-                  <div class="upload-icon">
-                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none"
-                         stroke="currentColor" stroke-width="1.8">
-                      <path d="M12 4v10"/>
-                      <path d="M8.5 7.5 12 4l3.5 3.5"/>
-                      <path d="M4 16.5h16"/><path d="M6 20h12"/>
-                    </svg>
-                  </div>
-                  <div>
-                    <div style="font-weight:700;color:var(--text);margin-bottom:4px;">
-                      Upload one or more images
-                    </div>
-                    <div style="font-size:13px;color:var(--muted);">Drag & drop or click to browse</div>
-                  </div>
-                </button>
-                <div class="preview-grid" id="previewGrid" style="display:none;"></div>
-              </div>
-              <div class="hint">
-                First image sets width &amp; height automatically (aspect-ratio preserved, max 1024 px).
+          
+          <div>
+            <span class="label">Input Images</span>
+            <div class="upload-wrap" id="uploadZone">
+              <input id="fileInput" type="file" accept="image/*" multiple />
+              <div id="uploadPlaceholder">
+                <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom:8px; color:var(--ubuntu-warm-grey);">
+                  <path d="M12 4v10"></path><path d="M8.5 7.5 12 4l3.5 3.5"></path><path d="M4 16.5h16"></path><path d="M6 20h12"></path>
+                </svg>
+                <div style="font-weight:500;">Click or Drag images here</div>
               </div>
+              <div class="preview-grid" id="previewGrid"></div>
             </div>
+          </div>
 
-            <div class="form-group">
-              <label class="label" for="prompt">Prompt</label>
-              <textarea id="prompt" class="textarea"
-                placeholder="Describe what you want to generate or edit…"></textarea>
-            </div>
+          <div>
+            <label class="label" for="prompt">Prompt</label>
+            <textarea id="prompt" class="textarea" placeholder="e.g., A black cat holding a sign that says hello world..."></textarea>
+          </div>
 
-            <!-- advanced -->
-            <div class="advanced">
-              <button class="advanced-toggle" id="advancedToggle" type="button">
-                <span>Advanced Settings</span>
-                <span id="advancedIcon" style="font-size:22px;font-weight:700;line-height:1;">+</span>
-              </button>
-              <div class="advanced-body" id="advancedBody">
-                <div class="advanced-grid">
-                  <div class="form-group">
-                    <label class="label" for="seed">seed</label>
-                    <input id="seed" class="input" type="number" min="0" max="{MAX_SEED}" value="0"/>
-                  </div>
-                  <div class="form-group">
-                    <label class="label" for="steps">steps</label>
-                    <input id="steps" class="input" type="number" min="1" max="20" value="4"/>
-                  </div>
-                  <div class="form-group">
-                    <label class="label" for="width">width</label>
-                    <input id="width" class="input" type="number" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024"/>
-                  </div>
-                  <div class="form-group">
-                    <label class="label" for="height">height</label>
-                    <input id="height" class="input" type="number" min="256" max="{MAX_IMAGE_SIZE}" step="8" value="1024"/>
-                  </div>
-                  <div class="form-group">
-                    <label class="label" for="guidance">guidance scale</label>
-                    <input id="guidance" class="input" type="number" min="0" max="10" step="0.1" value="1.0"/>
-                  </div>
-                </div>
-                <div class="checkbox-row">
-                  <input id="randomizeSeed" type="checkbox" checked/>
-                  <label for="randomizeSeed">Randomize seed</label>
-                </div>
+          <div>
+            <button class="advanced-toggle" id="advancedToggle" type="button">
+              <span>Advanced Settings</span><span id="advIcon">+</span>
+            </button>
+            <div class="advanced-body" id="advancedBody">
+              <div class="grid-2">
+                <div><label class="label">Seed</label><input class="input" type="number" id="seed" value="0"></div>
+                <div><label class="label">Steps</label><input class="input" type="number" id="steps" value="4" min="1" max="20"></div>
+                <div><label class="label">Width</label><input class="input" type="number" id="width" value="1024" step="8"></div>
+                <div><label class="label">Height</label><input class="input" type="number" id="height" value="1024" step="8"></div>
+                <div style="grid-column: span 2;"><label class="label">Guidance</label><input class="input" type="number" id="guidance" value="1.0" step="0.1"></div>
               </div>
+              <label style="display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-dim); cursor:pointer;">
+                <input type="checkbox" id="randSeed" checked> Randomize Seed
+              </label>
             </div>
+          </div>
 
-            <div class="actions">
-              <button class="btn btn-primary" id="runBtn" type="button">Compare</button>
-              <button class="btn" id="clearBtn" type="button">Clear</button>
-            </div>
-
+          <div class="actions">
+            <button class="btn btn-primary" id="runBtn" type="button">Run Comparison</button>
           </div>
         </div>
-      </div><!-- /input panel -->
+      </div>
 
-      <!-- RESULT PANEL -->
       <div class="panel">
         <div class="panel-header">
-          <h2 class="panel-title">Result</h2>
-          <div class="panel-header-right">
-            <span style="font-size:13px;color:var(--muted);">drag the handle to compare</span>
-            <span class="status-pill" id="resultStatus">Idle</span>
-          </div>
+          <h2 class="panel-title">Comparison Result</h2>
+          <span style="font-size:13px; color:var(--muted);" id="metaText">Idle</span>
         </div>
-        <div class="panel-body">
+        <div class="panel-body" style="padding:0;">
           <div class="result-shell">
+            
+            <div class="empty-state" id="emptyState">
+              <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" style="margin-bottom:12px;">
+                <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>
+              <div>Your outputs will appear here</div>
+            </div>
 
-            <!-- ── image comparison slider ── -->
-            <div class="slider-wrap" id="sliderWrap">
-
-              <!-- empty placeholder -->
-              <div class="slider-empty" id="sliderEmpty">
-                <div class="slider-empty-box">
-                  <svg viewBox="0 0 24 24" width="30" height="30" fill="none"
-                       stroke="currentColor" stroke-width="1.8">
-                    <rect x="4" y="5" width="16" height="11"/>
-                    <path d="M8 12l2.5-2.5L13 12"/><path d="M13 12l2-2 2 2"/>
-                    <path d="M12 16v4"/>
-                  </svg>
-                </div>
-                <div>
-                  <div style="font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px;">
-                    No output yet
-                  </div>
-                  <div style="font-size:14px;color:var(--muted);">
-                    Both results will appear here as a draggable comparison
-                  </div>
+            <div class="comparison-container" id="compContainer">
+              <img id="imgStd" alt="Standard Decoder">
+              <img id="imgSml" alt="Small Decoder">
+              
+              <div class="decoder-label left">Standard VAE</div>
+              <div class="decoder-label right">Small Decoder</div>
+              
+              <div class="slider-line" id="sliderLine">
+                <div class="slider-pill">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 18l-6-6 6-6"/></svg>
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 18l6-6-6-6"/></svg>
                 </div>
               </div>
+              <input type="range" min="0" max="100" value="50" class="slider-input" id="compareSlider">
+            </div>
 
-              <!-- after = small decoder (right / background) -->
-              <img id="imgAfter"  class="slider-img" alt="Small Decoder output"/>
-              <!-- before = standard decoder (left / foreground, clipped) -->
-              <img id="imgBefore" class="slider-img" alt="Standard Decoder output"/>
-
-              <!-- divider -->
-              <div class="slider-divider" id="sliderDivider"></div>
-
-              <!-- handle -->
-              <div class="slider-handle" id="sliderHandle">
-                <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
-                     stroke="white" stroke-width="2.2">
-                  <path d="M8 5l-5 7 5 7"/><path d="M16 5l5 7-5 7"/>
-                </svg>
-              </div>
-
-              <!-- labels -->
-              <div class="slider-label" id="labelBefore">Standard Decoder</div>
-              <div class="slider-label" id="labelAfter">Small Decoder</div>
-
-              <!-- download bar -->
-              <div class="dl-bar" id="dlBar">
-                <a class="dl-btn" id="dlStandard" download title="Download standard">
-                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
-                       stroke="currentColor" stroke-width="2.4">
-                    <path d="M12 4v10"/><path d="m7.5 10.5 4.5 4.5 4.5-4.5"/>
-                    <path d="M5 20h14"/>
-                  </svg>
-                  Standard
-                </a>
-                <a class="dl-btn" id="dlSmall" download title="Download small">
-                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
-                       stroke="currentColor" stroke-width="2.4">
-                    <path d="M12 4v10"/><path d="m7.5 10.5 4.5 4.5 4.5-4.5"/>
-                    <path d="M5 20h14"/>
-                  </svg>
-                  Small
-                </a>
-              </div>
-
-              <!-- loader -->
-              <div class="loader" id="loaderOverlay">
-                <div class="circle-loader"></div>
-                <span>Running both pipelines…</span>
-              </div>
-
-            </div><!-- /slider-wrap -->
-
-            <!-- meta -->
-            <div class="result-meta">
-              <div class="meta-card">
-                <div class="meta-label">seed used</div>
-                <div class="meta-value" id="usedSeed">—</div>
-              </div>
-              <div class="meta-card">
-                <div class="meta-label">device</div>
-                <div class="meta-value" id="deviceValue">{DEVICE_LABEL}</div>
-              </div>
-              <div class="meta-card">
-                <div class="meta-label">slider position</div>
-                <div class="meta-value" id="sliderPct">50 %</div>
-              </div>
+            <div class="loader" id="loader">
+              <div class="spinner"></div>
+              <div style="font-weight:500;">Running parallel pipelines...</div>
             </div>
 
           </div>
         </div>
-      </div><!-- /result panel -->
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const state = {{ files: [], advanced: false }};
+
+    const uploadZone = document.getElementById('uploadZone');
+    const fileInput = document.getElementById('fileInput');
+    const previewGrid = document.getElementById('previewGrid');
+    const uploadPlaceholder = document.getElementById('uploadPlaceholder');
+    
+    const advToggle = document.getElementById('advancedToggle');
+    const advBody = document.getElementById('advancedBody');
+    const advIcon = document.getElementById('advIcon');
+    
+    const runBtn = document.getElementById('runBtn');
+    const loader = document.getElementById('loader');
+    
+    const compContainer = document.getElementById('compContainer');
+    const emptyState = document.getElementById('emptyState');
+    const imgStd = document.getElementById('imgStd');
+    const imgSml = document.getElementById('imgSml');
+    const compareSlider = document.getElementById('compareSlider');
+    const sliderLine = document.getElementById('sliderLine');
+    const metaText = document.getElementById('metaText');
+
+    // -- File Upload Logic --
+    function renderFiles() {{
+      previewGrid.innerHTML = '';
+      if(state.files.length === 0) {{
+        uploadPlaceholder.style.display = 'block';
+        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 = '&times;';
+        btn.onclick = (e) => {{ e.stopPropagation(); state.files.splice(idx,1); renderFiles(); }};
+        div.appendChild(img); div.appendChild(btn);
+        previewGrid.appendChild(div);
+      }});
+    }}
+
+    uploadZone.onclick = (e) => {{ if(e.target === uploadZone || e.target.closest('#uploadPlaceholder')) fileInput.click(); }};
+    fileInput.onchange = (e) => {{ state.files.push(...Array.from(e.target.files)); renderFiles(); fileInput.value = ''; }};
+    uploadZone.ondragover = (e) => e.preventDefault();
+    uploadZone.ondrop = (e) => {{ e.preventDefault(); state.files.push(...Array.from(e.dataTransfer.files)); renderFiles(); }};
+
+    // -- Advanced Toggle --
+    advToggle.onclick = () => {{
+      state.advanced = !state.advanced;
+      advBody.classList.toggle('open', state.advanced);
+      advIcon.textContent = state.advanced ? '−' : '+';
+    }};
+
+    // -- Slider Logic --
+    compareSlider.addEventListener('input', (e) => {{
+      const val = e.target.value;
+      imgSml.style.clipPath = `polygon(0 0, ${{val}}% 0, ${{val}}% 100%, 0 100%)`;
+      sliderLine.style.left = `${{val}}%`;
+    }});
 
-    </div><!-- /main-grid -->
+    // -- API Submission --
+    runBtn.onclick = async () => {{
+      const prompt = document.getElementById('prompt').value.trim();
+      if(!prompt) return alert('Please enter a prompt');
+
+      const formData = new FormData();
+      formData.append('prompt', prompt);
+      formData.append('seed', document.getElementById('seed').value);
+      formData.append('randomize_seed', document.getElementById('randSeed').checked);
+      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);
+      
+      state.files.forEach(f => formData.append('images', f));
+
+      loader.style.display = 'flex';
+      runBtn.disabled = true;
 
-    <!-- examples -->
-    <section class="examples-panel" id="examplesSection">
-      <div class="examples-header">Examples</div>
-      <div class="examples-body">
-        <div class="examples-grid" id="examplesGrid"></div>
-      </div>
-    </section>
-
-  </div><!-- /container -->
-</div><!-- /app-shell -->
-
-<script>
-/* ─── data ──────────────────────────────────────��──────────────────────────── */
-const examples = {examples_json};
-
-/* ─── state ─────────────────────────────────────────────────────────────────── */
-const state = {{
-  files: [],
-  advancedOpen: false,
-  sliderPct: 50,
-  dragging: false,
-}};
-
-/* ─── element refs ──────────────────────────────────────────────────────────── */
-const uploadZone        = document.getElementById("uploadZone");
-const fileInput         = document.getElementById("fileInput");
-const uploadPlaceholder = document.getElementById("uploadPlaceholder");
-const previewGrid       = document.getElementById("previewGrid");
-
-const promptEl          = document.getElementById("prompt");
-const seedEl            = document.getElementById("seed");
-const stepsEl           = document.getElementById("steps");
-const widthEl           = document.getElementById("width");
-const heightEl          = document.getElementById("height");
-const guidanceEl        = document.getElementById("guidance");
-const randomizeSeedEl   = document.getElementById("randomizeSeed");
-
-const advancedToggle    = document.getElementById("advancedToggle");
-const advancedBody      = document.getElementById("advancedBody");
-const advancedIcon      = document.getElementById("advancedIcon");
-
-const runBtn            = document.getElementById("runBtn");
-const clearBtn          = document.getElementById("clearBtn");
-
-const resultStatus      = document.getElementById("resultStatus");
-const loaderOverlay     = document.getElementById("loaderOverlay");
-const toastWrap         = document.getElementById("toastWrap");
-
-/* slider elements */
-const sliderWrap        = document.getElementById("sliderWrap");
-const sliderEmpty       = document.getElementById("sliderEmpty");
-const imgBefore         = document.getElementById("imgBefore");   // standard
-const imgAfter          = document.getElementById("imgAfter");    // small
-const sliderDivider     = document.getElementById("sliderDivider");
-const sliderHandle      = document.getElementById("sliderHandle");
-const labelBefore       = document.getElementById("labelBefore");
-const labelAfter        = document.getElementById("labelAfter");
-const dlBar             = document.getElementById("dlBar");
-const dlStandard        = document.getElementById("dlStandard");
-const dlSmall           = document.getElementById("dlSmall");
-
-const usedSeedEl        = document.getElementById("usedSeed");
-const deviceValueEl     = document.getElementById("deviceValue");
-const sliderPctEl       = document.getElementById("sliderPct");
-
-/* ─── toast ─────────────────────────────────────────────────────────────────── */
-function showToast(msg) {{
-  const t = document.createElement("div");
-  t.className = "toast";
-  const txt = document.createElement("div");
-  txt.textContent = msg;
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.innerHTML = "&times;";
-  btn.addEventListener("click", () => t.remove());
-  t.appendChild(txt);
-  t.appendChild(btn);
-  toastWrap.appendChild(t);
-  setTimeout(() => t.remove(), 4500);
-}}
-
-/* ─── status ─────────────────────────────────────────────────────────────────── */
-function setResultStatus(active) {{
-  resultStatus.textContent = active ? "Active" : "Idle";
-  resultStatus.classList.toggle("active", active);
-}}
-
-function setLoading(loading) {{
-  loaderOverlay.style.display = loading ? "flex" : "none";
-  runBtn.disabled   = loading;
-  clearBtn.disabled = loading;
-  runBtn.style.opacity = clearBtn.style.opacity = loading ? "0.8" : "1";
-  runBtn.style.cursor  = clearBtn.style.cursor  = loading ? "not-allowed" : "pointer";
-  setResultStatus(loading);
-}}
-
-/* ─── advanced ───────────────────────────────────────────────────────────────── */
-function setAdvanced(open) {{
-  state.advancedOpen = open;
-  advancedBody.classList.toggle("open", open);
-  advancedIcon.textContent = open ? "−" : "+";
-}}
-advancedToggle.addEventListener("click", () => setAdvanced(!state.advancedOpen));
-
-/* ─── slider logic ───────────────────────────────────────────────────────────── */
-function applySlider(pct) {{
-  state.sliderPct = pct;
-  const p = pct.toFixed(1);
-
-  /* clip the "before" (standard) image so only left portion shows */
-  imgBefore.style.clipPath = `inset(0 ${{(100 - pct).toFixed(1)}}% 0 0)`;
-
-  /* position divider & handle */
-  sliderDivider.style.left = p + "%";
-  sliderHandle.style.left  = p + "%";
-
-  /* update meta */
-  sliderPctEl.textContent = Math.round(pct) + " %";
-}}
-
-function pctFromEvent(e) {{
-  const rect = sliderWrap.getBoundingClientRect();
-  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-  return Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
-}}
-
-sliderHandle.addEventListener("mousedown",  (e) => {{ state.dragging = true; e.preventDefault(); }});
-sliderHandle.addEventListener("touchstart", (e) => {{ state.dragging = true; }}, {{ passive: true }});
-
-window.addEventListener("mousemove", (e) => {{
-  if (!state.dragging) return;
-  applySlider(pctFromEvent(e));
-}});
-window.addEventListener("touchmove", (e) => {{
-  if (!state.dragging) return;
-  applySlider(pctFromEvent(e));
-}}, {{ passive: true }});
-
-window.addEventListener("mouseup",  () => {{ state.dragging = false; }});
-window.addEventListener("touchend", () => {{ state.dragging = false; }});
-
-/* also allow clicking anywhere on the wrap to jump */
-sliderWrap.addEventListener("click", (e) => {{
-  if (e.target === sliderHandle) return;
-  if (!imgBefore.classList.contains("visible")) return;
-  applySlider(pctFromEvent(e));
-}});
-
-function showSlider(standardUrl, smallUrl) {{
-  sliderEmpty.style.display = "none";
-
-  imgBefore.src = standardUrl;
-  imgAfter.src  = smallUrl;
-  imgBefore.classList.add("visible");
-  imgAfter.classList.add("visible");
-
-  sliderDivider.classList.add("visible");
-  sliderHandle.classList.add("visible");
-  labelBefore.classList.add("visible");
-  labelAfter.classList.add("visible");
-  dlBar.classList.add("visible");
-
-  applySlider(50);
-}}
-
-/* ─── upload ─────────────────────────────────────────────────────────────────── */
-function createThumb(file, index) {{
-  const wrap = document.createElement("div");
-  wrap.className = "thumb";
-  const img = document.createElement("img");
-  img.src = URL.createObjectURL(file);
-  img.alt = file.name;
-  const rm = document.createElement("button");
-  rm.type = "button";
-  rm.className = "thumb-remove";
-  rm.innerHTML = "&times;";
-  rm.addEventListener("click", (e) => {{
-    e.stopPropagation();
-    state.files.splice(index, 1);
-    renderPreviews();
-  }});
-  wrap.appendChild(img);
-  wrap.appendChild(rm);
-  return wrap;
-}}
-
-function renderPreviews() {{
-  previewGrid.innerHTML = "";
-  if (!state.files.length) {{
-    uploadPlaceholder.style.display = "flex";
-    previewGrid.style.display = "none";
-    return;
-  }}
-  uploadPlaceholder.style.display = "none";
-  previewGrid.style.display = "grid";
-  state.files.forEach((f, i) => previewGrid.appendChild(createThumb(f, i)));
-}}
-
-function addFiles(list) {{
-  const valid = Array.from(list).filter(f => f.type.startsWith("image/"));
-  if (!valid.length) {{ showToast("Please upload valid image files."); return; }}
-  state.files = [...state.files, ...valid];
-  renderPreviews();
-}}
-
-uploadPlaceholder.addEventListener("click", () => fileInput.click());
-uploadZone.addEventListener("click", (e) => {{ if (e.target === uploadZone) fileInput.click(); }});
-fileInput.addEventListener("change", (e) => {{ addFiles(e.target.files); fileInput.value = ""; }});
-
-uploadZone.addEventListener("dragover",  (e) => {{ e.preventDefault(); uploadZone.classList.add("dragover"); }});
-uploadZone.addEventListener("dragleave", ()  => uploadZone.classList.remove("dragover"));
-uploadZone.addEventListener("drop", (e) => {{
-  e.preventDefault();
-  uploadZone.classList.remove("dragover");
-  if (e.dataTransfer.files?.length) addFiles(e.dataTransfer.files);
-}});
-
-/* ─── clear ──────────────────────────────────────────────────────────────────── */
-function clearAll() {{
-  state.files = [];
-  renderPreviews();
-  promptEl.value = "";
-  seedEl.value = "0"; stepsEl.value = "4";
-  widthEl.value = "1024"; heightEl.value = "1024";
-  guidanceEl.value = "1.0";
-  randomizeSeedEl.checked = true;
-
-  imgBefore.classList.remove("visible"); imgBefore.removeAttribute("src");
-  imgAfter.classList.remove("visible");  imgAfter.removeAttribute("src");
-  sliderDivider.classList.remove("visible");
-  sliderHandle.classList.remove("visible");
-  labelBefore.classList.remove("visible");
-  labelAfter.classList.remove("visible");
-  dlBar.classList.remove("visible");
-  sliderEmpty.style.display = "flex";
-
-  usedSeedEl.textContent   = "—";
-  deviceValueEl.textContent = "{DEVICE_LABEL}";
-  sliderPctEl.textContent   = "50 %";
-
-  setResultStatus(false);
-  setAdvanced(false);
-  setLoading(false);
-}}
-clearBtn.addEventListener("click", clearAll);
-
-/* ─── examples ────────��──────────────────────────────────────────────────────── */
-async function fileFromUrl(url, name = "example.jpg") {{
-  const res = await fetch(url);
-  if (!res.ok) throw new Error("Failed to fetch example image.");
-  const blob = await res.blob();
-  return new File([blob], name, {{ type: blob.type || "image/jpeg" }});
-}}
-
-function renderExamples() {{
-  const grid = document.getElementById("examplesGrid");
-  grid.innerHTML = "";
-  examples.forEach(item => {{
-    const card = document.createElement("div");
-    card.className = "example-card";
-    const img = document.createElement("img");
-    img.src = item.url; img.alt = item.file;
-    const body = document.createElement("div");
-    body.className = "example-body";
-    const p = document.createElement("p");
-    p.textContent = item.prompt;
-    body.appendChild(p);
-    card.appendChild(img);
-    card.appendChild(body);
-    card.addEventListener("click", async () => {{
       try {{
-        const f = await fileFromUrl(item.url, item.file);
-        state.files = [f];
-        renderPreviews();
-        promptEl.value = item.prompt;
-        showToast("Example loaded.");
+        const res = await fetch('/api/compare', {{ method: 'POST', body: formData }});
+        const data = await res.json();
+        
+        if(!data.success) throw new Error(data.error);
+
+        // Load images into slider
+        imgStd.src = data.std_url + '?t=' + Date.now();
+        imgSml.src = data.sml_url + '?t=' + Date.now();
+        
+        emptyState.style.display = 'none';
+        compContainer.style.display = 'block';
+        
+        // Reset slider to center
+        compareSlider.value = 50;
+        compareSlider.dispatchEvent(new Event('input'));
+
+        metaText.textContent = `Seed: ${{data.seed}} | Device: ${{data.device}}`;
+
       }} catch(err) {{
-        showToast(err.message || "Failed to load example.");
+        alert('Error: ' + err.message);
+      }} finally {{
+        loader.style.display = 'none';
+        runBtn.disabled = false;
       }}
-    }});
-    grid.appendChild(card);
-  }});
-}}
-
-/* ─── submit ─────────────────────────────────────────────────────────────────── */
-async function submitCompare() {{
-  const prompt = promptEl.value.trim();
-  if (!prompt) {{ showToast("Please enter a prompt."); return; }}
-
-  const fd = new FormData();
-  fd.append("prompt",         prompt);
-  fd.append("seed",           seedEl.value || "0");
-  fd.append("randomize_seed", String(randomizeSeedEl.checked));
-  fd.append("width",          widthEl.value  || "1024");
-  fd.append("height",         heightEl.value || "1024");
-  fd.append("steps",          stepsEl.value  || "4");
-  fd.append("guidance_scale", guidanceEl.value || "1.0");
-  state.files.forEach(f => fd.append("images", f));
-
-  setLoading(true);
-  try {{
-    const res  = await fetch("/api/compare", {{ method:"POST", body:fd }});
-    const data = await res.json();
-    if (!res.ok || !data.success) throw new Error(data.error || "Processing failed.");
-
-    /* show slider */
-    showSlider(
-      data.standard_url + "?t=" + Date.now(),
-      data.small_url    + "?t=" + Date.now()
-    );
-
-    dlStandard.href = data.standard_url;
-    dlSmall.href    = data.small_url;
-
-    usedSeedEl.textContent    = String(data.seed);
-    deviceValueEl.textContent = (data.device || "{DEVICE_LABEL}").toLowerCase();
-
-  }} catch(err) {{
-    showToast(err.message || "An unexpected error occurred.");
-  }} finally {{
-    setLoading(false);
-  }}
-}}
-
-runBtn.addEventListener("click", submitCompare);
-promptEl.addEventListener("keydown", e => {{
-  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) submitCompare();
-}});
-
-/* ─── init ───────────────────────────────────────────────────────────────────── */
-setAdvanced(false);
-setResultStatus(false);
-renderExamples();
-renderPreviews();
-applySlider(50);
-</script>
-</body>
-</html>"""
+    }};
 
+  </script>
+</body>
+</html>
+"""
 
 app.launch()