Upload app.py with huggingface_hub

app.py

@@ -113,7 +113,7 @@ def _saliency_figure(sal, p_mean):
 
     # ── Left: 7×7 network heatmap ──────────────────────────────────────────
     ax = axes[0]
-    ax.set_facecolor("#111")
+    ax.set_facecolor("#161922")
     im = ax.imshow(net_sal, cmap="inferno", aspect="auto", interpolation="nearest")
     ax.set_title("FC Saliency by Brain Network", color="#bbb", fontsize=11, pad=14, fontweight="bold")
 
@@ -145,7 +145,7 @@ def _saliency_figure(sal, p_mean):
 
     # ── Right: network importance bar chart ────────────────────────────────
     ax2 = axes[1]
-    ax2.set_facecolor("#111")
+    ax2.set_facecolor("#161922")
     ax2.tick_params(colors="#555", labelsize=9)
 
     order = net_imp.argsort()[::-1]
@@ -173,7 +173,7 @@ def _saliency_figure(sal, p_mean):
     )
     plt.tight_layout()
     buf = io.BytesIO()
-    plt.savefig(buf, format="png", dpi=140, bbox_inches="tight", facecolor="#0d0d0d")
+    plt.savefig(buf, format="png", dpi=140, bbox_inches="tight", facecolor="#0e1015")
     plt.close(fig)
     buf.seek(0)
     return Image.open(buf).copy()
@@ -222,54 +222,52 @@ def run_gcn(file_path):
     except Exception:
         sal_img = None
 
-    # ── Verdict card ──
+    # ── Verdict ──
     if p_mean > 0.6:
-        col, label = "#e63946", "ASD INDICATED"
-        grad = "linear-gradient(135deg,#1a0a0b,#2d1015)"
+        col, label = "#ef4444", "ASD Indicated"
         detail = f"{consensus}/4 site-blind models agree"
     elif p_mean < 0.4:
-        col, label = "#2dc653", "TYPICAL CONTROL"
-        grad = "linear-gradient(135deg,#0a1a0d,#102515)"
+        col, label = "#22c55e", "Typical Control"
         detail = f"{4-consensus}/4 site-blind models agree"
     else:
-        col, label = "#f4a261", "INCONCLUSIVE"
-        grad = "linear-gradient(135deg,#1a1208,#251c10)"
+        col, label = "#f59e0b", "Inconclusive"
         detail = "Clinical review required"
 
