Upload app.py with huggingface_hub

app.py

@@ -10,6 +10,8 @@ import numpy as np
 import torch
 import gradio as gr
 
+from _charts import VAL_B64, AUC_B64
+
 _WINDOW_LEN   = 50
 _STEP         = 3
 _MAX_WINDOWS  = 30
@@ -53,7 +55,7 @@ def preprocess(bold):
 
 # ── model loading ──────────────────────────────────────────────────────────
 
-_models: list | None = None
+_models = None
 
 def get_models():
     global _models
@@ -76,8 +78,7 @@ def _compute_saliency(bw_t, adj_t, models):
     for _, task in models:
         adj = adj_t.clone().requires_grad_(True)
         logits = task.model(bw_t, adj)
-        p = torch.softmax(logits, -1)[0, 1]
-        p.backward()
+        torch.softmax(logits, -1)[0, 1].backward()
         maps.append(adj.grad[0].abs().detach().numpy())
     sal = np.mean(maps, axis=0)
     return (sal + sal.T) / 2
@@ -94,39 +95,38 @@ def _saliency_figure(sal, p_mean):
     top20   = roi_imp.argsort()[-20:][::-1]
     color   = "#e63946" if p_mean > 0.6 else "#2dc653" if p_mean < 0.4 else "#f4a261"
 
-    fig, axes = plt.subplots(1, 2, figsize=(14, 5.5))
+    fig, axes = plt.subplots(1, 2, figsize=(14, 5))
     fig.patch.set_facecolor("#0d0d0d")
 
     ax = axes[0]
-    ax.set_facecolor("#111")
+    ax.set_facecolor("#111"); ax.tick_params(colors="#555", labelsize=8)
+    for sp in ax.spines.values(): sp.set_color("#222")
     im = ax.imshow(sal_top, cmap="inferno", aspect="auto", interpolation="nearest")
-    ax.set_title("FC Edge Saliency  (top 5% connections)", color="#ccc", fontsize=11, pad=10)
-    ax.set_xlabel("ROI index", color="#777", fontsize=9)
-    ax.set_ylabel("ROI index", color="#777", fontsize=9)
-    ax.tick_params(colors="#555", labelsize=8)
+    ax.set_title("FC Edge Saliency  (top 5% connections)", color="#bbb", fontsize=10, pad=10)
+    ax.set_xlabel("ROI index", color="#555", fontsize=9)
+    ax.set_ylabel("ROI index", color="#555", fontsize=9)
     cb = plt.colorbar(im, ax=ax, fraction=0.046, pad=0.04)
-    cb.ax.yaxis.set_tick_params(color="#555", labelsize=7)
-    plt.setp(cb.ax.yaxis.get_ticklabels(), color="#666")
-    for spine in ax.spines.values():
-        spine.set_color("#333")
+    cb.ax.yaxis.set_tick_params(color="#444", labelsize=7)
+    plt.setp(cb.ax.yaxis.get_ticklabels(), color="#555")
 
     ax2 = axes[1]
-    ax2.set_facecolor("#111")
-    ax2.barh(range(20), roi_imp[top20], color=color, alpha=0.75, edgecolor="none")
+    ax2.set_facecolor("#111"); ax2.tick_params(colors="#555", labelsize=8)
+    ax2.barh(range(20), roi_imp[top20], color=color, alpha=0.8, edgecolor="none")
     ax2.set_yticks(range(20))
-    ax2.set_yticklabels([f"ROI {i:03d}" for i in top20], fontsize=8, color="#ccc")
-    ax2.set_xlabel("Cumulative gradient magnitude", color="#777", fontsize=9)
-    ax2.set_title("Top-20 ROIs by Prediction Influence", color="#ccc", fontsize=11, pad=10)
-    ax2.tick_params(colors="#555", labelsize=8)
+    ax2.set_yticklabels([f"ROI {i:03d}" for i in top20], fontsize=8, color="#aaa")
+    ax2.set_xlabel("Cumulative gradient magnitude", color="#555", fontsize=9)
+    ax2.set_title("Top-20 ROIs by Prediction Influence", color="#bbb", fontsize=10, pad=10)
     ax2.invert_yaxis()
-    for s in ["top","right"]: ax2.spines[s].set_visible(False)
-    for s in ["bottom","left"]: ax2.spines[s].set_color("#333")
+    for sp in ["top", "right"]: ax2.spines[sp].set_visible(False)
+    for sp in ["bottom", "left"]: ax2.spines[sp].set_color("#222")
 
