update app

app.py

@@ -12,19 +12,14 @@ import html as html_lib
 from io import BytesIO
 from diffusers import Flux2KleinPipeline, AutoencoderKLFlux2
 from PIL import Image
-from pathlib import Path
 from typing import Iterable
 
-# ── Config ────────────────────────────────────────────────────────────────────
-
-dtype   = torch.bfloat16
-device  = "cuda" if torch.cuda.is_available() else "cpu"
-
 MAX_SEED       = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
-LANCZOS        = getattr(Image, "Resampling", Image).LANCZOS
+dtype          = torch.bfloat16
+device         = "cuda" if torch.cuda.is_available() else "cpu"
 
-# ── Models ────────────────────────────────────────────────────────────────────
+LANCZOS = getattr(Image, "Resampling", Image).LANCZOS
 
 print("Loading 4B Distilled model (Standard VAE)...")
 pipe_standard = Flux2KleinPipeline.from_pretrained(
@@ -47,28 +42,13 @@ pipe_small_decoder = Flux2KleinPipeline.from_pretrained(
 )
 pipe_small_decoder.enable_model_cpu_offload()
 
-# ── Examples ──────────────────────────────────────────────────────────────────
-
 EXAMPLES_CONFIG = [
-    {
-        "images": ["examples/1.jpg"],
-        "prompt": "Change the weather to stormy.",
-    },
-    {
-        "images": ["examples/2.jpg"],
-        "prompt": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
-    },
-    {
-        "images": ["examples/3.jpg"],
-        "prompt": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
-    },
-    {
-        "images": ["examples/4.jpg"],
-        "prompt": "Make the texture high-resolution.",
-    },
+    {"images": ["examples/1.jpg"], "prompt": "Change the weather to stormy."},
+    {"images": ["examples/2.jpg"], "prompt": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition."},
+    {"images": ["examples/3.jpg"], "prompt": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent."},
+    {"images": ["examples/4.jpg"], "prompt": "Make the texture high-resolution."},
 ]
 
-# ── Helpers ───────────────────────────────────────────────────────────────────
 
 def make_thumb_b64(path, max_dim=220):
     if not os.path.exists(path):
@@ -90,9 +70,8 @@ def encode_full_image(path):
     try:
         with open(path, "rb") as f:
             data = f.read()
-        ext = path.rsplit(".", 1)[-1].lower()
-        mime = {"jpg": "image/jpeg", "jpeg": "image/jpeg",
-                "png": "image/png", "webp": "image/webp"}.get(ext, "image/jpeg")
+        ext  = path.rsplit(".", 1)[-1].lower()
+        mime = {"jpg": "image/jpeg", "jpeg": "image/jpeg", "png": "image/png", "webp": "image/webp"}.get(ext, "image/jpeg")
         return f"data:{mime};base64,{base64.b64encode(data).decode()}"
     except Exception as e:
         print(f"Encode error for {path}: {e}")
@@ -109,7 +88,7 @@ def build_example_cards_html():
                 thumbs_html += f'<img src="{thumb}" alt="">'
             else:
                 thumbs_html += '<div class="example-thumb-placeholder">Preview</div>'
-        n = len(ex["images"])
+        n     = len(ex["images"])
         badge = f'{n} image{"s" if n > 1 else ""}'
         prompt_short = html_lib.escape(ex["prompt"][:90])
         if len(ex["prompt"]) > 90:
@@ -129,15 +108,19 @@ def load_example_data(idx_str):
         idx = -1
     if idx < 0 or idx >= len(EXAMPLES_CONFIG):
         return json.dumps({"images": [], "prompt": "", "names": [], "status": "error"})
-    ex = EXAMPLES_CONFIG[idx]
+    ex       = EXAMPLES_CONFIG[idx]
     b64_list, names = [], []
     for path in ex["images"]:
         b64 = encode_full_image(path)
         if b64:
             b64_list.append(b64)
             names.append(os.path.basename(path))
-    return json.dumps({"images": b64_list, "prompt": ex["prompt"],
-                        "names": names, "status": "ok"})
+    return json.dumps({"images": b64_list, "prompt": ex["prompt"], "names": names, "status": "ok"})
+
+
+print("Building example thumbnails...")
+EXAMPLE_CARDS_HTML = build_example_cards_html()
+print(f"Built {len(EXAMPLES_CONFIG)} example cards.")
 
 
 def b64_to_pil_list(b64_json_str):
@@ -163,6 +146,14 @@ def b64_to_pil_list(b64_json_str):
     return pil_images
 
 
+def format_time(seconds: float) -> str:
+    if seconds < 60:
+        return f"{seconds:.2f}s"
+    minutes = int(seconds // 60)
+    secs    = seconds % 60
+    return f"{minutes}m {secs:.2f}s"
+
+
 def update_dimensions_on_upload(pil_images):
     if not pil_images:
         return 1024, 1024
@@ -174,28 +165,8 @@ def update_dimensions_on_upload(pil_images):
     else:
         nh = 1024
         nw = int(1024 * iw / ih)
-    return max(256, (nw // 8) * 8), max(256, (nh // 8) * 8)
-
-
-def format_time(seconds: float) -> str:
-    if seconds < 60:
-        return f"{seconds:.2f}s"
-    minutes = int(seconds // 60)
-    secs    = seconds % 60
-    return f"{minutes}m {secs:.2f}s"
-
-
-def pil_to_b64(img: Image.Image) -> str:
-    buf = BytesIO()
-    img.save(buf, format="PNG")
-    return "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
-
-
-print("Building example thumbnails...")
-EXAMPLE_CARDS_HTML = build_example_cards_html()
-print(f"Built {len(EXAMPLES_CONFIG)} example cards.")
+    return max(256, min(1024, (nw // 8) * 8)), max(256, min(1024, (nh // 8) * 8))
 
-# ── Inference ─────────────────────────────────────────────────────────────────
 
 @spaces.GPU(duration=240)
 def infer(
@@ -205,7 +176,7 @@ def infer(
     randomize_seed,
     width,
     height,
-    num_inference_steps,
+    steps,
     guidance_scale,
     progress=gr.Progress(track_tqdm=True),
 ):
@@ -219,58 +190,55 @@ def infer(
         seed = random.randint(0, MAX_SEED)
 
     pil_images = b64_to_pil_list(images_b64_json)
-    image_list = pil_images if pil_images else None
-
-    if image_list:
-        width, height = update_dimensions_on_upload(image_list)
+    if pil_images:
+        width, height = update_dimensions_on_upload(pil_images)
 
     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
+    if pil_images:
+        shared_kwargs["image"] = pil_images
 
-    # Standard VAE
     progress(0.05, desc="Running Standard VAE generation...")
-    t0 = time.perf_counter()
-    gen_std = torch.Generator(device="cpu").manual_seed(seed)
+    t0_std       = time.perf_counter()
+    gen_std      = torch.Generator(device="cpu").manual_seed(seed)
     out_standard = pipe_standard(**shared_kwargs, generator=gen_std).images[0]
-    time_std = format_time(time.perf_counter() - t0)
-    progress(0.55, desc=f"Standard VAE done in {time_std} — now running Small Decoder VAE...")
+    time_std_str = format_time(time.perf_counter() - t0_std)
+    print(f"Standard VAE done in {time_std_str}")
 
     gc.collect()
     torch.cuda.empty_cache()
 
-    # Small Decoder VAE
-    t0 = time.perf_counter()
-    gen_small = torch.Generator(device="cpu").manual_seed(seed)
-    out_small = pipe_small_decoder(**shared_kwargs, generator=gen_small).images[0]
-    time_small = format_time(time.perf_counter() - t0)
-    progress(1.0, desc=f"Both done! Standard: {time_std} | Small Decoder: {time_small}")
+    progress(0.55, desc=f"Standard VAE done in {time_std_str} — now running Small Decoder VAE...")
+    t0_small       = time.perf_counter()
+    gen_small      = torch.Generator(device="cpu").manual_seed(seed)
+    out_small      = pipe_small_decoder(**shared_kwargs, generator=gen_small).images[0]
+    time_small_str = format_time(time.perf_counter() - t0_small)
+    print(f"Small Decoder VAE done in {time_small_str}")
 
     gc.collect()
     torch.cuda.empty_cache()
 
-    std_b64   = pil_to_b64(out_standard)
-    small_b64 = pil_to_b64(out_small)
+    label_std   = f"Standard VAE — {time_std_str}"
+    label_small = f"Small Decoder VAE — {time_small_str}"
 
-    result_json = json.dumps({
-        "standard_b64":   std_b64,
-        "small_b64":      small_b64,
-        "seed":           seed,
-        "time_std":       time_std,
-        "time_small":     time_small,
-        "status":         "ok",
-    })
+    return out_standard, out_small, seed, label_std, label_small
 
-    return out_standard, out_small, seed, result_json
 
+# ── SVG / Icon constants ───────────────────────────────────────────────────────
 
-# ── CSS ───────────────────────────────────────────────────────────────────────
+FLUX_LOGO_SVG = '''<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+</svg>'''
+
+UPLOAD_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'
+REMOVE_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
+CLEAR_SVG  = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>'
+DOWNLOAD_SVG = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 16l-5-5h3V4h4v7h3l-5 5z"/><path d="M20 18H4v2h16v-2z"/></svg>'
 
 css = r"""
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@@ -287,14 +255,12 @@ footer{display:none!important}
     width:1px!important;height:1px!important;opacity:0.01!important;pointer-events:none!important;
 }
 #gradio-run-btn{
-    position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
-    opacity:0.01;pointer-events:none;overflow:hidden;
+    position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0.01;pointer-events:none;
 }
 
-/* ── Shell ── */
 .app-shell{
     background:#18181b;border:1px solid #27272a;border-radius:16px;
-    margin:12px auto;max-width:1400px;overflow:hidden;
+    margin:12px auto;max-width:1500px;overflow:hidden;
     box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
 }
 .app-header{
@@ -314,11 +280,11 @@ footer{display:none!important}
 }
 .app-badge{
     font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
-    background:rgba(255,69,0,.15);color:#FF6B35;border:1px solid rgba(255,69,0,.25);letter-spacing:.3px;
+    background:rgba(255,69,0,.15);color:#FF8C00;border:1px solid rgba(255,69,0,.25);letter-spacing:.3px;
 }
-.app-badge.fast{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
+.app-badge.std{background:rgba(30,100,255,.12);color:#60A5FA;border:1px solid rgba(30,100,255,.25)}
+.app-badge.small{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
 
-/* ── Toolbar ── */
 .app-toolbar{
     background:#18181b;border-bottom:1px solid #27272a;padding:8px 16px;
     display:flex;gap:4px;align-items:center;flex-wrap:wrap;
@@ -338,28 +304,26 @@ footer{display:none!important}
 .modern-tb-btn .tb-svg,.modern-tb-btn .tb-svg *{stroke:#ffffff!important;fill:none!important}
 .tb-info{font-family:'JetBrains Mono',monospace;font-size:12px;color:#71717a;padding:0 8px;display:flex;align-items:center}
 
-/* ── Layout ── */
 .app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
-.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a}
-.app-main-right{width:460px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b}
+.app-main-left{flex:0 0 360px;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a;background:#18181b}
+.app-main-right{flex:1;display:flex;flex-direction:column;min-width:0;background:#0f0f13}
 
-/* ── Drop Zone ── */
-#gallery-drop-zone{position:relative;background:#09090b;min-height:300px;overflow:auto}
+/* ── Input panel ── */
+#gallery-drop-zone{position:relative;background:#09090b;min-height:260px;overflow:auto}
 #gallery-drop-zone.drag-over{outline:2px solid #FF4500;outline-offset:-2px;background:rgba(255,69,0,.04)}
-.upload-prompt-modern{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}
+.upload-prompt-modern{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;width:90%}
 .upload-click-area{
     display:flex;flex-direction:column;align-items:center;justify-content:center;
-    cursor:pointer;padding:36px 52px;border:2px dashed #3f3f46;border-radius:16px;
+    cursor:pointer;padding:28px 24px;border:2px dashed #3f3f46;border-radius:16px;
     background:rgba(255,69,0,.03);transition:all .2s ease;gap:8px;
 }
-.upload-click-area:hover{background:rgba(255,69,0,.08);border-color:#FF4500;transform:scale(1.03)}
-.upload-main-text{color:#71717a;font-size:14px;font-weight:500;margin-top:4px}
-.upload-sub-text{color:#52525b;font-size:12px;text-align:center}
-
-/* ── Gallery ── */
+.upload-click-area:hover{background:rgba(255,69,0,.08);border-color:#FF4500;transform:scale(1.02)}
+.upload-click-area svg{width:64px;height:64px}
+.upload-main-text{color:#71717a;font-size:13px;font-weight:500;margin-top:4px;text-align:center}
+.upload-sub-text{color:#52525b;font-size:11px;text-align:center}
 .image-gallery-grid{
-    display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
-    gap:12px;padding:16px;align-content:start;
+    display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
+    gap:10px;padding:12px;align-content:start;
 }
 .gallery-thumb{
     position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
@@ -388,96 +352,35 @@ footer{display:none!important}
 .gallery-add-card .add-icon{font-size:28px;color:#71717a;font-weight:300}
 .gallery-add-card .add-text{font-size:12px;color:#71717a;font-weight:500}
 
-/* ── Hint Bar ── */
 .hint-bar{
     background:rgba(255,69,0,.06);border-top:1px solid #27272a;border-bottom:1px solid #27272a;
-    padding:10px 20px;font-size:13px;color:#a1a1aa;line-height:1.7;
+    padding:8px 16px;font-size:12px;color:#a1a1aa;line-height:1.6;
 }
-.hint-bar b{color:#FF8C55;font-weight:600}
+.hint-bar b{color:#FF8C00;font-weight:600}
 .hint-bar kbd{
     display:inline-block;padding:1px 6px;background:#27272a;border:1px solid #3f3f46;
     border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#a1a1aa;
 }
 
-/* ── Suggestions ── */
-.suggestions-section{border-top:1px solid #27272a;padding:12px 16px}
-.suggestions-title,.examples-title{
-    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
-    letter-spacing:.8px;margin-bottom:10px;
-}
-.suggestions-wrap{display:flex;flex-wrap:wrap;gap:6px}
-.suggestion-chip{
-    display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
-    background:rgba(255,69,0,.08);border:1px solid rgba(255,69,0,.2);border-radius:20px;
-    color:#FF8C55;font-size:12px;font-weight:500;font-family:'Inter',sans-serif;
-    cursor:pointer;transition:all .15s;white-space:nowrap;
-}
-.suggestion-chip:hover{background:rgba(255,69,0,.15);border-color:rgba(255,69,0,.35);color:#FF6B35;transform:translateY(-1px)}
-
-/* ── Examples ── */
-.examples-section{border-top:1px solid #27272a;padding:12px 16px}
-.examples-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
-.examples-scroll::-webkit-scrollbar{height:6px}
-.examples-scroll::-webkit-scrollbar-track{background:#09090b;border-radius:3px}
-.examples-scroll::-webkit-scrollbar-thumb{background:#27272a;border-radius:3px}
-.examples-scroll::-webkit-scrollbar-thumb:hover{background:#3f3f46}
-.example-card{
-    flex-shrink:0;width:210px;background:#09090b;border:1px solid #27272a;
-    border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s ease;
-}
-.example-card:hover{border-color:#FF4500;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,69,0,.15)}
-.example-card.loading{opacity:.5;pointer-events:none}
-.example-thumbs{display:flex;height:110px;overflow:hidden;background:#18181b}
-.example-thumbs img{flex:1;object-fit:cover;min-width:0;border-bottom:1px solid #27272a}
-.example-thumb-placeholder{
-    flex:1;display:flex;align-items:center;justify-content:center;
-    background:#18181b;color:#3f3f46;font-size:11px;min-width:0;
-}
-.example-meta{padding:6px 10px;display:flex;align-items:center;gap:6px}
-.example-badge{
-    display:inline-flex;padding:2px 7px;background:rgba(255,69,0,.1);border-radius:4px;
-    font-size:10px;font-weight:600;color:#FF6B35;font-family:'JetBrains Mono',monospace;white-space:nowrap;
-}
-.example-prompt-text{
-    padding:0 10px 8px;font-size:11px;color:#a1a1aa;line-height:1.4;
-    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
-}
-
-/* ── Panel Cards ── */
 .panel-card{border-bottom:1px solid #27272a}
 .panel-card-title{
-    padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;
+    padding:10px 16px;font-size:12px;font-weight:600;color:#71717a;
     text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(39,39,42,.6);
 }
-.panel-card-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
+.panel-card-body{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
 .modern-label{font-size:13px;font-weight:500;color:#a1a1aa;margin-bottom:4px;display:block}
 .modern-textarea{
     width:100%;background:#09090b;border:1px solid #27272a;border-radius:8px;
-    padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;color:#e4e4e7;
-    resize:vertical;outline:none;min-height:42px;transition:border-color .2s;
+    padding:10px 14px;font-family:'Inter',sans-serif;font-size:13px;color:#e4e4e7;
+    resize:vertical;outline:none;min-height:80px;transition:border-color .2s;
 }
 .modern-textarea:focus{border-color:#FF4500;box-shadow:0 0 0 3px rgba(255,69,0,.15)}
 .modern-textarea::placeholder{color:#3f3f46}
 .modern-textarea.error-flash{
-    border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;
-    animation:shake .4s ease;
+    border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;animation:shake .4s ease;
 }
 @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
 
-/* ── Toast ── */
-.toast-notification{
-    position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);
-    z-index:9999;padding:10px 24px;border-radius:10px;font-family:'Inter',sans-serif;
-    font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
-    box-shadow:0 8px 24px rgba(0,0,0,.5);
-    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;opacity:0;pointer-events:none;
-}
-.toast-notification.visible{transform:translateX(-50%) translateY(0);opacity:1}
-.toast-notification.error{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:1px solid rgba(255,255,255,.15)}
-.toast-notification.warning{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border:1px solid rgba(255,255,255,.15)}
-.toast-notification.info{background:linear-gradient(135deg,#FF4500,#CC3700);color:#fff;border:1px solid rgba(255,255,255,.15)}
-
-/* ── Run Button ── */
 .btn-run{
     display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
     background:linear-gradient(135deg,#FF4500,#CC3700);border:none;border-radius:10px;
@@ -486,106 +389,176 @@ footer{display:none!important}
     box-shadow:0 4px 16px rgba(255,69,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
 }
 .btn-run:hover{
-    background:linear-gradient(135deg,#FF6B35,#FF4500);transform:translateY(-1px);
+    background:linear-gradient(135deg,#FF6B00,#FF4500);transform:translateY(-1px);
     box-shadow:0 6px 24px rgba(255,69,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
 }
-.btn-run:active{transform:translateY(0)}
+.btn-run:active{transform:translateY(0);box-shadow:0 2px 8px rgba(255,69,0,.3)}
 .btn-run svg{width:18px;height:18px;fill:#ffffff!important}
 
-/* ── Output Frame ── */
-.output-section{padding:16px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
-.output-section-title{
-    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;
+/* ── Output panels ── */
+.output-area{flex:1;display:flex;flex-direction:column;gap:0;overflow:hidden}
+.output-cols{display:flex;flex:1;gap:0;overflow:hidden}
+.output-col{
+    flex:1;display:flex;flex-direction:column;border-left:1px solid #27272a;
+    background:#0f0f13;min-width:0;
+}
+.output-col:first-child{border-left:none}
+.out-col-header{
+    padding:10px 16px;border-bottom:1px solid #27272a;
+    display:flex;align-items:center;justify-content:space-between;background:#18181b;
+}
+.out-col-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
+.out-col-title.std{color:#60A5FA}
+.out-col-title.small{color:#4ade80}
+.out-col-badge{
+    font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;
+    font-family:'JetBrains Mono',monospace;white-space:nowrap;
 }
-.output-compare-row{display:flex;gap:12px;flex:1}
-.output-col{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
-.output-col-label{
-    display:flex;align-items:center;justify-content:space-between;
-    padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;
+.out-col-badge.std{background:rgba(30,100,255,.12);color:#60A5FA;border:1px solid rgba(30,100,255,.25)}
+.out-col-badge.small{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
+.out-col-body{
+    flex:1;background:#09090b;display:flex;align-items:center;justify-content:center;
+    overflow:hidden;min-height:300px;position:relative;
 }
-.output-col-label.std{background:rgba(30,100,255,.1);color:#6BA3FF;border:1px solid rgba(30,100,255,.2)}
-.output-col-label.small{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
-.output-img-wrap{
-    flex:1;background:#09090b;border:1px solid #27272a;border-radius:10px;
-    overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center;
-    position:relative;
+.out-col-body img.modern-out-img{max-width:100%;max-height:500px;image-rendering:auto;display:block}
+.out-col-placeholder{color:#3f3f46;font-size:12px;text-align:center;padding:16px}
+.out-col-footer{
+    padding:8px 16px;border-top:1px solid #27272a;background:#18181b;
+    display:flex;align-items:center;justify-content:space-between;min-height:38px;
 }
-.output-img-wrap img{max-width:100%;max-height:340px;object-fit:contain;display:block}
-.output-placeholder{color:#3f3f46;font-size:12px;text-align:center;padding:20px}
-.timing-chip{
-    display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;
-    font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
-    background:#18181b;border:1px solid #27272a;color:#71717a;
+.timing-display{
+    font-family:'JetBrains Mono',monospace;font-size:11px;color:#71717a;
 }
-.timing-chip.done{color:#4ade80;border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
 .out-download-btn{
     display:none;align-items:center;justify-content:center;background:rgba(255,69,0,.1);
     border:1px solid rgba(255,69,0,.2);border-radius:6px;cursor:pointer;padding:3px 10px;
-    font-size:11px;font-weight:500;color:#FF8C55!important;gap:4px;height:24px;transition:all .15s;
+    font-size:11px;font-weight:500;color:#FF8C00!important;gap:4px;height:24px;transition:all .15s;
 }
-.out-download-btn:hover{background:rgba(255,69,0,.2);border-color:rgba(255,69,0,.35);color:#fff!important}
+.out-download-btn:hover{background:rgba(255,69,0,.2);border-color:rgba(255,69,0,.35);color:#ffffff!important}
 .out-download-btn.visible{display:inline-flex}
-.out-download-btn svg{width:12px;height:12px;fill:#FF8C55}
+.out-download-btn svg{width:12px;height:12px;fill:#FF8C00}
 
 /* ── Loader ── */
 .modern-loader{
-    position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(9,9,11,.92);
-    z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:12px;
-    backdrop-filter:blur(4px);display:none;
+    display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(9,9,11,.92);
+    z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(4px);
 }
 .modern-loader.active{display:flex}
-.loader-spinner{
-    width:32px;height:32px;border:3px solid #27272a;border-top-color:#FF4500;
+.modern-loader .loader-spinner{
+    width:36px;height:36px;border:3px solid #27272a;border-top-color:#FF4500;
     border-radius:50%;animation:spin .8s linear infinite;
 }
 @keyframes spin{to{transform:rotate(360deg)}}
-.loader-text{font-size:12px;color:#a1a1aa;font-weight:500}
-.loader-bar-track{width:180px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
+.modern-loader .loader-text{font-size:12px;color:#a1a1aa;font-weight:500;text-align:center}
+.loader-bar-track{width:160px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
 .loader-bar-fill{
     height:100%;background:linear-gradient(90deg,#FF4500,#FF8C00,#FF4500);
     background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
 }
 @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
 
+/* ── Toast ── */
+.toast-notification{
+    position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);
+    z-index:9999;padding:10px 24px;border-radius:10px;font-family:'Inter',sans-serif;
+    font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
+    box-shadow:0 8px 24px rgba(0,0,0,.5);
+    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;opacity:0;pointer-events:none;
+}
+.toast-notification.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
+.toast-notification.error{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.warning{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.info{background:linear-gradient(135deg,#FF4500,#CC3700);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification .toast-icon{font-size:16px;line-height:1}
+.toast-notification .toast-text{line-height:1.3}
+
 /* ── Settings ── */
-.settings-group{border:1px solid #27272a;border-radius:10px;margin:12px 16px;overflow:hidden}
+.settings-group{border:1px solid #27272a;border-radius:10px;margin:12px 16px;padding:0;overflow:hidden}
 .settings-group-title{
     font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;
-    padding:10px 16px;border-bottom:1px solid #27272a;background:rgba(24,24,27,.5);
+    padding:8px 14px;border-bottom:1px solid #27272a;background:rgba(24,24,27,.5);
 }
-.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
-.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
-.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:80px;flex-shrink:0}
+.settings-group-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
+.slider-row{display:flex;align-items:center;gap:10px;min-height:26px}
+.slider-row label{font-size:12px;font-weight:500;color:#a1a1aa;min-width:80px;flex-shrink:0}
 .slider-row input[type="range"]{
-    flex:1;-webkit-appearance:none;height:6px;background:#27272a;border-radius:3px;outline:none;
+    flex:1;-webkit-appearance:none;appearance:none;height:6px;background:#27272a;
+    border-radius:3px;outline:none;min-width:0;
 }
 .slider-row input[type="range"]::-webkit-slider-thumb{
     -webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#FF4500,#CC3700);
     border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(255,69,0,.4);transition:transform .15s;
 }
 .slider-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
+.slider-row input[type="range"]::-moz-range-thumb{
+    width:16px;height:16px;background:linear-gradient(135deg,#FF4500,#CC3700);
+    border-radius:50%;cursor:pointer;border:none;
+}
 .slider-row .slider-val{
-    min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;
-    padding:3px 8px;background:#09090b;border:1px solid #27272a;border-radius:6px;color:#a1a1aa;flex-shrink:0;
+    min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;
+    font-weight:500;padding:3px 8px;background:#09090b;border:1px solid #27272a;
+    border-radius:6px;color:#a1a1aa;flex-shrink:0;
 }
 .checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
 .checkbox-row input[type="checkbox"]{accent-color:#FF4500;width:16px;height:16px;cursor:pointer}
 
+/* ── Suggestions / Examples ── */
+.suggestions-section{border-top:1px solid #27272a;padding:10px 14px}
+.suggestions-title,.examples-title{
+    font-size:11px;font-weight:600;color:#71717a;text-transform:uppercase;
+    letter-spacing:.8px;margin-bottom:8px;
+}
+.suggestions-wrap{display:flex;flex-wrap:wrap;gap:5px}
+.suggestion-chip{
+    display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
+    background:rgba(255,69,0,.08);border:1px solid rgba(255,69,0,.2);border-radius:20px;
+    color:#FF8C00;font-size:11px;font-weight:500;font-family:'Inter',sans-serif;
+    cursor:pointer;transition:all .15s;white-space:nowrap;
+}
+.suggestion-chip:hover{background:rgba(255,69,0,.15);border-color:rgba(255,69,0,.35);color:#FFB366;transform:translateY(-1px)}
+
+.examples-section{border-top:1px solid #27272a;padding:10px 14px}
+.examples-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
+.examples-scroll::-webkit-scrollbar{height:4px}
+.examples-scroll::-webkit-scrollbar-track{background:#09090b;border-radius:3px}
+.examples-scroll::-webkit-scrollbar-thumb{background:#27272a;border-radius:3px}
+.example-card{
+    flex-shrink:0;width:180px;background:#09090b;border:1px solid #27272a;
+    border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s ease;
+}
+.example-card:hover{border-color:#FF4500;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,69,0,.15)}
+.example-card.loading{opacity:.5;pointer-events:none}
+.example-thumbs{display:flex;height:90px;overflow:hidden;background:#18181b}
+.example-thumbs img{flex:1;object-fit:cover;min-width:0;border-bottom:1px solid #27272a}
+.example-thumb-placeholder{
+    flex:1;display:flex;align-items:center;justify-content:center;
+    background:#18181b;color:#3f3f46;font-size:11px;min-width:0;
+}
+.example-meta{padding:5px 8px;display:flex;align-items:center;gap:6px}
+.example-badge{
+    display:inline-flex;padding:2px 6px;background:rgba(255,69,0,.1);border-radius:4px;
+    font-size:10px;font-weight:600;color:#FF8C00;font-family:'JetBrains Mono',monospace;white-space:nowrap;
+}
+.example-prompt-text{
+    padding:0 8px 7px;font-size:10px;color:#a1a1aa;line-height:1.4;
+    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
+}
+
 /* ── Statusbar ── */
 .app-statusbar{
     background:#18181b;border-top:1px solid #27272a;padding:6px 20px;
     display:flex;gap:12px;height:34px;align-items:center;font-size:12px;
 }
-.sb-section{
+.app-statusbar .sb-section{
     padding:0 12px;flex:1;display:flex;align-items:center;font-family:'JetBrains Mono',monospace;
     font-size:12px;color:#52525b;overflow:hidden;white-space:nowrap;
 }
-.sb-section.sb-fixed{
+.app-statusbar .sb-section.sb-fixed{
     flex:0 0 auto;min-width:90px;text-align:center;justify-content:center;
-    padding:3px 12px;background:rgba(255,69,0,.08);border-radius:6px;color:#FF6B35;font-weight:500;
+    padding:3px 12px;background:rgba(255,69,0,.08);border-radius:6px;color:#FF8C00;font-weight:500;
 }
 .exp-note{padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;text-align:center}
-.exp-note a{color:#FF8C55;text-decoration:none}
+.exp-note a{color:#FF8C00;text-decoration:none}
 .exp-note a:hover{text-decoration:underline}
 
 ::-webkit-scrollbar{width:8px;height:8px}
@@ -595,26 +568,12 @@ footer{display:none!important}
 
 @media(max-width:900px){
     .app-main-row{flex-direction:column}
-    .app-main-right{width:100%}
-    .app-main-left{border-right:none;border-bottom:1px solid #27272a}
-    .output-compare-row{flex-direction:column}
+    .app-main-left{flex:0 0 auto;border-right:none;border-bottom:1px solid #27272a}
+    .output-cols{flex-direction:column}
+    .output-col{border-left:none;border-top:1px solid #27272a}
 }
 """
 
-# ── SVGs ──────────────────────────────────────────────────────────────────────
-
-FLUX_LOGO_SVG = '''<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 2L4.09 12.11a2 2 0 0 0-.09 2.16L8 21h8l4-6.73a2 2 0 0 0-.09-2.16L13 2z"/>
-</svg>'''
-
-UPLOAD_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'
-REMOVE_SVG  = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
-CLEAR_SVG   = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>'
-DOWNLOAD_SVG = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 16l-5-5h3V4h4v7h3l-5 5z"/><path d="M20 18H4v2h16v-2z"/></svg>'
-RUN_SVG = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#ffffff"><path d="M13 2L4.09 12.11a2 2 0 0 0-.09 2.16L8 21h8l4-6.73a2 2 0 0 0-.09-2.16L13 2z"/></svg>'
-
-# ── Gallery JS ────────────────────────────────────────────────────────────────
-
 gallery_js = r"""
 () => {
 function init() {
@@ -634,6 +593,7 @@ function init() {
     const imgCountSb   = document.getElementById('sb-image-count');
 
     if (!galleryGrid || !fileInput || !dropZone) { setTimeout(init, 250); return; }
+
     window.__fluxInitDone = true;
 
     let images = [];
@@ -736,27 +696,30 @@ function init() {
         }
         if (uploadPrompt) uploadPrompt.style.display = 'none';
         galleryGrid.style.display = 'grid';
+
         let html = '';
         images.forEach((img, i) => {
             const sel = i === selectedIdx ? ' selected' : '';
-            html += '<div class="gallery-thumb' + sel + '" data-idx="' + i + '">'
-                  + '<img src="' + img.b64 + '" alt="">'
-                  + '<span class="thumb-badge">#' + (i+1) + '</span>'
-                  + '<button class="thumb-remove" data-remove="' + i + '">\u2715</button>'
-                  + '</div>';
+            html += `<div class="gallery-thumb${sel}" data-idx="${i}">
+                <img src="${img.b64}" alt="${img.name||'image'}">
+                <span class="thumb-badge">#${i+1}</span>
+                <button class="thumb-remove" data-remove="${i}">\u2715</button>
+            </div>`;
         });
-        html += '<div class="gallery-add-card" id="gallery-add-card"><span class="add-icon">+</span><span class="add-text">Add</span></div>';
+        html += `<div class="gallery-add-card" id="gallery-add-card">
+            <span class="add-icon">+</span><span class="add-text">Add</span>
+        </div>`;
         galleryGrid.innerHTML = html;
 
         galleryGrid.querySelectorAll('.gallery-thumb').forEach(thumb => {
-            thumb.addEventListener('click', (e) => {
+            thumb.addEventListener('click', e => {
                 if (e.target.closest('.thumb-remove')) return;
                 selectedIdx = selectedIdx === parseInt(thumb.dataset.idx) ? -1 : parseInt(thumb.dataset.idx);
                 renderGallery();
             });
         });
         galleryGrid.querySelectorAll('.thumb-remove').forEach(btn => {
-            btn.addEventListener('click', (e) => { e.stopPropagation(); removeImage(parseInt(btn.dataset.remove)); });
+            btn.addEventListener('click', e => { e.stopPropagation(); removeImage(parseInt(btn.dataset.remove)); });
         });
         const addCard = document.getElementById('gallery-add-card');
         if (addCard) addCard.addEventListener('click', () => fileInput.click());
@@ -766,23 +729,29 @@ function init() {
         Array.from(files).forEach(file => {
             if (!file.type.startsWith('image/')) return;
             const reader = new FileReader();
-            reader.onload = (e) => addImage(e.target.result, file.name);
+            reader.onload = e => addImage(e.target.result, file.name);
             reader.readAsDataURL(file);
         });
     }
 
-    fileInput.addEventListener('change', (e) => { processFiles(e.target.files); e.target.value = ''; });
+    fileInput.addEventListener('change', e => { processFiles(e.target.files); e.target.value = ''; });
     if (uploadClick) uploadClick.addEventListener('click', () => fileInput.click());
     if (btnUpload)   btnUpload.addEventListener('click', () => fileInput.click());
     if (btnRemove)   btnRemove.addEventListener('click', () => { if (selectedIdx >= 0) removeImage(selectedIdx); });
     if (btnClear)    btnClear.addEventListener('click', clearAll);
 
-    dropZone.addEventListener('dragover',  (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
-    dropZone.addEventListener('dragleave', (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); });
-    dropZone.addEventListener('drop',      (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); if (e.dataTransfer.files.length) processFiles(e.dataTransfer.files); });
+    dropZone.addEventListener('dragover',  e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); });
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault(); dropZone.classList.remove('drag-over');
+        if (e.dataTransfer.files.length) processFiles(e.dataTransfer.files);
+    });
 
     if (promptInput) promptInput.addEventListener('input', syncPromptToGradio);
-    window.__setPrompt = function(text) { if (promptInput) { promptInput.value = text; syncPromptToGradio(); } };
+
+    window.__setPrompt = function(text) {
+        if (promptInput) { promptInput.value = text; syncPromptToGradio(); }
+    };
 
     // Example cards
     document.querySelectorAll('.example-card[data-idx]').forEach(card => {
@@ -827,19 +796,26 @@ function init() {
     syncSlider('custom-height',   'gradio-height');
 
     const randCheck = document.getElementById('custom-randomize');
-    if (randCheck) {
-        randCheck.addEventListener('change', () => {
-            const container = document.getElementById('gradio-randomize');
-            if (!container) return;
-            const cb = container.querySelector('input[type="checkbox"]');
-            if (cb && cb.checked !== randCheck.checked) cb.click();
-        });
-    }
+    if (randCheck) randCheck.addEventListener('change', () => {
+        const container = document.getElementById('gradio-randomize');
+        if (!container) return;
+        const cb = container.querySelector('input[type="checkbox"]');
+        if (cb && cb.checked !== randCheck.checked) cb.click();
+    });
 
-    function showLoader(id) { const l = document.getElementById(id); if (l) l.classList.add('active'); }
-    function hideLoader(id) { const l = document.getElementById(id); if (l) l.classList.remove('active'); }
-    window.__showLoaders = () => { showLoader('loader-std'); showLoader('loader-small'); const sb = document.querySelector('.sb-fixed'); if (sb) sb.textContent = 'Processing...'; };
-    window.__hideLoaders = () => { hideLoader('loader-std'); hideLoader('loader-small'); const sb = document.querySelector('.sb-fixed'); if (sb) sb.textContent = 'Done'; };
+    // Loader
+    function showLoader() {
+        document.querySelectorAll('.modern-loader').forEach(l => l.classList.add('active'));
+        const sb = document.querySelector('.sb-fixed');
+        if (sb) sb.textContent = 'Processing...';
+    }
+    function hideLoader() {
+        document.querySelectorAll('.modern-loader').forEach(l => l.classList.remove('active'));
+        const sb = document.querySelector('.sb-fixed');
+        if (sb) sb.textContent = 'Done';
+    }
+    window.__showLoader = showLoader;
+    window.__hideLoader = hideLoader;
 
     function validateBeforeRun() {
         const promptVal = promptInput ? promptInput.value.trim() : '';
@@ -849,8 +825,7 @@ function init() {
 
     window.__clickGradioRunBtn = function() {
         if (!validateBeforeRun()) return;
-        syncPromptToGradio(); syncImagesToGradio();
-        window.__showLoaders();
+        syncPromptToGradio(); syncImagesToGradio(); showLoader();
         setTimeout(() => {
             const gradioBtn = document.getElementById('gradio-run-btn');
             if (!gradioBtn) return;
@@ -871,76 +846,110 @@ init();
 wire_outputs_js = r"""
 () => {
 function watchOutputs() {
-    const resultContainer = document.getElementById('gradio-result-json');
-    if (!resultContainer) { setTimeout(watchOutputs, 500); return; }
-
-    let lastVal = '';
-
-    function checkResult() {
-        const el = resultContainer.querySelector('textarea') || resultContainer.querySelector('input');
-        if (!el || !el.value || el.value === lastVal || el.value.length < 20) return;
-        lastVal = el.value;
-
-        try {
-            const data = JSON.parse(el.value);
-            if (data.status !== 'ok') return;
-
-            // Standard VAE output
-            const stdWrap = document.getElementById('output-img-std');
-            const stdPh   = document.getElementById('output-ph-std');
-            const dlStd   = document.getElementById('dl-btn-std');
-            if (stdWrap && data.standard_b64) {
-                if (stdPh) stdPh.style.display = 'none';
-                let img = stdWrap.querySelector('img.out-img');
-                if (!img) { img = document.createElement('img'); img.className = 'out-img'; stdWrap.appendChild(img); }
-                img.src = data.standard_b64;
-                if (dlStd) { dlStd.classList.add('visible'); dlStd.onclick = () => { const a = document.createElement('a'); a.href = data.standard_b64; a.download = 'flux_standard.png'; a.click(); }; }
-            }
+    // Watch both result containers
+    const containers = [
+        {id: 'gradio-result-std',   bodyId: 'output-std-body',   dlId: 'dl-btn-std',   timingId: 'timing-std',   suffix: 'std_output.png'},
+        {id: 'gradio-result-small', bodyId: 'output-small-body', dlId: 'dl-btn-small', timingId: 'timing-small', suffix: 'small_output.png'},
+    ];
+
+    let ready = containers.every(c => document.getElementById(c.id) && document.getElementById(c.bodyId));
+    if (!ready) { setTimeout(watchOutputs, 500); return; }
+
+    containers.forEach(c => {
+        const dlBtn = document.getElementById(c.dlId);
+        if (dlBtn) {
+            dlBtn.addEventListener('click', e => {
+                e.stopPropagation();
+                const img = document.getElementById(c.bodyId).querySelector('img.modern-out-img');
+                if (img && img.src) {
+                    const a = document.createElement('a');
+                    a.href = img.src; a.download = c.suffix;
+                    document.body.appendChild(a); a.click(); document.body.removeChild(a);
+                }
+            });
+        }
+    });
 
-            // Small Decoder output
-            const smWrap = document.getElementById('output-img-small');
-            const smPh   = document.getElementById('output-ph-small');
-            const dlSm   = document.getElementById('dl-btn-small');
-            if (smWrap && data.small_b64) {
-                if (smPh) smPh.style.display = 'none';
-                let img = smWrap.querySelector('img.out-img');
-                if (!img) { img = document.createElement('img'); img.className = 'out-img'; smWrap.appendChild(img); }
-                img.src = data.small_b64;
-                if (dlSm) { dlSm.classList.add('visible'); dlSm.onclick = () => { const a = document.createElement('a'); a.href = data.small_b64; a.download = 'flux_small_decoder.png'; a.click(); }; }
+    function syncImage(c) {
+        const resultContainer = document.getElementById(c.id);
+        const outBody = document.getElementById(c.bodyId);
+        if (!resultContainer || !outBody) return;
+        const resultImg = resultContainer.querySelector('img');
+        if (resultImg && resultImg.src) {
+            const ph = outBody.querySelector('.out-col-placeholder');
+            if (ph) ph.style.display = 'none';
+            let existing = outBody.querySelector('img.modern-out-img');
+            if (!existing) { existing = document.createElement('img'); existing.className = 'modern-out-img'; outBody.appendChild(existing); }
+            if (existing.src !== resultImg.src) {
+                existing.src = resultImg.src;
+                const dlBtn = document.getElementById(c.dlId);
+                if (dlBtn) dlBtn.classList.add('visible');
+                if (window.__hideLoader) window.__hideLoader();
             }
-
-            // Timing chips
-            const chipStd = document.getElementById('timing-chip-std');
-            const chipSm  = document.getElementById('timing-chip-small');
-            if (chipStd && data.time_std)   { chipStd.textContent  = '⏱ ' + data.time_std;   chipStd.classList.add('done'); }
-            if (chipSm  && data.time_small) { chipSm.textContent   = '⏱ ' + data.time_small; chipSm.classList.add('done'); }
-
-            // Seed
-            const seedSb = document.getElementById('sb-seed');
-            if (seedSb && data.seed !== undefined) seedSb.textContent = 'seed: ' + data.seed;
-
-            if (window.__hideLoaders) window.__hideLoaders();
-
-        } catch(e) { console.error('Output parse error:', e); }
+        }
     }
 
-    const obs = new MutationObserver(checkResult);
-    obs.observe(resultContainer, {childList:true, subtree:true, characterData:true, attributes:true});
-    setInterval(checkResult, 600);
+    containers.forEach(c => {
+        const resultContainer = document.getElementById(c.id);
+        if (!resultContainer) return;
+        const observer = new MutationObserver(() => syncImage(c));
+        observer.observe(resultContainer, {childList:true, subtree:true, attributes:true, attributeFilter:['src']});
+        setInterval(() => syncImage(c), 800);
+    });
 }
 watchOutputs();
 
+function watchTimings() {
+    const timingMap = [
+        {gradioId: 'gradio-timing-std',   displayId: 'timing-std-display'},
+        {gradioId: 'gradio-timing-small', displayId: 'timing-small-display'},
+    ];
+    timingMap.forEach(t => {
+        function sync() {
+            const container = document.getElementById(t.gradioId);
+            const display   = document.getElementById(t.displayId);
+            if (!container || !display) return;
+            const el = container.querySelector('textarea, input');
+            if (el && el.value && el.value.trim()) display.textContent = el.value;
+        }
+        const container = document.getElementById(t.gradioId);
+        if (container) {
+            const obs = new MutationObserver(sync);
+            obs.observe(container, {childList:true, subtree:true, characterData:true, attributes:true});
+        }
+        setInterval(sync, 600);
+    });
+}
+watchTimings();
+
+function watchSeed() {
+    const seedContainer = document.getElementById('gradio-seed');
+    const seedSlider    = document.getElementById('custom-seed');
+    const seedVal       = document.getElementById('custom-seed-val');
+    if (!seedContainer || !seedSlider) { setTimeout(watchSeed, 500); return; }
+    function sync() {
+        const el = seedContainer.querySelector('input[type="range"],input[type="number"]');
+        if (el && el.value) { seedSlider.value = el.value; if (seedVal) seedVal.textContent = el.value; }
+    }
+    const obs = new MutationObserver(sync);
+    obs.observe(seedContainer, {childList:true, subtree:true, attributes:true});
+    setInterval(sync, 1000);
+}
+watchSeed();
+
 function watchExampleResults() {
     const container = document.getElementById('example-result-data');
     if (!container) { setTimeout(watchExampleResults, 500); return; }
     let lastProcessed = '';
     function checkResult() {
         const el = container.querySelector('textarea') || container.querySelector('input');
-        if (!el || !el.value || el.value === lastProcessed || el.value.length < 20) return;
+        if (!el) return;
+        const val = el.value;
+        if (!val || val === lastProcessed || val.length < 20) return;
         try {
-            const data = JSON.parse(el.value);
+            const data = JSON.parse(val);
             if (data.status === 'ok' && data.images && data.images.length > 0) {
-                lastProcessed = el.value;
+                lastProcessed = val;
                 if (window.__clearAll) window.__clearAll();
                 if (window.__setPrompt && data.prompt) window.__setPrompt(data.prompt);
                 data.images.forEach((b64, i) => {
@@ -951,6 +960,9 @@ function watchExampleResults() {
                 });
                 document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
                 if (window.__showToast) window.__showToast('Example loaded — ' + data.images.length + ' image(s)', 'info');
+            } else if (data.status === 'error') {
+                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+                if (window.__showToast) window.__showToast('Could not load example images', 'error');
             }
         } catch(e) {}
     }
@@ -962,230 +974,222 @@ watchExampleResults();
 }
 """
 
-# ── Gradio App ────────────────────────────────────────────────────────────────
-
 with gr.Blocks(css=css) as demo:
 
-    # Hidden Gradio state components
-    hidden_images_b64  = gr.Textbox(value="[]",  elem_id="hidden-images-b64",   elem_classes="hidden-input", container=False)
-    prompt             = gr.Textbox(value="",    elem_id="prompt-gradio-input",  elem_classes="hidden-input", container=False)
-    seed               = gr.Slider(minimum=0, maximum=MAX_SEED, step=1, value=0,
-                                   elem_id="gradio-seed",       elem_classes="hidden-input", container=False)
-    randomize_seed     = gr.Checkbox(value=True, elem_id="gradio-randomize",     elem_classes="hidden-input", container=False)
-    guidance_scale     = gr.Slider(minimum=0.0, maximum=10.0, step=0.1, value=1.0,
-                                   elem_id="gradio-guidance",   elem_classes="hidden-input", container=False)
-    steps              = gr.Slider(minimum=1, maximum=20, step=1, value=4,
-                                   elem_id="gradio-steps",      elem_classes="hidden-input", container=False)
-    width_gr           = gr.Slider(minimum=256, maximum=1024, step=8, value=1024,
-                                   elem_id="gradio-width",      elem_classes="hidden-input", container=False)
-    height_gr          = gr.Slider(minimum=256, maximum=1024, step=8, value=1024,
-                                   elem_id="gradio-height",     elem_classes="hidden-input", container=False)
-
-    result_std_gr      = gr.Image(elem_id="gradio-result-std",   elem_classes="hidden-input", container=False, format="png")
-    result_small_gr    = gr.Image(elem_id="gradio-result-small", elem_classes="hidden-input", container=False, format="png")
-    seed_out_gr        = gr.Number(elem_id="gradio-seed-out",    elem_classes="hidden-input", container=False)
-    result_json_gr     = gr.Textbox(value="",  elem_id="gradio-result-json",    elem_classes="hidden-input", container=False)
-
-    example_idx        = gr.Textbox(value="", elem_id="example-idx-input",  elem_classes="hidden-input", container=False)
+    # ── Hidden Gradio state ───────────────────────────────────────────────────
+    hidden_images_b64  = gr.Textbox(value="[]",  elem_id="hidden-images-b64",      elem_classes="hidden-input", container=False)
+    prompt_hidden      = gr.Textbox(value="",    elem_id="prompt-gradio-input",     elem_classes="hidden-input", container=False)
+    seed_slider        = gr.Slider(minimum=0, maximum=MAX_SEED, step=1, value=0,    elem_id="gradio-seed",       elem_classes="hidden-input", container=False)
+    randomize_seed     = gr.Checkbox(value=True,                                    elem_id="gradio-randomize",  elem_classes="hidden-input", container=False)
+    guidance_scale     = gr.Slider(minimum=0.0, maximum=10.0, step=0.1, value=1.0, elem_id="gradio-guidance",   elem_classes="hidden-input", container=False)
+    steps_slider       = gr.Slider(minimum=1, maximum=20, step=1, value=4,         elem_id="gradio-steps",      elem_classes="hidden-input", container=False)
+    width_slider       = gr.Slider(minimum=256, maximum=1024, step=8, value=1024,  elem_id="gradio-width",      elem_classes="hidden-input", container=False)
+    height_slider      = gr.Slider(minimum=256, maximum=1024, step=8, value=1024,  elem_id="gradio-height",     elem_classes="hidden-input", container=False)
+
+    result_std         = gr.Image(elem_id="gradio-result-std",   elem_classes="hidden-input", container=False, format="png")
+    result_small_dec   = gr.Image(elem_id="gradio-result-small", elem_classes="hidden-input", container=False, format="png")
+    seed_used          = gr.Number(value=0,  elem_id="gradio-seed-used",     elem_classes="hidden-input", container=False)
+    timing_std_hidden  = gr.Textbox(value="", elem_id="gradio-timing-std",   elem_classes="hidden-input", container=False)
+    timing_small_hidden= gr.Textbox(value="", elem_id="gradio-timing-small", elem_classes="hidden-input", container=False)
+
+    example_idx        = gr.Textbox(value="", elem_id="example-idx-input",   elem_classes="hidden-input", container=False)
     example_result     = gr.Textbox(value="", elem_id="example-result-data", elem_classes="hidden-input", container=False)
     example_load_btn   = gr.Button("Load Example", elem_id="example-load-btn")
 
     gr.HTML(f"""
     <div class="app-shell">
 
-      <!-- Header -->
-      <div class="app-header">
-        <div class="app-header-left">
-          <div class="app-logo">{FLUX_LOGO_SVG}</div>
-          <span class="app-title">FLUX.2-klein-4B VAE Comparator</span>
-          <span class="app-badge">4B Distilled</span>
-          <span class="app-badge fast">4-Step Fast</span>
-        </div>
-      </div>
-
-      <!-- Toolbar -->
-      <div class="app-toolbar">
-        <button id="tb-upload" class="modern-tb-btn" title="Upload images">
-          {UPLOAD_SVG}<span class="tb-label">Upload</span>
-        </button>
-        <button id="tb-remove" class="modern-tb-btn" title="Remove selected">
-          {REMOVE_SVG}<span class="tb-label">Remove</span>
-        </button>
-        <button id="tb-clear" class="modern-tb-btn" title="Clear all">
-          {CLEAR_SVG}<span class="tb-label">Clear All</span>
-        </button>
-        <div class="tb-sep"></div>
-        <span id="tb-image-count" class="tb-info">No images</span>
-        <div class="tb-sep"></div>
-        <span class="tb-info" style="color:#71717a;">
-          Compare 🟦 Standard VAE vs 🟩 Small Decoder VAE — same seed, sequential generation
-        </span>
-      </div>
-
-      <!-- Main -->
-      <div class="app-main-row">
-
-        <!-- Left: Upload + Examples -->
-        <div class="app-main-left">
-          <div id="gallery-drop-zone">
-            <div id="upload-prompt" class="upload-prompt-modern">
-              <div id="upload-click-area" class="upload-click-area">
-                <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#FF4500" stroke-width="2" stroke-dasharray="4 3"/>
-                  <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(255,69,0,0.15)" stroke="#FF4500" stroke-width="1.5"/>
-                  <circle cx="28" cy="30" r="6" fill="rgba(255,69,0,0.2)" stroke="#FF4500" stroke-width="1.5"/>
-                </svg>
-                <span class="upload-main-text">Click or drag reference image(s) here</span>
-                <span class="upload-sub-text">Optional — leave empty for text-to-image generation</span>
-              </div>
+        <div class="app-header">
+            <div class="app-header-left">
+                <div class="app-logo">{FLUX_LOGO_SVG}</div>
+                <span class="app-title">FLUX.2-klein-4B Comparator</span>
+                <span class="app-badge">v1.0</span>
+                <span class="app-badge std">Standard VAE</span>
+                <span class="app-badge small">Small Decoder</span>
             </div>
-            <input id="custom-file-input" type="file" accept="image/*" multiple style="display:none;" />
-            <div id="image-gallery-grid" class="image-gallery-grid" style="display:none;"></div>
-          </div>
-
-          <div class="hint-bar">
-            <b>Optional:</b> Upload reference image(s) for image-guided generation &nbsp;&middot;&nbsp;
-            Leave empty for <b>text-to-image</b> mode &nbsp;&middot;&nbsp;
-            <kbd>Remove</kbd> deletes selected &nbsp;&middot;&nbsp; <kbd>Clear All</kbd> removes everything
-          </div>
-
-          <div class="suggestions-section">
-            <div class="suggestions-title">Quick Prompts</div>
-            <div class="suggestions-wrap">
-              <button class="suggestion-chip" onclick="window.__setPrompt('Change the weather to stormy.')">Stormy Weather</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Transform the scene into a snowy winter day.')">Snowy Winter</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Relight with soft golden sunset lighting.')">Golden Sunset</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Make the texture high-resolution and ultra detailed.')">HD Texture</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Convert to cinematic film look with grain and vignette.')">Cinematic Film</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Transform into anime illustration style.')">Anime Style</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Apply oil painting effect with visible brush strokes.')">Oil Painting</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Add dramatic neon glow with cyberpunk aesthetic.')">Neon Cyberpunk</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('A futuristic city at night with flying cars and neon lights.')">Futuristic City</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('A serene mountain landscape at dawn with mist.')">Mountain Dawn</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Portrait of a warrior in ancient armor, epic lighting.')">Epic Portrait</button>
-              <button class="suggestion-chip" onclick="window.__setPrompt('Abstract geometric art with vibrant colors and patterns.')">Abstract Art</button>
-            </div>
-          </div>
+        </div>
 
-          <div class="examples-section">
-            <div class="examples-title">Quick Examples</div>
-            <div class="examples-scroll">
-              {EXAMPLE_CARDS_HTML}
-            </div>
-          </div>
+        <div class="app-toolbar">
+            <button id="tb-upload" class="modern-tb-btn" title="Upload images">
+                {UPLOAD_SVG}<span class="tb-label">Upload</span>
+            </button>
+            <button id="tb-remove" class="modern-tb-btn" title="Remove selected">
+                {REMOVE_SVG}<span class="tb-label">Remove</span>
+            </button>
+            <button id="tb-clear" class="modern-tb-btn" title="Clear all">
+                {CLEAR_SVG}<span class="tb-label">Clear All</span>
+            </button>
+            <div class="tb-sep"></div>
+            <span id="tb-image-count" class="tb-info">No images</span>
         </div>
 
-        <!-- Right: Prompt + Outputs + Settings -->
-        <div class="app-main-right">
+        <div class="app-main-row">
+
+            <!-- LEFT: Input Panel -->
+            <div class="app-main-left">
+
+                <div id="gallery-drop-zone">
+                    <div id="upload-prompt" class="upload-prompt-modern">
+                        <div id="upload-click-area" class="upload-click-area">
+                            <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#FF4500" stroke-width="2" stroke-dasharray="4 3"/>
+                                <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(255,69,0,0.15)" stroke="#FF4500" stroke-width="1.5"/>
+                                <circle cx="28" cy="30" r="6" fill="rgba(255,69,0,0.2)" stroke="#FF4500" stroke-width="1.5"/>
+                            </svg>
+                            <span class="upload-main-text">Click or drag image here</span>
+                            <span class="upload-sub-text">Optional reference image for editing tasks</span>
+                        </div>
+                    </div>
+                    <input id="custom-file-input" type="file" accept="image/*" multiple style="display:none;" />
+                    <div id="image-gallery-grid" class="image-gallery-grid" style="display:none;"></div>
+                </div>
 
-          <div class="panel-card">
-            <div class="panel-card-title">Generation Prompt</div>
-            <div class="panel-card-body">
-              <label class="modern-label" for="custom-prompt-input">Prompt</label>
-              <textarea id="custom-prompt-input" class="modern-textarea" rows="3"
-                placeholder="e.g., Transform the scene into a snowy winter day..."></textarea>
-            </div>
-          </div>
+                <div class="hint-bar">
+                    <b>Optional:</b> Upload a reference image for editing &nbsp;&middot;&nbsp;
+                    Text-to-image also works without any input &nbsp;&middot;&nbsp;
+                    <kbd>Clear All</kbd> to reset
+                </div>
 
-          <div style="padding:12px 20px;">
-            <button id="custom-run-btn" class="btn-run">
-              {RUN_SVG}
-              <span>⚡ Run Comparison</span>
-            </button>
-          </div>
-
-          <!-- Output Compare -->
-          <div class="output-section">
-            <div class="output-section-title">Output Comparison</div>
-            <div class="output-compare-row">
-
-              <!-- Standard VAE -->
-              <div class="output-col">
-                <div class="output-col-label std">
-                  <span>🟦 Standard VAE</span>
-                  <span id="dl-btn-std" class="out-download-btn" title="Download">{DOWNLOAD_SVG}</span>
+                <div class="panel-card">
+                    <div class="panel-card-title">Prompt</div>
+                    <div class="panel-card-body">
+                        <textarea id="custom-prompt-input" class="modern-textarea" rows="4"
+                            placeholder="e.g., Transform the scene into a snowy winter day..."></textarea>
+                    </div>
                 </div>
-                <div class="output-img-wrap" id="output-img-std">
-                  <div class="modern-loader" id="loader-std">
-                    <div class="loader-spinner"></div>
-                    <div class="loader-text">Generating...</div>
-                    <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
-                  </div>
-                  <div class="output-placeholder" id="output-ph-std">Result will appear here</div>
+
+                <div style="padding:12px 16px;">
+                    <button id="custom-run-btn" class="btn-run">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="white"/>
+                        </svg>
+                        <span>Run Comparison</span>
+                    </button>
                 </div>
-                <span class="timing-chip" id="timing-chip-std">⏱ Waiting...</span>
-              </div>
-
-              <!-- Small Decoder VAE -->
-              <div class="output-col">
-                <div class="output-col-label small">
-                  <span>🟩 Small Decoder</span>
-                  <span id="dl-btn-small" class="out-download-btn" title="Download">{DOWNLOAD_SVG}</span>
+
+                <div class="suggestions-section">
+                    <div class="suggestions-title">Quick Prompts</div>
+                    <div class="suggestions-wrap">
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Change the weather to stormy.')">Stormy Weather</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform the scene into a snowy winter day.')">Snowy Winter</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Relight with soft golden sunset lighting.')">Golden Sunset</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Make the texture high-resolution and detailed.')">HD Texture</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert to oil painting style.')">Oil Painting</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Add cinematic film grain and color grading.')">Cinematic</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform into anime illustration style.')">Anime Style</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Apply dramatic noir black and white style.')">Noir B&W</button>
+                    </div>
                 </div>
-                <div class="output-img-wrap" id="output-img-small">
-                  <div class="modern-loader" id="loader-small">
-                    <div class="loader-spinner"></div>
-                    <div class="loader-text">Generating...</div>
-                    <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
-                  </div>
-                  <div class="output-placeholder" id="output-ph-small">Result will appear here</div>
+
+                <div class="examples-section">
+                    <div class="examples-title">Quick Examples</div>
+                    <div class="examples-scroll">
+                        {EXAMPLE_CARDS_HTML}
+                    </div>
+                </div>
+
+                <div class="settings-group">
+                    <div class="settings-group-title">Advanced Settings</div>
+                    <div class="settings-group-body">
+                        <div class="slider-row">
+                            <label>Seed</label>
+                            <input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0">
+                            <span class="slider-val" id="custom-seed-val">0</span>
+                        </div>
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-randomize" checked>
+                            <label for="custom-randomize">Randomize seed</label>
+                        </div>
+                        <div class="slider-row">
+                            <label>Guidance</label>
+                            <input type="range" id="custom-guidance" min="0" max="10" step="0.1" value="1.0">
+                            <span class="slider-val" id="custom-guidance-val">1.0</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Steps</label>
+                            <input type="range" id="custom-steps" min="1" max="20" step="1" value="4">
+                            <span class="slider-val" id="custom-steps-val">4</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Width</label>
+                            <input type="range" id="custom-width" min="256" max="1024" step="8" value="1024">
+                            <span class="slider-val" id="custom-width-val">1024</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Height</label>
+                            <input type="range" id="custom-height" min="256" max="1024" step="8" value="1024">
+                            <span class="slider-val" id="custom-height-val">1024</span>
+                        </div>
+                    </div>
                 </div>
-                <span class="timing-chip" id="timing-chip-small">⏱ Waiting...</span>
-              </div>
 
             </div>
-          </div>
-
-          <!-- Advanced Settings -->
-          <div class="settings-group">
-            <div class="settings-group-title">Advanced Settings</div>
-            <div class="settings-group-body">
-              <div class="slider-row">
-                <label>Seed</label>
-                <input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0">
-                <span class="slider-val" id="custom-seed-val">0</span>
-              </div>
-              <div class="checkbox-row">
-                <input type="checkbox" id="custom-randomize" checked>
-                <label for="custom-randomize">Randomize seed</label>
-              </div>
-              <div class="slider-row">
-                <label>Guidance</label>
-                <input type="range" id="custom-guidance" min="0" max="10" step="0.1" value="1.0">
-                <span class="slider-val" id="custom-guidance-val">1.0</span>
-              </div>
-              <div class="slider-row">
-                <label>Steps</label>
-                <input type="range" id="custom-steps" min="1" max="20" step="1" value="4">
-                <span class="slider-val" id="custom-steps-val">4</span>
-              </div>
-              <div class="slider-row">
-                <label>Width</label>
-                <input type="range" id="custom-width" min="256" max="1024" step="8" value="1024">
-                <span class="slider-val" id="custom-width-val">1024</span>
-              </div>
-              <div class="slider-row">
-                <label>Height</label>
-                <input type="range" id="custom-height" min="256" max="1024" step="8" value="1024">
-                <span class="slider-val" id="custom-height-val">1024</span>
-              </div>
+
+            <!-- RIGHT: Output Area -->
+            <div class="app-main-right">
+                <div class="output-area">
+
+                    <div class="output-cols">
+
+                        <!-- Standard VAE -->
+                        <div class="output-col">
+                            <div class="out-col-header">
+                                <span class="out-col-title std">&#128310; Standard VAE</span>
+                                <span class="out-col-badge std">Generated First</span>
+                            </div>
+                            <div class="out-col-body" id="output-std-body">
+                                <div class="modern-loader" id="output-loader-std">
+                                    <div class="loader-spinner"></div>
+                                    <div class="loader-text">Running Standard VAE...</div>
+                                    <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                                </div>
+                                <div class="out-col-placeholder">Standard VAE output will appear here</div>
+                            </div>
+                            <div class="out-col-footer">
+                                <span class="timing-display" id="timing-std-display">⏱ Waiting...</span>
+                                <span id="dl-btn-std" class="out-download-btn" title="Download">
+                                    {DOWNLOAD_SVG} Save
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Small Decoder VAE -->
+                        <div class="output-col">
+                            <div class="out-col-header">
+                                <span class="out-col-title small">&#128312; Small Decoder VAE</span>
+                                <span class="out-col-badge small">Generated Second</span>
+                            </div>
+                            <div class="out-col-body" id="output-small-body">
+                                <div class="modern-loader" id="output-loader-small">
+                                    <div class="loader-spinner"></div>
+                                    <div class="loader-text">Running Small Decoder VAE...</div>
+                                    <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                                </div>
+                                <div class="out-col-placeholder">Small Decoder VAE output will appear here</div>
+                            </div>
+                            <div class="out-col-footer">
+                                <span class="timing-display" id="timing-small-display">⏱ Waiting...</span>
+                                <span id="dl-btn-small" class="out-download-btn" title="Download">
+                                    {DOWNLOAD_SVG} Save
+                                </span>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
             </div>
-          </div>
 
         </div>
-      </div>
 
-      <div class="exp-note">
-        Experimental Space — <a href="https://huggingface.co/black-forest-labs/FLUX.2-klein-4B" target="_blank">FLUX.2-klein-4B</a>
-        &nbsp;·&nbsp; <a href="https://huggingface.co/black-forest-labs/FLUX.2-small-decoder" target="_blank">FLUX.2-small-decoder</a>
-        &nbsp;·&nbsp; Comparing Standard VAE vs Small Decoder VAE from the same seed
-      </div>
+        <div class="exp-note">
+            Experimental Space — <a href="https://huggingface.co/black-forest-labs/FLUX.2-klein-4B" target="_blank">FLUX.2-klein-4B</a>
+            &middot; <a href="https://huggingface.co/black-forest-labs/FLUX.2-small-decoder" target="_blank">FLUX.2-small-decoder</a>
+        </div>
 
-      <div class="app-statusbar">
-        <div class="sb-section" id="sb-image-count">No images uploaded</div>
-        <div class="sb-section" id="sb-seed" style="color:#52525b;font-family:'JetBrains Mono',monospace;font-size:12px;">seed: —</div>
-        <div class="sb-section sb-fixed">Ready</div>
-      </div>
+        <div class="app-statusbar">
+            <div class="sb-section" id="sb-image-count">No images uploaded</div>
+            <div class="sb-section sb-fixed">Ready</div>
+        </div>
 
     </div>
     """)
@@ -1197,30 +1201,24 @@ with gr.Blocks(css=css) as demo:
 
     run_btn.click(
         fn=infer,
-        inputs=[hidden_images_b64, prompt, seed, randomize_seed,
-                width_gr, height_gr, steps, guidance_scale],
-        outputs=[result_std_gr, result_small_gr, seed_out_gr, result_json_gr],
+        inputs=[
+            hidden_images_b64,
+            prompt_hidden,
+            seed_slider,
+            randomize_seed,
+            width_slider,
+            height_slider,
+            steps_slider,
+            guidance_scale,
+        ],
+        outputs=[result_std, result_small_dec, seed_used, timing_std_hidden, timing_small_hidden],
         js=r"""(imgs, p, s, rs, w, h, st, gs) => {
             const images   = window.__uploadedImages || [];
             const b64Array = images.map(img => img.b64);
             const imgsJson = JSON.stringify(b64Array);
             const promptEl = document.getElementById('custom-prompt-input');
             const promptVal = promptEl ? promptEl.value : p;
-            const seedEl   = document.getElementById('custom-seed');
-            const guidEl   = document.getElementById('custom-guidance');
-            const stepsEl  = document.getElementById('custom-steps');
-            const wEl      = document.getElementById('custom-width');
-            const hEl      = document.getElementById('custom-height');
-            const randEl   = document.getElementById('custom-randomize');
-            return [
-                imgsJson, promptVal,
-                seedEl  ? parseFloat(seedEl.value)  : s,
-                randEl  ? randEl.checked             : rs,
-                wEl     ? parseFloat(wEl.value)      : w,
-                hEl     ? parseFloat(hEl.value)      : h,
-                stepsEl ? parseFloat(stepsEl.value)  : st,
-                guidEl  ? parseFloat(guidEl.value)   : gs,
-            ];
+            return [imgsJson, promptVal, s, rs, w, h, st, gs];
         }""",
     )