-    verdict = f"""<div style="background:{grad};border-left:6px solid {col};padding:32px 36px;border-radius:16px;margin-bottom:4px">
-<div style="font-size:0.7rem;color:{col};letter-spacing:4px;text-transform:uppercase;margin-bottom:8px">Classification Result</div>
-<div style="font-size:2.8rem;font-weight:900;color:{col};letter-spacing:-1px;line-height:1">{label}</div>
-<div style="display:flex;gap:32px;margin-top:18px;flex-wrap:wrap">
-  <div><div style="font-size:1.8rem;font-weight:800;color:white">{conf:.1f}%</div><div style="color:#444;font-size:0.75rem;margin-top:3px;text-transform:uppercase;letter-spacing:1px">Confidence</div></div>
-  <div><div style="font-size:1.8rem;font-weight:800;color:white">{p_mean:.3f}</div><div style="color:#444;font-size:0.75rem;margin-top:3px;text-transform:uppercase;letter-spacing:1px">p(ASD)</div></div>
-  <div><div style="font-size:1.8rem;font-weight:800;color:white">{detail}</div><div style="color:#444;font-size:0.75rem;margin-top:3px;text-transform:uppercase;letter-spacing:1px">Ensemble vote</div></div>
+    verdict = f"""<div style="background:#161922;border:1px solid #252a35;border-left:3px solid {col};padding:22px 26px;border-radius:8px;margin-top:14px">
+<div style="font-size:0.65rem;color:#8b95a7;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;font-weight:500">Classification Result</div>
+<div style="font-size:1.8rem;font-weight:600;color:{col};letter-spacing:-0.5px;line-height:1.1">{label}</div>
+<div style="display:flex;gap:36px;margin-top:18px;flex-wrap:wrap">
+  <div><div style="font-size:1.3rem;font-weight:600;color:#f4f4f5;font-variant-numeric:tabular-nums">{conf:.1f}%</div><div style="color:#5e6675;font-size:0.7rem;margin-top:2px">Confidence</div></div>
+  <div><div style="font-size:1.3rem;font-weight:600;color:#f4f4f5;font-variant-numeric:tabular-nums">{p_mean:.3f}</div><div style="color:#5e6675;font-size:0.7rem;margin-top:2px">p(ASD)</div></div>
+  <div><div style="font-size:0.92rem;color:#cbd5e1;padding-top:8px">{detail}</div><div style="color:#5e6675;font-size:0.7rem;margin-top:2px">Ensemble vote</div></div>
 </div></div>"""
 
-    # ── Ensemble breakdown ──
+    # ── Ensemble ──
     rows = ""
     for site, p in per_model:
         lbl = "ASD" if p > 0.5 else "TC"
-        clr = "#e63946" if p > 0.5 else "#2dc653"
-        rows += f"""<tr style="border-bottom:1px solid #111">
-<td style="padding:10px 16px;color:#888;font-weight:600">{site}-blind</td>
-<td style="padding:10px 16px"><div style="background:#1a1a1a;border-radius:4px;height:20px;width:200px">
-<div style="background:{clr};height:20px;width:{int(p*100)}%;opacity:0.8;border-radius:4px"></div></div></td>
-<td style="padding:10px 16px;color:{clr};font-weight:700">{lbl}</td>
-<td style="padding:10px 16px;color:#444;font-size:0.88rem">p={p:.3f}</td></tr>"""
-
-    ensemble = f"""<div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:14px;padding:24px;margin-top:8px">
-<div style="font-size:0.7rem;color:#333;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px">Leave-One-Site-Out Ensemble · Each model blind to one scanner site</div>
+        clr = "#ef4444" if p > 0.5 else "#22c55e"
+        rows += f"""<tr>
+<td style="padding:9px 0;color:#cbd5e1;font-weight:500;font-size:0.86rem;width:110px">{site}-blind</td>
+<td style="padding:9px 14px;width:220px"><div style="background:#252a35;border-radius:2px;height:5px;width:200px;overflow:hidden">
+<div style="background:{clr};height:5px;width:{int(p*100)}%"></div></div></td>
+<td style="padding:9px 14px;color:{clr};font-weight:600;font-size:0.85rem;width:50px">{lbl}</td>
+<td style="padding:9px 0;color:#8b95a7;font-size:0.84rem;font-variant-numeric:tabular-nums">p = {p:.3f}</td></tr>"""
+
+    ensemble = f"""<div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 24px;margin-top:10px">
+<div style="font-size:0.65rem;color:#8b95a7;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;font-weight:500">Leave-One-Site-Out Ensemble</div>
 <table style="width:100%;border-collapse:collapse">{rows}</table>
-<div style="margin-top:16px;color:#2a2a2a;font-size:0.8rem">LOSO AUC = 0.7872 &nbsp;·&nbsp; 529 held-out subjects &nbsp;·&nbsp; 4 institutions</div>
-</div>"""
+<div style="margin-top:12px;padding-top:10px;border-top:1px solid #252a35;color:#5e6675;font-size:0.76rem">
+LOSO AUC = 0.7872 · 529 held-out subjects · 4 institutions
+</div></div>"""
 
-    # ── Clinical report ──
+    # ── Report ──
     if p_mean > 0.6:
         findings = ["Reduced DMN coherence (mPFC ↔ PCC)",
                     "Atypical salience network lateralization",
                     "Decreased long-range frontotemporal connectivity"]
         imp  = f"ASD-consistent connectivity profile ({conf:.1f}% confidence)."
-        cons = f"{consensus}/4 site-blind models agree · not attributable to scanner artifacts."
+        cons = f"{consensus}/4 site-blind models agree — not attributable to scanner artifacts."
     elif p_mean < 0.4:
         findings = ["DMN coherence within normal range",
                     "Intact salience network organization",
@@ -283,16 +281,16 @@ def run_gcn(file_path):
         imp  = "Indeterminate. Full evaluation recommended."
         cons = f"Only {consensus}/4 models agree — specialist input required."
 
-    fi = "".join(f"<li style='margin:8px 0;color:#888;line-height:1.6'>{f}</li>" for f in findings)
-    report = f"""<div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:14px;padding:24px;margin-top:8px">
-<div style="font-size:0.7rem;color:#333;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px">Clinical Connectivity Summary · Qwen2.5-7B fine-tuned on AMD MI300X</div>
-<div style="color:#ccc;font-size:0.95rem;margin-bottom:18px;line-height:1.6"><b style="color:white">Impression:</b> {imp}</div>
-<div style="color:#333;font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Key Findings</div>
-<ul style="margin:0 0 18px 0;padding-left:20px">{fi}</ul>
-<div style="color:#333;font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Cross-Site Consistency</div>
-<div style="color:#666;font-size:0.88rem;margin-bottom:18px;line-height:1.6">{cons}</div>
-<div style="border-top:1px solid #111;padding-top:14px;color:#2a2a2a;font-size:0.78rem;line-height:1.6">
-⚕️ AI-assisted analysis only. Not a diagnosis. Integrate with ADOS-2, ADI-R, clinical history.</div></div>"""
+    fi = "".join(f"<li style='margin:5px 0;color:#cbd5e1;line-height:1.55'>{f}</li>" for f in findings)
+    report = f"""<div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 24px;margin-top:10px">
+<div style="font-size:0.65rem;color:#8b95a7;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;font-weight:500">Clinical Summary · Qwen2.5-7B on AMD MI300X</div>
+<div style="color:#cbd5e1;font-size:0.92rem;margin-bottom:14px;line-height:1.55"><span style="color:#f4f4f5;font-weight:600">Impression:</span> {imp}</div>
+<div style="color:#8b95a7;font-size:0.68rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;font-weight:500">Key Findings</div>
+<ul style="margin:0 0 14px 0;padding-left:18px;font-size:0.88rem">{fi}</ul>
+<div style="color:#8b95a7;font-size:0.68rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;font-weight:500">Cross-Site Consistency</div>
+<div style="color:#cbd5e1;font-size:0.86rem;margin-bottom:12px;line-height:1.55">{cons}</div>
+<div style="border-top:1px solid #252a35;padding-top:10px;color:#5e6675;font-size:0.74rem;line-height:1.5">
+AI-assisted analysis only. Not a diagnosis. Integrate with ADOS-2, ADI-R, clinical history.</div></div>"""
 
     return verdict, ensemble, report, sal_img
 
@@ -300,207 +298,177 @@ def run_gcn(file_path):
 # ── Static HTML sections ───────────────────────────────────────────────────
 
 HEADER = """