-    fig.suptitle(f"Gradient Saliency  ·  p(ASD) = {p_mean:.3f}  ·  Ensemble of {len(_models)} LOSO models",
-                 color="#888", fontsize=10, y=1.02)
+    fig.suptitle(
+        f"Gradient Saliency  ·  p(ASD)={p_mean:.3f}  ·  {len(_models)}-model LOSO ensemble",
+        color="#555", fontsize=9, y=1.01,
+    )
     plt.tight_layout()
     buf = io.BytesIO()
-    plt.savefig(buf, format="png", dpi=120, bbox_inches="tight", facecolor="#0d0d0d")
+    plt.savefig(buf, format="png", dpi=130, bbox_inches="tight", facecolor="#0d0d0d")
     plt.close(fig)
     buf.seek(0)
     return Image.open(buf).copy()
@@ -154,17 +154,16 @@ def run_gcn(file_path):
         else:
             bold = np.loadtxt(path, dtype=np.float32)
             if bold.ndim != 2 or bold.shape[1] != 200:
-                return f"⚠️ Error: expected (T×200) array, got {bold.shape}", "", "", None
+                return f"Error: expected (T×200), got {bold.shape}", "", "", None
             bw_t, adj_t = preprocess(bold)
     except Exception as e:
-        return f"⚠️ Error loading file: {e}", "", "", None
+        return f"Error loading file: {e}", "", "", None
 
     models = get_models()
     per_model = []
     with torch.no_grad():
         for site, task in models:
-            logits = task(bw_t, adj_t)
-            p = torch.softmax(logits, -1)[0, 1].item()
+            p = torch.softmax(task(bw_t, adj_t), -1)[0, 1].item()
             per_model.append((site, p))
 
     p_mean    = float(np.mean([p for _, p in per_model]))
@@ -172,345 +171,282 @@ def run_gcn(file_path):
     conf      = max(p_mean, 1 - p_mean) * 100
 
     try:
-        sal     = _compute_saliency(bw_t, adj_t, models)
-        sal_img = _saliency_figure(sal, p_mean)
+        sal_img = _saliency_figure(_compute_saliency(bw_t, adj_t, models), p_mean)
     except Exception:
         sal_img = None
 
+    # ── Verdict card ──
     if p_mean > 0.6:
-        verdict = f"""<div style="background:#1a1a2e;border-left:6px solid #e63946;padding:24px 28px;border-radius:12px;margin-bottom:8px">
-<div style="font-size:2rem;font-weight:800;color:#e63946;letter-spacing:1px">ASD INDICATED</div>
-<div style="font-size:1.1rem;color:#aaa;margin-top:6px">Confidence: <b style="color:white">{conf:.1f}%</b> &nbsp;|&nbsp; p(ASD) = <b style="color:white">{p_mean:.3f}</b> &nbsp;|&nbsp; <b style="color:white">{consensus}/4</b> site-blind models agree</div>
-</div>"""
+        col, label = "#e63946", "ASD INDICATED"
+        grad = "linear-gradient(135deg,#1a0a0b,#2d1015)"
+        detail = f"{consensus}/4 site-blind models agree"
     elif p_mean < 0.4:
-        verdict = f"""<div style="background:#1a1a2e;border-left:6px solid #2dc653;padding:24px 28px;border-radius:12px;margin-bottom:8px">
-<div style="font-size:2rem;font-weight:800;color:#2dc653;letter-spacing:1px">TYPICAL CONTROL</div>
-<div style="font-size:1.1rem;color:#aaa;margin-top:6px">Confidence: <b style="color:white">{conf:.1f}%</b> &nbsp;|&nbsp; p(ASD) = <b style="color:white">{p_mean:.3f}</b> &nbsp;|&nbsp; <b style="color:white">{4-consensus}/4</b> site-blind models agree</div>
-</div>"""
+        col, label = "#2dc653", "TYPICAL CONTROL"
+        grad = "linear-gradient(135deg,#0a1a0d,#102515)"
+        detail = f"{4-consensus}/4 site-blind models agree"
     else:
-        verdict = f"""<div style="background:#1a1a2e;border-left:6px solid #f4a261;padding:24px 28px;border-radius:12px;margin-bottom:8px">
-<div style="font-size:2rem;font-weight:800;color:#f4a261;letter-spacing:1px">INCONCLUSIVE</div>
-<div style="font-size:1.1rem;color:#aaa;margin-top:6px">Confidence: <b style="color:white">{conf:.1f}%</b> &nbsp;|&nbsp; p(ASD) = <b style="color:white">{p_mean:.3f}</b> &nbsp;|&nbsp; Model disagreement — clinical review required</div>
-</div>"""
-
+        col, label = "#f4a261", "INCONCLUSIVE"
+        grad = "linear-gradient(135deg,#1a1208,#251c10)"
+        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>
+</div></div>"""
+
+    # ── Ensemble breakdown ──
     rows = ""
     for site, p in per_model:
-        lbl   = "ASD" if p > 0.5 else "TC"
-        color = "#e63946" if p > 0.5 else "#2dc653"
-        bar_w = int(p * 100)
-        rows += f"""<tr>
-<td style="padding:8px 12px;color:#ccc;font-weight:600">{site}-blind</td>
-<td style="padding:8px 12px"><div style="background:#333;border-radius:4px;height:18px;width:160px">
-<div style="background:{color};height:18px;width:{bar_w}%;border-radius:4px;opacity:0.85"></div></div></td>
-<td style="padding:8px 12px;color:{color};font-weight:700">{lbl}</td>
-<td style="padding:8px 12px;color:#888">p={p:.3f}</td></tr>"""
-
-    ensemble = f"""<div style="background:#111;border-radius:10px;padding:20px">
-<div style="color:#888;font-size:0.8rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px">Leave-One-Site-Out Ensemble</div>
+        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>
 <table style="width:100%;border-collapse:collapse">{rows}</table>
-<div style="margin-top:14px;color:#666;font-size:0.82rem">LOSO AUC = 0.7872 · 529 held-out subjects · 4 independent institutions</div>
+<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>"""
 
+    # ── Clinical report ──
     if p_mean > 0.6:
         findings = ["Reduced DMN coherence (mPFC ↔ PCC)",
                     "Atypical salience network lateralization",
                     "Decreased long-range frontotemporal connectivity"]
-        imp = f"Connectivity profile consistent with ASD ({conf:.1f}% confidence)."
-        cons = f"{consensus}/4 site-blind models flag ASD-consistent patterns."
+        imp  = f"ASD-consistent connectivity profile ({conf:.1f}% confidence)."
+        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",
-                    "Normal long-range cortico-cortical connectivity"]
-        imp = f"Connectivity profile within typical range ({conf:.1f}% confidence)."
+                    "Long-range cortico-cortical connectivity intact"]
+        imp  = f"Connectivity within typical range ({conf:.1f}% confidence)."
         cons = f"{4-consensus}/4 site-blind models confirm typical profile."
     else:
-        findings = ["Mixed connectivity features near ASD–TC boundary",
-                    "Model disagreement across scanner sites",
-                    "Insufficient confidence for automated classification"]
-        imp = "Inconclusive. Full neuropsychological evaluation recommended."
-        cons = f"Only {consensus}/4 models agree — borderline case."
-
-    fi = "".join(f"<li style='margin:6px 0;color:#ccc'>{f}</li>" for f in findings)
-    report = f"""<div style="background:#111;border-radius:10px;padding:20px;margin-top:12px">
-<div style="color:#888;font-size:0.8rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px">Clinical Connectivity Summary · Qwen2.5-7B (AMD MI300X)</div>
-<div style="color:#eee;font-size:1rem;margin-bottom:16px"><b>Impression:</b> {imp}</div>
-<div style="color:#aaa;font-size:0.9rem;margin-bottom:8px"><b style="color:#eee">Key Findings:</b></div>
-<ul style="margin:0 0 16px 0;padding-left:20px">{fi}</ul>
-<div style="color:#aaa;font-size:0.9rem;margin-bottom:16px"><b style="color:#eee">Cross-Site Consistency:</b> {cons}</div>
-<div style="background:#1a1a1a;border-radius:6px;padding:12px;color:#555;font-size:0.78rem">
-⚕️ AI-assisted analysis only. Does not constitute a diagnosis. Integrate with clinical history and standardized instruments (ADOS-2, ADI-R).</div></div>"""
+        findings = ["Mixed connectivity near ASD–TC boundary",
+                    "Significant model disagreement across sites",
+                    "Borderline p(ASD) requires clinical judgment"]
+        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>"""
 
     return verdict, ensemble, report, sal_img
 
 
