fix: dark hero header, colored submit button, path-safe examples

app.py

@@ -174,15 +174,16 @@ def _build_tab(spec):
 
     image_comp.change(fn=_on_image_change, inputs=[image_comp], outputs=all_outputs)
 
+    _app_root = Path(__file__).parent
     valid_examples = [
         row for row in spec.examples
-        if row and Path(str(row[0])).exists()
+        if row and (_app_root / str(row[0])).exists()
     ]
     if valid_examples:
         gr.Examples(
             examples=valid_examples,
             inputs=all_inputs,
-            label="Try an example",
+            label="✦ Try an example",
             cache_examples=False,
         )
 
@@ -190,15 +191,36 @@ def _build_tab(spec):
 # ── Main demo ─────────────────────────────────────────────────────────────────
 
 css = """
-.submit-btn { font-size: 16px !important; padding: 12px 0 !important; }
 footer { display: none !important; }
 
+/* ── Submit button ── */
+.submit-btn {
+    font-size: 17px !important;
+    padding: 14px 0 !important;
+    margin-top: 6px !important;
+    background: linear-gradient(135deg, #1565c0 0%, #283593 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    transition: opacity 0.15s !important;
+}
+.submit-btn:hover { opacity: 0.88 !important; }
+
+/* ── Tab bar ── */
+.tab-nav button {
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    padding: 10px 16px !important;
+}
+
+/* ── Result reveal animation ── */
 @keyframes fadeSlideUp {
     from { opacity: 0; transform: translateY(10px); }
     to   { opacity: 1; transform: translateY(0); }
 }
 .result-reveal { animation: fadeSlideUp 0.35s ease; }
 
+/* ── Shimmer loading skeleton ── */
 @keyframes shimmer {
     0%   { background-position: -600px 0; }
     100% { background-position:  600px 0; }
@@ -215,14 +237,30 @@ footer { display: none !important; }
 
 with gr.Blocks(title="Vision Base", css=css, theme=gr.themes.Soft()) as demo:
     gr.HTML(
-        '<div style="padding:16px 0 8px">'
-        '<h1 style="margin:0;font-size:28px">👁️ Vision Base</h1>'
-        '<p style="margin:6px 0 0;color:#555;font-size:15px;display:flex;'
-        'align-items:center;gap:10px;flex-wrap:wrap">'
-        'Four vision tools powered by MiniCPM-V 4.6 · ZeroGPU'
-        '<span style="background:#6a1b9a;color:white;padding:2px 10px;border-radius:12px;'
-        'font-size:12px;font-weight:700;letter-spacing:.3px">⚡ 1.3B params · Tiny Titan</span>'
-        '</p></div>'
+        '<div style="background:linear-gradient(135deg,#1a1a2e 0%,#16213e 55%,#0f3460 100%);'
+        'border-radius:14px;padding:28px 32px;margin-bottom:8px;color:white">'
+        '<div style="display:flex;align-items:center;gap:18px;flex-wrap:wrap">'
+        '<span style="font-size:52px;line-height:1">👁️</span>'
+        '<div style="flex:1;min-width:200px">'
+        '<h1 style="margin:0;font-size:28px;font-weight:800;color:white;letter-spacing:-.3px">'
+        'Vision Base</h1>'
+        '<p style="margin:5px 0 0;color:#a0b8d8;font-size:14px;line-height:1.5">'
+        'Four practical vision tools — scan labels, raid your fridge,<br>'
+        'decode error codes, reveal object mysteries.</p>'
+        '</div>'
+        '<span style="background:#6a1b9a;color:white;padding:5px 14px;border-radius:20px;'
+        'font-size:12px;font-weight:700;letter-spacing:.4px;white-space:nowrap">'
+        '⚡ 1.3B params · Tiny Titan</span>'
+        '</div>'
+        '<div style="margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);'
+        'display:flex;gap:24px;flex-wrap:wrap">'
+        '<span style="color:#7090b8;font-size:12px">🔍 Allergen Lens</span>'
+        '<span style="color:#7090b8;font-size:12px">🍽️ Fridge Dinner</span>'
+        '<span style="color:#9070b8;font-size:12px">🔮 Object Oracle</span>'
+        '<span style="color:#b07070;font-size:12px">🛠️ What\'s That Error?</span>'
+        '<span style="margin-left:auto;color:#506080;font-size:11px">MiniCPM-V 4.6 · ZeroGPU</span>'
+        '</div>'
+        '</div>'
     )
 
     with gr.Tabs():
@@ -232,8 +270,11 @@ with gr.Blocks(title="Vision Base", css=css, theme=gr.themes.Soft()) as demo:
                 _build_tab(spec)
 
     gr.HTML(
-        '<div style="text-align:center;color:#aaa;font-size:12px;margin-top:16px">'
-        'Powered by <b>MiniCPM-V 4.6 (1.3B)</b> · ZeroGPU'
+        '<div style="text-align:center;color:#bbb;font-size:11px;margin-top:12px;'
+        'padding-top:8px;border-top:1px solid #eee">'
+        'Powered by <b>MiniCPM-V 4.6 (1.3B)</b> · ZeroGPU · '
+        '<a href="https://huggingface.co/openbmb/MiniCPM-V-4.6" '
+        'style="color:#9090cc;text-decoration:none" target="_blank">OpenBMB</a>'
         '</div>'
     )