-<div style="padding:48px 0 32px;border-bottom:1px solid #111;margin-bottom:4px">
-  <div style="font-size:3rem;font-weight:900;color:white;letter-spacing:-2px;line-height:1">
-    BrainConnect<span style="color:#e63946">-ASD</span>
-  </div>
-  <div style="color:#333;font-size:0.72rem;letter-spacing:4px;text-transform:uppercase;margin-top:10px">
-    Clinical AI · Resting-state fMRI · Scanner-Site-Invariant Classification
+<div style="padding:32px 0 24px;border-bottom:1px solid #252a35;margin-bottom:18px">
+  <div style="display:flex;align-items:baseline;gap:14px;flex-wrap:wrap">
+    <div style="font-size:2.1rem;font-weight:700;color:#f4f4f5;letter-spacing:-0.8px;line-height:1">
+      BrainConnect<span style="color:#ef4444">-ASD</span>
+    </div>
+    <div style="color:#5e6675;font-size:0.7rem;letter-spacing:1.8px;text-transform:uppercase">
+      Resting-state fMRI · Site-Invariant Classification
+    </div>
   </div>
-  <div style="color:#444;font-size:0.93rem;margin-top:18px;max-width:720px;line-height:1.75">
-    1 in 44 children is diagnosed with ASD. Today, diagnosis takes years of behavioral observation —
-    no biomarker exists. We trained a scanner-site-invariant GCN on 1,102 subjects across 17 institutions
-    and validated it on <span style="color:#e63946;font-weight:700">529 subjects the model never saw, from sites it was never trained on</span>.
-    The result: <span style="color:#e63946;font-weight:700">AUC 0.7872</span> — not on held-out splits of the same scanner, but
-    across entirely different hospitals. Fine-tuned <span style="color:#f4a261;font-weight:700">Qwen2.5-7B on AMD MI300X</span>
-    then translates raw connectivity patterns into structured clinical language a clinician can act on.
+  <div style="color:#cbd5e1;font-size:0.92rem;margin-top:14px;max-width:780px;line-height:1.65">
+    1 in 44 children is diagnosed with ASD — diagnosis takes years and no biomarker exists.
+    We trained a scanner-site-invariant GCN on 1,102 subjects across 17 institutions and validated on
+    <span style="color:#ef4444;font-weight:600">529 subjects from sites the model never saw</span>.
+    Result: <span style="color:#ef4444;font-weight:600">AUC 0.7872</span> — not on held-out splits of the same scanner, but across entirely different hospitals.
+    Fine-tuned <span style="color:#fb923c;font-weight:600">Qwen2.5-7B on AMD MI300X</span> translates raw connectivity into structured clinical language.
   </div>
-  <div style="display:flex;gap:0;margin-top:28px;border:1px solid #1a1a1a;border-radius:12px;overflow:hidden;max-width:700px">
-    <div style="padding:20px 32px;flex:1;border-right:1px solid #1a1a1a;min-width:120px">
-      <div style="font-size:2.2rem;font-weight:900;color:#e63946;line-height:1">0.7872</div>
-      <div style="color:#333;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">LOSO AUC</div>
+  <div style="display:flex;gap:28px;margin-top:20px;flex-wrap:wrap">
+    <div style="display:flex;align-items:baseline;gap:8px">
+      <span style="font-size:1.4rem;font-weight:700;color:#ef4444;font-variant-numeric:tabular-nums">0.7872</span>
+      <span style="color:#5e6675;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">LOSO AUC</span>
     </div>
-    <div style="padding:20px 32px;flex:1;border-right:1px solid #1a1a1a;min-width:120px">
-      <div style="font-size:2.2rem;font-weight:900;color:white;line-height:1">529</div>
-      <div style="color:#333;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">Held-out subjects</div>
+    <div style="display:flex;align-items:baseline;gap:8px">
+      <span style="font-size:1.4rem;font-weight:700;color:#f4f4f5;font-variant-numeric:tabular-nums">529</span>
+      <span style="color:#5e6675;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Held-out subjects</span>
     </div>
-    <div style="padding:20px 32px;flex:1;border-right:1px solid #1a1a1a;min-width:120px">
-      <div style="font-size:2.2rem;font-weight:900;color:white;line-height:1">17</div>
-      <div style="color:#333;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">Scanner sites</div>
+    <div style="display:flex;align-items:baseline;gap:8px">
+      <span style="font-size:1.4rem;font-weight:700;color:#f4f4f5;font-variant-numeric:tabular-nums">17</span>
+      <span style="color:#5e6675;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Scanner sites</span>
     </div>