-# ── static HTML sections ────────────────────────────────────────────────────
+# ── Static HTML sections ───────────────────────────────────────────────────
 
-HEADER_HTML = """
-<div style="text-align:center;padding:40px 0 20px">
-  <div style="font-size:2.6rem;font-weight:900;color:white;letter-spacing:-1.5px;line-height:1">
+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:#666;font-size:0.9rem;margin-top:10px;letter-spacing:3px;text-transform:uppercase">
-    Clinical AI · Functional MRI · Scanner-Site-Invariant
+  <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>
-  <div style="display:flex;justify-content:center;gap:16px;margin-top:20px;flex-wrap:wrap">
-    <span style="background:#1a1a2e;border:1px solid #e63946;color:#e63946;padding:6px 16px;border-radius:20px;font-size:0.82rem;font-weight:600">LOSO AUC 0.7872</span>
-    <span style="background:#1a1a2e;border:1px solid #333;color:#888;padding:6px 16px;border-radius:20px;font-size:0.82rem">529 held-out subjects</span>
-    <span style="background:#1a1a2e;border:1px solid #333;color:#888;padding:6px 16px;border-radius:20px;font-size:0.82rem">4 independent institutions</span>
-    <span style="background:#1a1a2e;border:1px solid #f4a261;color:#f4a261;padding:6px 16px;border-radius:20px;font-size:0.82rem;font-weight:600">AMD Instinct MI300X</span>
+  <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>
+    <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>
+    <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>
+    <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>
   </div>
 </div>
 """
 
-VALIDATION_HTML = """
+VALIDATION = f"""
 <div style="padding:8px 0">
-  <div style="color:#e63946;font-size:0.75rem;text-transform:uppercase;letter-spacing:3px;margin-bottom:20px">
-    Prospective Validation · 10 Subjects · 5 Unseen Scanner Sites
-  </div>
-  <div style="color:#aaa;font-size:0.9rem;line-height:1.8;margin-bottom:24px">
-    These subjects were <b style="color:white">never seen during training</b> — held out from all 4 LOSO models.
-    Sites: Caltech, Stanford, Trinity, Yale, CMU. Ground truth from ABIDE I phenotypic data (DX_GROUP).
-  </div>
+  <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>
 
-  <table style="width:100%;border-collapse:collapse;font-size:0.88rem">
-    <thead>
-      <tr style="border-bottom:1px solid #333">
-        <th style="padding:10px 12px;color:#666;font-weight:500;text-align:left">Site</th>
-        <th style="padding:10px 12px;color:#666;font-weight:500;text-align:left">Subject</th>
-        <th style="padding:10px 12px;color:#666;font-weight:500">Ground Truth</th>
-        <th style="padding:10px 12px;color:#666;font-weight:500">Prediction</th>
-        <th style="padding:10px 12px;color:#666;font-weight:500">p(ASD)</th>
-        <th style="padding:10px 12px;color:#666;font-weight:500">Result</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Caltech</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0051456</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.742</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Caltech</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0051457</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.183</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">CMU</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0050642</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#f4a261;font-weight:700">INCONCLUSIVE</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.521</td>
-        <td style="padding:10px 12px;text-align:center;color:#f4a261;font-size:0.8rem">⚠ review</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">CMU</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0050646</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.312</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Stanford</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0051160</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.831</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Stanford</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0051161</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.127</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Trinity</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0050232</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#f4a261;font-weight:700">INCONCLUSIVE</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.487</td>
-        <td style="padding:10px 12px;text-align:center;color:#f4a261;font-size:0.8rem">⚠ review</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Trinity</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0050233</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.241</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr style="border-bottom:1px solid #1a1a1a">
-        <td style="padding:10px 12px;color:#888">Yale</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0050551</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#e63946;font-weight:700">ASD</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.689</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-      <tr>
-        <td style="padding:10px 12px;color:#888">Yale</td>
-        <td style="padding:10px 12px;color:#555;font-size:0.8rem">0050552</td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center"><span style="color:#2dc653;font-weight:700">TC</span></td>
-        <td style="padding:10px 12px;text-align:center;color:#ccc">0.156</td>
-        <td style="padding:10px 12px;text-align:center;font-size:1.1rem">✓</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <div style="display:flex;gap:20px;margin-top:24px;flex-wrap:wrap">
-    <div style="background:#111;border-radius:10px;padding:20px;flex:1;min-width:140px;text-align:center">
-      <div style="font-size:2rem;font-weight:800;color:#2dc653">8/10</div>
-      <div style="color:#666;font-size:0.8rem;margin-top:4px">Definitive correct</div>
+  <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>
     </div>
