update app

app.py

@@ -7,10 +7,12 @@ import torch
 import random
 import base64
 import json
+import html as html_lib
 from io import BytesIO
 from PIL import Image
 
 MAX_SEED = np.iinfo(np.int32).max
+LANCZOS = getattr(Image, "Resampling", Image).LANCZOS
 
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
@@ -41,6 +43,114 @@ try:
 except Exception as e:
     print(f"Warning: Could not set FA3 processor: {e}")
 
+# ═══════════════════════════════════════════
+#  Example Configuration & Helpers
+# ═══════════════════════════════════════════
+
+EXAMPLES_CONFIG = [
+    {
+        "images": ["examples/1.jpg"],
+        "prompt": "cinematic polaroid with soft grain subtle vignette gentle lighting white frame handwritten photographed 'Fire-Edit' preserving realistic texture and details.",
+    },
+    {
+        "images": ["examples/2.jpg"],
+        "prompt": "Transform the image into a dotted cartoon style.",
+    },
+    {
+        "images": ["examples/3.jpeg"],
+        "prompt": "Convert it to black and white.",
+    },
+    {
+        "images": ["examples/4.jpg", "examples/5.jpg"],
+        "prompt": "Replace her glasses with the new glasses from image 1.",
+    },
+    {
+        "images": ["examples/8.jpg", "examples/9.png"],
+        "prompt": "Replace the current clothing with the clothing from the reference image 2. Keep the person's face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result.",
+    },
+    {
+        "images": ["examples/10.jpg", "examples/11.png"],
+        "prompt": "Replace the current clothing with the clothing from the reference image 2. Keep the person's face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result.",
+    },
+]
+
+
+def make_thumb_b64(path, max_dim=220):
+    if not os.path.exists(path):
+        return ""
+    try:
+        img = Image.open(path).convert("RGB")
+        img.thumbnail((max_dim, max_dim), LANCZOS)
+        buf = BytesIO()
+        img.save(buf, format="JPEG", quality=65)
+        return f"data:image/jpeg;base64,{base64.b64encode(buf.getvalue()).decode()}"
+    except Exception as e:
+        print(f"Thumbnail error for {path}: {e}")
+        return ""
+
+
+def encode_full_image(path):
+    if not os.path.exists(path):
+        return ""
+    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")
+        return f"data:{mime};base64,{base64.b64encode(data).decode()}"
+    except Exception as e:
+        print(f"Encode error for {path}: {e}")
+        return ""
+
+
+def build_example_cards_html():
+    cards = ""
+    for i, ex in enumerate(EXAMPLES_CONFIG):
+        thumbs_html = ""
+        for path in ex["images"]:
+            thumb = make_thumb_b64(path)
+            if thumb:
+                thumbs_html += f'<img src="{thumb}" alt="">'
+            else:
+                thumbs_html += '<div class="example-thumb-placeholder">Preview</div>'
+        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:
+            prompt_short += "..."
+        cards += f'''<div class="example-card" data-idx="{i}">
+            <div class="example-thumbs">{thumbs_html}</div>
+            <div class="example-meta"><span class="example-badge">{badge}</span></div>
+            <div class="example-prompt-text">{prompt_short}</div>
+        </div>'''
+    return cards
+
+
+def load_example_data(idx_str):
+    try:
+        idx = int(float(idx_str)) if idx_str and idx_str.strip() else -1
+    except (ValueError, TypeError):
+        idx = -1
+    if idx < 0 or idx >= len(EXAMPLES_CONFIG):
+        return json.dumps({"images": [], "prompt": "", "names": [], "status": "error"})
+    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"})
+
+
+print("Building example thumbnails...")
+EXAMPLE_CARDS_HTML = build_example_cards_html()
+print(f"Built {len(EXAMPLES_CONFIG)} example cards.")
+
+# ═══════════════════════════════════════��═══
+#  Inference Helpers
+# ═══════════════════════════════════════════
+
 
 def b64_to_pil_list(b64_json_str):
     if not b64_json_str or b64_json_str.strip() in ("", "[]"):
@@ -68,60 +178,35 @@ def b64_to_pil_list(b64_json_str):
 def update_dimensions_on_upload(image):
     if image is None:
         return 1024, 1024
-    original_width, original_height = image.size
-    if original_width > original_height:
-        new_width = 1024
-        aspect_ratio = original_height / original_width
-        new_height = int(new_width * aspect_ratio)
+    w, h = image.size
+    if w > h:
+        nw = 1024
+        nh = int(nw * h / w)
     else:
-        new_height = 1024
-        aspect_ratio = original_width / original_height
-        new_width = int(new_height * aspect_ratio)
-    new_width = (new_width // 8) * 8
-    new_height = (new_height // 8) * 8
-    return new_width, new_height
+        nh = 1024
+        nw = int(nh * w / h)
+    return (nw // 8) * 8, (nh // 8) * 8
 
 
 @spaces.GPU
-def infer(
-    images_b64_json,
-    prompt,
-    seed,
-    randomize_seed,
-    guidance_scale,
-    steps,
-    progress=gr.Progress(track_tqdm=True),
-):
+def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps, progress=gr.Progress(track_tqdm=True)):
     gc.collect()
     torch.cuda.empty_cache()
-
     pil_images = b64_to_pil_list(images_b64_json)
     if not pil_images:
         raise gr.Error("Please upload at least one image to edit.")
     if not prompt or prompt.strip() == "":
         raise gr.Error("Please enter an edit prompt.")
-
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
-
     generator = torch.Generator(device=device).manual_seed(seed)
-    negative_prompt = (
-        "worst quality, low quality, bad anatomy, bad hands, text, error, "
-        "missing fingers, extra digit, fewer digits, cropped, jpeg artifacts, "
-        "signature, watermark, username, blurry"
-    )
+    negative_prompt = "worst quality, low quality, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, jpeg artifacts, signature, watermark, username, blurry"
     width, height = update_dimensions_on_upload(pil_images[0])
-
     try:
         result_image = pipe(
-            image=pil_images,
-            prompt=prompt,
-            negative_prompt=negative_prompt,
-            height=height,
-            width=width,
-            num_inference_steps=steps,
-            generator=generator,
-            true_cfg_scale=guidance_scale,
+            image=pil_images, prompt=prompt, negative_prompt=negative_prompt,
+            height=height, width=width, num_inference_steps=steps,
+            generator=generator, true_cfg_scale=guidance_scale,
         ).images[0]
         return result_image, seed
     except Exception as e:
@@ -131,145 +216,103 @@ def infer(
         torch.cuda.empty_cache()
 
 
+# ═══════════════════════════════════════════
+#  CSS
+# ═══════════════════════════════════════════
+
 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');
-
 *{box-sizing:border-box;margin:0;padding:0}
-
 body,.gradio-container{
-    background:#0f0f13!important;
-    font-family:'Inter',system-ui,-apple-system,sans-serif!important;
-    font-size:14px!important;
-    color:#e4e4e7!important;
-    min-height:100vh;
+    background:#0f0f13!important;font-family:'Inter',system-ui,-apple-system,sans-serif!important;
+    font-size:14px!important;color:#e4e4e7!important;min-height:100vh;
 }
 .dark body,.dark .gradio-container{background:#0f0f13!important;color:#e4e4e7!important}
 footer{display:none!important}
+.hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
 
-.hidden-input{
-    display:none!important;height:0!important;overflow:hidden!important;
-    margin:0!important;padding:0!important;
+#example-load-btn{
+    position:absolute!important;left:-9999px!important;top:-9999px!important;
+    width:1px!important;height:1px!important;opacity:0.01!important;
+    pointer-events:none!important;overflow:hidden!important;
+}
+#gradio-run-btn{
+    position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
+    opacity:0.01;pointer-events:none;overflow:hidden;
 }
 
-/* ── App Shell ── */
 .app-shell{
     background:#18181b;border:1px solid #27272a;border-radius:16px;
     margin:12px auto;max-width:1400px;overflow:hidden;
     box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
 }
-
-/* ── Header ── */
 .app-header{
-    background:linear-gradient(135deg,#18181b,#1e1e24);
-    border-bottom:1px solid #27272a;padding:14px 24px;
-    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
+    background:linear-gradient(135deg,#18181b,#1e1e24);border-bottom:1px solid #27272a;
+    padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
 }
 .app-header-left{display:flex;align-items:center;gap:12px}
 .app-logo{
-    width:36px;height:36px;
-    background:linear-gradient(135deg,#FF4500,#FF6633,#FF8C66);
+    width:36px;height:36px;background:linear-gradient(135deg,#FF4500,#FF6633,#FF8C66);
     border-radius:10px;display:flex;align-items:center;justify-content:center;
     box-shadow:0 4px 12px rgba(255,69,0,.35);
 }
 .app-logo svg{width:20px;height:20px;fill:#fff;flex-shrink:0}
 .app-title{
-    font-size:18px;font-weight:700;
-    background:linear-gradient(135deg,#e4e4e7,#a1a1aa);
+    font-size:18px;font-weight:700;background:linear-gradient(135deg,#e4e4e7,#a1a1aa);
     -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px;
 }
 .app-badge{
     font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
-    background:rgba(255,69,0,.15);color:#FF6633;
-    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);
+    background:rgba(255,69,0,.15);color:#FF6633;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)}
 
-/* ── Toolbar ── */
 .app-toolbar{
-    background:#18181b;border-bottom:1px solid #27272a;
-    padding:8px 16px;display:flex;gap:4px;align-items:center;flex-wrap:wrap;
+    background:#18181b;border-bottom:1px solid #27272a;padding:8px 16px;
+    display:flex;gap:4px;align-items:center;flex-wrap:wrap;
 }
 .tb-sep{width:1px;height:28px;background:#27272a;margin:0 8px}
 .modern-tb-btn{
     display:inline-flex;align-items:center;justify-content:center;gap:6px;
-    min-width:32px;height:34px;background:transparent;
-    border:1px solid transparent;border-radius:8px;cursor:pointer;
-    font-size:13px;font-weight:600;padding:0 12px;
-    font-family:'Inter',sans-serif;color:#ffffff!important;
-    -webkit-text-fill-color:#ffffff!important;transition:all .15s ease;
-}
-.modern-tb-btn:hover{
-    background:rgba(255,69,0,.15);color:#ffffff!important;
-    -webkit-text-fill-color:#ffffff!important;border-color:rgba(255,69,0,.3);
-}
-.modern-tb-btn:active,.modern-tb-btn.active{
-    background:rgba(255,69,0,.25);color:#ffffff!important;
-    -webkit-text-fill-color:#ffffff!important;border-color:rgba(255,69,0,.45);
+    min-width:32px;height:34px;background:transparent;border:1px solid transparent;
+    border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;padding:0 12px;
+    font-family:'Inter',sans-serif;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+    transition:all .15s ease;
 }
+.modern-tb-btn:hover{background:rgba(255,69,0,.15);border-color:rgba(255,69,0,.3)}
+.modern-tb-btn:active,.modern-tb-btn.active{background:rgba(255,69,0,.25);border-color:rgba(255,69,0,.45)}
 .modern-tb-btn .tb-label{font-size:13px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:600}
-.modern-tb-btn .tb-svg{
-    width:15px;height:15px;flex-shrink:0;
-    stroke:#ffffff!important;color:#ffffff!important;
-}
-.tb-info{
-    font-family:'JetBrains Mono',monospace;font-size:12px;
-    color:#71717a;padding:0 8px;display:flex;align-items:center;
-}
-
-/* Force toolbar white in all themes */
-body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-body:not(.dark) .modern-tb-btn .tb-svg{stroke:#ffffff!important}
-.dark .modern-tb-btn,.dark .modern-tb-btn *{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-.dark .modern-tb-btn .tb-svg{stroke:#ffffff!important}
-.gradio-container .modern-tb-btn,.gradio-container .modern-tb-btn *{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-.gradio-container .modern-tb-btn .tb-svg{stroke:#ffffff!important}
+.modern-tb-btn .tb-svg{width:15px;height:15px;flex-shrink:0;color:#ffffff!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}
+
+body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{stroke:#ffffff!important}
+.dark .modern-tb-btn,.dark .modern-tb-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+.dark .modern-tb-btn .tb-svg,.dark .modern-tb-btn .tb-svg *{stroke:#ffffff!important}
+.gradio-container .modern-tb-btn,.gradio-container .modern-tb-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+.gradio-container .modern-tb-btn .tb-svg,.gradio-container .modern-tb-btn .tb-svg *{stroke:#ffffff!important}
 
-/* ── Main 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:420px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b;
-}
+.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a}
+.app-main-right{width:420px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b}
 
-/* ── Gallery Drop Zone ── */
-#gallery-drop-zone{
-    position:relative;background:#09090b;min-height:440px;overflow:auto;
-}
-#gallery-drop-zone.drag-over{
-    outline:2px solid #FF4500;outline-offset:-2px;
-    background:rgba(255,69,0,.04);
-}
+#gallery-drop-zone{position:relative;background:#09090b;min-height:440px;overflow:auto}
+#gallery-drop-zone.drag-over{outline:2px solid #FF4500;outline-offset:-2px;background:rgba(255,69,0,.04)}
 
-/* ── Upload Prompt ── */
-.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}
 .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;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);
+    cursor:pointer;padding:36px 52px;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-click-area:active{background:rgba(255,69,0,.12);transform:scale(.98)}
 .upload-click-area svg{width:80px;height:80px}
 .upload-main-text{color:#71717a;font-size:14px;font-weight:500;margin-top:4px}
 .upload-sub-text{color:#52525b;font-size:12px}
 
-/* ── Gallery Grid ── */
 .image-gallery-grid{
     display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
     gap:12px;padding:16px;align-content:start;
@@ -278,24 +321,17 @@ body:not(.dark) .modern-tb-btn .tb-svg{stroke:#ffffff!important}
     position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
     cursor:pointer;border:2px solid #27272a;transition:all .2s ease;background:#18181b;
 }
-.gallery-thumb:hover{
-    border-color:#3f3f46;transform:translateY(-2px);
-    box-shadow:0 4px 12px rgba(0,0,0,.4);
-}
-.gallery-thumb.selected{
-    border-color:#FF4500!important;box-shadow:0 0 0 3px rgba(255,69,0,.2);
-}
+.gallery-thumb:hover{border-color:#3f3f46;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
+.gallery-thumb.selected{border-color:#FF4500!important;box-shadow:0 0 0 3px rgba(255,69,0,.2)}
 .gallery-thumb img{width:100%;height:100%;object-fit:cover}
 .thumb-badge{
     position:absolute;top:6px;left:6px;background:#FF4500;color:#fff;
-    padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;
-    font-size:11px;font-weight:600;
+    padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
 }
 .thumb-remove{
-    position:absolute;top:6px;right:6px;width:24px;height:24px;
-    background:rgba(0,0,0,.75);color:#fff;border:1px solid rgba(255,255,255,.15);
-    border-radius:50%;cursor:pointer;display:none;align-items:center;
-    justify-content:center;font-size:12px;transition:all .15s;line-height:1;
+    position:absolute;top:6px;right:6px;width:24px;height:24px;background:rgba(0,0,0,.75);
+    color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:50%;cursor:pointer;
+    display:none;align-items:center;justify-content:center;font-size:12px;transition:all .15s;line-height:1;
 }
 .gallery-thumb:hover .thumb-remove{display:flex}
 .thumb-remove:hover{background:#FF4500;border-color:#FF4500}
@@ -308,46 +344,32 @@ body:not(.dark) .modern-tb-btn .tb-svg{stroke:#ffffff!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;
+    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;
 }
 .hint-bar b{color:#FF8C66;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;
+    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{
+.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:#FF8C66;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:#FF6633;transform:translateY(-1px);
+    background:rgba(255,69,0,.08);border:1px solid rgba(255,69,0,.2);border-radius:20px;
+    color:#FF8C66;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:#FF6633;transform:translateY(-1px)}
 
-/* ── Quick Examples ── */
 .examples-section{border-top:1px solid #27272a;padding:12px 16px}
-.examples-title{
-    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
-    letter-spacing:.8px;margin-bottom:10px;
-}
-.examples-scroll{
-    display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;
-}
+.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}
@@ -356,136 +378,88 @@ body:not(.dark) .modern-tb-btn .tb-svg{stroke:#ffffff!important}
     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:.6;pointer-events:none}
+.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-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:#FF6633;
-    font-family:'JetBrains Mono',monospace;white-space:nowrap;
+    display:inline-flex;padding:2px 7px;background:rgba(255,69,0,.1);border-radius:4px;
+    font-size:10px;font-weight:600;color:#FF6633;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;
 }
 
-/* ── Right Panel Cards ── */
 .panel-card{border-bottom:1px solid #27272a}
 .panel-card-title{
     padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;
-    text-transform:uppercase;letter-spacing:.8px;
-    border-bottom:1px solid rgba(39,39,42,.6);
+    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}
 .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:14px;color:#e4e4e7;
+    resize:vertical;outline:none;min-height:42px;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;
-}
-@keyframes shake{
-    0%,100%{transform:translateX(0)}
-    20%,60%{transform:translateX(-4px)}
-    40%,80%{transform:translateX(4px)}
+    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;
+    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,#2563eb,#1d4ed8);
-    color:#fff;border:1px solid rgba(255,255,255,.15);
+    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,#2563eb,#1d4ed8);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}
 
-/* ── Primary Button ── */
 .btn-run{
-    display:flex;align-items:center;justify-content:center;gap:8px;
-    width:100%;background:linear-gradient(135deg,#FF4500,#E63E00);
-    border:none;border-radius:10px;padding:12px 24px;cursor:pointer;
-    font-size:15px;font-weight:600;font-family:'Inter',sans-serif;
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-    transition:all .2s ease;letter-spacing:-.2px;
+    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
+    background:linear-gradient(135deg,#FF4500,#E63E00);border:none;border-radius:10px;
+    padding:12px 24px;cursor:pointer;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;transition:all .2s ease;letter-spacing:-.2px;
     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,#FF6633,#FF4500);
+    background:linear-gradient(135deg,#FF6633,#FF4500);transform:translateY(-1px);
     box-shadow:0 6px 24px rgba(255,69,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
-    transform:translateY(-1px);color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-.btn-run:active{
-    transform:translateY(0);box-shadow:0 2px 8px rgba(255,69,0,.3);
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
 }
-.btn-run:focus{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
-.btn-run svg{width:18px;height:18px;fill:#ffffff!important;color:#ffffff!important}
-.btn-run svg path{fill:#ffffff!important;color:#ffffff!important}
-.btn-run span,#run-btn-label{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
-#custom-run-btn,#custom-run-btn *,.btn-run *{
+.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}
+.btn-run svg path{fill:#ffffff!important}
+#custom-run-btn,#custom-run-btn *,#custom-run-btn span,#custom-run-btn svg,
+#custom-run-btn svg path,#run-btn-label,.btn-run,.btn-run *{
     color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
 }
 body:not(.dark) .btn-run,body:not(.dark) .btn-run *,body:not(.dark) #custom-run-btn,
-body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
-}
-.dark .btn-run,.dark .btn-run *,.dark #custom-run-btn,.dark #custom-run-btn *,
-.dark #run-btn-label{
+body:not(.dark) #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important}
+.dark .btn-run,.dark .btn-run *,.dark #custom-run-btn,.dark #custom-run-btn *{
     color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
 }
 .gradio-container .btn-run,.gradio-container .btn-run *,.gradio-container #custom-run-btn,
-.gradio-container #custom-run-btn *,.gradio-container #run-btn-label{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
-}
+.gradio-container #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important}
 
-/* ── Output Frames ── */
-.output-frame{
-    border-bottom:1px solid #27272a;display:flex;flex-direction:column;position:relative;
-}
+.output-frame{border-bottom:1px solid #27272a;display:flex;flex-direction:column;position:relative}
 .output-frame .out-title{
-    padding:10px 20px;font-size:13px;font-weight:700;
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-    text-transform:uppercase;letter-spacing:.8px;
-    border-bottom:1px solid rgba(39,39,42,.6);
-    display:flex;align-items:center;justify-content:space-between;
+    padding:10px 20px;font-size:13px;font-weight:700;color:#ffffff!important;
+    -webkit-text-fill-color:#ffffff!important;text-transform:uppercase;letter-spacing:.8px;
+    border-bottom:1px solid rgba(39,39,42,.6);display:flex;align-items:center;justify-content:space-between;
 }
 .output-frame .out-title span{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
 .output-frame .out-body{
@@ -495,27 +469,22 @@ body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
 .output-frame .out-body img{max-width:100%;max-height:460px;image-rendering:auto}
 .output-frame .out-placeholder{color:#3f3f46;font-size:13px;text-align:center;padding:20px}
 .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:#FF8C66!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:#ffffff!important;
+    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:#FF8C66!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:#ffffff!important}
 .out-download-btn.visible{display:inline-flex}
 .out-download-btn svg{width:12px;height:12px;fill:#FF8C66}
 
-/* ── Loader ── */
 .modern-loader{
-    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);
+    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}
 .modern-loader .loader-spinner{
-    width:36px;height:36px;border:3px solid #27272a;
-    border-top-color:#FF4500;border-radius:50%;animation:spin .8s linear infinite;
+    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)}}
 .modern-loader .loader-text{font-size:13px;color:#a1a1aa;font-weight:500}
@@ -526,26 +495,21 @@ body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
 }
 @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
 
-/* ── Settings ── */
-.settings-group{
-    border:1px solid #27272a;border-radius:10px;margin:12px 16px;padding:0;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);
+    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);
 }
 .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:72px;flex-shrink:0}
 .slider-row input[type="range"]{
-    flex:1;-webkit-appearance:none;appearance:none;height:6px;
-    background:#27272a;border-radius:3px;outline:none;min-width:0;
+    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;appearance:none;width:16px;height:16px;
-    background:linear-gradient(135deg,#FF4500,#E63E00);border-radius:50%;
-    cursor:pointer;box-shadow:0 2px 6px rgba(255,69,0,.4);transition:transform .15s;
+    -webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#FF4500,#E63E00);
+    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{
@@ -553,39 +517,28 @@ body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
     border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(255,69,0,.4);
 }
 .slider-row .slider-val{
-    min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;
-    font-size:12px;font-weight:500;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:12px;
+    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}
 .checkbox-row label{color:#a1a1aa;font-size:13px;cursor:pointer}
 
-/* ── Status Bar ── */
 .app-statusbar{
     background:#18181b;border-top:1px solid #27272a;padding:6px 20px;
     display:flex;gap:12px;height:34px;align-items:center;font-size:12px;
 }
 .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;
+    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;
 }
 .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:#FF6633;font-weight:500;
-}
-
-#gradio-run-btn{
-    position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
-    opacity:0.01;pointer-events:none;overflow:hidden;
+    padding:3px 12px;background:rgba(255,69,0,.08);border-radius:6px;color:#FF6633;font-weight:500;
 }
 
-.exp-note{
-    padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;
-    text-align:center;
-}
+.exp-note{padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;text-align:center}
 .exp-note a{color:#FF6633;text-decoration:none}
 .exp-note a:hover{text-decoration:underline}
 
@@ -610,6 +563,10 @@ body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
 }
 """
 
+# ═══════════════════════════════════════════
+#  JavaScript
+# ═══════════════════════════════════════════
+
 gallery_js = r"""
 () => {
 function init() {
@@ -662,6 +619,7 @@ function init() {
         toast.classList.add('visible');
         toastTimer = setTimeout(() => toast.classList.remove('visible'), 3500);
     }
+    window.__showToast = showToast;
 
     function flashPromptError() {
         if (!promptInput) return;
@@ -684,6 +642,7 @@ function init() {
             }
         });
     }
+    window.__setGradioValue = setGradioValue;
 
     function syncImagesToGradio() {
         window.__uploadedImages = images;
@@ -755,7 +714,6 @@ function init() {
               + '<span class="add-icon">+</span>'
               + '<span class="add-text">Add</span>'
               + '</div>';
-
         galleryGrid.innerHTML = html;
 
         galleryGrid.querySelectorAll('.gallery-thumb').forEach(thumb => {
@@ -783,11 +741,7 @@ function init() {
         });
     }
 
-    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', () => {
@@ -808,91 +762,30 @@ function init() {
         if (promptInput) { promptInput.value = text; syncPromptToGradio(); }
     };
 
-    /* ── Example Loading ── */
-    const EXAMPLES = [
-        {
-            images: ["examples/1.jpg"],
-            prompt: "cinematic polaroid with soft grain subtle vignette gentle lighting white frame handwritten photographed 'Fire-Edit' preserving realistic texture and details."
-        },
-        {
-            images: ["examples/2.jpg"],
-            prompt: "Transform the image into a dotted cartoon style."
-        },
-        {
-            images: ["examples/3.jpeg"],
-            prompt: "Convert it to black and white."
-        },
-        {
-            images: ["examples/4.jpg", "examples/5.jpg"],
-            prompt: "Replace her glasses with the new glasses from image 1."
-        },
-        {
-            images: ["examples/8.jpg", "examples/9.png"],
-            prompt: "Replace the current clothing with the clothing from the reference image 2. Keep the person's face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result."
-        },
-        {
-            images: ["examples/10.jpg", "examples/11.png"],
-            prompt: "Replace the current clothing with the clothing from the reference image 2. Keep the person's face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result."
-        }
-    ];
-
-    async function fetchImageAsBase64(path) {
-        const urls = ['/file=' + path, 'file/' + path, path, './' + path];
-        for (const url of urls) {
-            try {
-                const resp = await fetch(url);
-                if (resp.ok && resp.headers.get('content-type') &&
-                    resp.headers.get('content-type').startsWith('image')) {
-                    const blob = await resp.blob();
-                    return await new Promise((resolve) => {
-                        const reader = new FileReader();
-                        reader.onload = () => resolve(reader.result);
-                        reader.readAsDataURL(blob);
-                    });
-                }
-            } catch (e) {}
-        }
-        return null;
-    }
-
-    async function loadExample(idx) {
-        if (idx < 0 || idx >= EXAMPLES.length) return;
-        const ex = EXAMPLES[idx];
-
-        const card = document.querySelector('.example-card[data-idx="' + idx + '"]');
-        if (card) card.classList.add('loading');
-
-        showToast('Loading example...', 'info');
-
-        clearAll();
-
-        if (promptInput) { promptInput.value = ex.prompt; syncPromptToGradio(); }
-
-        for (const path of ex.images) {
-            const b64 = await fetchImageAsBase64(path);
-            if (b64) {
-                addImage(b64, path.split('/').pop());
-            } else {
-                console.warn('Could not load example image:', path);
-            }
-        }
-
-        if (card) card.classList.remove('loading');
-
-        if (images.length > 0) {
-            showToast('Example loaded — ' + images.length + ' image(s)', 'info');
-        } else {
-            showToast('Could not load example images', 'warning');
-        }
-    }
-    window.__loadExample = loadExample;
-
+    /* ── Example card click → trigger Python callback ── */
     document.querySelectorAll('.example-card[data-idx]').forEach(card => {
         card.addEventListener('click', () => {
-            loadExample(parseInt(card.getAttribute('data-idx')));
+            const idx = card.getAttribute('data-idx');
+            document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+            card.classList.add('loading');
+            showToast('Loading example...', 'info');
+
+            setGradioValue('example-result-data', '');
+            setGradioValue('example-idx-input', idx);
+
+            setTimeout(() => {
+                const btn = document.getElementById('example-load-btn');
+                if (btn) {
+                    const b = btn.querySelector('button');
+                    if (b) b.click(); else btn.click();
+                }
+            }, 150);
+
+            setTimeout(() => card.classList.remove('loading'), 12000);
         });
     });
 
+    /* ── Slider sync ── */
     function syncSlider(customId, gradioId) {
         const slider = document.getElementById(customId);
         const valSpan = document.getElementById(customId + '-val');
@@ -943,28 +836,15 @@ function init() {
     function validateBeforeRun() {
         const promptVal = promptInput ? promptInput.value.trim() : '';
         const hasImages = images.length > 0;
-        if (!hasImages && !promptVal) {
-            showToast('Please upload an image and enter a prompt', 'error');
-            flashPromptError();
-            return false;
-        }
-        if (!hasImages) {
-            showToast('Please upload at least one image', 'error');
-            return false;
-        }
-        if (!promptVal) {
-            showToast('Please enter an edit prompt', 'warning');
-            flashPromptError();
-            return false;
-        }
+        if (!hasImages && !promptVal) { showToast('Please upload an image and enter a prompt', 'error'); flashPromptError(); return false; }
+        if (!hasImages) { showToast('Please upload at least one image', 'error'); return false; }
+        if (!promptVal) { showToast('Please enter an edit prompt', 'warning'); flashPromptError(); return false; }
         return true;
     }
 
     window.__clickGradioRunBtn = function() {
         if (!validateBeforeRun()) return;
-        syncPromptToGradio();
-        syncImagesToGradio();
-        showLoader();
+        syncPromptToGradio(); syncImagesToGradio(); showLoader();
         setTimeout(() => {
             const gradioBtn = document.getElementById('gradio-run-btn');
             if (!gradioBtn) return;
@@ -1009,11 +889,7 @@ function watchOutputs() {
         if (resultImg && resultImg.src) {
             if (outPh) outPh.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) { existing = document.createElement('img'); existing.className = 'modern-out-img'; outBody.appendChild(existing); }
             if (existing.src !== resultImg.src) {
                 existing.src = resultImg.src;
                 if (dlBtn) dlBtn.classList.add('visible');
@@ -1021,7 +897,6 @@ function watchOutputs() {
             }
         }
     }
-
     const observer = new MutationObserver(syncImage);
     observer.observe(resultContainer, {childList:true, subtree:true, attributes:true, attributeFilter:['src']});
     setInterval(syncImage, 800);
@@ -1035,19 +910,65 @@ function watchSeed() {
     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;
-        }
+        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, attributeFilter:['value']});
     setInterval(sync, 1000);
 }
 watchSeed();
+
+/* ── Watch for example load results from Python ── */
+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) return;
+        const val = el.value;
+        if (!val || val === lastProcessed || val.length < 20) return;
+
+        try {
+            const data = JSON.parse(val);
+            if (data.status === 'ok' && data.images && data.images.length > 0) {
+                lastProcessed = val;
+
+                if (window.__clearAll) window.__clearAll();
+                if (window.__setPrompt && data.prompt) window.__setPrompt(data.prompt);
+
+                data.images.forEach((b64, i) => {
+                    if (b64 && window.__addImage) {
+                        const name = (data.names && data.names[i]) ? data.names[i] : ('example_' + (i+1) + '.jpg');
+                        window.__addImage(b64, name);
+                    }
+                });
+
+                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) {
+            console.error('Example parse error:', e);
+        }
+    }
+
+    const obs = new MutationObserver(checkResult);
+    obs.observe(container, {childList:true, subtree:true, characterData:true, attributes:true});
+    setInterval(checkResult, 500);
+}
+watchExampleResults();
 }
 """
 
+# ═══════════════════════════════════════════
+#  SVG Definitions (no emojis)
+# ═══════════════════════════════════════════
+
 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>'
 
 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>'
@@ -1058,41 +979,30 @@ CLEAR_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="current
 
 FIRE_LOGO_SVG = '<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z"/></svg>'
 
-with gr.Blocks() as demo:
+# ═══════════���═══════════════════════════════
+#  Gradio App
+# ═══════════════════════════════════════════
 
-    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=1.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=50, step=1, value=4,
-        elem_id="gradio-steps", elem_classes="hidden-input", container=False,
-    )
-    result = gr.Image(
-        elem_id="gradio-result", elem_classes="hidden-input",
-        container=False, format="png",
-    )
+with gr.Blocks() as demo:
 
+    # ── Hidden Gradio 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=1.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=50, step=1, value=4, elem_id="gradio-steps", elem_classes="hidden-input", container=False)
+    result = gr.Image(elem_id="gradio-result", elem_classes="hidden-input", container=False, format="png")
+
+    # ── Hidden example loading components ──
+    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")
+
+    # ── Main HTML UI ──
     gr.HTML(f"""
     <div class="app-shell">
 
-        <!-- Header -->
         <div class="app-header">
             <div class="app-header-left">
                 <div class="app-logo">{FIRE_LOGO_SVG}</div>
@@ -1102,7 +1012,6 @@ with gr.Blocks() as demo:
             </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>
@@ -1117,10 +1026,7 @@ with gr.Blocks() as demo:
             <span id="tb-image-count" class="tb-info">No images</span>
         </div>
 
-        <!-- Main -->
         <div class="app-main-row">
-
-            <!-- Left: Gallery -->
             <div class="app-main-left">
                 <div id="gallery-drop-zone">
                     <div id="upload-prompt" class="upload-prompt-modern">
@@ -1139,9 +1045,9 @@ with gr.Blocks() as demo:
                 </div>
 
                 <div class="hint-bar">
-                    <b>Upload:</b> Click or drag to add images &nbsp;·&nbsp;
-                    <b>Multi-image:</b> Upload multiple images for reference-based editing &nbsp;·&nbsp;
-                    <kbd>Remove</kbd> deletes selected &nbsp;·&nbsp;
+                    <b>Upload:</b> Click or drag to add images &nbsp;&middot;&nbsp;
+                    <b>Multi-image:</b> Upload multiple images for reference-based editing &nbsp;&middot;&nbsp;
+                    <kbd>Remove</kbd> deletes selected &nbsp;&middot;&nbsp;
                     <kbd>Clear All</kbd> removes everything
                 </div>
 
@@ -1170,78 +1076,12 @@ with gr.Blocks() as demo:
                 <div class="examples-section">
                     <div class="examples-title">Quick Examples</div>
                     <div class="examples-scroll">
-
-                        <div class="example-card" data-idx="0">
-                            <div class="example-thumbs">
-                                <img src="/file=examples/1.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                            </div>
-                            <div class="example-meta">
-                                <span class="example-badge">1 image</span>
-                            </div>
-                            <div class="example-prompt-text">Cinematic polaroid with soft grain, subtle vignette, gentle lighting...</div>
-                        </div>
-
-                        <div class="example-card" data-idx="1">
-                            <div class="example-thumbs">
-                                <img src="/file=examples/2.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                            </div>
-                            <div class="example-meta">
-                                <span class="example-badge">1 image</span>
-                            </div>
-                            <div class="example-prompt-text">Transform the image into a dotted cartoon style.</div>
-                        </div>
-
-                        <div class="example-card" data-idx="2">
-                            <div class="example-thumbs">
-                                <img src="/file=examples/3.jpeg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                            </div>
-                            <div class="example-meta">
-                                <span class="example-badge">1 image</span>
-                            </div>
-                            <div class="example-prompt-text">Convert it to black and white.</div>
-                        </div>
-
-                        <div class="example-card" data-idx="3">
-                            <div class="example-thumbs">
-                                <img src="/file=examples/4.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                                <img src="/file=examples/5.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                            </div>
-                            <div class="example-meta">
-                                <span class="example-badge">2 images</span>
-                            </div>
-                            <div class="example-prompt-text">Replace her glasses with the new glasses from image 1.</div>
-                        </div>
-
-                        <div class="example-card" data-idx="4">
-                            <div class="example-thumbs">
-                                <img src="/file=examples/8.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                                <img src="/file=examples/9.png" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                            </div>
-                            <div class="example-meta">
-                                <span class="example-badge">2 images</span>
-                            </div>
-                            <div class="example-prompt-text">Replace clothing with reference. Keep face, pose, and background unchanged...</div>
-                        </div>
-
-                        <div class="example-card" data-idx="5">
-                            <div class="example-thumbs">
-                                <img src="/file=examples/10.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                                <img src="/file=examples/11.png" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
-                            </div>
-                            <div class="example-meta">
-                                <span class="example-badge">2 images</span>
-                            </div>
-                            <div class="example-prompt-text">Replace clothing with reference. Keep face, pose, and background unchanged...</div>
-                        </div>
-
+                        {EXAMPLE_CARDS_HTML}
                     </div>
                 </div>
-
             </div>
 
-            <!-- Right: Controls & Output -->
             <div class="app-main-right">
-
                 <div class="panel-card">
                     <div class="panel-card-title">Edit Instruction</div>
                     <div class="panel-card-body">
@@ -1298,22 +1138,18 @@ with gr.Blocks() as demo:
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
 
-        <!-- Note -->
         <div class="exp-note">
             Experimental Space for <a href="https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1" target="_blank">FireRed-Image-Edit-1.1</a>
             &middot; Open on <a href="https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast" target="_blank">GitHub</a>
         </div>
 
-        <!-- Status Bar -->
         <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>
     """)
 
@@ -1322,6 +1158,7 @@ with gr.Blocks() as demo:
     demo.load(fn=None, js=gallery_js)
     demo.load(fn=None, js=wire_outputs_js)
 
+    # ── Run inference ──
     run_btn.click(
         fn=infer,
         inputs=[hidden_images_b64, prompt, seed, randomize_seed, guidance_scale, steps],
@@ -1336,6 +1173,14 @@ with gr.Blocks() as demo:
         }""",
     )
 
+    # ── Load example (bypasses queue for instant response) ──
+    example_load_btn.click(
+        fn=load_example_data,
+        inputs=[example_idx],
+        outputs=[example_result],
+        queue=False,
+    )
+
 if __name__ == "__main__":
     demo.queue(max_size=30).launch(
         css=css,