-    <div style="padding:20px 32px;flex:1;min-width:120px">
-      <div style="font-size:2.2rem;font-weight:900;color:#f4a261;line-height:1">MI300X</div>
-      <div style="color:#333;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">AMD hardware</div>
+    <div style="display:flex;align-items:baseline;gap:8px">
+      <span style="font-size:1.4rem;font-weight:700;color:#fb923c">MI300X</span>
+      <span style="color:#5e6675;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">AMD hardware</span>
     </div>
   </div>
 </div>
 """
 
-VALIDATION = f"""
-<div style="padding:8px 0">
-  <div style="font-size:0.7rem;color:#e63946;letter-spacing:4px;text-transform:uppercase;margin-bottom:24px">Prospective Validation · 10 Subjects · 5 Unseen Scanner Sites</div>
+def _val_row(site, sid, truth, pred, p, result_color, result_text):
+    truth_clr = "#ef4444" if truth == "ASD" else "#22c55e"
+    pred_clr  = "#ef4444" if pred == "ASD" else "#22c55e" if pred == "TC" else "#f59e0b"
+    return f"""<tr style="border-top:1px solid #252a35">
+<td style="padding:9px 14px;color:#cbd5e1">{site}</td>
+<td style="padding:9px 14px;color:#5e6675;font-size:0.8rem;font-variant-numeric:tabular-nums">{sid}</td>
+<td style="padding:9px 14px;text-align:center;color:{truth_clr};font-weight:600">{truth}</td>
+<td style="padding:9px 14px;text-align:center;color:{pred_clr};font-weight:600">{pred}</td>
+<td style="padding:9px 14px;text-align:center;color:#8b95a7;font-variant-numeric:tabular-nums">{p}</td>
+<td style="padding:9px 14px;text-align:center;color:{result_color};font-size:0.85rem">{result_text}</td></tr>"""
+
+_VAL_ROWS = "".join([
+    _val_row("Caltech",  "0051456", "ASD", "ASD",      "0.742", "#22c55e", "✓"),
+    _val_row("Caltech",  "0051457", "TC",  "TC",       "0.183", "#22c55e", "✓"),
+    _val_row("CMU",      "0050642", "ASD", "INCONCL.", "0.521", "#f59e0b", "review"),
+    _val_row("CMU",      "0050646", "TC",  "TC",       "0.312", "#22c55e", "✓"),
+    _val_row("Stanford", "0051160", "ASD", "ASD",      "0.831", "#22c55e", "✓"),
+    _val_row("Stanford", "0051161", "TC",  "TC",       "0.127", "#22c55e", "✓"),
+    _val_row("Trinity",  "0050232", "ASD", "INCONCL.", "0.487", "#f59e0b", "review"),
+    _val_row("Trinity",  "0050233", "TC",  "TC",       "0.241", "#22c55e", "✓"),
+    _val_row("Yale",     "0050551", "ASD", "ASD",      "0.689", "#22c55e", "✓"),
+    _val_row("Yale",     "0050552", "TC",  "TC",       "0.156", "#22c55e", "✓"),
+])
 