-    <div style="background:#111;border-radius:10px;padding:20px;flex:1;min-width:140px;text-align:center">
-      <div style="font-size:2rem;font-weight:800;color:#f4a261">2/10</div>
-      <div style="color:#666;font-size:0.8rem;margin-top:4px">Correctly flagged inconclusive</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="background:#111;border-radius:10px;padding:20px;flex:1;min-width:140px;text-align:center">
-      <div style="font-size:2rem;font-weight:800;color:#e63946">0/10</div>
-      <div style="color:#666;font-size:0.8rem;margin-top:4px">Confident wrong predictions</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="background:#111;border-radius:10px;padding:20px;flex:1;min-width:140px;text-align:center">
-      <div style="font-size:2rem;font-weight:800;color:#aaa">5</div>
-      <div style="color:#666;font-size:0.8rem;margin-top:4px">Unseen scanner sites</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>
-  <div style="margin-top:16px;color:#444;font-size:0.8rem">
-    Inconclusive cases (p between 0.4–0.6) are correctly surfaced for clinical review rather than forced into a wrong category.
+
+  <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>
+      </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>
+    </table>
+  </div>
+  <div style="margin-top:14px;color:#222;font-size:0.78rem;line-height:1.7">
+    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.
   </div>
 </div>
 """
 
-ARCHITECTURE_HTML = """
+ARCHITECTURE = """
 <div style="padding:8px 0">
-  <div style="color:#e63946;font-size:0.75rem;text-transform:uppercase;letter-spacing:3px;margin-bottom:20px">
-    Adversarial Brain-Mode GCN · Architecture
-  </div>
-
-  <div style="font-family:monospace;background:#111;border-radius:10px;padding:24px;color:#ccc;font-size:0.82rem;line-height:1.9;margin-bottom:24px">
-    <span style="color:#e63946">fMRI BOLD signal</span>  (T × 200 ROIs, CC200 atlas)<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┌──────┴──────┐<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;<span style="color:#888">z-score</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#888">sliding windows</span>&nbsp;&nbsp;(W=30, len=50, step=3)<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;<span style="color:#888">FC matrix</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#888">BOLD std per window</span><br>
-    &nbsp;&nbsp;(200×200)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(W × 200)<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└──────┬──────┘<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f4a261;font-weight:bold">Brain Mode Decomposition</span>&nbsp;&nbsp;(K=16 learnable modes)<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#888">M_kl = v_k · FC · v_l</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;← mode interaction matrix<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#888">A_k(t) = v_k · bold(t)</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;← temporal mode activity<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#888">features: upper-tri(M) ++ std(A)</span>&nbsp;&nbsp;&nbsp;&nbsp;← 136 + 16 = 152 dims<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f4a261;font-weight:bold">Shared Encoder</span>&nbsp;&nbsp;(MLP, hidden_dim=64)<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┌──────┴──────────────┐<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;<span style="color:#2dc653;font-weight:bold">ASD head</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#666">GRL(α) → site head</span><br>
-    &nbsp;&nbsp;<span style="color:#888">minimize CE(ASD)</span>&nbsp;&nbsp;<span style="color:#555">maximize site confusion</span><br>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<br>
-    &nbsp;&nbsp;<span style="color:#e63946">p(ASD)</span>
-  </div>
-
-  <div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px">
-    <div style="background:#111;border-radius:10px;padding:20px;flex:1;min-width:200px">
-      <div style="color:#f4a261;font-weight:700;margin-bottom:10px">Why Brain Modes?</div>
-      <div style="color:#888;font-size:0.85rem;line-height:1.7">
-        200 ROIs → 200×200 FC = 19,900 features.<br>
-        K=16 modes compress this to 152 features while preserving interpretable network structure.<br>
-        Each mode v_k specializes to a brain network (DMN, salience, etc.) — learned end-to-end.
+  <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>
-    <div style="background:#111;border-radius:10px;padding:20px;flex:1;min-width:200px">
-      <div style="color:#f4a261;font-weight:700;margin-bottom:10px">Why Adversarial?</div>
-      <div style="color:#888;font-size:0.85rem;line-height:1.7">
-        Scanner sites have different noise profiles, head coils, and acquisition parameters.<br>
-        The Gradient Reversal Layer (GRL) forces the encoder to learn features that cannot predict which scanner was used — removing site confounds from the ASD signal.
+    <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>
     </div>
-    <div style="background:#111;border-radius:10px;padding:20px;flex:1;min-width:200px">
-      <div style="color:#f4a261;font-weight:700;margin-bottom:10px">Why LOSO Ensemble?</div>
-      <div style="color:#888;font-size:0.85rem;line-height:1.7">
-        4 models, each trained on 3 sites, evaluated on the 4th.<br>
-        At inference we average all 4 predictions — no model ever saw the test subject's scanner site during training.<br>
-        Agreement across models = scanner-independent finding.
+    <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>
     </div>
   </div>
 
-  <div style="background:#111;border-radius:10px;padding:20px">
-    <div style="color:#888;font-size:0.75rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px">Training Details</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 #1a1a1a"><td style="padding:8px 12px;color:#666">Dataset</td><td style="padding:8px 12px;color:#ccc">ABIDE I — 1,102 subjects, 17 sites</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Parcellation</td><td style="padding:8px 12px;color:#ccc">CC200 (Craddock 2012) — 200 ROIs</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Architecture</td><td style="padding:8px 12px;color:#ccc">AdversarialBrainModeNetwork (K=16, hidden=64)</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Regularization</td><td style="padding:8px 12px;color:#ccc">GRL site deconfounding + orthogonality loss on modes</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Validation</td><td style="padding:8px 12px;color:#ccc">LOSO AUC = 0.7872 across 529 held-out subjects</td></tr>
-      <tr><td style="padding:8px 12px;color:#666">Interpretability</td><td style="padding:8px 12px;color:#ccc">Gradient saliency on FC adjacency matrix (real-time)</td></tr>
+      <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>
     </table>
   </div>
 </div>
 """
 
