Update app.py

app.py

@@ -1,18 +1,21 @@
-# app.py — VeloBind HF Spaces inference app
-import warnings, time, base64
+# app.py — VeloBind Flask inference app
+# Run locally: python app.py
+# HF Spaces: add a Dockerfile or use the gradio wrapper below
+
+import os, warnings, time, base64, json
 import numpy as np
 import pandas as pd
-import streamlit as st
 import joblib
 import torch
-import matplotlib.pyplot as plt
 from pathlib import Path
+from io import StringIO
+from flask import Flask, request, jsonify, render_template_string
 
 warnings.filterwarnings("ignore")
 from rdkit import RDLogger
 RDLogger.DisableLog('rdApp.*')
 
-# ── Config ────────────────────────────────────────────────────────────
+# ── Config ────────────────────────────────────────────────────
 HF_MODEL_REPO = "ym59/velobind-models"
 MODEL_CACHE   = Path("/tmp/velobind_models")
 SEEDS         = [42, 123, 456]
@@ -27,100 +30,94 @@ from src.features.ligand  import extract_ligand_features
 from src.models.ensemble  import TargetScaler
 from src.config import config
 
+# ── Lazy-loaded globals ───────────────────────────────────────
+_fold_models = _meta = _scaler = _lig_scaler = None
+_tokenizer = _esm_model = _device = None
+_ad_centroid = _ad_threshold = None
+
+
+def get_models():
+    global _fold_models, _meta, _scaler, _lig_scaler
+    if _fold_models is not None:
+        return _fold_models, _meta, _scaler, _lig_scaler
+
+    local_dir  = Path("output/models")
+    local_pre  = Path("output/preprocessors")
+
+    if (local_dir / "meta_type_casf16.pkl").exists():
+        model_dir, preproc_dir = local_dir, local_pre
+    else:
+        from huggingface_hub import hf_hub_download
+        MODEL_CACHE.mkdir(parents=True, exist_ok=True)
+        files = (
+            [f"fold_model_s{s}_{t}_f{f}.pkl"
+             for s in SEEDS for t in MODEL_TYPES for f in range(N_FOLDS)]
+            + ["meta_type_casf16.pkl", "target_scaler.pkl", "ligand_scaler.pkl"]
+        )
+        for fname in files:
+            if not (MODEL_CACHE / fname).exists():
+                hf_hub_download(repo_id=HF_MODEL_REPO, filename=fname,
+                                local_dir=str(MODEL_CACHE))
+        model_dir = preproc_dir = MODEL_CACHE
 
-# ══════════════════════════════════════════════════════════════════════
-# Session state — theme
-# ══════════════════════════════════════════════════════════════════════
-if "dark_mode" not in st.session_state:
-    st.session_state.dark_mode = True
-
-
-# ══════════════════════════════════════════════════════════════════════
-# Validation
-# ══════════════════════════════════════════════════════════════════════
-def validate_sequence(raw: str):
-    raw = raw.strip()
-    if not raw:
-        return None, "Please enter a sequence."
-    lines   = raw.splitlines()
-    seq     = "".join(l.strip() for l in lines if not l.startswith(">")).upper().replace(" ", "")
-    if len(seq) < 10:
-        return None, "Sequence too short (minimum 10 residues)."
-    invalid = set(seq) - VALID_AA
-    if invalid:
-        return None, f"Invalid characters: {', '.join(sorted(invalid))}. Only standard amino acid letters accepted."
-    return seq, None
-
-
-# ══════════════════════════════════════════════════════════════════════
-# Model loading
-# ══════════════════════════════════════════════════════════════════════
-@st.cache_resource(show_spinner="Loading VeloBind models (first run ~30s)...")
-def load_all_models():
-    from huggingface_hub import hf_hub_download
-    MODEL_CACHE.mkdir(parents=True, exist_ok=True)
-    model_files = (
-        [f"fold_model_s{s}_{t}_f{f}.pkl"
-         for s in SEEDS for t in MODEL_TYPES for f in range(N_FOLDS)]
-        + ["meta_type_casf16.pkl", "target_scaler.pkl", "ligand_scaler.pkl"]
-    )
-    bar = st.progress(0, text="Loading models...")
-    for i, fname in enumerate(model_files):
-        if not (MODEL_CACHE / fname).exists():
-            hf_hub_download(repo_id=HF_MODEL_REPO, filename=fname,
-                            local_dir=str(MODEL_CACHE))
-        bar.progress((i + 1) / len(model_files), text=f"Loading {fname}...")
-    bar.empty()
-
-    fold_models = {}
+    _fold_models = {}
     for s in SEEDS:
-        fold_models[s] = {}
+        _fold_models[s] = {}
         for t in MODEL_TYPES:
-            fold_models[s][t] = [
-                joblib.load(MODEL_CACHE / f"fold_model_s{s}_{t}_f{f}.pkl")
+            _fold_models[s][t] = [
+                joblib.load(model_dir / f"fold_model_s{s}_{t}_f{f}.pkl")
                 for f in range(N_FOLDS)
             ]
-    meta   = joblib.load(MODEL_CACHE / "meta_type_casf16.pkl")
-    scaler = joblib.load(MODEL_CACHE / "target_scaler.pkl")
-    lig_sc = joblib.load(MODEL_CACHE / "ligand_scaler.pkl")
-    return fold_models, meta, scaler, lig_sc
-
-
-@st.cache_resource(show_spinner="Loading ESM-2...")
-def load_esm_model():
-    device = "cuda" if torch.cuda.is_available() else "cpu"
-    tokenizer, esm_model = load_esm(config.ESM_MODEL, device)
-    return tokenizer, esm_model, device
-
-
-@st.cache_resource(show_spinner=False)
-def load_ad_centroid():
-    for p in [Path("output/models/deployment"), Path("output/models")]:
+    _meta       = joblib.load(model_dir   / "meta_type_casf16.pkl")
+    _scaler     = joblib.load(model_dir   / "target_scaler.pkl")
+    _lig_scaler = joblib.load(preproc_dir / "ligand_scaler.pkl")
+    return _fold_models, _meta, _scaler, _lig_scaler
+
+
+def get_esm():
+    global _tokenizer, _esm_model, _device
+    if _tokenizer is not None:
+        return _tokenizer, _esm_model, _device
+    _device = "cuda" if torch.cuda.is_available() else "cpu"
+    _tokenizer, _esm_model = load_esm(config.ESM_MODEL, _device)
+    return _tokenizer, _esm_model, _device
+
+
+def get_ad():
+    global _ad_centroid, _ad_threshold
+    if _ad_centroid is not None:
+        return _ad_centroid, _ad_threshold
+    for p in [Path("output/models/deployment"), Path("output/models"), MODEL_CACHE]:
         if (p / "ad_centroid.npy").exists():
-            return np.load(p / "ad_centroid.npy"), float(np.load(p / "ad_threshold.npy"))
-    for fname in ["ad_centroid.npy", "ad_threshold.npy"]:
-        local = MODEL_CACHE / fname
-        if not local.exists():
-            try:
-                from huggingface_hub import hf_hub_download
+            _ad_centroid  = np.load(p / "ad_centroid.npy")
+            _ad_threshold = float(np.load(p / "ad_threshold.npy"))
+            return _ad_centroid, _ad_threshold
+    try:
+        from huggingface_hub import hf_hub_download
+        for fname in ["ad_centroid.npy", "ad_threshold.npy"]:
+            if not (MODEL_CACHE / fname).exists():
                 hf_hub_download(repo_id=HF_MODEL_REPO, filename=fname,
                                 local_dir=str(MODEL_CACHE))
-            except Exception:
-                return None, None
-    return np.load(MODEL_CACHE / "ad_centroid.npy"), float(np.load(MODEL_CACHE / "ad_threshold.npy"))
+        _ad_centroid  = np.load(MODEL_CACHE / "ad_centroid.npy")
+        _ad_threshold = float(np.load(MODEL_CACHE / "ad_threshold.npy"))
+    except Exception:
+        _ad_centroid = _ad_threshold = None
+    return _ad_centroid, _ad_threshold
 
 
-def ad_check(esm_vec, centroid, threshold):
-    if centroid is None:
-        return "UNKNOWN", float("nan")
-    dist = float(np.linalg.norm(esm_vec - centroid))
-    return ("IN DOMAIN" if dist <= threshold else "OUT OF DOMAIN"), dist
+# ── Helpers ───────────────────────────────────────────────────
+def validate_sequence(raw):
+    lines = raw.strip().splitlines()
+    seq   = "".join(l.strip() for l in lines if not l.startswith(">")).upper().replace(" ","")
+    if len(seq) < 10:
+        return None, "Sequence too short (minimum 10 residues)."
+    bad = set(seq) - VALID_AA
+    if bad:
+        return None, f"Invalid characters: {', '.join(sorted(bad))}."
+    return seq, None
 
 
-# ══════════════════════════════════════════════════════════════════════
-# Features + prediction
-# ══════════════════════════════════════════════════════════════════════
-def assemble_from_parts(esm_mean, esm_var, esm_attn, seq_feat, lig_feats):
+def assemble(esm_mean, esm_var, esm_attn, seq_feat, lig_feats):
     return np.concatenate([
         esm_mean[:, -480:], seq_feat,
         lig_feats["ecfp"], lig_feats["ecfp2"], lig_feats["ecfp6"], lig_feats["fcfp"],
@@ -129,13 +126,13 @@ def assemble_from_parts(esm_mean, esm_var, esm_attn, seq_feat, lig_feats):
     ], axis=1)
 
 
-def extract_features(sequence, smiles_list, tokenizer, esm_model, device, lig_scaler):
+def extract_features(sequence, smiles_list, lig_scaler):
+    tok, esm, dev = get_esm()
     esm_mean, esm_var, esm_attn, _ = embed_batch(
-        [sequence], tokenizer, esm_model,
+        [sequence], tok, esm,
         config.ESM_LAYERS, config.MAX_SEQ_LEN, config.HALF_SEQ_LEN,
-        batch_size=1, device=device,
-    )
-    seq_feat   = np.array([sequence_features(sequence)])
+        batch_size=1, device=dev)
+    seq_feat = np.array([sequence_features(sequence)])
     lig_feats, valid_mask, _ = extract_ligand_features(
         smiles_list, scaler=lig_scaler, fit_scaler=False)
     valid_mask = np.array(valid_mask)
