Update app.py

app.py

@@ -1,6 +1,7 @@
+
 import os
-import io
 import gc
+import io
 import uuid
 import json
 import base64
@@ -18,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
@@ -34,70 +35,78 @@ OUTPUT_DIR.mkdir(exist_ok=True)
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
-dtype  = torch.bfloat16
-device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+dtype = torch.bfloat16
+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 = str(device).lower()
+    DEVICE_LABEL = DEVICE
 
-# --- 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()
+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
+
 
-# --- 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[str], width: int, height: int):
-    if not image_paths:
-        return None
-    
-    resized = []
+
+def parse_and_resize_images(image_paths: list, width: int, height: int):
+    raw_list = []
     for path in image_paths:
         try:
             img = Image.open(path).convert("RGB")
-            resized.append(img.resize((width, height), Image.LANCZOS))
+            raw_list.append(img)
         except Exception as e:
             print(f"Skipping invalid image: {e}")
-            
-    return resized if resized else None
+    if not raw_list:
+        return None
+    return [img.resize((width, height), Image.LANCZOS) for img in raw_list]
+
 
 def run_pipeline(pipe, lock, kwargs, seed):
     with lock:
@@ -105,67 +114,80 @@ def run_pipeline(pipe, lock, kwargs, seed):
         result = pipe(**kwargs, generator=gen).images[0]
     return result
 
-def save_image(img: Image.Image, prefix: str = "output") -> str:
-    filename = f"{prefix}_{uuid.uuid4().hex}.png"
+
+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
-    img.save(path, format="PNG")
-    return filename
+    if not path.exists():
+        return JSONResponse({"error": "File not found"}, status_code=404)
+    return FileResponse(path, filename=filename, media_type="image/png")
+
 
-# --- Inference Function ---
 @spaces.GPU(duration=120)
-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,
-):
+def run_inference(image_paths, prompt, seed, randomize_seed, width, height, steps, guidance_scale):
     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 and len(image_paths) > 0:
+    if image_paths:
         try:
             first_pil = Image.open(image_paths[0]).convert("RGB")
             width, height = calc_dimensions(first_pil)
-            image_list = parse_and_resize_images(image_paths, width, height)
-        except Exception as e:
-            print(f"Error processing upload: {e}")
+        except Exception:
+            pass
+        image_list = parse_and_resize_images(image_paths, width, height)
 
-    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=num_inference_steps,
+        num_inference_steps=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():
@@ -174,51 +196,6 @@ def infer(
     return out_standard, out_small, seed
 
 
-# --- FastAPI Endpoints ---
-def get_example_items():
-    # Hardcode the multi-image example
-    items = [
-        {
-            "files": ["/example-file/I1.jpg", "/example-file/I2.jpg"],
-            "prompt": "Make her wear these glasses in Image 2.",
-            "thumb": "/example-file/I1.jpg"
-        }
-    ]
-    
-    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.",
-    }
-
-    if EXAMPLES_DIR.exists():
-        for name in sorted(os.listdir(EXAMPLES_DIR)):
-            # Ignore the specific I1/I2 files since they are bundled in the first example manually
-            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")) and name not in ["I1.jpg", "I2.jpg"]:
-                items.append(
-                    {
-                        "files": [f"/example-file/{name}"],
-                        "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
-                        "thumb": f"/example-file/{name}"
-                    }
-                )
-    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(...),
@@ -227,7 +204,7 @@ async def compare_images(
     width: str = Form("1024"),
     height: str = Form("1024"),
     steps: str = Form("4"),
-    guidance: str = Form("1.0"),
+    guidance_scale: str = Form("1.0"),
     images: Optional[List[UploadFile]] = File(None),
 ):
     temp_paths = []
@@ -235,34 +212,40 @@ 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_path = OUTPUT_DIR / f"upload_{uuid.uuid4().hex}{suffix}"
+                temp_name = f"upload_{uuid.uuid4().hex}{suffix}"
+                temp_path = OUTPUT_DIR / temp_name
                 content = await upload.read()
                 with open(temp_path, "wb") as f:
                     f.write(content)
                 temp_paths.append(str(temp_path))
                 image_paths.append(str(temp_path))
 