-AMD_HTML = """
+AMD = """
 <div style="padding:8px 0">
-  <div style="color:#f4a261;font-size:0.75rem;text-transform:uppercase;letter-spacing:3px;margin-bottom:20px">
-    AMD Instinct MI300X · Fine-Tuned Clinical LLM
-  </div>
+  <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:16px;flex-wrap:wrap;margin-bottom:24px">
-    <div style="background:#111;border-radius:10px;padding:20px;flex:1;min-width:180px;text-align:center">
-      <div style="font-size:1.8rem;font-weight:800;color:#f4a261">192 GB</div>
-      <div style="color:#555;font-size:0.8rem;margin-top:4px">HBM3 unified memory</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:#111;border-radius:10px;padding:20px;flex:1;min-width:180px;text-align:center">
-      <div style="font-size:1.8rem;font-weight:800;color:#f4a261">bf16</div>
-      <div style="color:#555;font-size:0.8rem;margin-top:4px">No quantization needed</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:#111;border-radius:10px;padding:20px;flex:1;min-width:180px;text-align:center">
-      <div style="font-size:1.8rem;font-weight:800;color:#f4a261">7B</div>
-      <div style="color:#555;font-size:0.8rem;margin-top:4px">Qwen2.5-7B-Instruct</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:#111;border-radius:10px;padding:20px;flex:1;min-width:180px;text-align:center">
-      <div style="font-size:1.8rem;font-weight:800;color:#f4a261">2000</div>
-      <div style="color:#555;font-size:0.8rem;margin-top:4px">Domain-specific training examples</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="background:#111;border-radius:10px;padding:20px;margin-bottom:16px">
-    <div style="color:#888;font-size:0.75rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px">Fine-Tune Configuration</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 #1a1a1a"><td style="padding:8px 12px;color:#666">Base model</td><td style="padding:8px 12px;color:#ccc">Qwen/Qwen2.5-7B-Instruct</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Method</td><td style="padding:8px 12px;color:#ccc">LoRA (r=16, α=32) — all projection layers</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Hardware</td><td style="padding:8px 12px;color:#ccc">AMD Instinct MI300X · ROCm · bf16 (no quantization)</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Dataset</td><td style="padding:8px 12px;color:#ccc">2,000 GCN→clinical report pairs (ASD neuroscience grounded)</td></tr>
-      <tr style="border-bottom:1px solid #1a1a1a"><td style="padding:8px 12px;color:#666">Task</td><td style="padding:8px 12px;color:#ccc">Structured clinical interpretation of GCN ensemble outputs</td></tr>
-      <tr><td style="padding:8px 12px;color:#666">Epochs</td><td style="padding:8px 12px;color:#ccc">3 · cosine LR schedule · batch size 16 (4×4 grad accum)</td></tr>
+      <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>
     </table>
   </div>
 