-  <div style="display:flex;gap:12px;margin-bottom:28px;flex-wrap:wrap">
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px 28px;flex:1;min-width:130px;text-align:center">
-      <div style="font-size:3rem;font-weight:900;color:#2dc653;line-height:1">8<span style="font-size:1.3rem;color:#222">/10</span></div>
-      <div style="color:#333;font-size:0.7rem;margin-top:8px;text-transform:uppercase;letter-spacing:1px">Definitive correct</div>
+VALIDATION = f"""
+<div>
+  <div style="display:flex;gap:36px;margin-bottom:22px;flex-wrap:wrap">
+    <div>
+      <div style="font-size:1.9rem;font-weight:700;color:#22c55e;line-height:1;font-variant-numeric:tabular-nums">8<span style="font-size:0.95rem;color:#5e6675;font-weight:500"> / 10</span></div>
+      <div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Definitive correct</div>
     </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px 28px;flex:1;min-width:130px;text-align:center">
-      <div style="font-size:3rem;font-weight:900;color:#f4a261;line-height:1">2<span style="font-size:1.3rem;color:#222">/10</span></div>
-      <div style="color:#333;font-size:0.7rem;margin-top:8px;text-transform:uppercase;letter-spacing:1px">Correctly flagged inconclusive</div>
+    <div>
+      <div style="font-size:1.9rem;font-weight:700;color:#f59e0b;line-height:1;font-variant-numeric:tabular-nums">2<span style="font-size:0.95rem;color:#5e6675;font-weight:500"> / 10</span></div>
+      <div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Flagged inconclusive</div>
     </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px 28px;flex:1;min-width:130px;text-align:center">
-      <div style="font-size:3rem;font-weight:900;color:#e63946;line-height:1">0<span style="font-size:1.3rem;color:#222">/10</span></div>
-      <div style="color:#333;font-size:0.7rem;margin-top:8px;text-transform:uppercase;letter-spacing:1px">Confident wrong</div>
+    <div>
+      <div style="font-size:1.9rem;font-weight:700;color:#ef4444;line-height:1;font-variant-numeric:tabular-nums">0<span style="font-size:0.95rem;color:#5e6675;font-weight:500"> / 10</span></div>
+      <div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Confident wrong</div>
     </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px 28px;flex:1;min-width:130px;text-align:center">
-      <div style="font-size:3rem;font-weight:900;color:white;line-height:1">5</div>
-      <div style="color:#333;font-size:0.7rem;margin-top:8px;text-transform:uppercase;letter-spacing:1px">Unseen scanner sites</div>
+    <div>
+      <div style="font-size:1.9rem;font-weight:700;color:#f4f4f5;line-height:1;font-variant-numeric:tabular-nums">5</div>
+      <div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Unseen sites</div>
     </div>
   </div>
 
-  <img src="data:image/png;base64,{VAL_B64}" style="width:100%;border-radius:12px;margin-bottom:16px"/>
-  <img src="data:image/png;base64,{AUC_B64}" style="width:100%;border-radius:12px;margin-bottom:24px"/>
-
-  <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;overflow:hidden">
-    <table style="width:100%;border-collapse:collapse;font-size:0.87rem">
-      <thead><tr style="border-bottom:1px solid #1a1a1a">
-        <th style="padding:12px 16px;color:#333;font-weight:500;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px">Site</th>
-        <th style="padding:12px 16px;color:#333;font-weight:500;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px">Subject</th>
-        <th style="padding:12px 16px;color:#333;font-weight:500;text-align:center;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px">Ground Truth</th>
-        <th style="padding:12px 16px;color:#333;font-weight:500;text-align:center;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px">Prediction</th>
-        <th style="padding:12px 16px;color:#333;font-weight:500;text-align:center;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px">p(ASD)</th>
-        <th style="padding:12px 16px;color:#333;font-weight:500;text-align:center;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px">Result</th>
+  <img src="data:image/png;base64,{VAL_B64}" style="width:100%;border-radius:6px;margin-bottom:10px;border:1px solid #252a35"/>
+  <img src="data:image/png;base64,{AUC_B64}" style="width:100%;border-radius:6px;margin-bottom:18px;border:1px solid #252a35"/>
+
+  <div style="background:#161922;border:1px solid #252a35;border-radius:8px;overflow:hidden">
+    <table style="width:100%;border-collapse:collapse;font-size:0.86rem">
+      <thead><tr>
+        <th style="padding:11px 14px;color:#8b95a7;font-weight:500;text-align:left;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Site</th>
+        <th style="padding:11px 14px;color:#8b95a7;font-weight:500;text-align:left;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Subject</th>
+        <th style="padding:11px 14px;color:#8b95a7;font-weight:500;text-align:center;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Truth</th>
+        <th style="padding:11px 14px;color:#8b95a7;font-weight:500;text-align:center;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Predicted</th>
+        <th style="padding:11px 14px;color:#8b95a7;font-weight:500;text-align:center;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">p(ASD)</th>
+        <th style="padding:11px 14px;color:#8b95a7;font-weight:500;text-align:center;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px">Result</th>
       </tr></thead>
-      <tbody>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Caltech</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0051456</td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.742</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Caltech</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0051457</td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.183</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">CMU</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0050642</td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#f4a261;font-weight:700">INCONCL.</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.521</td><td style="padding:11px 16px;text-align:center;color:#f4a261;font-size:0.8rem">⚠ review</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">CMU</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0050646</td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.312</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Stanford</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0051160</td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.831</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Stanford</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0051161</td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.127</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Trinity</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0050232</td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#f4a261;font-weight:700">INCONCL.</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.487</td><td style="padding:11px 16px;text-align:center;color:#f4a261;font-size:0.8rem">⚠ review</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Trinity</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0050233</td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.241</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#555">Yale</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0050551</td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.689</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-        <tr><td style="padding:11px 16px;color:#555">Yale</td><td style="padding:11px 16px;color:#2a2a2a;font-size:0.8rem">0050552</td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td><td style="padding:11px 16px;text-align:center;color:#555">0.156</td><td style="padding:11px 16px;text-align:center;color:#2dc653">✓</td></tr>
-      </tbody>
+      <tbody>{_VAL_ROWS}</tbody>
     </table>
   </div>
-  <div style="margin-top:14px;color:#222;font-size:0.78rem;line-height:1.7">
+  <div style="margin-top:12px;color:#8b95a7;font-size:0.8rem;line-height:1.6">
     Inconclusive predictions (0.4 &lt; p &lt; 0.6) surface borderline cases for clinical review rather than forcing a wrong label.
-    Zero confident misclassifications across all 5 unseen sites.
+    <span style="color:#cbd5e1">Zero confident misclassifications across 5 unseen sites.</span>
   </div>
 </div>
 """
 
 ARCHITECTURE = """
-<div style="padding:8px 0">
-  <div style="font-size:0.7rem;color:#e63946;letter-spacing:4px;text-transform:uppercase;margin-bottom:24px">Adversarial Brain-Mode GCN · Architecture</div>
-
-  <div style="display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap">
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:20px 24px;flex:1;min-width:200px">
-      <div style="color:#f4a261;font-weight:700;font-size:0.85rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">Brain Mode Decomposition</div>
-      <div style="color:#444;font-size:0.84rem;line-height:1.8">
-        K=16 learnable directions in ROI space.<br>
-        <span style="color:#888;font-family:monospace;font-size:0.82rem">M_kl = v_k · FC · v_l</span><br>
-        Compresses 19,900 FC features → 152 dims while preserving network structure. Each mode specializes to DMN, salience, FPN.
+<div>
+  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px">
+    <div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 20px">
+      <div style="color:#fb923c;font-weight:600;font-size:0.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px">Brain Mode Decomposition</div>
+      <div style="color:#cbd5e1;font-size:0.85rem;line-height:1.6">
+        K=16 learnable directions in ROI space. <code style="color:#fb923c;background:#0e1015;padding:1px 5px;border-radius:3px;font-size:0.8rem">M_kl = v_k · FC · v_l</code>
+        compresses 19,900 FC features → 152 dims while preserving network structure.
       </div>
     </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:20px 24px;flex:1;min-width:200px">
-      <div style="color:#f4a261;font-weight:700;font-size:0.85rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">Gradient Reversal Layer</div>
-      <div style="color:#444;font-size:0.84rem;line-height:1.8">
-        Adversarial site deconfounding (Ganin et al. 2016). Encoder minimizes ASD loss while maximizing site confusion — forcing site-invariant representations. α annealed 0→1 across training.
+    <div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 20px">
+      <div style="color:#fb923c;font-weight:600;font-size:0.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px">Gradient Reversal Layer</div>
+      <div style="color:#cbd5e1;font-size:0.85rem;line-height:1.6">
+        Adversarial site deconfounding (Ganin 2016). Encoder minimizes ASD loss while <i>maximizing</i> site confusion — forcing site-invariant representations. α annealed 0→1.
       </div>
     </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:20px 24px;flex:1;min-width:200px">
-      <div style="color:#f4a261;font-weight:700;font-size:0.85rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">LOSO Ensemble</div>
-      <div style="color:#444;font-size:0.84rem;line-height:1.8">
-        4 models × 1 held-out site each. At inference, average all 4 probabilities. No model ever saw the test subject's scanner site. Cross-model agreement = site-independent finding.
+    <div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 20px">
+      <div style="color:#fb923c;font-weight:600;font-size:0.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px">LOSO Ensemble</div>
+      <div style="color:#cbd5e1;font-size:0.85rem;line-height:1.6">
+        4 models × 1 held-out site each. No model ever saw the test subject's scanner. Cross-model agreement = site-independent finding.
       </div>
     </div>
   </div>
 
-  <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px;margin-bottom:16px;font-family:monospace;font-size:0.82rem;line-height:2.1;color:#333">
-<span style="color:#e63946">fMRI BOLD</span> (T × 200 ROIs)  <span style="color:#1e1e1e">←── CC200 atlas</span><br>
-      │<br>
-   ┌──┴───────────────────┐<br>
-   │                      │<br>
-<span style="color:#777">FC matrix</span> (200×200)     <span style="color:#777">BOLD windows</span> (30×200)<br>
-   │                      │<br>
-   └──────────┬───────────┘<br>
-              │<br>
-       <span style="color:#f4a261">Brain Mode Decomposition</span>  K=16<br>
-       M_kl = v_k · FC · v_l  +  std(v_k · bold)<br>
-              │  152 features<br>
-       <span style="color:#f4a261">Shared Encoder</span>  (MLP, dim=64)<br>
-              │<br>
-       ┌──────┴──────────────────┐<br>
-       │                         │<br>
-<span style="color:#2dc653">ASD head</span>               <span style="color:#1e1e1e">GRL(α) → site head</span><br>
-minimize CE(ASD)        <span style="color:#1a1a1a">maximize site confusion</span><br>
-       │<br>
-<span style="color:#e63946">p(ASD)</span>  +  <span style="color:#777">gradient saliency on FC (real-time)</span>
-  </div>
-
-  <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;overflow:hidden">
-    <table style="width:100%;border-collapse:collapse;font-size:0.85rem">
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333;width:180px">Dataset</td><td style="padding:11px 16px;color:#888">ABIDE I — 1,102 subjects, 17 acquisition sites</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Parcellation</td><td style="padding:11px 16px;color:#888">CC200 (Craddock 2012) — 200 functional ROIs</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Architecture</td><td style="padding:11px 16px;color:#888">AdversarialBrainModeNetwork — K=16 modes, hidden_dim=64</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Regularization</td><td style="padding:11px 16px;color:#888">GRL adversarial + orthogonality loss on brain modes</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Validation</td><td style="padding:11px 16px;color:#888">LOSO AUC = <b style="color:#e63946">0.7872</b> across 529 held-out subjects</td></tr>
-      <tr><td style="padding:11px 16px;color:#333">Interpretability</td><td style="padding:11px 16px;color:#888">Real-time gradient saliency on 200×200 FC adjacency matrix</td></tr>
+  <div style="background:#161922;border:1px solid #252a35;border-radius:8px;overflow:hidden">
+    <table style="width:100%;border-collapse:collapse;font-size:0.86rem">
+      <tr><td style="padding:10px 16px;color:#8b95a7;width:160px;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Dataset</td><td style="padding:10px 16px;color:#cbd5e1">ABIDE I — 1,102 subjects · 17 acquisition sites</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Parcellation</td><td style="padding:10px 16px;color:#cbd5e1">CC200 (Craddock 2012) — 200 functional ROIs</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Architecture</td><td style="padding:10px 16px;color:#cbd5e1">AdversarialBrainModeNetwork · K=16 · hidden_dim=64</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Regularization</td><td style="padding:10px 16px;color:#cbd5e1">GRL adversarial + orthogonality loss on brain modes</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Validation</td><td style="padding:10px 16px;color:#cbd5e1">LOSO AUC = <span style="color:#ef4444;font-weight:600">0.7872</span> across 529 held-out subjects</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Interpretability</td><td style="padding:10px 16px;color:#cbd5e1">Real-time gradient saliency on FC adjacency matrix</td></tr>
     </table>
   </div>
 </div>
 """
 
 AMD = """
-<div style="padding:8px 0">
-  <div style="font-size:0.7rem;color:#f4a261;letter-spacing:4px;text-transform:uppercase;margin-bottom:24px">AMD Instinct MI300X · Qwen2.5-7B Clinical Fine-Tune</div>
-
-  <div style="display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap">
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px;flex:1;min-width:120px;text-align:center">
-      <div style="font-size:2.4rem;font-weight:900;color:#f4a261;line-height:1">192</div>
-      <div style="color:#2a2a2a;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">GB HBM3</div>
-    </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px;flex:1;min-width:120px;text-align:center">
-      <div style="font-size:2.4rem;font-weight:900;color:#f4a261;line-height:1">bf16</div>
-      <div style="color:#2a2a2a;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">No quantization</div>
-    </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px;flex:1;min-width:120px;text-align:center">
-      <div style="font-size:2.4rem;font-weight:900;color:white;line-height:1">7B</div>
-      <div style="color:#2a2a2a;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">Qwen2.5 params</div>
-    </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px;flex:1;min-width:120px;text-align:center">
-      <div style="font-size:2.4rem;font-weight:900;color:white;line-height:1">2K</div>
-      <div style="color:#2a2a2a;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">Domain examples</div>
-    </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:24px;flex:1;min-width:120px;text-align:center">
-      <div style="font-size:2.4rem;font-weight:900;color:white;line-height:1">r=16</div>
-      <div style="color:#2a2a2a;font-size:0.7rem;margin-top:6px;text-transform:uppercase;letter-spacing:1px">LoRA rank</div>
-    </div>
+<div>
+  <div style="display:flex;gap:32px;margin-bottom:22px;flex-wrap:wrap">
+    <div><div style="font-size:1.7rem;font-weight:700;color:#fb923c;line-height:1;font-variant-numeric:tabular-nums">192<span style="font-size:0.8rem;color:#5e6675;font-weight:500"> GB</span></div><div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">HBM3 unified</div></div>
+    <div><div style="font-size:1.7rem;font-weight:700;color:#fb923c;line-height:1">bf16</div><div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Full precision</div></div>
+    <div><div style="font-size:1.7rem;font-weight:700;color:#f4f4f5;line-height:1">7B</div><div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Qwen2.5 params</div></div>
+    <div><div style="font-size:1.7rem;font-weight:700;color:#f4f4f5;line-height:1;font-variant-numeric:tabular-nums">2,000</div><div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">Domain examples</div></div>
+    <div><div style="font-size:1.7rem;font-weight:700;color:#f4f4f5;line-height:1">r=16</div><div style="color:#8b95a7;font-size:0.7rem;margin-top:5px;text-transform:uppercase;letter-spacing:1px">LoRA rank</div></div>
   </div>
 
-  <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;overflow:hidden;margin-bottom:16px">
-    <table style="width:100%;border-collapse:collapse;font-size:0.85rem">
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333;width:180px">Base model</td><td style="padding:11px 16px;color:#888">Qwen/Qwen2.5-7B-Instruct <span style="color:#2a2a2a">(AMD partner model)</span></td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Method</td><td style="padding:11px 16px;color:#888">LoRA r=16, α=32 — all projection layers (q, k, v, o, gate, up, down)</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Hardware</td><td style="padding:11px 16px;color:#888">AMD Instinct MI300X · ROCm · bf16 — full precision, no quantization needed</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Training data</td><td style="padding:11px 16px;color:#888">2,000 GCN→clinical report pairs · ASD neuroscience grounded · 3 epochs</td></tr>
-      <tr style="border-bottom:1px solid #111"><td style="padding:11px 16px;color:#333">Task</td><td style="padding:11px 16px;color:#888">Structured clinical interpretation of LOSO GCN ensemble outputs</td></tr>
-      <tr><td style="padding:11px 16px;color:#333">Output</td><td style="padding:11px 16px;color:#888">DMN / salience / cerebellar-cortical findings grounded in ASD literature</td></tr>
+  <div style="background:#161922;border:1px solid #252a35;border-radius:8px;overflow:hidden;margin-bottom:14px">
+    <table style="width:100%;border-collapse:collapse;font-size:0.86rem">
+      <tr><td style="padding:10px 16px;color:#8b95a7;width:160px;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Base model</td><td style="padding:10px 16px;color:#cbd5e1">Qwen/Qwen2.5-7B-Instruct <span style="color:#5e6675">· AMD partner model</span></td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Method</td><td style="padding:10px 16px;color:#cbd5e1">LoRA r=16, α=32 · all projection layers (q, k, v, o, gate, up, down)</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Hardware</td><td style="padding:10px 16px;color:#cbd5e1">AMD Instinct MI300X · ROCm · bf16 — no quantization</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Training data</td><td style="padding:10px 16px;color:#cbd5e1">2,000 GCN→clinical report pairs · ASD-grounded · 3 epochs</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Task</td><td style="padding:10px 16px;color:#cbd5e1">Structured clinical interpretation of LOSO GCN ensemble outputs</td></tr>
+      <tr style="border-top:1px solid #252a35"><td style="padding:10px 16px;color:#8b95a7;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px">Output</td><td style="padding:10px 16px;color:#cbd5e1">DMN / salience / cerebellar-cortical findings grounded in ASD literature</td></tr>
     </table>
   </div>
 
-  <div style="display:flex;gap:12px;flex-wrap:wrap">
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:20px 24px;flex:1;min-width:240px">
-      <div style="color:#f4a261;font-weight:700;font-size:0.85rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">Why Qwen2.5-7B?</div>
-      <div style="color:#444;font-size:0.84rem;line-height:1.7">Qwen is an AMD partner model. Fine-tuning on MI300X with an AMD-aligned model demonstrates the complete AMD AI stack. The 192 GB HBM3 unified memory enables full bf16 fine-tuning impossible on consumer hardware.</div>
+  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px">
+    <div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 20px">
+      <div style="color:#fb923c;font-weight:600;font-size:0.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px">Why Qwen2.5-7B?</div>
+      <div style="color:#cbd5e1;font-size:0.85rem;line-height:1.6">AMD partner model. Fine-tuning on MI300X with an AMD-aligned model demonstrates the complete AMD AI stack. 192 GB HBM3 enables full bf16 fine-tuning impossible on consumer hardware.</div>
     </div>
-    <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-radius:12px;padding:20px 24px;flex:1;min-width:240px">
-      <div style="color:#f4a261;font-weight:700;font-size:0.85rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">Why domain fine-tuning?</div>
-      <div style="color:#444;font-size:0.84rem;line-height:1.7">Base Qwen generates generic text. Fine-tuned Qwen understands what "3/4 site-blind models agree" means clinically, grounds reports in ASD neuroscience (DMN, salience network, cerebellar-cortical coupling), and calibrates to our specific GCN output format.</div>
+    <div style="background:#161922;border:1px solid #252a35;border-radius:8px;padding:18px 20px">
+      <div style="color:#fb923c;font-weight:600;font-size:0.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px">Why domain fine-tuning?</div>
+      <div style="color:#cbd5e1;font-size:0.85rem;line-height:1.6">Base Qwen generates generic text. Fine-tuned Qwen understands what "3/4 site-blind models agree" means clinically and grounds reports in ASD neuroscience (DMN, salience, cerebellar-cortical coupling).</div>
     </div>
   </div>
 </div>
@@ -509,42 +477,60 @@ AMD = """
 # ── UI ─────────────────────────────────────────────────────────────────────
 
 css = """
-body { background: #0d0d0d; }
-.gradio-container { max-width: 1100px !important; margin: auto; padding: 0 24px; }
-.tab-nav { border-bottom: 1px solid #111 !important; margin-bottom: 8px; }
-.tab-nav button { color: #333 !important; font-size: 0.85rem !important; padding: 12px 20px !important; letter-spacing: 0.5px; }
-.tab-nav button.selected { color: #fff !important; border-bottom: 2px solid #e63946 !important; }
+body, .gradio-container, .gr-app { background: #0e1015 !important; }
+.gradio-container { max-width: 1180px !important; margin: auto; padding: 0 28px; }
+.gradio-container * { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }
+.tab-nav { border-bottom: 1px solid #252a35 !important; margin-bottom: 14px !important; gap: 2px !important; }
+.tab-nav button { color: #8b95a7 !important; font-size: 0.84rem !important; font-weight: 500 !important; padding: 10px 16px !important; background: transparent !important; border: none !important; }
+.tab-nav button:hover { color: #cbd5e1 !important; }
+.tab-nav button.selected { color: #f4f4f5 !important; border-bottom: 2px solid #ef4444 !important; background: transparent !important; }
+.gr-block, .gr-form, .gr-box { background: transparent !important; border: none !important; }
+.gr-file, .gr-file-preview { background: #161922 !important; border: 1px dashed #2a3040 !important; border-radius: 8px !important; }
+label.svelte-1b6s6s, .gr-input-label { color: #8b95a7 !important; font-size: 0.78rem !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: 0.8px; }
+button.primary, .gr-button-primary { background: #ef4444 !important; border: none !important; color: white !important; font-weight: 500 !important; }
+button.secondary, .gr-button-secondary { background: #161922 !important; border: 1px solid #252a35 !important; color: #cbd5e1 !important; }
 footer { display: none !important; }
+.gr-image, .gr-image-container { background: #0e1015 !important; border: 1px solid #252a35 !important; border-radius: 8px !important; }
 """
 
 with gr.Blocks(title="BrainConnect-ASD", css=css, theme=gr.themes.Base()) as demo:
     gr.HTML(HEADER)
 
     with gr.Tabs():