-        result_std, result_small, used_seed = infer(
-            prompt=prompt,
+        out_standard, out_small, used_seed = run_inference(
             image_paths=image_paths,
+            prompt=prompt,
             seed=int(seed),
-            randomize_seed=(randomize_seed.lower() == "true"),
+            randomize_seed=randomize_seed.lower() == "true",
             width=int(width),
             height=int(height),
-            num_inference_steps=int(steps),
-            guidance_scale=float(guidance),
+            steps=int(steps),
+            guidance_scale=float(guidance_scale),
         )
 
-        std_filename = save_image(result_std, prefix="std")
-        small_filename = save_image(result_small, prefix="small")
+        std_filename = save_image(out_standard, prefix="standard")
+        small_filename = save_image(out_small, prefix="small")
 
         return JSONResponse({
             "success": True,
             "seed": used_seed,
-            "std_url": f"/download/{std_filename}",
-            "small_url": f"/download/{small_filename}",
+            "standard": {
+                "image_url": f"/download/{std_filename}",
+                "download_url": f"/download/{std_filename}",
+            },
+            "small": {
+                "image_url": f"/download/{small_filename}",
+                "download_url": f"/download/{small_filename}",
+            },
             "device": DEVICE_LABEL,
         })
 
@@ -270,653 +253,1795 @@ async def compare_images(
         return JSONResponse({"success": False, "error": str(e)}, status_code=500)
     finally:
         for p in temp_paths:
-            if os.path.exists(p):
-                os.remove(p)
+            try:
+                if os.path.exists(p):
+                    os.remove(p)
+            except Exception:
+                pass
+
 
-# --- 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-4B-Decoder-Comparator</title>
-  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <title>FLUX.2 Decoder Comparator — Ubuntu Terminal</title>
   <style>
+    @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&family=Ubuntu:wght@300;400;500;700&display=swap');
+
     :root {{
-      --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);
+      --term-bg:        #300a24;
+      --term-bg2:       #3a0d2e;
+      --term-bg3:       #240818;
+      --term-surface:   #3d0f29;
+      --term-surface2:  #4a1233;
+      --term-border:    #6b2148;
+      --term-border2:   #7d2757;
+      --term-text:      #ffffff;
+      --term-text-dim:  #d3b6c8;
+      --term-text-muted:#9e6b8a;
+      --term-green:     #4caf50;
+      --term-green2:    #81d441;
+      --term-yellow:    #f4c21b;
+      --term-blue:      #729fcf;
+      --term-cyan:      #34e2e2;
+      --term-orange:    #e95420;
+      --term-orange2:   #f47045;
+      --term-red:       #ef2929;
+      --term-purple:    #ad7fa8;
+      --term-white:     #eeeeec;
+      --term-prompt:    #4caf50;
+      --term-cursor:    #ffffff;
+      --scrollbar:      #6b2148;
+      --radius:         3px;
+    }}
+
+    * {{ box-sizing: border-box; margin: 0; padding: 0; }}
+
+    html, body {{
+      background: #1a0010;
+      color: var(--term-text);
+      font-family: 'Ubuntu Mono', monospace;
       min-height: 100vh;
+      overflow-x: hidden;
+    }}
+
+    ::-webkit-scrollbar {{ width: 6px; height: 6px; }}
+    ::-webkit-scrollbar-track {{ background: var(--term-bg3); }}
+    ::-webkit-scrollbar-thumb {{ background: var(--scrollbar); border-radius: 3px; }}
+
+    /* ═══════════════════════════════════════════
+       DESKTOP BACKGROUND
+    ═══════════════════════════════════════════ */
+    .desktop {{
+      min-height: 100vh;
+      background:
+        radial-gradient(ellipse at 20% 50%, rgba(233,84,32,0.08) 0%, transparent 60%),
+        radial-gradient(ellipse at 80% 20%, rgba(76,175,80,0.05) 0%, transparent 50%),
+        linear-gradient(180deg, #1a0010 0%, #240818 100%);
+      padding: 0;
       display: flex;
       flex-direction: column;
     }}
 
-    .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);
+    /* ═══════════════════════════════════════════
+       UBUNTU TOP PANEL (taskbar)
+    ═══════════════════════════════════════════ */
+    .ubuntu-panel {{
+      height: 28px;
+      background: #2c001e;
+      border-bottom: 1px solid #5a1040;
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      gap: 0;
+      position: sticky;
+      top: 0;
+      z-index: 200;
+      flex-shrink: 0;
     }}
 
-    .container {{
-      max-width: 1300px;
-      margin: 0 auto;
-      padding: 30px 20px;
-      flex: 1;
-      width: 100%;
+    .panel-activities {{
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--term-white);
+      padding: 0 12px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      letter-spacing: 0.02em;
     }}
 
-    .header-text {{
-      text-align: center;
-      margin-bottom: 30px;
-    }}
-    .header-text h1 {{
-      margin: 0 0 10px 0;
-      font-size: 2.2rem;
-    }}
-    .header-text p {{
-      color: var(--ub-muted);
-      margin: 0;
-    }}
+    .panel-activities:hover {{ background: rgba(255,255,255,0.08); }}
 
-    /* Layout enforces identical heights for both panels */
-    .layout {{
-      display: grid;
-      grid-template-columns: 400px 1fr;
-      gap: 24px;
-      align-items: stretch; /* Forces equal height */
-      height: 700px; /* Fixed height for the main interactive area */
+    .panel-app-name {{
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 13px;
+      color: var(--term-white);
+      padding: 0 10px;
+      opacity: 0.85;
     }}
 
-    .panel {{
-      background: var(--ub-panel);
-      border-radius: var(--panel-radius);
-      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+    .panel-right {{
+      margin-left: auto;
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      gap: 0;
+    }}
+
+    .panel-indicator {{
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 12px;
+      color: var(--term-white);
+      padding: 0 10px;
       height: 100%;
-      overflow: hidden;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      opacity: 0.9;
     }}
 
-    .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;
-      flex-shrink: 0;
+    .panel-indicator:hover {{ background: rgba(255,255,255,0.08); }}
+
+    .panel-dot {{
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--term-green2);
     }}
 
-    .panel-body {{ 
-      padding: 20px; 
-      flex: 1; 
-      overflow-y: auto; /* Allows scrolling inside if settings get too tall */
+    .panel-dot.busy {{ background: var(--term-orange); animation: blink 1s ease-in-out infinite; }}
+
+    @keyframes blink {{ 0%,100% {{ opacity:1; }} 50% {{ opacity:0.3; }} }}
+
+    /* ═══════════════════════════════════════════
+       MAIN CONTENT AREA
+    ═══════════════════════════════════════════ */
+    .workspace {{
+      flex: 1;
+      padding: 20px;
       display: flex;
       flex-direction: column;
+      gap: 16px;
+      max-width: 1400px;
+      margin: 0 auto;
+      width: 100%;
     }}
 
-    /* Input Forms */
-    .form-group {{ margin-bottom: 20px; flex-shrink: 0; }}
-    .label {{
-      display: block; font-weight: 500; font-size: 14px;
-      color: var(--ub-muted); margin-bottom: 8px;
+    /* ═══════════════════════════════════════════
+       TERMINAL WINDOW BASE
+    ��══════════════════════════════════════════ */
+    .term-window {{
+      background: var(--term-bg);
+      border: 1px solid var(--term-border);
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow:
+        0 8px 32px rgba(0,0,0,0.6),
+        0 0 0 1px rgba(255,255,255,0.04) inset,
+        0 1px 0 rgba(255,255,255,0.08) inset;
     }}
 
-    .textarea, .input {{
-      width: 100%;
-      background: var(--ub-input);
-      border: 1px solid var(--ub-border);
-      color: var(--ub-text);
-      padding: 12px;
-      border-radius: 4px;
-      outline: none;
-      font-size: 14px;
+    /* ═══════════════════════════════════════════
+       TERMINAL TITLE BAR
+    ═══════════════════════════════════════════ */
+    .term-titlebar {{
+      height: 36px;
+      background: linear-gradient(180deg, #4a1a38 0%, #3d1230 100%);
+      border-bottom: 1px solid var(--term-border);
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      gap: 8px;
+      position: relative;
+      flex-shrink: 0;
     }}
-    .textarea:focus, .input:focus {{ border-color: var(--ub-orange); }}
-    .textarea {{ min-height: 100px; resize: vertical; }}
 
-    /* Upload Container: Handles both empty state and populated state gracefully */
-    .upload-container {{
-      background: var(--ub-input);
-      border: 1px dashed var(--ub-muted);
-      border-radius: 4px;
-      padding: 15px;
-      min-height: 120px;
+    .wm-buttons {{
       display: flex;
-      flex-direction: column;
-      justify-content: center;
-      transition: border-color 0.2s, background 0.2s;
-    }}
-    .upload-container.dragover {{
-      border-color: var(--ub-orange);
-      background: rgba(233,84,32,0.05);
-    }}
-    .upload-container.has-files {{
-      border: 1px solid var(--ub-border);
-      padding: 10px;
-      justify-content: flex-start;
-    }}
-    
-    .upload-placeholder {{
-      text-align: center; cursor: pointer; color: var(--ub-muted);
-      padding: 20px 0;
-    }}
-    .upload-placeholder:hover {{ color: var(--ub-orange); }}
-    .upload-container input[type="file"] {{ display: none; }}
-    
-    .image-list {{
-      display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;
-    }}
-    .image-list::-webkit-scrollbar {{ height: 6px; }}
-    .image-list::-webkit-scrollbar-thumb {{ background: var(--ub-panel-light); border-radius: 3px; }}
-    
-    .thumb {{
-      position: relative; width: 85px; height: 85px; flex-shrink: 0;
-      border-radius: 4px; overflow: hidden; border: 1px solid var(--ub-border);
+      gap: 7px;
+      flex-shrink: 0;
     }}
-    .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: 22px; height: 22px;
-      display: flex; align-items: center; justify-content: center;
-      cursor: pointer; font-size: 14px; line-height: 1;
-    }}
-    .thumb-remove:hover {{ background: rgba(233,84,32,0.9); }}
-    
-    .add-more-btn {{
-      width: 85px; height: 85px; flex-shrink: 0;
-      border: 1px dashed var(--ub-orange); border-radius: 4px;
-      display: flex; align-items: center; justify-content: center;
-      font-size: 32px; color: var(--ub-orange); cursor: pointer;
-      background: rgba(233,84,32,0.05); transition: background 0.2s;
-    }}
-    .add-more-btn:hover {{ background: rgba(233,84,32,0.15); }}
-
-    /* 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;
-    }}
-    .btn-primary {{
-      background: var(--ub-orange); color: white;
-      box-shadow: 0 4px 12px rgba(233,84,32,0.3);
-      margin-top: auto; /* Pushes button to bottom if space allows */
-    }}
-    .btn-primary:hover {{ background: var(--ub-orange-hover); }}
-    .btn:disabled {{ opacity: 0.6; cursor: not-allowed; }}
-
-    /* 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; font-size: 15px;
-    }}
-    .advanced-body {{ display: none; padding-top: 10px; margin-bottom: 20px; }}
-    .advanced-body.open {{ display: block; }}
-    .grid-2 {{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }}
-
-    /* SLIDER CONTAINER */
-    .slider-stage {{
-      position: relative;
-      width: 100%;
-      flex: 1; /* Fills remaining space in the equal height panel */
-      background: #111;
-      border-radius: 4px;
-      overflow: hidden;
+
+    .wm-btn {{
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 9px;
+      color: rgba(0,0,0,0.5);
+      transition: filter 0.15s;
+      position: relative;
     }}
-    .slider-empty {{
-      color: var(--ub-muted);
-      text-align: center;
-    }}
-    
-    .slider-img {{
+
+    .wm-btn:hover {{ filter: brightness(1.2); }}
+    .wm-btn:hover::after {{ opacity: 1; }}
+
+    .wm-btn::after {{
+      content: attr(data-icon);
       position: absolute;
-      top: 0; left: 0;
-      width: 100%; height: 100%;
-      object-fit: contain;
-      display: none;
-      user-select: none;
-      -webkit-user-drag: none;
-    }}
-    
-    /* The Small Decoder image sits on top and gets clipped */
-    #imgSmall {{
-      clip-path: inset(0 50% 0 0); 
+      opacity: 0;
+      font-size: 8px;
+      font-weight: 900;
+      color: rgba(0,0,0,0.6);
+      transition: opacity 0.15s;
     }}
 
-    .slider-handle {{
+    .wm-close   {{ background: #e95420; }}
+    .wm-min     {{ background: #f4c21b; }}
+    .wm-max     {{ background: #4caf50; }}
+
+    .term-title {{
       position: absolute;
       left: 50%;
-      top: 0; bottom: 0;
-      width: 4px;
-      background: var(--ub-orange);
-      cursor: ew-resize;
-      display: none;
-      z-index: 10;
+      transform: translateX(-50%);
+      font-size: 13px;
+      color: var(--term-text-dim);
+      font-family: 'Ubuntu Mono', monospace;
+      white-space: nowrap;
+      pointer-events: none;
     }}
-    .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);
+
+    .term-title-icon {{
+      display: inline-block;
+      margin-right: 6px;
+      opacity: 0.7;
     }}
 
-    .slider-labels {{
-      position: absolute;
-      top: 15px; left: 15px; right: 15px;
-      display: none;
-      justify-content: space-between;
-      pointer-events: none;
-      z-index: 5;
+    /* tab bar */
+    .term-tabs {{
+      display: flex;
+      align-items: flex-end;
+      margin-left: auto;
+      gap: 2px;
+      padding-right: 4px;
     }}
-    .badge {{
-      background: rgba(0,0,0,0.6);
-      color: white;
-      padding: 6px 12px;
-      border-radius: 20px;
-      font-size: 13px;
-      backdrop-filter: blur(4px);
+
+    .term-tab {{
+      padding: 4px 14px;
+      font-size: 12px;
+      background: var(--term-bg3);
+      border: 1px solid var(--term-border);
+      border-bottom: none;
+      color: var(--term-text-muted);
+      border-radius: 4px 4px 0 0;
+      cursor: pointer;
+      font-family: 'Ubuntu Mono', monospace;
     }}
 
-    .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;
+    .term-tab.active {{
+      background: var(--term-bg);
+      color: var(--term-text);
+      border-color: var(--term-border2);
     }}
-    .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;
+
+    /* ═══════════════════════════════════════════
+       TERMINAL BODY
+    ═══════════════════════════════════════════ */
+    .term-body {{
+      background: var(--term-bg);
+      padding: 16px 18px;
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 14px;
+      line-height: 1.6;
     }}
 
-    /* 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;
+    /* ═══════════════════════════════════════════
+       TERMINAL TEXT STYLES
+    ═══════════════════════════════════════════ */
+    .t-prompt {{
+      color: var(--term-green);
+      font-weight: 700;
     }}
-    .ex-card {{
-      background: var(--ub-panel); border-radius: 4px; overflow: hidden; position: relative;
-      cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
+
+    .t-user {{
+      color: var(--term-cyan);
+      font-weight: 700;
     }}
-    .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; }}
-    
-    .img-count-badge {{
-      position: absolute; top: 8px; right: 8px;
-      background: rgba(0,0,0,0.7); color: white;
-      font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: bold;
+
+    .t-host {{
+      color: var(--term-green);
+      font-weight: 700;
     }}
 
-    @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
+    .t-path {{
+      color: var(--term-blue);
+      font-weight: 700;
+    }}
 
-    @media (max-width: 900px) {{
-      .layout {{ grid-template-columns: 1fr; height: auto; }}
-      .slider-stage {{ height: 500px; flex: none; }}
+    .t-cmd {{
+      color: var(--term-white);
     }}
-  </style>
-</head>
-<body>
 
-  <div class="topbar">Flux.2-4B VAE Decoder Comparator</div>
+    .t-comment {{
+      color: var(--term-text-muted);
+      font-style: italic;
+    }}
 
-  <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>
+    .t-success {{
+      color: var(--term-green2);
+    }}
 
-    <div class="layout">
-      <div class="panel">
-        <div class="panel-header">Settings</div>
-        <div class="panel-body">
-          <div class="form-group">
-            <label class="label">Input Images (Optional)</label>
-            <div class="upload-container" id="uploadContainer">
-              <input type="file" id="fileInput" multiple accept="image/*" />
-              
-              <div class="upload-placeholder" id="uploadPlaceholder">
-                Click or Drag & Drop images here
-              </div>
-              
-              <div class="image-list" id="imageList" style="display: none;">
-                </div>
-            </div>
-          </div>
+    .t-error {{
+      color: var(--term-red);
+    }}
 
-          <div class="form-group">
-            <label class="label">Prompt</label>
-            <textarea id="promptInput" class="textarea" placeholder="Describe the edit or generation..."></textarea>
-          </div>
+    .t-warn {{
+      color: var(--term-yellow);
+    }}
 
-          <button class="advanced-toggle" id="advToggle">
-            <span>Advanced Settings</span> <span id="advIcon" style="font-weight:700; font-size:18px; line-height:1;">+</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="form-group" style="grid-column: span 2; margin-bottom: 0;">
-                <label style="display:flex; align-items:center; gap:8px; font-size:14px; cursor: pointer;">
-                  <input type="checkbox" id="randomize" checked> Randomize Seed
-                </label>
-              </div>
-            </div>
-          </div>
+    .t-info {{
+      color: var(--term-cyan);
+    }}
 
-          <button class="btn btn-primary" id="runBtn">Run Comparison</button>
-        </div>
-      </div>
+    .t-orange {{
+      color: var(--term-orange2);
+    }}
 
-      <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>
+    .t-purple {{
+      color: var(--term-purple);
+    }}
 
-            <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>
+    .t-dim {{
+      color: var(--term-text-muted);
+    }}
 
-            <div class="slider-handle" id="sliderHandle"></div>
+    .t-bold {{
+      font-weight: 700;
+    }}
 
-            <div class="loader" id="loader">
-              <div class="spinner"></div>
-              <div style="font-weight: 500;">Running both models...</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    .prompt-line {{
+      display: flex;
+      align-items: baseline;
+      gap: 0;
+      flex-wrap: wrap;
+    }}
 
-    <div class="examples-section">
-      <h3>Examples</h3>
-      <div class="examples-grid" id="examplesGrid"></div>
-    </div>
-  </div>
+    .prompt-prefix {{
+      flex-shrink: 0;
+      white-space: pre;
+    }}
 
-  <script>
-    const examples = {examples_json};
-    let filesState = [];
+    .output-line {{
+      padding-left: 0;
+      color: var(--term-text-dim);
+    }}
 
-    // UI Elements
-    const uploadContainer = document.getElementById('uploadContainer');
-    const fileInput = document.getElementById('fileInput');
-    const uploadPlaceholder = document.getElementById('uploadPlaceholder');
-    const imageList = document.getElementById('imageList');
-    
-    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') ? '-' : '+';
-    }};
+    .output-section {{
+      margin: 8px 0;
+      border-left: 2px solid var(--term-border2);
+      padding-left: 12px;
+    }}
 
-    // --- File Upload Logic ---
-    function renderPreviews() {{
-      imageList.innerHTML = '';
-      
-      if(filesState.length > 0) {{
-        uploadContainer.classList.add('has-files');
-        uploadPlaceholder.style.display = 'none';
-        imageList.style.display = 'flex';
-        
-        // Render Thumbnails
-        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.innerHTML = '&times;';
-          btn.onclick = (e) => {{ e.stopPropagation(); filesState.splice(i, 1); renderPreviews(); }};
-          
-          div.appendChild(img); 
-          div.appendChild(btn);
-          imageList.appendChild(div);
-        }});
-        
-        // Add the "+" box to add more images
-        const addMore = document.createElement('div');
-        addMore.className = 'add-more-btn';
-        addMore.innerHTML = '+';
-        addMore.title = "Add more images";
-        addMore.onclick = () => fileInput.click();
-        imageList.appendChild(addMore);
-        
-      }} else {{
-        uploadContainer.classList.remove('has-files');
-        uploadPlaceholder.style.display = 'block';
-        imageList.style.display = 'none';
-      }}
+    /* cursor blink */
+    .cursor {{
+      display: inline-block;
+      width: 8px;
+      height: 15px;
+      background: var(--term-cursor);
+      animation: cursorBlink 1.1s step-end infinite;
+      vertical-align: text-bottom;
+      margin-left: 2px;
     }}
 
-    uploadPlaceholder.onclick = () => fileInput.click();
-    
-    fileInput.onchange = (e) => {{ 
-        if(e.target.files.length) {{
-            filesState.push(...Array.from(e.target.files)); 
-            renderPreviews(); 
-        }}
-        fileInput.value = ''; 
-    }};
-    
-    uploadContainer.ondragover = (e) => {{ e.preventDefault(); uploadContainer.classList.add('dragover'); }};
-    uploadContainer.ondragleave = () => uploadContainer.classList.remove('dragover');
-    uploadContainer.ondrop = (e) => {{
-      e.preventDefault(); uploadContainer.classList.remove('dragover');
-      if(e.dataTransfer.files.length) {{ 
-          filesState.push(...Array.from(e.dataTransfer.files)); 
-          renderPreviews(); 
-      }}
-    }};
+    @keyframes cursorBlink {{ 0%,100% {{ opacity:1; }} 50% {{ opacity:0; }} }}
 
-    // --- Examples Logic ---
-    async function loadExample(urls, prompt) {{
-      try {{
-        loader.style.display = 'flex';
-        loader.querySelector('div:nth-child(2)').innerText = "Loading Example Images...";
-        
-        filesState = [];
-        for(let i=0; i<urls.length; i++) {{
-          const res = await fetch(urls[i]);
-          if (!res.ok) throw new Error("File not found");
-          const blob = await res.blob();
-          const ext = urls[i].split('.').pop() || 'jpg';
-          filesState.push(new File([blob], `example_image_${{i}}.${{ext}}`, {{type: blob.type}}));
-        }}
-        
-        renderPreviews();
-        promptInput.value = prompt;
-        window.scrollTo({{top: 0, behavior: 'smooth'}});
-      }} catch (e) {{ 
-        alert('Failed to load example images. They might be missing from the server.'); 
-      }} finally {{
-        loader.style.display = 'none';
-        loader.querySelector('div:nth-child(2)').innerText = "Running both models...";
-      }}
+    /* ═══════════════════════════════════════════
+       MAIN LAYOUT — two terminal windows side by side
+    ═══════════════════════════════════════════ */
+    .main-layout {{
+      display: grid;
+      grid-template-columns: 420px 1fr;
+      gap: 16px;
+      align-items: start;
     }}
 
-    const exGrid = document.getElementById('examplesGrid');
-    examples.forEach(ex => {{
-      const card = document.createElement('div');
-      card.className = 'ex-card';
-      
-      let badgeHtml = '';
-      if (ex.files.length > 1) {{
-          badgeHtml = `<div class="img-count-badge">${{ex.files.length}} Images</div>`;
-      }}
-      
-      card.innerHTML = `${{badgeHtml}}<img src="${{ex.thumb}}"><p>${{ex.prompt}}</p>`;
-      
-      // Load all files in the array when clicked
-      card.onclick = () => loadExample(ex.files, ex.prompt);
-      exGrid.appendChild(card);
-    }});
+    /* ═══════════════════════════════════════════
+       FORM ELEMENTS — terminal styled
+    ═══════════════════════════════════════════ */
+    .term-field {{
+      margin: 10px 0;
+    }}
 
-    // --- Image Slider Logic ---
-    let isDragging = false;
-    
-    function updateSlider(clientX) {{
-      const rect = sliderStage.getBoundingClientRect();
-      let pos = Math.max(0, Math.min(clientX - rect.left, rect.width));
-      let percent = (pos / rect.width) * 100;
-      
-      sliderHandle.style.left = percent + '%';
-      imgSmall.style.clipPath = `inset(0 ${{100 - percent}}% 0 0)`;
+    .term-field-label {{
+      color: var(--term-cyan);
+      font-size: 13px;
+      margin-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
     }}
 
-    sliderHandle.addEventListener('mousedown', () => isDragging = true);
-    window.addEventListener('mouseup', () => isDragging = false);
+    .field-arrow {{ color: var(--term-orange); }}
+
+    textarea, input[type="number"], input[type="text"], input[type="range"] {{
+      font-family: 'Ubuntu Mono', monospace;
+    }}
+
+    .term-input {{
+      width: 100%;
+      background: var(--term-bg3);
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      color: var(--term-text);
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 13px;
+      padding: 8px 10px;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      line-height: 1.5;
+    }}
+
+    .term-input:focus {{
+      border-color: var(--term-green);
+      box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
+    }}
+
+    .term-textarea {{
+      width: 100%;
+      background: var(--term-bg3);
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      color: var(--term-text);
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 13px;
+      padding: 8px 10px;
+      outline: none;
+      resize: vertical;
+      min-height: 80px;
+      line-height: 1.55;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }}
+
+    .term-textarea:focus {{
+      border-color: var(--term-green);
+      box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
+    }}
+
+    /* placeholder text color */
+    .term-textarea::placeholder,
+    .term-input::placeholder {{
+      color: var(--term-text-muted);
+    }}
+
+    /* ═══════════════════════════════════════════
+       UPLOAD ZONE — terminal styled
+    ═══════════════════════════════════════════ */
+    .upload-zone {{
+      background: var(--term-bg3);
+      border: 1px dashed var(--term-border2);
+      border-radius: var(--radius);
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+    }}
+
+    .upload-zone:hover, .upload-zone.dragover {{
+      border-color: var(--term-green);
+      background: rgba(76,175,80,0.05);
+    }}
+
+    .upload-zone input[type="file"] {{ display: none; }}
+
+    .upload-placeholder {{
+      padding: 20px 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      text-align: center;
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      width: 100%;
+      color: var(--term-text);
+    }}
+
+    .upload-term-text {{
+      font-family: 'Ubuntu Mono', monospace;
+      text-align: left;
+      width: 100%;
+    }}
+
+    .upload-cmd-line {{
+      color: var(--term-text-dim);
+      font-size: 13px;
+      line-height: 1.8;
+    }}
+
+    .upload-cmd-line .t-prompt {{ color: var(--term-green); }}
+
+    /* preview */
+    .preview-wrap {{
+      margin-top: 8px;
+    }}
+
+    .preview-bar {{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      font-size: 12px;
+    }}
+
+    .preview-count {{ color: var(--term-green2); }}
+    .preview-clear-btn {{
+      background: transparent;
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      color: var(--term-text-muted);
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 11px;
+      padding: 2px 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }}
+    .preview-clear-btn:hover {{ border-color: var(--term-red); color: var(--term-red); }}
+
+    .preview-grid {{
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 6px;
+    }}
+
+    .thumb {{
+      position: relative;
+      aspect-ratio: 1/1;
+      border-radius: var(--radius);
+      overflow: hidden;
+      border: 1px solid var(--term-border);
+      background: var(--term-bg3);
+    }}
+
+    .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: 4px;
+    }}
+
+    .thumb:hover .thumb-overlay {{ background: rgba(0,0,0,0.45); }}
+
+    .thumb-remove {{
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: rgba(239,41,41,0.85);
+      border: none;
+      color: white;
+      font-size: 12px;
+      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: 4px;
+      left: 4px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--term-green);
+      color: #000;
+      font-size: 9px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }}
+
+    .add-more-thumb {{
+      aspect-ratio: 1/1;
+      border-radius: var(--radius);
+      border: 1px dashed var(--term-border2);
+      background: var(--term-bg3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--term-text-muted);
+      font-size: 20px;
+      transition: all 0.2s;
+    }}
+
+    .add-more-thumb:hover {{ border-color: var(--term-green); color: var(--term-green); }}
+
+    /* ═══════════════════════════════════════════
+       ADVANCED / COLLAPSIBLE
+    ═══════════════════════════════════════════ */
+    .adv-toggle-line {{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: 6px 0;
+      user-select: none;
+    }}
+
+    .adv-toggle-line:hover .t-cmd {{ color: var(--term-green); }}
+
+    .adv-chevron {{
+      color: var(--term-orange);
+      font-size: 12px;
+      transition: transform 0.2s;
+      display: inline-block;
+    }}
+
+    .adv-chevron.open {{ transform: rotate(90deg); }}
+
+    .adv-body {{
+      display: none;
+      flex-direction: column;
+      gap: 8px;
+      padding: 10px 12px;
+      background: var(--term-bg3);
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      margin-top: 4px;
+    }}
+
+    .adv-body.open {{ display: flex; }}
+
+    .adv-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }}
+
+    .slider-group {{ display: flex; flex-direction: column; gap: 4px; }}
+
+    .slider-label-row {{
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      color: var(--term-text-dim);
+    }}
+
+    .slider-val {{ color: var(--term-green2); font-weight: 700; }}
+
+    input[type="range"] {{
+      -webkit-appearance: none;
+      width: 100%;
+      height: 3px;
+      background: var(--term-border);
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+    }}
+
+    input[type="range"]::-webkit-slider-thumb {{
+      -webkit-appearance: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--term-green);
+      cursor: pointer;
+      box-shadow: 0 0 6px rgba(76,175,80,0.5);
+    }}
+
+    .checkbox-line {{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--term-text-dim);
+      cursor: pointer;
+    }}
+
+    .checkbox-line input {{
+      width: 14px;
+      height: 14px;
+      accent-color: var(--term-green);
+      cursor: pointer;
+    }}
+
+    /* ═══════════════════════════════════════════
+       RUN BUTTON
+    ═══════════════════════════════════════════ */
+    .run-btn {{
+      width: 100%;
+      padding: 10px 16px;
+      background: transparent;
+      border: 1px solid var(--term-green);
+      border-radius: var(--radius);
+      color: var(--term-green);
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 14px;
+      font-weight: 700;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      letter-spacing: 0.03em;
+      transition: all 0.2s;
+      margin-top: 6px;
+    }}
+
+    .run-btn:hover {{
+      background: rgba(76,175,80,0.12);
+      box-shadow: 0 0 16px rgba(76,175,80,0.25);
+      color: var(--term-green2);
+      border-color: var(--term-green2);
+    }}
+
+    .run-btn:disabled {{
+      border-color: var(--term-border);
+      color: var(--term-text-muted);
+      background: transparent;
+      box-shadow: none;
+      cursor: not-allowed;
+    }}
+
+    .run-btn-symbol {{ font-size: 16px; }}
+
+    /* ═══════════════════════════════════════════
+       RESULT / COMPARE WINDOW
+    ═══════════════════════════════════════════ */
+    .result-term {{
+      display: flex;
+      flex-direction: column;
+    }}
+
+    /* terminal output area */
+    .result-output-area {{
+      padding: 12px 18px;
+      background: var(--term-bg);
+      border-bottom: 1px solid var(--term-border);
+      min-height: 56px;
+    }}
+
+    /* compare stage */
+    .compare-stage {{
+      position: relative;
+      background: #0a0006;
+      overflow: hidden;
+      min-height: 460px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }}
+
+    /* empty state */
+    .empty-term {{
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+      padding: 30px 24px;
+      font-size: 13px;
+      width: 100%;
+    }}
+
+    .empty-line {{ color: var(--term-text-dim); line-height: 2; }}
+
+    /* compare widget */
+    .compare-wrap {{
+      display: none;
+      position: relative;
+      width: 100%;
+      user-select: none;
+    }}
+
+    .compare-wrap.visible {{ display: block; }}
+
+    .compare-base-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;
+    }}
+
+    /* handle */
+    .compare-handle {{
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 3px;
+      background: rgba(255,255,255,0.85);
+      cursor: ew-resize;
+      z-index: 10;
+      box-shadow: 0 0 12px rgba(255,255,255,0.4);
+    }}
+
+    .compare-handle::before {{
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: white;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.6);
+    }}
+
+    .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;
+      font-family: monospace;
+    }}
+
+    /* compare labels */
+    .cmp-label {{
+      position: absolute;
+      top: 10px;
+      padding: 3px 9px;
+      border-radius: var(--radius);
+      font-size: 11px;
+      font-weight: 700;
+      font-family: 'Ubuntu Mono', monospace;
+      pointer-events: none;
+      z-index: 8;
+      letter-spacing: 0.04em;
+    }}
+
+    .cmp-label-left  {{ left: 10px;  background: rgba(76,175,80,0.9);  color: #000; }}
+    .cmp-label-right {{ right: 10px; background: rgba(48,10,36,0.85);  color: var(--term-text-dim); border: 1px solid var(--term-border); }}
+
+    /* loader */
+    .loader-overlay {{
+      position: absolute;
+      inset: 0;
+      background: rgba(24,4,18,0.82);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 20px;
+      z-index: 30;
+    }}
+
+    .loader-overlay.active {{ display: flex; }}
+
+    .loader-term-box {{
+      background: var(--term-bg);
+      border: 1px solid var(--term-border2);
+      border-radius: 6px;
+      padding: 20px 28px;
+      min-width: 340px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+    }}
+
+    .loader-title-bar {{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 14px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--term-border);
+    }}
+
+    .loader-dots {{
+      display: flex;
+      gap: 5px;
+    }}
+
+    .ld {{ width: 10px; height: 10px; border-radius: 50%; }}
+    .ld-r {{ background: var(--term-orange); }}
+    .ld-y {{ background: var(--term-yellow); }}
+    .ld-g {{ background: var(--term-green); }}
+
+    .loader-term-title {{
+      font-size: 12px;
+      color: var(--term-text-muted);
+    }}
+
+    .loader-lines {{
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-size: 13px;
+    }}
+
+    .loader-line {{ display: flex; align-items: center; gap: 8px; color: var(--term-text-dim); }}
+    .loader-line.active {{ color: var(--term-green2); }}
+    .loader-line.done {{ color: var(--term-text-muted); }}
+
+    .loader-spinner {{
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(76,175,80,0.25);
+      border-top-color: var(--term-green2);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }}
+
+    .loader-check {{ color: var(--term-green2); flex-shrink: 0; }}
+    .loader-idle {{ color: var(--term-text-muted); flex-shrink: 0; width: 14px; text-align: center; }}
+
+    @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
+
+    /* progress bar */
+    .loader-progress {{
+      margin-top: 12px;
+      height: 3px;
+      background: var(--term-border);
+      border-radius: 2px;
+      overflow: hidden;
+    }}
+
+    .loader-progress-bar {{
+      height: 100%;
+      background: var(--term-green);
+      border-radius: 2px;
+      width: 0%;
+      transition: width 0.4s ease;
+      box-shadow: 0 0 8px rgba(76,175,80,0.6);
+    }}
+
+    /* result footer bar */
+    .result-footer {{
+      padding: 10px 18px;
+      background: var(--term-bg3);
+      border-top: 1px solid var(--term-border);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      font-size: 12px;
+    }}
+
+    .footer-cmd {{
+      color: var(--term-text-muted);
+      flex: 1;
+      font-family: 'Ubuntu Mono', monospace;
+    }}
+
+    .footer-cmd span {{ color: var(--term-green2); }}
+
+    .dl-btn {{
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 10px;
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      background: transparent;
+      color: var(--term-text-dim);
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 11px;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.2s;
+    }}
+
+    .dl-btn:hover {{ border-color: var(--term-cyan); color: var(--term-cyan); }}
+    .dl-btn.hidden {{ display: none; }}
+
+    /* ═══════════════════════════════════════════
+       EXAMPLES WINDOW
+    ═══════════════════════════════════════════ */
+    .examples-grid {{
+      padding: 16px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 12px;
+    }}
+
+    .example-card {{
+      background: var(--term-bg3);
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      overflow: hidden;
+      cursor: pointer;
+      transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
+      font-family: 'Ubuntu Mono', monospace;
+    }}
+
+    .example-card:hover {{
+      border-color: var(--term-green);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 16px rgba(76,175,80,0.15);
+    }}
+
+    .example-img-wrap {{
+      aspect-ratio: 4/3;
+      overflow: hidden;
+      position: relative;
+    }}
+
+    .example-img-wrap img {{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: transform 0.3s;
+      filter: brightness(0.9);
+    }}
+
+    .example-card:hover .example-img-wrap img {{
+      transform: scale(1.04);
+      filter: brightness(1);
+    }}
+
+    .example-card-body {{
+      padding: 10px;
+    }}
+
+    .example-file-line {{
+      font-size: 11px;
+      color: var(--term-cyan);
+      margin-bottom: 4px;
+    }}
+
+    .example-prompt-text {{
+      font-size: 12px;
+      color: var(--term-text-dim);
+      line-height: 1.45;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }}
+
+    .example-load-btn {{
+      margin-top: 8px;
+      width: 100%;
+      padding: 4px;
+      background: transparent;
+      border: 1px solid var(--term-border);
+      border-radius: var(--radius);
+      color: var(--term-text-muted);
+      font-family: 'Ubuntu Mono', monospace;
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }}
+
+    .example-load-btn:hover {{
+      border-color: var(--term-green);
+      color: var(--term-green);
+    }}
+
+    /* ═══════════════════════════════════════════
+       TOAST
+    ═══════════════════════════════════════════ */
+    .toast-wrap {{
+      position: fixed;
+      bottom: 18px;
+      right: 18px;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }}
+
+    .toast {{
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 10px 14px;
+      background: var(--term-bg2);
+      border: 1px solid var(--term-border2);
+      border-radius: 4px;
+      box-shadow: 0 6px 24px rgba(0,0,0,0.5);
+      min-width: 220px;
+      max-width: 320px;
+      animation: toastIn 0.2s ease;
+      font-size: 13px;
+    }}
+
+    .toast-icon {{ flex-shrink: 0; font-size: 14px; }}
+    .toast-msg {{ color: var(--term-text); flex: 1; line-height: 1.4; }}
+    .toast-close {{
+      background: transparent;
+      border: none;
+      color: var(--term-text-muted);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+      padding: 0;
+      flex-shrink: 0;
+    }}
+
+    .toast-success {{ border-color: rgba(76,175,80,0.5); }}
+    .toast-error   {{ border-color: rgba(239,41,41,0.5); }}
+    .toast-info    {{ border-color: rgba(52,226,226,0.4); }}
+
+    @keyframes toastIn {{
+      from {{ transform: translateX(12px); opacity: 0; }}
+      to   {{ transform: translateX(0);    opacity: 1; }}
+    }}
+
+    /* ═══════════════════════════════════════════
+       RESPONSIVE
+    ═══════════════════════════════════════════ */
+    @media (max-width: 960px) {{
+      .main-layout {{ grid-template-columns: 1fr; }}
+    }}
+
+    @media (max-width: 600px) {{
+      .workspace {{ padding: 10px; gap: 10px; }}
+      .adv-grid {{ grid-template-columns: 1fr; }}
+      .preview-grid {{ grid-template-columns: repeat(3, 1fr); }}
+      .term-body {{ padding: 12px 12px; font-size: 13px; }}
+    }}
+  </style>
+</head>
+<body>
+
+  <div class="toast-wrap" id="toastWrap"></div>
+
+  <!-- UBUNTU PANEL -->
+  <div class="ubuntu-panel">
+    <span class="panel-activities">Activities</span>
+    <span class="panel-app-name">Terminal — flux2-comparator</span>
+    <div class="panel-right">
+      <div class="panel-indicator">
+        <div class="panel-dot" id="panelDot"></div>
+        <span id="panelStatus">idle</span>
+      </div>
+      <div class="panel-indicator">🖥 {DEVICE_LABEL}</div>
+      <div class="panel-indicator" id="panelClock"></div>
+    </div>
+  </div>
+
+  <div class="desktop">
+    <div class="workspace">
+
+      <!-- ══════════════════════════════════════
+           MAIN LAYOUT
+      ══════════════════════════════════════ -->
+      <div class="main-layout">
+
+        <!-- INPUT TERMINAL WINDOW -->
+        <div class="term-window">
+          <div class="term-titlebar">
+            <div class="wm-buttons">
+              <button class="wm-btn wm-close"  data-icon="✕" title="Close"></button>
+              <button class="wm-btn wm-min"    data-icon="−" title="Minimize"></button>
+              <button class="wm-btn wm-max"    data-icon="+" title="Maximize"></button>
+            </div>
+            <div class="term-title">
+              <span class="term-title-icon">⚡</span>flux@ubuntu: ~/flux2-comparator/input
+            </div>
+          </div>
+
+          <div class="term-body">
+
+            <!-- system banner -->
+            <div class="output-section" style="margin-bottom:12px; border-color: var(--term-green);">
+              <div class="t-success t-bold">FLUX.2 Klein 4B — VAE Decoder Comparator</div>
+              <div class="t-dim" style="font-size:12px;">Standard Decoder vs Small Decoder · Parallel Inference · 4-Step Distilled</div>
+            </div>
+
+            <!-- UPLOAD -->
+            <div class="prompt-line">
+              <span class="prompt-prefix t-user">flux</span><span class="prompt-prefix t-dim">@</span><span class="prompt-prefix t-host">ubuntu</span><span class="prompt-prefix t-dim">:</span><span class="prompt-prefix t-path">~/input</span><span class="prompt-prefix t-dim">$&nbsp;</span>
+              <span class="t-orange">upload</span><span class="t-dim">&nbsp;--multiple&nbsp;</span><span class="t-cmd">./images/</span>
+            </div>
+            <div class="term-field">
+              <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-term-text">
+                    <div class="upload-cmd-line"><span class="t-prompt">$</span> <span class="t-orange">open</span> <span class="t-cmd">file-picker</span> <span class="t-dim"># or drag &amp; drop</span></div>
+                    <div class="upload-cmd-line"><span class="t-dim">  → supports PNG, JPG, WEBP</span></div>
+                    <div class="upload-cmd-line"><span class="t-dim">  → multiple files accepted</span></div>
+                  </div>
+                </button>
+              </div>
+              <div id="previewWrap" style="display:none;">
+                <div class="preview-wrap">
+                  <div class="preview-bar">
+                    <span class="preview-count" id="previewCount"><span class="t-success">✓</span> 0 files staged</span>
+                    <button class="preview-clear-btn" id="clearImagesBtn" type="button">rm -rf ./images/*</button>
+                  </div>
+                  <div class="preview-grid" id="previewGrid"></div>
+                </div>
+              </div>
+              <div style="font-size:11px; color:var(--term-text-muted); margin-top:4px;">
+                <span class="t-dim"># first image auto-computes width &amp; height</span>
+              </div>
+            </div>
+
+            <!-- PROMPT -->
+            <div class="prompt-line" style="margin-top:10px;">
+              <span class="prompt-prefix t-user">flux</span><span class="prompt-prefix t-dim">@</span><span class="prompt-prefix t-host">ubuntu</span><span class="prompt-prefix t-dim">:</span><span class="prompt-prefix t-path">~/input</span><span class="prompt-prefix t-dim">$&nbsp;</span>
+              <span class="t-orange">echo</span>&nbsp;<span class="t-cmd" style="color:var(--term-yellow);">$PROMPT</span>
+            </div>
+            <div class="term-field">
+              <textarea id="prompt" class="term-textarea" rows="3"
+                placeholder="# describe the edit...&#10;# e.g. Change the weather to stormy."></textarea>
+            </div>
+
+            <!-- ADVANCED -->
+            <div style="margin-top:10px;">
+              <div class="prompt-line">
+                <span class="prompt-prefix t-user">flux</span><span class="prompt-prefix t-dim">@</span><span class="prompt-prefix t-host">ubuntu</span><span class="prompt-prefix t-dim">:</span><span class="prompt-prefix t-path">~/input</span><span class="prompt-prefix t-dim">$&nbsp;</span>
+                <span class="adv-toggle-line" id="advToggle">
+                  <span class="t-orange">nano</span>&nbsp;<span class="t-cmd">advanced.conf</span>&nbsp;<span class="t-dim"># click to expand</span>
+                  <span class="adv-chevron" id="advChevron">▶</span>
+                </span>
+              </div>
+              <div class="adv-body" id="advBody">
+                <div class="t-dim" style="font-size:11px; margin-bottom:4px;"># /etc/flux2/advanced.conf</div>
+                <div class="adv-grid">
+                  <div class="slider-group">
+                    <div class="slider-label-row">
+                      <span class="t-cyan">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-group">
+                    <div class="slider-label-row">
+                      <span class="t-cyan">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-group">
+                    <div class="slider-label-row">
+                      <span class="t-cyan">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-group">
+                    <div class="slider-label-row">
+                      <span class="t-cyan">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-group">
+                    <div class="slider-label-row">
+                      <span class="t-cyan">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>
+                </div>
+                <label class="checkbox-line">
+                  <input type="checkbox" id="randomizeSeed" checked />
+                  <span class="t-dim">RANDOMIZE_SEED=<span class="t-green2">true</span></span>
+                </label>
+              </div>
+            </div>
+
+            <!-- RUN -->
+            <div style="margin-top:14px;">
+              <div class="prompt-line" style="margin-bottom:6px;">
+                <span class="prompt-prefix t-user">flux</span><span class="prompt-prefix t-dim">@</span><span class="prompt-prefix t-host">ubuntu</span><span class="prompt-prefix t-dim">:</span><span class="prompt-prefix t-path">~/input</span><span class="prompt-prefix t-dim">$&nbsp;</span>
+                <span class="t-orange">python3</span>&nbsp;<span class="t-cmd">run_comparison.py</span>
+              </div>
+              <button class="run-btn" id="runBtn" type="button">
+                <span class="run-btn-symbol">▶</span>
+                <span>./run_comparison.py --parallel --both-decoders</span>
+              </button>
+            </div>
+
+          </div>
+        </div>
+
+        <!-- RESULT TERMINAL WINDOW -->
+        <div class="term-window result-term">
+          <div class="term-titlebar">
+            <div class="wm-buttons">
+              <button class="wm-btn wm-close"  data-icon="✕" title="Close"></button>
+              <button class="wm-btn wm-min"    data-icon="−" title="Minimize"></button>
+              <button class="wm-btn wm-max"    data-icon="+" title="Maximize"></button>
+            </div>
+            <div class="term-title">
+              <span class="term-title-icon">🖼</span>flux@ubuntu: ~/flux2-comparator/output — compare viewer
+            </div>
+          </div>
+
+          <!-- terminal output log above image -->
+          <div class="result-output-area" id="resultOutputArea">
+            <div class="t-dim" style="font-size:13px;">
+              <span class="t-user">flux</span><span class="t-dim">@</span><span class="t-host">ubuntu</span><span class="t-dim">:</span><span class="t-path">~/output</span><span class="t-dim">$&nbsp;</span>
+              <span class="t-orange">watch</span>&nbsp;<span class="t-cmd">--compare standard small</span>&nbsp;<span class="t-dim" id="outputStatusText"># waiting for inference...</span>
+            </div>
+          </div>
+
+          <!-- compare stage -->
+          <div class="compare-stage" id="compareStage">
+
+            <!-- empty -->
+            <div class="empty-term" id="emptyState">
+              <div class="empty-line"><span class="t-success">flux@ubuntu</span><span class="t-dim">:~/output$</span> <span class="t-orange">ls</span> <span class="t-cmd">./results/</span></div>
+              <div class="empty-line"><span class="t-dim">total 0</span></div>
+              <div class="empty-line"><span class="t-warn">drwxr-xr-x</span>&nbsp;<span class="t-dim">no results yet — run inference first</span></div>
+              <div class="empty-line" style="margin-top:8px;"><span class="t-dim"># Tip: ctrl+enter to submit quickly</span></div>
+              <div class="empty-line"><span class="t-dim"># Both decoders run in parallel threads</span></div>
+            </div>
+
+            <!-- compare widget -->
+            <div class="compare-wrap" id="compareWrap">
+              <img class="compare-base-img" id="imgSmall" alt="Small Decoder" />
+              <span class="cmp-label cmp-label-right">small-decoder</span>
+
+              <div class="compare-overlay" id="compareOverlay">
+                <img id="imgStandard" alt="Standard Decoder" />
+              </div>
+              <span class="cmp-label cmp-label-left">standard-decoder</span>
+
+              <div class="compare-handle" id="compareHandle"></div>
+            </div>
+
+            <!-- loader -->
+            <div class="loader-overlay" id="loaderOverlay">
+              <div class="loader-term-box">
+                <div class="loader-title-bar">
+                  <div class="loader-dots">
+                    <div class="ld ld-r"></div>
+                    <div class="ld ld-y"></div>
+                    <div class="ld ld-g"></div>
+                  </div>
+                  <span class="loader-term-title">flux@ubuntu: inference.py</span>
+                </div>
+                <div class="loader-lines">
+                  <div class="loader-line active" id="ls1">
+                    <div class="loader-spinner"></div>
+                    <span>[pipe_standard] &nbsp;running standard decoder...</span>
+                  </div>
+                  <div class="loader-line active" id="ls2">
+                    <div class="loader-spinner"></div>
+                    <span>[pipe_small] &nbsp;&nbsp;&nbsp;running small decoder...</span>
+                  </div>
+                  <div class="loader-line" id="ls3" style="display:none;">
+                    <span class="loader-check">✓</span>
+                    <span style="color:var(--term-green2);">both pipelines complete!</span>
+                  </div>
+                </div>
+                <div class="loader-progress">
+                  <div class="loader-progress-bar" id="loaderBar"></div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <!-- result footer -->
+          <div class="result-footer">
+            <div class="footer-cmd" id="footerCmd">
+              <span class="t-user">flux</span><span class="t-dim">@ubuntu:~/output$</span> <span>seed=<span id="usedSeed">—</span></span>
+            </div>
+            <a class="dl-btn hidden" id="dlStandard" download="standard_decoder.png">
+              ↓ standard.png
+            </a>
+            <a class="dl-btn hidden" id="dlSmall" download="small_decoder.png">
+              ↓ small.png
+            </a>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- ══════════════════════════════════════
+           EXAMPLES WINDOW
+      ══════════════════════════════════════ -->
+      <div class="term-window" id="examplesSection">
+        <div class="term-titlebar">
+          <div class="wm-buttons">
+            <button class="wm-btn wm-close"  data-icon="✕" title="Close"></button>
+            <button class="wm-btn wm-min"    data-icon="−" title="Minimize"></button>
+            <button class="wm-btn wm-max"    data-icon="+" title="Maximize"></button>
+          </div>
+          <div class="term-title">
+            <span class="term-title-icon">📂</span>flux@ubuntu: ~/flux2-comparator/examples — file manager
+          </div>
+        </div>
+        <div class="term-body" style="padding: 10px 16px 8px;">
+          <div class="prompt-line">
+            <span class="prompt-prefix t-user">flux</span><span class="prompt-prefix t-dim">@</span><span class="prompt-prefix t-host">ubuntu</span><span class="prompt-prefix t-dim">:</span><span class="prompt-prefix t-path">~/examples</span><span class="prompt-prefix t-dim">$&nbsp;</span>
+            <span class="t-orange">ls</span>&nbsp;<span class="t-cmd">-la</span>&nbsp;<span class="t-dim">./examples/ &nbsp;# click a card to load</span>
+          </div>
+        </div>
+        <div class="examples-grid" id="examplesGrid"></div>
+      </div>
+
+    </div>
+  </div>
+
+  <script>
+    const examples = {examples_json};
+
+    const state = {{
+      files: [],
+      advOpen: false,
+      stdUrl: null,
+      smallUrl: null,
+    }};
+
+    /* ── refs ── */
+    const uploadZone      = document.getElementById('uploadZone');
+    const fileInput       = document.getElementById('fileInput');
+    const uploadPlaceholder = document.getElementById('uploadPlaceholder');
+    const previewWrap     = document.getElementById('previewWrap');
+    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 advToggle       = document.getElementById('advToggle');
+    const advBody         = document.getElementById('advBody');
+    const advChevron      = document.getElementById('advChevron');
+
+    const runBtn          = document.getElementById('runBtn');
+
+    const compareStage    = document.getElementById('compareStage');
+    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 loaderBar       = document.getElementById('loaderBar');
+    const ls1             = document.getElementById('ls1');
+    const ls2             = document.getElementById('ls2');
+    const ls3             = document.getElementById('ls3');
+
+    const dlStandard      = document.getElementById('dlStandard');
+    const dlSmall         = document.getElementById('dlSmall');
+    const usedSeed        = document.getElementById('usedSeed');
+    const outputStatusText= document.getElementById('outputStatusText');
+
+    const panelDot        = document.getElementById('panelDot');
+    const panelStatus     = document.getElementById('panelStatus');
+    const panelClock      = document.getElementById('panelClock');
+    const toastWrap       = document.getElementById('toastWrap');
+    const examplesGrid    = document.getElementById('examplesGrid');
+
+    /* ── clock ── */
+    function updateClock() {{
+      const now = new Date();
+      panelClock.textContent = now.toLocaleTimeString([], {{hour:'2-digit',minute:'2-digit'}});
+    }}
+    updateClock();
+    setInterval(updateClock, 10000);
+
+    /* ── toast ── */
+    function toast(msg, type='info') {{
+      const icons = {{ success:'✓', error:'✗', info:'ℹ' }};
+      const el = document.createElement('div');
+      el.className = `toast toast-${{type}}`;
+      el.innerHTML = `
+        <span class="toast-icon" style="color:${{type==='success'?'var(--term-green2)':type==='error'?'var(--term-red)':'var(--term-cyan)'}}">${{icons[type]||'ℹ'}}</span>
+        <span class="toast-msg">${{msg}}</span>
+        <button class="toast-close" onclick="this.parentElement.remove()">×</button>`;
+      toastWrap.appendChild(el);
+      setTimeout(() => el.remove(), 4800);
+    }}
+
+    /* ── status ── */
+    function setRunning(running) {{
+      panelDot.className = 'panel-dot' + (running ? ' busy' : '');
+      panelStatus.textContent = running ? 'running inference...' : 'idle';
+      runBtn.disabled = running;
+    }}
+
+    /* ── advanced ── */
+    advToggle.addEventListener('click', () => {{
+      state.advOpen = !state.advOpen;
+      advBody.classList.toggle('open', state.advOpen);
+      advChevron.classList.toggle('open', state.advOpen);
+    }});
+
+    /* ── files ── */
+    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();
+    }}
+
+    function renderPreviews() {{
+      previewGrid.innerHTML = '';
+      if (!state.files.length) {{
+        previewWrap.style.display = 'none';
+        uploadPlaceholder.style.display = 'flex';
+        return;
+      }}
+      previewWrap.style.display = 'block';
+      uploadPlaceholder.style.display = 'none';
+      previewCount.innerHTML = `<span class="t-success">✓</span> ${{state.files.length}} file${{state.files.length>1?'s':''}} staged`;
+
+      state.files.forEach((file, idx) => {{
+        const wrap = document.createElement('div');
+        wrap.className = 'thumb';
+
+        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.addEventListener('click', (e) => {{
+          e.stopPropagation();
+          state.files.splice(idx, 1);
+          renderPreviews();
+        }});
+        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 */
+      const add = document.createElement('div');
+      add.className = 'add-more-thumb';
+      add.title = 'Add more';
+      add.textContent = '+';
+      add.addEventListener('click', () => fileInput.click());
+      previewGrid.appendChild(add);
+    }}
+
+    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);
+    }});
+    clearImagesBtn.addEventListener('click', () => {{ state.files=[]; renderPreviews(); }});
+
+    /* ── compare slider ── */
+    let dragging = false;
+
+    function setSlider(pct) {{
+      pct = Math.max(0, Math.min(100, pct));
+      compareHandle.style.left = pct + '%';
+      compareOverlay.style.width = pct + '%';
+    }}
+
+    compareHandle.addEventListener('mousedown', (e) => {{ dragging=true; e.preventDefault(); }});
     window.addEventListener('mousemove', (e) => {{
-      if (!isDragging) return;
-      updateSlider(e.clientX);
+      if(!dragging) return;
+      const r = compareWrap.getBoundingClientRect();
+      setSlider(((e.clientX - r.left) / r.width) * 100);
     }});
-    
-    // Touch support for slider
-    sliderHandle.addEventListener('touchstart', () => isDragging = true);
-    window.addEventListener('touchend', () => isDragging = false);
+    window.addEventListener('mouseup', () => dragging=false);
+
+    compareHandle.addEventListener('touchstart', () => dragging=true, {{passive:true}});
     window.addEventListener('touchmove', (e) => {{
-      if (!isDragging) return;
-      updateSlider(e.touches[0].clientX);
-    }});
+      if(!dragging) return;
+      const r = compareWrap.getBoundingClientRect();
+      setSlider(((e.touches[0].clientX - r.left) / r.width) * 100);
+    }}, {{passive:true}});
+    window.addEventListener('touchend', () => dragging=false);
+
+    /* ── loader animation ── */
+    let progressInterval = null;
+    let progressVal = 0;
+
+    function startLoader() {{
+      loaderBar.style.width = '0%';
+      progressVal = 0;
+      ls1.style.display = 'flex';
+      ls2.style.display = 'flex';
+      ls3.style.display = 'none';
+      loaderOverlay.classList.add('active');
+
+      progressInterval = setInterval(() => {{
+        progressVal = Math.min(90, progressVal + Math.random() * 3);
+        loaderBar.style.width = progressVal + '%';
+      }}, 400);
+    }}
+
+    function stopLoader() {{
+      clearInterval(progressInterval);
+      loaderBar.style.width = '100%';
+      ls1.style.display = 'none';
+      ls2.style.display = 'none';
+      ls3.style.display = 'flex';
+      setTimeout(() => loaderOverlay.classList.remove('active'), 700);
+    }}
+
+    /* ── show results ── */
+    function showComparison(stdUrl, smallUrl, seed) {{
+      imgSmall.onload = () => {{
+        emptyState.style.display = 'none';
+        compareWrap.classList.add('visible');
+        setSlider(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');
+      usedSeed.textContent = seed;
+      outputStatusText.textContent = `# done · seed=${{seed}}`;
+    }}
 
-    // --- Form Submission ---
-    runBtn.onclick = async () => {{
-      const prompt = promptInput.value.trim();
-      if(!prompt) return alert("Enter a prompt");
+    /* ── submit ── */
+    async function submitRun() {{
+      const prompt = promptEl.value.trim();
+      if (!prompt) {{ toast('Please enter a prompt.', 'error'); return; }}
 
       const fd = new FormData();
       fd.append('prompt', prompt);
-      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;
+      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));
+
+      setRunning(true);
+      startLoader();
+      outputStatusText.textContent = '# running parallel inference...';
 
       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(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.');
+        if (!res.ok || !data.success) throw new Error(data.error || 'Processing failed.');
+        stopLoader();
+        showComparison(data.standard.image_url, data.small.image_url, data.seed);
+        toast('Comparison ready! Drag the handle to compare.', 'success');
+      }} catch(err) {{
+        loaderOverlay.classList.remove('active');
+        toast(err.message || 'Unexpected error.', 'error');
+        outputStatusText.textContent = `# error: ${{err.message}}`;
       }} finally {{
-        loader.style.display = 'none';
-        runBtn.disabled = false;
+        setRunning(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: ' + url);
+      const blob = await res.blob();
+      return new File([blob], name, {{ type: blob.type || 'image/jpeg' }});
+    }}
+
+    function renderExamples() {{
+      examplesGrid.innerHTML = '';
+      if (!examples.length) {{
+        examplesGrid.innerHTML = '<div class="t-dim" style="padding:16px; font-size:13px;">No examples found in ./examples/</div>';
+        return;
+      }}
+      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 fileLine = document.createElement('div');
+        fileLine.className = 'example-file-line';
+        fileLine.textContent = './' + item.file;
+
+        const promptText = document.createElement('div');
+        promptText.className = 'example-prompt-text';
+        promptText.textContent = item.prompt;
+
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'example-load-btn';
+        btn.textContent = '$ load example';
+
+        btn.addEventListener('click', async (e) => {{
+          e.stopPropagation();
+          btn.textContent = '$ fetching...';
+          btn.disabled = true;
+          try {{
+            const file = await fileFromUrl(item.url, item.file);
+            state.files = [file];
+            renderPreviews();
+            promptEl.value = item.prompt;
+            toast('Example loaded → ' + item.file, 'success');
+          }} catch(err) {{
+            toast(err.message, 'error');
+          }} finally {{
+            btn.textContent = '$ load example';
+            btn.disabled = false;
+          }}
+        }});
+
+        body.appendChild(fileLine);
+        body.appendChild(promptText);
+        body.appendChild(btn);
+        card.appendChild(imgWrap);
+        card.appendChild(body);
+        examplesGrid.appendChild(card);
+      }});
+    }}
+
+    /* ── init ── */
+    renderPreviews();
+    renderExamples();
   </script>
 </body>
-</html>
-"""
+</html>"""
+
 
-app.launch()
+app.launch()