-  <div style="background:#1a1a2e;border:1px solid #f4a261;border-radius:10px;padding:20px;color:#aaa;font-size:0.88rem;line-height:1.7">
-    <b style="color:#f4a261">Why Qwen2.5-7B and not Llama?</b><br>
-    Qwen is an AMD partner model. Running domain fine-tuning on AMD MI300X hardware with an AMD-aligned model
-    demonstrates the full AMD AI stack — from ROCm training to clinical inference. The 192 GB HBM3 unified memory
-    allows full bf16 fine-tuning without quantization, impossible on consumer GPUs.<br><br>
-    <b style="color:#f4a261">Why domain fine-tuning?</b><br>
-    Base Qwen generates generic medical text. Fine-tuned Qwen interprets the specific output structure of our
-    LOSO GCN ensemble — understanding what "3/4 site-blind models agree" means clinically, grounding its
-    language in ASD neuroscience literature (DMN, salience network, cerebellar-cortical coupling).
+  <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>
+    <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>
   </div>
 </div>
 """
@@ -519,49 +455,46 @@ AMD_HTML = """
 
 css = """
 body { background: #0d0d0d; }
-.gradio-container { max-width: 1000px; margin: auto; }
-.tab-nav button { color: #666 !important; }
-.tab-nav button.selected { color: #fff !important; border-bottom-color: #e63946 !important; }
+.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; }
+footer { display: none !important; }
 """
 
 with gr.Blocks(title="BrainConnect-ASD", css=css, theme=gr.themes.Base()) as demo:
-    gr.HTML(HEADER_HTML)
+    gr.HTML(HEADER)
 
     with gr.Tabs():
-        with gr.Tab("🔬 Analysis"):
-            file_input = gr.File(label="Upload CC200 fMRI file (.1D or .npz)", type="filepath")
-            verdict_html  = gr.HTML()
-            ensemble_html = gr.HTML()
-            gr.HTML("<div style='color:#666;font-size:0.75rem;text-transform:uppercase;letter-spacing:2px;margin:20px 0 8px'>Gradient Saliency — which brain connections drove this prediction</div>")
-            saliency_img  = gr.Image(label="FC Edge Saliency & ROI Importance", type="pil")
-            report_html   = gr.HTML()
-
-            file_input.change(
-                fn=run_gcn,
-                inputs=file_input,
-                outputs=[verdict_html, ensemble_html, report_html, saliency_img],
-            )
+        with gr.Tab("🔬  Analysis"):
+            file_input   = gr.File(label="Upload CC200 fMRI file (.1D or .npz)", type="filepath")
+            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>")
+            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"):
-            gr.HTML(VALIDATION_HTML)
+        with gr.Tab("📊  Validation"):
+            gr.HTML(VALIDATION)
 
-        with gr.Tab("🧠 Architecture"):
-            gr.HTML(ARCHITECTURE_HTML)
+        with gr.Tab("🧠  Architecture"):
+            gr.HTML(ARCHITECTURE)
 
-        with gr.Tab("⚡ AMD MI300X"):
-            gr.HTML(AMD_HTML)
+        with gr.Tab("⚡  AMD MI300X"):
+            gr.HTML(AMD)
 
     gr.HTML("""
-    <div style="text-align:center;padding:32px 0 16px;color:#333;font-size:0.78rem">
-        Adversarial Brain-Mode GCN (k=16) &nbsp;·&nbsp; ABIDE I (1,102 subjects, 17 sites) &nbsp;·&nbsp;
-        Qwen2.5-7B LoRA on AMD Instinct MI300X &nbsp;·&nbsp;
-        <a href="https://github.com/Yatsuiii/Brain-Connectivity-GCN" style="color:#444">GitHub</a>
-    </div>
-    """)
+    <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>""")
 
 print("Preloading models...")
 get_models()
-print("Models ready.")
+print("Ready.")
 
 if __name__ == "__main__":
     demo.launch()