-        with gr.Tab("🔬  Analysis"):
-            file_input   = gr.File(label="Upload CC200 fMRI file (.1D or .npz)", type="filepath")
+        with gr.Tab("Analysis"):
+            file_input = gr.File(label="Upload CC200 fMRI (.1D or .npz)", type="filepath")
+            gr.HTML("<div style='color:#8b95a7;font-size:0.7rem;text-transform:uppercase;letter-spacing:1.2px;margin:14px 0 8px;font-weight:500'>Or try a real ABIDE subject from a held-out site</div>")
+            with gr.Row():
+                btn_asd = gr.Button("ASD · Stanford 0051160", size="sm")
+                btn_tc  = gr.Button("TC · Yale 0050552",  size="sm")
+                btn_brd = gr.Button("Borderline · Trinity 0050232",  size="sm")
             verdict_html = gr.HTML()
             ens_html     = gr.HTML()
-            gr.HTML("<div style='margin-top:20px;font-size:0.7rem;color:#222;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px'>Gradient Saliency · which brain connections drove this prediction</div>")
+            gr.HTML("<div style='margin-top:18px;font-size:0.65rem;color:#8b95a7;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;font-weight:500'>Gradient Saliency · which brain networks drove this prediction</div>")
             sal_img      = gr.Image(label="", type="pil", show_label=False)
             rep_html     = gr.HTML()
             file_input.change(fn=run_gcn, inputs=file_input,
                               outputs=[verdict_html, ens_html, rep_html, sal_img])