@@ -144,13 +141,13 @@ def extract_features(sequence, smiles_list, tokenizer, esm_model, device, lig_sc
         bm[valid_mask] = True
         valid_mask = bm
     n = int(valid_mask.sum())
-    X = assemble_from_parts(
-        np.tile(esm_mean, (n, 1)), np.tile(esm_var, (n, 1)),
-        np.tile(esm_attn, (n, 1)), np.tile(seq_feat, (n, 1)), lig_feats)
+    X = assemble(
+        np.tile(esm_mean,(n,1)), np.tile(esm_var,(n,1)),
+        np.tile(esm_attn,(n,1)), np.tile(seq_feat,(n,1)), lig_feats)
     return X, valid_mask, esm_mean[0]
 
 
-def predict(X, fold_models, meta, scaler):
+def run_predict(X, fold_models, meta, scaler):
     type_avgs = []
     for s in SEEDS:
         for t in MODEL_TYPES:
@@ -159,530 +156,650 @@ def predict(X, fold_models, meta, scaler):
             type_avgs.append(fp.mean(axis=1))
     preds_all = np.stack(type_avgs, axis=1)
     preds = meta.predict(np.column_stack([
-        preds_all[:, [0,3,6]].mean(1),
-        preds_all[:, [1,4,7]].mean(1),
-        preds_all[:, [2,5,8]].mean(1),
+        preds_all[:,[0,3,6]].mean(1),
+        preds_all[:,[1,4,7]].mean(1),
+        preds_all[:,[2,5,8]].mean(1),
     ]))
-    return preds, preds_all
-
-
-def uncertainty_interval(preds_all, z=1.96):
     std = preds_all.std(axis=1)
-    return preds_all.mean(axis=1) - z * std, preds_all.mean(axis=1) + z * std
+    return preds, preds_all.mean(1) - 1.96*std, preds_all.mean(1) + 1.96*std
 
 
 def format_ki(pkd):
-    ki_nM = 10 ** (9 - pkd)
-    if ki_nM < 1000:       return f"{ki_nM:.1f} nM"
-    elif ki_nM < 1_000_000: return f"{ki_nM/1000:.2f} uM"
-    else:                   return f"{ki_nM/1_000_000:.2f} mM"
-
-
-# ══════════════════════════════════════════════════════════════════════
-# Plot
-# ══════════════════════════════════════════════════════════════════════
-def bar_chart(names, preds, lo, hi, title, dark=True):
-    bg, fg, gc = ("#1a2332", "#e8edf2", "#2d3f55") if dark else ("#f8fafc", "#1a202c", "#cbd5e0")
-    fig, ax = plt.subplots(figsize=(max(6, len(names) * 0.9), 4), facecolor=bg)
-    ax.set_facecolor(bg)
-    x   = np.arange(len(names))
-    err = [preds - lo, hi - preds]
-    bars = ax.bar(x, preds, color="#3b82f6", alpha=0.9, width=0.6,
-                  yerr=err, capsize=5, error_kw=dict(ecolor=fg, lw=1.5))
-    ax.set_xticks(x)
-    ax.set_xticklabels(names, rotation=30, ha='right', fontsize=10, color=fg)
-    ax.set_ylabel("Predicted pKd", fontsize=11, color=fg)
-    ax.set_title(title, fontsize=12, fontweight='bold', color=fg)
-    ax.tick_params(colors=fg)
-    for spine in ax.spines.values():
-        spine.set_color(gc)
-    ax.grid(True, axis='y', alpha=0.3, color=gc)
-    for bar, val in zip(bars, preds):
-        ax.text(bar.get_x() + bar.get_width() / 2,
-                bar.get_height() + 0.05, f"{val:.2f}",
-                ha='center', va='bottom', fontsize=9, fontweight='bold', color=fg)
-    plt.tight_layout()
-    return fig
-
-
-# ══════════════════════════════════════════════════════════════════════
-# Page layout
-# ══════════════════════════════════════════════════════════════════════
-st.set_page_config(page_title="VeloBind", layout="wide")
-
-dark = st.session_state.dark_mode
-
-# ── Theme-aware CSS (only custom elements, never .stApp) ──────────────
-if dark:
-    card_bg, card_border = "#1a2332", "#2d4a6b"
-    val_col, lab_col     = "#60a5fa", "#94a3b8"
-    banner_grad          = "linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%)"
-    banner_sub           = "#93c5fd"
-    logo_bg              = "rgba(255,255,255,0.12)"
-    logo_border          = "rgba(255,255,255,0.2)"
-    toggle_bg            = "#1e3a5f"
-    toggle_knob          = "#60a5fa"
-    toggle_label         = "#93c5fd"
-else:
-    card_bg, card_border = "#f0f7ff", "#bfdbfe"
-    val_col, lab_col     = "#1d4ed8", "#475569"
-    banner_grad          = "linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%)"
-    banner_sub           = "#dbeafe"
-    logo_bg              = "rgba(255,255,255,0.85)"
-    logo_border          = "rgba(255,255,255,0.9)"
-    toggle_bg            = "#93c5fd"
-    toggle_knob          = "#1d4ed8"
-    toggle_label         = "#dbeafe"
-
-ad_css = """
-.ad-in  { background:#064e3b; border:1px solid #059669; color:#34d399;
-          border-radius:20px; padding:0.3rem 1rem; font-weight:700; display:inline-block; font-size:0.9rem; }
-.ad-out { background:#450a0a; border:1px solid #dc2626; color:#f87171;
-          border-radius:20px; padding:0.3rem 1rem; font-weight:700; display:inline-block; font-size:0.9rem; }
-.ad-unk { background:#1e293b; border:1px solid #475569; color:#94a3b8;
-          border-radius:20px; padding:0.3rem 1rem; font-weight:700; display:inline-block; font-size:0.9rem; }
-"""
-
-def load_img_b64(path):
-    with open(path, "rb") as f:
-        return base64.b64encode(f.read()).decode()
-
-logo_b64 = load_img_b64("logo.png")
-
-st.markdown(f"""
+    ki = 10 ** (9 - pkd)
+    if ki < 1000:         return f"{ki:.1f} nM"
+    elif ki < 1_000_000:  return f"{ki/1000:.2f} µM"
+    else:                 return f"{ki/1_000_000:.2f} mM"
+
+
+def ad_label(esm_vec):
+    c, t = get_ad()
+    if c is None: return "UNKNOWN"
+    dist = float(np.linalg.norm(esm_vec[-480:] - c))
+    return "IN DOMAIN" if dist <= t else "OUT OF DOMAIN"
+
+
+def load_logo_b64():
+    for ext in ["png", "svg"]:
+        p = Path(f"logo.{ext}")
+        if p.exists():
+            with open(p,"rb") as f:
+                b64 = base64.b64encode(f.read()).decode()
+            mime = "image/png" if ext=="png" else "image/svg+xml"
+            return f"data:{mime};base64,{b64}"
+    return ""
+
+LOGO_URI = load_logo_b64()
+
+# ── HTML template ─────────────────────────────────────────────
+HTML = r"""<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+<title>VeloBind</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
-{ad_css}
-.vb-banner {{
-    background: {banner_grad};
-    border-radius: 16px;
-    padding: 1.2rem 1.8rem;
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    margin-bottom: 0.5rem;
-    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
-    position: relative;
-}}
-.vb-logo-wrap {{
-    background: {logo_bg};
-    border: 1px solid {logo_border};
-    border-radius: 14px;
-    padding: 0.6rem;
-    backdrop-filter: blur(8px);
-    flex-shrink: 0;
-}}
-.vb-logo-wrap img {{
-    height: 110px;
-    width: auto;
-    display: block;
-}}
-.vb-title-wrap {{
-    flex: 1;
-}}
-.vb-title-wrap h1 {{
-    color: #ffffff;
-    font-size: 2.4rem;
-    font-weight: 800;
-    margin: 0 0 0.3rem 0;
-    letter-spacing: -0.5px;
-}}
-.vb-title-wrap p {{
-    color: {banner_sub};
-    font-size: 0.92rem;
-    margin: 0;
-    line-height: 1.6;
-}}
-.vb-toggle-wrap {{
-    position: absolute;
-    top: 1rem;
-    right: 1.2rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}}
-.vb-toggle-label {{
-    color: {toggle_label};
-    font-size: 0.78rem;
-    font-weight: 600;
-    letter-spacing: 0.03em;
-}}
-.metric-card {{
-    background: {card_bg};
-    border: 1px solid {card_border};
-    border-radius: 12px;
-    padding: 1.1rem;
-    text-align: center;
-    transition: box-shadow 0.2s;
-}}
-.metric-card:hover {{
-    box-shadow: 0 4px 16px rgba(59,130,246,0.15);
-}}
-.metric-val {{
-    font-size: 1.9rem;
-    font-weight: 700;
-    color: {val_col};
-    line-height: 1.2;
-}}
-.metric-lab {{
-    font-size: 0.75rem;
-    color: {lab_col};
-    margin-top: 0.35rem;
-    line-height: 1.4;
-}}
-@media (max-width: 640px) {{
-    .vb-banner {{
-        flex-direction: column;
-        text-align: center;
-        padding: 1rem;
-    }}
-    .vb-logo-wrap img {{
-        height: 80px;
-    }}
-    .vb-title-wrap h1 {{
-        font-size: 1.6rem;
-    }}
-    .vb-title-wrap p {{
-        font-size: 0.78rem;
-    }}
-    .vb-toggle-wrap {{
-        position: static;
-        justify-content: center;
-        margin-top: 0.5rem;
-    }}
-}}
+:root[data-theme="dark"] {
+  --bg:#080c14; --surface:#0f1623; --surface2:#162030; --surface3:#1c2a3f;
+  --border:#1e3050; --border2:#243a56;
+  --text:#e8edf5; --text2:#8ba4c0; --text3:#4d6a87;
+  --accent:#3b82f6; --accent2:#60a5fa; --accent-glow:rgba(59,130,246,0.18);
+  --green:#22c55e; --red:#ef4444; --amber:#f59e0b;
+  --card-shadow:0 4px 24px rgba(0,0,0,0.4); --input-bg:#0f1623;
+}
+:root[data-theme="light"] {
+  --bg:#f0f4fa; --surface:#fff; --surface2:#f5f8ff; --surface3:#eaf0fb;
+  --border:#d0dce8; --border2:#b8ccd8;
+  --text:#0d1b2a; --text2:#4a6480; --text3:#8aa3bc;
+  --accent:#1d5cbf; --accent2:#2563eb; --accent-glow:rgba(29,92,191,0.12);
+  --green:#16a34a; --red:#dc2626; --amber:#d97706;
+  --card-shadow:0 4px 24px rgba(0,0,0,0.08); --input-bg:#fff;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth}
+body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;
+  font-size:15px;line-height:1.6;min-height:100vh;transition:background .3s,color .3s}
+::selection{background:var(--accent);color:#fff}
+
+.wrap{max-width:1100px;margin:0 auto;padding:0 20px 60px}
+
+/* HEADER */
+.header{padding:24px 0 20px;display:flex;align-items:center;gap:18px;
+  border-bottom:1px solid var(--border);margin-bottom:28px;flex-wrap:wrap}
+.logo-wrap{background:#fff;border-radius:12px;padding:7px;flex-shrink:0;
+  box-shadow:0 2px 12px rgba(0,0,0,0.15)}
+.logo-wrap img{height:64px;width:auto;display:block}
+.header-text{flex:1;min-width:180px}
+.header-text h1{font-family:'Syne',sans-serif;font-size:clamp(1.5rem,3.5vw,2.2rem);
+  font-weight:800;letter-spacing:-1px;color:var(--text);line-height:1.1}
+.header-text h1 span{color:var(--accent2)}
+.header-text p{font-size:.78rem;color:var(--text2);margin-top:5px;
+  font-family:'DM Mono',monospace;letter-spacing:.02em}
+.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.badge{font-family:'DM Mono',monospace;font-size:.68rem;font-weight:500;
+  padding:3px 9px;border-radius:5px;border:1px solid var(--border2);
+  color:var(--text2);background:var(--surface2);white-space:nowrap}
+.badge.green{border-color:var(--green);color:var(--green);background:rgba(34,197,94,.08)}
+
+/* THEME BUTTON */
+.theme-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text);
+  border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;
+  font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;
+  gap:6px;transition:all .2s;white-space:nowrap}
+.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
+.theme-btn svg{width:14px;height:14px}
+
+/* TABS */
+.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);
+  border-radius:13px;padding:4px;margin-bottom:24px;overflow-x:auto;
+  -webkit-overflow-scrolling:touch}
+.tab-btn{flex:1;min-width:110px;padding:9px 14px;border:none;border-radius:9px;
+  background:transparent;color:var(--text2);font-size:.8rem;font-weight:600;
+  font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;
+  white-space:nowrap;text-align:center}
+.tab-btn:hover{color:var(--text);background:var(--surface2)}
+.tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}
+.tab-panel{display:none}
+.tab-panel.active{display:block;animation:fadeUp .25s ease}
+@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+
+/* CARD */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
+  padding:20px;box-shadow:var(--card-shadow);transition:background .3s,border-color .3s}
+.card+.card{margin-top:14px}
+.card-title{font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;
+  letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
+
+/* GRID */
+.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+@media(max-width:640px){.grid-2{grid-template-columns:1fr}}
+.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
+@media(max-width:700px){.metric-grid{grid-template-columns:repeat(2,1fr)}}
+
+/* FORM */
+label{display:block;font-size:.74rem;font-weight:600;color:var(--text2);
+  margin-bottom:7px;letter-spacing:.04em;text-transform:uppercase}
+textarea,input[type=text],input[type=number]{width:100%;background:var(--input-bg);
+  border:1.5px solid var(--border);border-radius:11px;color:var(--text);
+  font-family:'DM Mono',monospace;font-size:.82rem;padding:11px 13px;
+  resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none}
+textarea{min-height:120px}
+textarea:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
+
+/* BUTTONS */
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
+  padding:11px 24px;border-radius:11px;border:none;font-family:'DM Sans',sans-serif;
+  font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s}
+.btn-primary{background:var(--accent);color:#fff;width:100%;margin-top:16px;
+  padding:13px;font-size:.92rem;box-shadow:0 4px 14px var(--accent-glow)}
+.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
+.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
+.btn-outline{background:var(--surface2);border:1px solid var(--border2);
+  color:var(--text);padding:7px 14px;font-size:.78rem}
+.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
+
+/* EXAMPLE PILLS */
+.examples{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
+.ex-pill{font-size:.72rem;font-family:'DM Mono',monospace;padding:3px 9px;
+  border-radius:5px;border:1px solid var(--border2);background:var(--surface2);
+  color:var(--text2);cursor:pointer;transition:all .15s}
+.ex-pill:hover{border-color:var(--accent);color:var(--accent)}
+
+/* FILE DROP */
+.file-drop{border:2px dashed var(--border2);border-radius:11px;padding:20px;
+  text-align:center;cursor:pointer;transition:all .2s;background:var(--surface2);
+  color:var(--text2);font-size:.82rem}
+.file-drop:hover,.file-drop.drag{border-color:var(--accent);color:var(--accent);
+  background:var(--accent-glow)}
+.file-drop input{display:none}
+
+/* SPINNER */
+.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.3);
+  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* RESULTS */
+.results{display:none;margin-top:20px}
+.results.show{display:block;animation:fadeUp .3s ease}
+
+/* METRIC CARDS */
+.metric{background:var(--surface2);border:1px solid var(--border);
+  border-radius:13px;padding:14px;text-align:center}
+.metric-val{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;
+  color:var(--accent2);line-height:1.1;margin-bottom:3px}
+.metric-lab{font-size:.67rem;color:var(--text3);text-transform:uppercase;
+  letter-spacing:.06em;font-weight:600}
+
+/* AD BADGES */
+.ad-badge{display:inline-block;padding:4px 12px;border-radius:999px;
+  font-size:.7rem;font-weight:700;font-family:'DM Mono',monospace;
+  letter-spacing:.04em;text-transform:uppercase}
+.ad-in {background:rgba(34,197,94,.1); border:1px solid var(--green);color:var(--green)}
+.ad-out{background:rgba(239,68,68,.1); border:1px solid var(--red);  color:var(--red)}
+.ad-unk{background:rgba(77,106,135,.1);border:1px solid var(--text3);color:var(--text3)}
+
+.inf-caption{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--text3);margin-top:10px}
+
+.warn-box{background:rgba(245,158,11,.08);border:1px solid var(--amber);border-radius:11px;
+  padding:10px 14px;color:var(--amber);font-size:.8rem;margin-top:10px;display:none}
+
+/* TABLE */
+.tbl-wrap{overflow-x:auto;margin-top:14px;border-radius:11px;border:1px solid var(--border)}
+table{width:100%;border-collapse:collapse;font-size:.8rem}
+thead{background:var(--surface2)}
+th{text-align:left;padding:9px 13px;font-size:.67rem;font-weight:700;
+  text-transform:uppercase;letter-spacing:.06em;color:var(--text3);white-space:nowrap}
+td{padding:9px 13px;border-top:1px solid var(--border);font-family:'DM Mono',monospace;
+  font-size:.78rem;color:var(--text)}
+tr:hover td{background:var(--surface2)}
+.pkd-val{color:var(--accent2);font-weight:600}
+
+.download-wrap{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
+
+/* LOADING OVERLAY */
+.overlay{display:none;position:fixed;inset:0;background:rgba(8,12,20,.75);
+  backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center;
+  flex-direction:column;gap:14px}
+.overlay.show{display:flex}
+.ov-spinner{width:42px;height:42px;border:3px solid rgba(59,130,246,.2);
+  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
+.ov-text{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--text2)}
+
+/* FOOTER */
+footer{border-top:1px solid var(--border);padding:20px 0 0;margin-top:44px;
+  text-align:center;font-size:.72rem;color:var(--text3);font-family:'DM Mono',monospace}
+footer span{color:var(--text2)}
 </style>
-""", unsafe_allow_html=True)
+</head>
+<body>
 
-# ── Banner ────────────────────────────────────────────────────────────
-toggle_icon = "☀" if dark else "☾"
-toggle_text = "Light mode" if dark else "Dark mode"
+<div id="overlay" class="overlay">
+  <div class="ov-spinner"></div>
+  <div class="ov-text" id="ov-text">Running inference...</div>
+</div>
 
-st.markdown(f"""
-<div class="vb-banner">
-    <div class="vb-logo-wrap">
-        <img src="data:image/png;base64,{logo_b64}" alt="VeloBind"/>=
+<div class="wrap">
+  <header class="header">
+    <div class="logo-wrap"><img src="{{ logo_uri }}" alt="VeloBind"></div>
+    <div class="header-text">
+      <h1>Velo<span>Bind</span></h1>
+      <p>R = 0.8469 on CASF-2016 &nbsp;·&nbsp; 45-model ensemble &nbsp;·&nbsp; sequence + SMILES only</p>
     </div>
-    <div class="vb-title-wrap">
-        <h1>VeloBind</h1>
-        <p>
-            Structure-free protein-ligand binding affinity prediction &nbsp;&middot;&nbsp;
-            Sequence + SMILES &nbsp;&middot;&nbsp;
-            Pearson R = 0.8469 on CASF-2016 &nbsp;&middot;&nbsp;
-            45-model ensemble (LGBM + CatBoost + XGBoost)
-        </p>
+    <div class="header-right">
+      <span class="badge green">No 3D structure</span>
+      <span class="badge" id="dev-badge">CPU</span>
+      <button class="theme-btn" onclick="toggleTheme()">
+        <svg id="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"></svg>
+        <span id="t-label">Light mode</span>
+      </button>
     </div>
+  </header>
+
+  <div class="tabs">
+    <button class="tab-btn active" onclick="switchTab(0)">Single Query</button>
+    <button class="tab-btn" onclick="switchTab(1)">Batch Screening</button>
+    <button class="tab-btn" onclick="switchTab(2)">Selectivity Profile</button>
+  </div>
+
+  <!-- ═══ TAB 0 ═══════════════════════════════════════════════ -->
+  <div class="tab-panel active" id="tab-0">
+    <div class="grid-2">
+      <div class="card">
+        <div class="card-title">Protein</div>
+        <label>Sequence — plain or FASTA</label>
+        <textarea id="sq-seq" placeholder=">ProteinName&#10;MKTAYIAKQRQISFVK..."></textarea>
+      </div>
+      <div class="card">
+        <div class="card-title">Ligand</div>
+        <label>SMILES</label>
+        <input type="text" id="sq-smi" placeholder="CC(=O)Oc1ccccc1C(=O)O">
+        <div style="margin-top:10px">
+          <div class="card-title">Quick examples</div>
+          <div class="examples">
+            <span class="ex-pill" onclick="setSmi('CC(=O)Oc1ccccc1C(=O)O')">Aspirin</span>
+            <span class="ex-pill" onclick="setSmi('Cc1ccc(NC(=O)c2ccc(CN3CCN(C)CC3)cc2)cc1Nc1nccc(-c2cccnc2)n1')">Imatinib</span>
+            <span class="ex-pill" onclick="setSmi('COc1cc2ncnc(Nc3ccc(F)c(Cl)c3)c2cc1OCCCN1CCOCC1')">Gefitinib</span>
+            <span class="ex-pill" onclick="setSmi('C[C@@H]1CCCN2C(=O)c3[nH]c4ccccc4c3C2=N1')">Staurosporine</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button class="btn btn-primary" id="sq-btn" onclick="runSingle()">
+      <span id="sq-txt">Predict binding affinity</span>
+    </button>
+    <div class="warn-box" id="sq-warn"></div>
+    <div class="results" id="sq-res">
+      <div class="metric-grid">
+        <div class="metric"><div class="metric-val" id="sq-pkd">—</div><div class="metric-lab">Predicted pKd</div></div>
+        <div class="metric"><div class="metric-val" id="sq-ci" style="font-size:1.1rem">—</div><div class="metric-lab">95% interval</div></div>
+        <div class="metric"><div class="metric-val" id="sq-ki">—</div><div class="metric-lab">Estimated Ki</div></div>
+        <div class="metric">
+          <div class="metric-val" style="font-size:0;padding-top:8px">
+            <span class="ad-badge ad-unk" id="sq-ad">—</span>
+          </div>
+          <div class="metric-lab" style="margin-top:7px">Applicability domain</div>
+        </div>
+      </div>
+      <div class="inf-caption" id="sq-cap"></div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB 1 ═══════════════════════════════════════════════ -->
+  <div class="tab-panel" id="tab-1">
+    <div class="grid-2">
+      <div class="card">
+        <div class="card-title">Target protein</div>
+        <label>Sequence — plain or FASTA</label>
+        <textarea id="bs-seq" placeholder=">Target&#10;MKTAYIAKQRQISFVK..."></textarea>
+      </div>
+      <div class="card">
+        <div class="card-title">Compound library</div>
+        <label>CSV with <code style="color:var(--accent2)">smiles</code> column (+ optional <code style="color:var(--accent2)">name</code>)</label>
+        <div class="file-drop" id="bs-drop" onclick="document.getElementById('bs-file').click()"
+             ondragover="event.preventDefault();this.classList.add('drag')"
+             ondragleave="this.classList.remove('drag')"
+             ondrop="handleDrop(event,'bs-file','bs-lbl')">
+          <input type="file" id="bs-file" accept=".csv" onchange="fileSel(this,'bs-lbl')">
+          <div id="bs-lbl">Drop CSV here or click to upload</div>
+        </div>
+        <div style="margin-top:10px">
+          <label>Max compounds</label>
+          <input type="number" id="bs-max" value="100" min="1" max="500">
+        </div>
+      </div>
+    </div>
+    <button class="btn btn-primary" id="bs-btn" onclick="runBatch()">
+      <span id="bs-txt">Run batch screening</span>
+    </button>
+    <div class="warn-box" id="bs-warn"></div>
+    <div class="results" id="bs-res">
+      <div class="card" style="margin-top:0">
+        <div class="card-title">Ranked results</div>
+        <div class="tbl-wrap">
+          <table>
+            <thead><tr><th>#</th><th>Name</th><th>pKd</th><th>CI lo</th><th>CI hi</th><th>Ki</th><th>Std</th><th>AD</th></tr></thead>
+            <tbody id="bs-body"></tbody>
+          </table>
+        </div>
+        <div class="download-wrap">
+          <button class="btn btn-outline" onclick="dlCSV('bs')">Download CSV</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB 2 ═══════════════════════════════════════════════ -->
+  <div class="tab-panel" id="tab-2">
+    <div class="grid-2">
+      <div class="card">
+        <div class="card-title">Compound</div>
+        <label>SMILES</label>
+        <input type="text" id="sp-smi" placeholder="Cc1ccc(NC(=O)...)cc1...">
+        <div style="margin-top:10px">
+          <div class="card-title">Examples</div>
+          <div class="examples">
+            <span class="ex-pill" onclick="document.getElementById('sp-smi').value='Cc1ccc(NC(=O)c2ccc(CN3CCN(C)CC3)cc2)cc1Nc1nccc(-c2cccnc2)n1'">Imatinib</span>
+            <span class="ex-pill" onclick="document.getElementById('sp-smi').value='COc1cc2ncnc(Nc3ccc(F)c(Cl)c3)c2cc1OCCCN1CCOCC1'">Gefitinib</span>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-title">Target proteins</div>
+        <label>One per line — <code style="color:var(--accent2)">Name: SEQUENCE</code></label>
+        <textarea id="sp-seqs" style="min-height:160px"
+          placeholder="ABL1: MGPSENDPNLFVALY...&#10;EGFR: MRPSGTAGAALLALL...&#10;CDK2: MENFQKVEKIGEGTY..."></textarea>
+      </div>
+    </div>
+    <button class="btn btn-primary" id="sp-btn" onclick="runSelectivity()">
+      <span id="sp-txt">Run selectivity profiling</span>
+    </button>
+    <div class="warn-box" id="sp-warn"></div>
+    <div class="results" id="sp-res">
+      <div class="card" style="margin-top:0">
+        <div class="card-title">Selectivity profile</div>
+        <div class="tbl-wrap">
+          <table>
+            <thead><tr><th>#</th><th>Target</th><th>pKd</th><th>CI lo</th><th>CI hi</th><th>Ki</th><th>Std</th><th>AD</th></tr></thead>
+            <tbody id="sp-body"></tbody>
+          </table>
+        </div>
+        <div class="download-wrap">
+          <button class="btn btn-outline" onclick="dlCSV('sp')">Download CSV</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer>
+    <p><span>VeloBind</span> &nbsp;·&nbsp; ESM-2 + GBM ensemble &nbsp;·&nbsp;
+    LP-PDBBind training &nbsp;·&nbsp; CASF-2016/2013 &nbsp;·&nbsp;
+    <span>Not for clinical use</span></p>
+  </footer>
 </div>
-""", unsafe_allow_html=True)
-
-# Theme toggle — just below banner, right-aligned
-_, tcol = st.columns([6, 1])
-with tcol:
-    if st.button(f"{toggle_icon}  {toggle_text}", use_container_width=True):
-        st.session_state.dark_mode = not st.session_state.dark_mode
-        st.rerun()
-
-# ── Load models ───────────────────────────────────────────────────────
-fold_models, meta, target_scaler, lig_scaler = load_all_models()
-tokenizer, esm_model, device                 = load_esm_model()
-ad_centroid, ad_threshold                    = load_ad_centroid()
-n_loaded = sum(len(fold_models[s][t]) for s in SEEDS for t in MODEL_TYPES)
-st.success(f"{n_loaded} fold models loaded  |  Device: {device.upper()}")
-
-# ── Mode tabs ─────────────────────────────────────────────────────────
-tab1, tab2, tab3 = st.tabs([
-    "Single query",
-    "Batch screening (CSV)",
-    "One compound vs. multiple targets",
-])
-
-
-# ══════════════════════════════════════════════════════════════════════
-# TAB 1 — Single query
-# ══════════════════════════════════════════════════════════════════════
-with tab1:
-    col_p, col_l = st.columns(2)
-    with col_p:
-        st.subheader("Protein")
-        seq_raw = st.text_area(
-            "Amino acid sequence (plain or FASTA format)",
-            height=160,
-            placeholder=">ProteinName\nMKTAYIAKQRQISFVK...",
-            help="Plain sequence or FASTA with >header line. Only standard amino acid letters (A-Z subset).",
-            key="sq_seq"
-        )
-    with col_l:
-        st.subheader("Ligand")
-        smi = st.text_input("SMILES", placeholder="CC(=O)Oc1ccccc1C(=O)O", key="sq_smi")
-        examples = {
-            "Aspirin":       "CC(=O)Oc1ccccc1C(=O)O",
-            "Imatinib":      "Cc1ccc(NC(=O)c2ccc(CN3CCN(C)CC3)cc2)cc1Nc1nccc(-c2cccnc2)n1",
-            "Gefitinib":     "COc1cc2ncnc(Nc3ccc(F)c(Cl)c3)c2cc1OCCCN1CCOCC1",
-            "Staurosporine": "C[C@@H]1CCCN2C(=O)c3[nH]c4ccccc4c3C2=N1",
-        }
-        chosen = st.selectbox("Load example SMILES", ["—"] + list(examples), key="sq_ex")
-        if chosen != "—":
-            smi = examples[chosen]
-
-    if st.button("Predict", type="primary", use_container_width=True, key="sq_btn"):
-        seq, err = validate_sequence(seq_raw)
-        if err:
-            st.error(err)
-        elif not smi.strip():
-            st.error("Please enter a SMILES string.")
-        else:
-            with st.spinner("Running inference..."):
-                t0 = time.time()
-                try:
-                    X, valid, esm_vec = extract_features(
-                        seq, [smi.strip()], tokenizer, esm_model, device, lig_scaler)
-                    if not valid.any():
-                        st.error("RDKit could not parse this SMILES.")
-                    else:
-                        preds, preds_all = predict(X, fold_models, meta, target_scaler)
-                        lo, hi  = uncertainty_interval(preds_all)
-                        elapsed = time.time() - t0
-                        pkd     = float(preds[0])
-                        ad_label, _ = ad_check(esm_vec[-480:], ad_centroid, ad_threshold)
-
-                        st.markdown("#### Results")
-                        c1, c2, c3, c4 = st.columns(4)
-                        with c1:
-                            st.markdown(f"""<div class="metric-card">
-                                <div class="metric-val">{pkd:.2f}</div>
-                                <div class="metric-lab">Predicted pKd</div>
-                            </div>""", unsafe_allow_html=True)
-                        with c2:
-                            st.markdown(f"""<div class="metric-card">
-                                <div class="metric-val">[{lo[0]:.2f}, {hi[0]:.2f}]</div>
-                                <div class="metric-lab">95% model interval<br>(±1.96σ · 45 models)</div>
-                            </div>""", unsafe_allow_html=True)
-                        with c3:
-                            st.markdown(f"""<div class="metric-card">
-                                <div class="metric-val">{format_ki(pkd)}</div>
-                                <div class="metric-lab">Estimated Ki<br>(pKd ≈ pKi assumed)</div>
-                            </div>""", unsafe_allow_html=True)
-                        with c4:
-                            ad_cls = ("ad-in"  if ad_label == "IN DOMAIN" else
-                                      "ad-out" if ad_label == "OUT OF DOMAIN" else "ad-unk")
-                            st.markdown(f"""<div class="metric-card">
-                                <div style="padding-top:0.4rem">
-                                    <span class="{ad_cls}">{ad_label}</span>
-                                </div>
-                                <div class="metric-lab" style="margin-top:0.6rem">Applicability domain</div>
-                            </div>""", unsafe_allow_html=True)
-
-                        if ad_label == "OUT OF DOMAIN":
-                            st.warning("Protein is outside the training distribution. Predictions may be unreliable.")
-
-                        st.caption(
-                            f"Inference time: {elapsed:.2f}s  |  "
-                            f"45-model ensemble (3 seeds x 3 types x 5 folds)  |  "
-                            f"Device: {device.upper()}"
-                        )
-
-                        with st.expander("Per-model breakdown"):
-                            labels = [f"s{s}_{t}" for s in SEEDS for t in MODEL_TYPES]
-                            fig = bar_chart(
-                                labels, preds_all[0],
-                                preds_all[0] - preds_all[0].std(),
-                                preds_all[0] + preds_all[0].std(),
-                                "Per-seed and model-type predictions (fold-averaged)",
-                                dark=dark,
-                            )
-                            st.pyplot(fig, use_container_width=True)
-                            plt.close(fig)
-
-                except Exception as e:
-                    st.error(f"Inference error: {e}")
-                    st.exception(e)
-
-
-# ══════════════════════════════════════════════════════════════════════
-# TAB 2 — Batch screening
-# ══════════════════════════════════════════════════════════════════════
-with tab2:
-    st.subheader("Batch Screening")
-    st.markdown("Screen a library of compounds against one target. "
-                "Upload a CSV with a `smiles` column (and optionally `name`). "
-                "Results are ranked by predicted pKd.")
-
-    col_seq, col_csv = st.columns(2)
-    with col_seq:
-        batch_seq_raw = st.text_area("Target protein sequence (plain or FASTA)", height=180,
-                                     placeholder=">Target\nMKTAYIAKQRQISFVK...", key="bs_seq")
-    with col_csv:
-        uploaded = st.file_uploader("Compound CSV (smiles, name)", type=["csv"], key="bs_up")
-        st.code("smiles,name\nCC(=O)Oc1ccccc1C(=O)O,Aspirin", language="csv")
-
-    max_cpds = st.slider("Max compounds", 10, 500, 100, key="bs_max",
-                         help="~1s per compound on CPU free tier.")
-
-    if st.button("Run batch screening", type="primary", use_container_width=True, key="bs_btn"):
-        batch_seq, err = validate_sequence(batch_seq_raw)
-        if err:
-            st.error(err)
-        elif uploaded is None:
-            st.error("Please upload a CSV file.")
-        else:
-            df_in = pd.read_csv(uploaded)
-            if 'smiles' not in df_in.columns:
-                st.error("CSV must have a 'smiles' column.")
-                st.stop()
-
-            df_in       = df_in.head(max_cpds)
-            smiles_list = df_in['smiles'].tolist()
-            names_list  = (df_in['name'].tolist() if 'name' in df_in.columns
-                           else [f"cpd_{i}" for i in range(len(df_in))])
-
-            with st.spinner(f"Screening {len(smiles_list)} compounds..."):
-                t0 = time.time()
-                X, valid, esm_vec = extract_features(
-                    batch_seq, smiles_list, tokenizer, esm_model, device, lig_scaler)
-                ad_label, _ = ad_check(esm_vec[-480:], ad_centroid, ad_threshold)
-                preds, preds_all = predict(X, fold_models, meta, target_scaler)
-                lo, hi  = uncertainty_interval(preds_all)
-                elapsed = time.time() - t0
-
-            valid_names  = [names_list[i]  for i in range(len(names_list))  if valid[i]]
-            valid_smiles = [smiles_list[i] for i in range(len(smiles_list)) if valid[i]]
-            n_invalid    = int((~valid).sum())
-
-            if ad_label == "OUT OF DOMAIN":
-                st.warning("Protein is outside the training distribution. Predictions may be unreliable.")
-
-            results_df = pd.DataFrame({
-                'name':      valid_names,
-                'smiles':    valid_smiles,
-                'pKd_pred':  np.round(preds, 3),
-                'CI_lo':     np.round(lo, 3),
-                'CI_hi':     np.round(hi, 3),
-                'Ki_est':    [format_ki(p) for p in preds],
-                'model_std': np.round(preds_all.std(axis=1), 3),
-                'AD':        [ad_label] * len(valid_names),
-            }).sort_values('pKd_pred', ascending=False).reset_index(drop=True)
-            results_df.insert(0, 'rank', range(1, len(results_df) + 1))
-
-            st.success(
-                f"{len(results_df)} compounds screened in {elapsed:.1f}s "
-                f"({elapsed / max(len(results_df), 1):.2f}s/compound)"
-                + (f"  |  {n_invalid} invalid SMILES skipped" if n_invalid else "")
-            )
-
-            top_n  = min(20, len(results_df))
-            fig = bar_chart(
-                results_df.head(top_n)['name'].tolist(),
-                results_df.head(top_n)['pKd_pred'].values,
-                results_df.head(top_n)['CI_lo'].values,
-                results_df.head(top_n)['CI_hi'].values,
-                f"Top {top_n} hits by predicted pKd", dark=dark,
-            )
-            st.pyplot(fig, use_container_width=True)
-            plt.close(fig)
-
-            st.dataframe(
-                results_df.style.background_gradient(subset=['pKd_pred'], cmap='Blues'),
-                use_container_width=True, height=400,
-            )
-            st.download_button(
-                "Download ranked CSV",
-                results_df.to_csv(index=False).encode(),
-                file_name="velobind_screening.csv", mime="text/csv",
-            )
-
-
-# ══════════════════════════════════════════════════════════════════════
-# TAB 3 — Selectivity profiling
-# ══════════════════════════════════════════════════════════════════════
-with tab3:
-    st.subheader("Selectivity Profiling")
-    st.markdown("One compound, multiple targets — ranked by predicted pKd. "
-                "Format: `TargetName: SEQUENCE` (name optional). "
-                "Accepts plain sequence or FASTA per line.")
-
-    multi_smi  = st.text_input("Compound SMILES", placeholder="Cc1ccc(...)cc1Nc1nccc(...)n1", key="sp_smi")
-    multi_seqs = st.text_area(
-        "Target proteins (one per line)",
-        height=250,
-        placeholder="ABL1: MGPSENDPNLFVALY...\nEGFR: MRPSGTAGAALLALL...\nCDK2: MENFQKVEKIGEGTY...",
-        key="sp_seqs",
-    )
-
-    if st.button("Run selectivity profiling", type="primary", use_container_width=True, key="sp_btn"):
-        if not multi_smi.strip() or not multi_seqs.strip():
-            st.error("Please enter a SMILES and at least one protein sequence.")
-        else:
-            targets, parse_errors = {}, []
-            for i, line in enumerate(multi_seqs.strip().splitlines()):
-                line = line.strip()
-                if not line:
-                    continue
-                name, raw_seq = (line.split(":", 1) if ":" in line
-                                 else (f"Target_{i+1}", line))
-                seq, err = validate_sequence(raw_seq if isinstance(raw_seq, str) else raw_seq)
-                if err:
-                    parse_errors.append(f"{name.strip()}: {err}")
-                else:
-                    targets[name.strip()] = seq
-
-            for e in parse_errors:
-                st.warning(f"Skipped — {e}")
-            if not targets:
-                st.error("No valid sequences found.")
-                st.stop()
-
-            results, progress = [], st.progress(0)
-            for idx, (name, seq) in enumerate(targets.items()):
-                try:
-                    X, valid, esm_vec = extract_features(
-                        seq, [multi_smi.strip()], tokenizer, esm_model, device, lig_scaler)
-                    if valid.any():
-                        preds, preds_all = predict(X, fold_models, meta, target_scaler)
-                        lo, hi = uncertainty_interval(preds_all)
-                        ad_label, _ = ad_check(esm_vec[-480:], ad_centroid, ad_threshold)
-                        results.append({
-                            'Target':    name,
-                            'pKd_pred':  round(float(preds[0]), 3),
-                            'CI_lo':     round(float(lo[0]), 3),
-                            'CI_hi':     round(float(hi[0]), 3),
-                            'Ki_est':    format_ki(float(preds[0])),
-                            'model_std': round(float(preds_all.std()), 3),
-                            'AD':        ad_label,
-                        })
-                except Exception as e:
-                    st.warning(f"Skipped {name}: {e}")
-                progress.progress((idx + 1) / len(targets))
-
-            progress.empty()
-            res_df = (pd.DataFrame(results)
-                      .sort_values('pKd_pred', ascending=False)
-                      .reset_index(drop=True))
-            res_df.insert(0, 'rank', range(1, len(res_df) + 1))
-
-            st.success(f"Profiled {len(res_df)} targets.")
-            fig = bar_chart(
-                res_df['Target'].tolist(), res_df['pKd_pred'].values,
-                res_df['CI_lo'].values, res_df['CI_hi'].values,
-                "Selectivity profile — predicted pKd by target", dark=dark,
-            )
-            st.pyplot(fig, use_container_width=True)
-            plt.close(fig)
-
-            st.dataframe(res_df, use_container_width=True)
-            st.download_button(
-                "Download selectivity CSV",
-                res_df.to_csv(index=False).encode(),
-                file_name="velobind_selectivity.csv", mime="text/csv",
-            )
-
-
-# ── Footer ────────────────────────────────────────────────────────────
-st.markdown("---")
-st.markdown(f"""
-<div style="color:{lab_col};font-size:0.78rem;text-align:center;padding:0.4rem 0 0.8rem">
-    VeloBind &nbsp;&middot;&nbsp; Structure-free binding affinity &nbsp;&middot;&nbsp;
-    ESM-2 + gradient-boosted ensemble &nbsp;&middot;&nbsp;
-    Trained on LP-PDBBind &nbsp;&middot;&nbsp;
-    Evaluated on CASF-2016 and CASF-2013 &nbsp;&middot;&nbsp;
-    <b>Not for clinical use</b>
-</div>
-""", unsafe_allow_html=True)
+
+<script>
+// ── THEME ────────────────────────────────────────────────────
+const html = document.documentElement;
+const MOON = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
+const SUN  = `<circle cx="12" cy="12" r="5"/>
+  <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+  <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
+
+function applyTheme(t) {
+  html.setAttribute('data-theme', t);
+  document.getElementById('t-icon').innerHTML  = t==='dark' ? SUN  : MOON;
+  document.getElementById('t-label').textContent = t==='dark' ? 'Light mode' : 'Dark mode';
+  localStorage.setItem('vb-theme', t);
+}
+function toggleTheme() {
+  applyTheme(html.getAttribute('data-theme')==='dark' ? 'light' : 'dark');
+}
+applyTheme(localStorage.getItem('vb-theme') || 'dark');
+
+// ── TABS ─────────────────────────────────────────────────────
+function switchTab(i) {
+  document.querySelectorAll('.tab-btn').forEach((b,j) => b.classList.toggle('active', i===j));
+  document.querySelectorAll('.tab-panel').forEach((p,j) => p.classList.toggle('active', i===j));
+}
+
+// ── UTILS ─────────────────────────────────────────────────────
+function setSmi(s) { document.getElementById('sq-smi').value = s; }
+function overlay(on, msg='Running inference...') {
+  document.getElementById('overlay').classList.toggle('show', on);
+  document.getElementById('ov-text').textContent = msg;
+}
+function setBtn(id, loading) {
+  const labels = {sq:'Predict binding affinity', bs:'Run batch screening', sp:'Run selectivity profiling'};
+  document.getElementById(id+'-btn').disabled = loading;
+  document.getElementById(id+'-txt').innerHTML = loading
+    ? '<div class="spinner"></div> Processing...' : labels[id];
+}
+function warn(id, msg) {
+  const el = document.getElementById(id+'-warn');
+  el.textContent = msg; el.style.display = msg ? 'block' : 'none';
+}
+function adCls(l) {
+  return l==='IN DOMAIN' ? 'ad-in' : l==='OUT OF DOMAIN' ? 'ad-out' : 'ad-unk';
+}
+function fileSel(inp, lid) {
+  document.getElementById(lid).textContent = inp.files[0]?.name || 'No file';
+}
+function handleDrop(ev, fid, lid) {
+  ev.preventDefault(); ev.currentTarget.classList.remove('drag');
+  const f = ev.dataTransfer.files[0]; if (!f) return;
+  const dt = new DataTransfer(); dt.items.add(f);
+  document.getElementById(fid).files = dt.files;
+  document.getElementById(lid).textContent = f.name;
+}
+
+// CSV data store
+const csvStore = {bs:[], sp:[]};
+function dlCSV(p) {
+  const rows = csvStore[p]; if (!rows.length) return;
+  const keys = Object.keys(rows[0]);
+  const csv  = [keys.join(','),
+    ...rows.map(r => keys.map(k => JSON.stringify(r[k]??'')).join(','))
+  ].join('\n');
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([csv],{type:'text/csv'}));
+  a.download = `velobind_${p}_${Date.now()}.csv`;
+  a.click();
+}
+
+// Device badge
+fetch('/device').then(r=>r.json()).then(d=>{
+  document.getElementById('dev-badge').textContent = d.device.toUpperCase();
+});
+
+// ── SINGLE QUERY ─────────────────────────────────────────────
+async function runSingle() {
+  const seq = document.getElementById('sq-seq').value.trim();
+  const smi = document.getElementById('sq-smi').value.trim();
+  warn('sq','');
+  if (!seq||!smi) { warn('sq','Please enter both a sequence and a SMILES.'); return; }
+  setBtn('sq',true); overlay(true,'Embedding protein and ligand...');
+  try {
+    const r = await fetch('/predict_single',{method:'POST',
+      headers:{'Content-Type':'application/json'},body:JSON.stringify({seq,smi})});
+    const d = await r.json();
+    if (!r.ok) { warn('sq', d.error||'Server error'); return; }
+    document.getElementById('sq-pkd').textContent = d.pkd.toFixed(2);
+    document.getElementById('sq-ci').textContent  = `[${d.lo.toFixed(2)}, ${d.hi.toFixed(2)}]`;
+    document.getElementById('sq-ki').textContent  = d.ki;
+    const adEl = document.getElementById('sq-ad');
+    adEl.textContent = d.ad; adEl.className = 'ad-badge '+adCls(d.ad);
+    document.getElementById('sq-cap').textContent =
+      `${d.elapsed}s  ·  45 models (3 seeds × 3 types × 5 folds)  ·  ${d.device.toUpperCase()}`;
+    if (d.ad==='OUT OF DOMAIN')
+      warn('sq','Protein outside training distribution — predictions may be unreliable.');
+    document.getElementById('sq-res').classList.add('show');
+  } catch(e) { warn('sq','Request failed: '+e.message); }
+  finally { setBtn('sq',false); overlay(false); }
+}
+
+// ── BATCH ─────────────────────────────────────────────────────
+async function runBatch() {
+  const seq  = document.getElementById('bs-seq').value.trim();
+  const file = document.getElementById('bs-file').files[0];
+  const maxC = parseInt(document.getElementById('bs-max').value)||100;
+  warn('bs','');
+  if (!seq)  { warn('bs','Please enter a protein sequence.'); return; }
+  if (!file) { warn('bs','Please upload a CSV file.'); return; }
+  const csv = await file.text();
+  setBtn('bs',true); overlay(true,`Screening up to ${maxC} compounds...`);
+  try {
+    const r = await fetch('/predict_batch',{method:'POST',
+      headers:{'Content-Type':'application/json'},body:JSON.stringify({seq,csv,max_cpds:maxC})});
+    const d = await r.json();
+    if (!r.ok) { warn('bs', d.error||'Server error'); return; }
+    csvStore.bs = d.rows;
+    document.getElementById('bs-body').innerHTML = d.rows.map((row,i)=>`
+      <tr>
+        <td>${i+1}</td><td>${row.name}</td>
+        <td class="pkd-val">${row.pKd}</td>
+        <td>${row.lo}</td><td>${row.hi}</td>
+        <td>${row.ki}</td><td>${row.std}</td>
+        <td><span class="ad-badge ${adCls(row.ad)}">${row.ad}</span></td>
+      </tr>`).join('');
+    if (d.n_invalid) warn('bs',`${d.n_invalid} invalid SMILES skipped.`);
+    document.getElementById('bs-res').classList.add('show');
+  } catch(e) { warn('bs','Request failed: '+e.message); }
+  finally { setBtn('bs',false); overlay(false); }
+}
+
+// ── SELECTIVITY ───────────────────────────────────────────────
+async function runSelectivity() {
+  const smi  = document.getElementById('sp-smi').value.trim();
+  const seqs = document.getElementById('sp-seqs').value.trim();
+  warn('sp','');
+  if (!smi||!seqs) { warn('sp','Please enter a SMILES and at least one sequence.'); return; }
+  setBtn('sp',true); overlay(true,'Profiling targets...');
+  try {
+    const r = await fetch('/predict_selectivity',{method:'POST',
+      headers:{'Content-Type':'application/json'},body:JSON.stringify({smi,seqs})});
+    const d = await r.json();
+    if (!r.ok) { warn('sp', d.error||'Server error'); return; }
+    csvStore.sp = d.rows;
+    document.getElementById('sp-body').innerHTML = d.rows.map((row,i)=>`
+      <tr>
+        <td>${i+1}</td><td>${row.target}</td>
+        <td class="pkd-val">${row.pKd}</td>
+        <td>${row.lo}</td><td>${row.hi}</td>
+        <td>${row.ki}</td><td>${row.std}</td>
+        <td><span class="ad-badge ${adCls(row.ad)}">${row.ad}</span></td>
+      </tr>`).join('');
+    if (d.skipped?.length) warn('sp','Skipped: '+d.skipped.join(', '));
+    document.getElementById('sp-res').classList.add('show');
+  } catch(e) { warn('sp','Request failed: '+e.message); }
+  finally { setBtn('sp',false); overlay(false); }
+}
+</script>
+</body>
+</html>"""
+
+# ── Flask routes ──────────────────────────────────────────────
+app = Flask(__name__)
+
+@app.route("/")
+def index():
+    return render_template_string(HTML, logo_uri=LOGO_URI)
+
+@app.route("/device")
+def device_info():
+    _, _, dev = get_esm()
+    return jsonify({"device": dev})
+
+@app.route("/predict_single", methods=["POST"])
+def predict_single():
+    data = request.get_json()
+    seq, err = validate_sequence(data.get("seq",""))
+    if err: return jsonify({"error": err}), 400
+    smi = data.get("smi","").strip()
+    if not smi: return jsonify({"error": "Missing SMILES"}), 400
+    try:
+        fm, meta, sc, ls = get_models()
+        t0 = time.time()
+        X, valid, esm_vec = extract_features(seq, [smi], ls)
+        if not valid.any():
+            return jsonify({"error": "RDKit could not parse this SMILES."}), 400
+        preds, lo, hi = run_predict(X, fm, meta, sc)
+        elapsed = round(time.time()-t0, 2)
+        pkd = float(preds[0])
+        _, _, dev = get_esm()
+        return jsonify({"pkd": pkd, "lo": float(lo[0]), "hi": float(hi[0]),
+                        "ki": format_ki(pkd), "ad": ad_label(esm_vec),
+                        "elapsed": elapsed, "device": dev})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route("/predict_batch", methods=["POST"])
+def predict_batch():
+    data = request.get_json()
+    seq, err = validate_sequence(data.get("seq",""))
+    if err: return jsonify({"error": err}), 400
+    try:
+        df = pd.read_csv(StringIO(data.get("csv",""))).head(int(data.get("max_cpds",100)))
+        if "smiles" not in df.columns:
+            return jsonify({"error": "CSV must have a 'smiles' column."}), 400
+        smiles_list = df["smiles"].tolist()
+        names_list  = df["name"].tolist() if "name" in df.columns else [f"cpd_{i}" for i in range(len(df))]
+        fm, meta, sc, ls = get_models()
+        X, valid, esm_vec = extract_features(seq, smiles_list, ls)
+        preds, lo, hi = run_predict(X, fm, meta, sc)
+        ad = ad_label(esm_vec)
+        std = (hi - lo) / (2*1.96)
+        valid_names = [names_list[i] for i in range(len(names_list)) if valid[i]]
+        rows = [{"name": n, "pKd": round(float(p),3), "lo": round(float(l),3),
+                 "hi": round(float(h),3), "ki": format_ki(float(p)),
+                 "std": round(float(s),3), "ad": ad}
+                for n,p,l,h,s in zip(valid_names, preds, lo, hi, std)]
+        rows.sort(key=lambda r: r["pKd"], reverse=True)
+        return jsonify({"rows": rows, "n_invalid": int((~valid).sum())})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route("/predict_selectivity", methods=["POST"])
+def predict_selectivity():
+    data = request.get_json()
+    smi = data.get("smi","").strip()
+    if not smi: return jsonify({"error": "Missing SMILES"}), 400
+    targets, skipped = {}, []
+    for i, line in enumerate(data.get("seqs","").strip().splitlines()):
+        line = line.strip()
+        if not line: continue
+        name, raw = (line.split(":",1) if ":" in line else (f"Target_{i+1}", line))
+        seq, err = validate_sequence(raw)
+        if err: skipped.append(name.strip())
+        else:   targets[name.strip()] = seq
+    if not targets: return jsonify({"error": "No valid sequences found."}), 400
+    try:
+        fm, meta, sc, ls = get_models()
+        rows = []
+        for name, seq in targets.items():
+            try:
+                X, valid, esm_vec = extract_features(seq, [smi], ls)
+                if not valid.any(): continue
+                preds, lo, hi = run_predict(X, fm, meta, sc)
+                pkd = float(preds[0])
+                std = (float(hi[0])-float(lo[0]))/(2*1.96)
+                rows.append({"target": name, "pKd": round(pkd,3),
+                             "lo": round(float(lo[0]),3), "hi": round(float(hi[0]),3),
+                             "ki": format_ki(pkd), "std": round(std,3),
+                             "ad": ad_label(esm_vec)})
+            except Exception: skipped.append(name)
+        rows.sort(key=lambda r: r["pKd"], reverse=True)
+        return jsonify({"rows": rows, "skipped": skipped})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == "__main__":
+    print("Loading models..."); get_models()
+    print("Loading ESM-2...");  get_esm()
+    print("Ready — http://localhost:7860")
+    app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 7860)), debug=False)