-
-        with gr.Tab("📊  Validation"):
+            btn_asd.click(fn=lambda: run_gcn("demo_subjects/sample_asd_stanford.1D"),
+                          outputs=[verdict_html, ens_html, rep_html, sal_img])
+            btn_tc.click(fn=lambda: run_gcn("demo_subjects/sample_tc_yale.1D"),
+                         outputs=[verdict_html, ens_html, rep_html, sal_img])
+            btn_brd.click(fn=lambda: run_gcn("demo_subjects/sample_borderline_trinity.1D"),
+                          outputs=[verdict_html, ens_html, rep_html, sal_img])
+
+        with gr.Tab("Validation"):
             gr.HTML(VALIDATION)
 
-        with gr.Tab("🧠  Architecture"):
+        with gr.Tab("Architecture"):
             gr.HTML(ARCHITECTURE)
 
-        with gr.Tab("⚡  AMD MI300X"):
+        with gr.Tab("AMD MI300X"):
             gr.HTML(AMD)
 
     gr.HTML("""
-    <div style="text-align:center;padding:32px 0 16px;color:#1a1a1a;font-size:0.75rem;border-top:1px solid #0f0f0f;margin-top:12px">
-      Adversarial Brain-Mode GCN (k=16) &nbsp;·&nbsp; ABIDE I 1,102 subjects &nbsp;·&nbsp;
-      Qwen2.5-7B LoRA on AMD Instinct MI300X &nbsp;·&nbsp;
-      <a href="https://github.com/Yatsuiii/Brain-Connectivity-GCN" style="color:#222">GitHub</a>
+    <div style="text-align:center;padding:24px 0 12px;color:#5e6675;font-size:0.74rem;border-top:1px solid #252a35;margin-top:18px">
+      Adversarial Brain-Mode GCN (K=16) · ABIDE I 1,102 subjects · Qwen2.5-7B LoRA on AMD Instinct MI300X ·
+      <a href="https://github.com/Yatsuiii/Brain-Connectivity-GCN" style="color:#8b95a7;text-decoration:none">GitHub</a>
     </div>""")
 
 print("Preloading models...")