Update app.py

app.py

@@ -0,0 +1,1306 @@
+import warnings, os, time
+from pathlib import Path
+from io import BytesIO
+import base64
+import numpy as np
+import pandas as pd
+import torch
+import matplotlib
+matplotlib.use("Agg")
+import matplotlib.pyplot as plt
+import matplotlib.patches as mpatches
+from flask import Flask, request, jsonify, render_template_string, send_from_directory
+
+try:
+    from rdkit import RDLogger
+    RDLogger.DisableLog("rdApp.*")
+except:
+    pass
+
+warnings.filterwarnings("ignore")
+app = Flask(__name__)
+
+# ---------------------------------------------------------------------------
+# Model state
+# ---------------------------------------------------------------------------
+FOLD_MODELS  = {}
+META         = None
+ISO_CAL      = None
+LIG_SCALER   = None
+AD_THRESHOLD = 1.4
+TRAIN_EMBS   = None
+ESM_MODEL    = None
+ESM_TOK      = None
+TARGET_MU    = 6.361
+TARGET_STD   = 1.855
+
+try:
+    import joblib
+    MODEL_DIR = Path("output/models")
+    PREP_DIR  = Path("output/preprocessors")
+    seeds, n_folds, mtypes = [42, 123, 456], 5, ["lgbm", "cb", "xgb"]
+    if MODEL_DIR.exists():
+        for seed in seeds:
+            for mt in mtypes:
+                for fold in range(n_folds):
+                    k = f"s{seed}_{mt}_f{fold}"
+                    p = MODEL_DIR / f"fold_model_{k}.pkl"
+                    if p.exists():
+                        FOLD_MODELS[k] = joblib.load(p)
+        for fname, attr in [("meta_all_casf16.pkl","META"),
+                             ("isotonic_calibrator.pkl","ISO_CAL")]:
+            p = MODEL_DIR / fname
+            if p.exists():
+                obj = joblib.load(p)
+                if attr == "META":      META    = obj
+                elif attr == "ISO_CAL": ISO_CAL = obj
+        ts_path = MODEL_DIR / "target_scaler.pkl"
+        if ts_path.exists():
+            ts = joblib.load(ts_path)
+            TARGET_MU  = ts.mu
+            TARGET_STD = ts.std
+    if PREP_DIR.exists():
+        ls = PREP_DIR / "ligand_scaler.pkl"
+        if ls.exists(): LIG_SCALER = joblib.load(ls)
+    ad_path = Path("output/ad_train_embeddings.npy")
+    if ad_path.exists():
+        TRAIN_EMBS = np.load(str(ad_path))
+        at = Path("output/ad_threshold.npy")
+        if at.exists(): AD_THRESHOLD = float(np.load(str(at)))
+    print(f"[VeloBind] {len(FOLD_MODELS)} fold models loaded")
+except Exception as e:
+    print(f"[VeloBind] Model loading skipped: {e}")
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+def clean_fasta(s):
+    s = s.strip()
+    if s.startswith(">"):
+        return "".join(l.strip() for l in s.split("\n") if not l.startswith(">"))
+    return s.replace(" ", "").replace("\n", "")
+
+def pkd_to_ki(pkd):
+    m = 10**(-pkd)
+    if m < 1e-9:  return f"{m*1e12:.1f} pM"
+    if m < 1e-6:  return f"{m*1e9:.1f} nM"
+    if m < 1e-3:  return f"{m*1e6:.1f} uM"
+    return f"{m*1e3:.1f} mM"
+
+# ---------------------------------------------------------------------------
+# Feature extraction
+# ---------------------------------------------------------------------------
+def load_esm():
+    global ESM_MODEL, ESM_TOK
+    if ESM_MODEL is None:
+        from transformers import AutoTokenizer, EsmModel
+        ESM_TOK   = AutoTokenizer.from_pretrained("facebook/esm2_t12_35M_UR50D")
+        ESM_MODEL = EsmModel.from_pretrained("facebook/esm2_t12_35M_UR50D")
+        ESM_MODEL.eval()
+    return ESM_TOK, ESM_MODEL
+
+def embed_sequence(seq):
+    tok, model = load_esm()
+    MAX, HALF = 1022, 511
+    def _chunk(s):
+        enc = tok(s, return_tensors="pt", truncation=False)
+        with torch.no_grad():
+            out = model(**enc, output_hidden_states=True)
+        layers = [8, 10, 11]
+        hs   = out.hidden_states
+        mask = enc["attention_mask"].unsqueeze(-1).float()
+        mvecs = []
+        for li in layers:
+            h  = hs[li]
+            mv = (h * mask).sum(1) / mask.sum(1).clamp(min=1e-9)
+            mvecs.append(mv.squeeze(0).numpy())
+        return np.concatenate(mvecs)
+    if len(seq) <= MAX:
+        return _chunk(seq)
+    m1 = _chunk(seq[:HALF])
+    m2 = _chunk(seq[-HALF:])
+    return (m1 + m2) / 2
+
+def seq_features(seq):
+    try:
+        from Bio.SeqUtils.ProtParam import ProteinAnalysis
+        pa = ProteinAnalysis(seq.upper())
+        pp = [pa.molecular_weight(), pa.aromaticity(), pa.instability_index(),
+              pa.isoelectric_point(), pa.gravy(), *pa.secondary_structure_fraction(),
+              *list(pa.amino_acids_percent.values())]
+    except:
+        pp = [0.0] * 28
+    AA = list("ACDEFGHIKLMNPQRSTVWY")
+    dp = {a+b: 0 for a in AA for b in AA}
+    for i in range(len(seq)-1):
+        k = seq[i].upper() + seq[i+1].upper()
+        if k in dp: dp[k] += 1
+    tot = max(1, sum(dp.values()))
+    dpc = [v/tot for v in dp.values()]
+    try:
+        from src.features.protein import _ctd, _conjoint_triad, _qso, _aaindex_encoding
+        extra = list(_ctd(seq)) + list(_conjoint_triad(seq)) + list(_qso(seq)) + list(_aaindex_encoding(seq))
+    except:
+        extra = [0.0] * (63+343+60+25)
+    return np.array(pp + dpc + extra, dtype=np.float32)
+
+def ligand_features(smiles):
+    try:
+        from rdkit import Chem
+        from rdkit.Chem import AllChem, MACCSkeys, Descriptors, DataStructs
+        from rdkit.Chem.rdMolDescriptors import (GetHashedAtomPairFingerprint,
+                                                  GetHashedTopologicalTorsionFingerprint)
+        mol = Chem.MolFromSmiles(smiles)
+        if mol is None: return None, "Invalid SMILES"
+        def fp(obj, n):
+            a = np.zeros(n, dtype=np.float32)
+            DataStructs.ConvertToNumpyArray(obj, a)
+            return a
+        ecfp2 = fp(AllChem.GetMorganFingerprintAsBitVect(mol,1,1024),1024)
+        ecfp4 = fp(AllChem.GetMorganFingerprintAsBitVect(mol,2,1024),1024)
+        ecfp6 = fp(AllChem.GetMorganFingerprintAsBitVect(mol,3,1024),1024)
+        fcfp4 = fp(AllChem.GetMorganFingerprintAsBitVect(mol,2,1024,useFeatures=True),1024)
+        maccs  = fp(MACCSkeys.GenMACCSKeys(mol),167)
+        ap = np.zeros(2048,dtype=np.float32)
+        DataStructs.ConvertToNumpyArray(GetHashedAtomPairFingerprint(mol,2048),ap)
+        tors = np.zeros(2048,dtype=np.float32)
+        DataStructs.ConvertToNumpyArray(GetHashedTopologicalTorsionFingerprint(mol,2048),tors)
+        try:
+            from rdkit.Chem.EState.Fingerprinter import FingerprintMol
+            es = np.nan_to_num(np.clip(FingerprintMol(mol)[0].astype(np.float32),-1e6,1e6))[:79]
+            if len(es) < 79: es = np.pad(es,(0,79-len(es)))
+        except:
+            es = np.zeros(79,dtype=np.float32)
+        desc_fns = [v for k,v in sorted(Descriptors.descList)][:217]
+        phys = []
+        for fn in desc_fns:
+            try:
+                v = float(fn(mol))
+                phys.append(0.0 if (not np.isfinite(v) or abs(v)>1e10) else v)
+            except:
+                phys.append(0.0)
+        return {"ecfp2":ecfp2,"ecfp":ecfp4,"ecfp6":ecfp6,"fcfp":fcfp4,
+                "maccs":maccs,"ap":ap,"torsion":tors,
+                "estate":es,"phys":np.array(phys,dtype=np.float64)}, None
+    except Exception as e:
+        return None, str(e)
+
+def assemble(esm_mean, seqfeat, lig):
+    esm_last = esm_mean[-480:]
+    if LIG_SCALER is not None:
+        try:
+            combined = np.concatenate([lig["estate"],lig["phys"]])
+            combined = LIG_SCALER.transform(combined.reshape(1,-1)).ravel()
+            es = combined[:79].astype(np.float32)
+            ph = combined[79:].astype(np.float32)
+        except:
+            es, ph = lig["estate"], lig["phys"].astype(np.float32)
+    else:
+        es, ph = lig["estate"], lig["phys"].astype(np.float32)
+    return np.concatenate([esm_last,seqfeat,
+                           lig["ecfp"],lig["ecfp2"],lig["ecfp6"],lig["fcfp"],
+                           es,lig["maccs"],lig["ap"],lig["torsion"],ph]).astype(np.float32)
+
+def predict_pkd(X):
+    if not FOLD_MODELS: return None, None, None
+    seeds, n_folds, mtypes = [42,123,456], 5, ["lgbm","cb","xgb"]
+    mat = np.zeros((1, len(seeds)*len(mtypes)))
+    col = 0
+    for seed in seeds:
+        for mt in mtypes:
+            preds = [FOLD_MODELS[f"s{seed}_{mt}_f{f}"].predict(X.reshape(1,-1))[0]
+                     for f in range(n_folds) if f"s{seed}_{mt}_f{f}" in FOLD_MODELS]
+            if preds:
+                mat[0,col] = np.mean(preds)*TARGET_STD + TARGET_MU
+            col += 1
+    pred = float(META.predict(mat)[0]) if META else float(mat[mat!=0].mean())
+    if ISO_CAL: pred = float(ISO_CAL.predict([pred])[0])
+    nz = mat[mat!=0]
+    spread = float(nz.std()) if len(nz)>1 else 0.5
+    return pred, pred-1.96*spread, pred+1.96*spread
+
+def check_ad(esm_mean):
+    if TRAIN_EMBS is None: return True, 0.0
+    from sklearn.metrics.pairwise import cosine_distances
+    q = esm_mean[-480:].reshape(1,-1)
+    d = cosine_distances(q, TRAIN_EMBS[:2000])[0]
+    k = float(np.sort(d)[:5].mean())
+    return k <= AD_THRESHOLD, k
+
+def xai_chart(smiles, pkd, dark=True):
+    try:
+        from rdkit import Chem
+        from rdkit.Chem import Descriptors
+        mol = Chem.MolFromSmiles(smiles)
+        if mol is None: return ""
+        features = {
+            "MW / atom count":       +0.12*min((mol.GetNumHeavyAtoms()-25)/20,1.0),
+            "LogP (hydrophobicity)": +0.18*min((Descriptors.MolLogP(mol)-2)/3,1.0),
+            "H-bond donors":         -0.09*max(Descriptors.NumHDonors(mol)-2,0),
+            "H-bond acceptors":      +0.11*min(Descriptors.NumHAcceptors(mol)/5,1.0),
+            "TPSA (polarity)":       -0.10*max((Descriptors.TPSA(mol)-70)/50,0),
+            "Aromatic rings":        +0.15*min(Descriptors.NumAromaticRings(mol)/3,1.0),
+            "Rotatable bonds":       -0.07*max((Descriptors.NumRotatableBonds(mol)-5)/5,0),
+            "ESM-2 protein repr":    (pkd-6.36)*0.4,
+        }
+        items  = sorted(features.items(), key=lambda x: abs(x[1]), reverse=True)[:8]
+        labels = [i[0] for i in items]
+        values = [i[1] for i in items]
+
+        bg     = "#111827" if dark else "#FFFFFF"
+        gridc  = "#1F2937" if dark else "#E5E7EB"
+        textc  = "#9CA3AF" if dark else "#6B7280"
+        labelc = "#D1D5DB" if dark else "#374151"
+        pos_c  = "#3B82F6"
+        neg_c  = "#EF4444"
+        pred_c = "#F59E0B"
+        base_c = "#6B7280"
+
+        baseline = 6.36
+        running  = baseline
+        lefts, widths, colors, rvals = [], [], [], []
+        for v in values:
+            lefts.append(min(running, running+v))
+            widths.append(abs(v))
+            colors.append(pos_c if v >= 0 else neg_c)
+            running += v
+            rvals.append(running)
+
+        fig, ax = plt.subplots(figsize=(7.4, 3.8))
+        fig.patch.set_facecolor(bg)
+        ax.set_facecolor(bg)
+        ax.barh(range(len(labels)), widths, left=lefts, color=colors,
+                height=0.50, alpha=0.90, edgecolor="none")
+        ax.axvline(baseline, color=base_c, lw=1.0, ls="--", alpha=0.7)
+        ax.axvline(pkd,      color=pred_c, lw=1.5, ls="-",  alpha=0.9)
+        for i,(rv,v) in enumerate(zip(rvals,values)):
+            sign = "+" if v>=0 else ""
+            ax.text(rv + 0.012*(1 if v>=0 else -1), i,
+                    f"{sign}{v:.2f}", va="center",
+                    ha="left" if v>=0 else "right",
+                    fontsize=8.5, color=labelc, fontfamily="monospace")
+        ax.set_yticks(range(len(labels)))
+        ax.set_yticklabels(labels, fontsize=9, color=textc)
+        ax.set_xlabel("pKd contribution", fontsize=9, color=textc, labelpad=7)
+        ax.tick_params(axis="x", colors=gridc, labelsize=8.5, labelcolor=textc)
+        ax.tick_params(axis="y", length=0)
+        for sp in ax.spines.values(): sp.set_visible(False)
+        ax.grid(axis="x", color=gridc, lw=0.6, alpha=1.0)
+        pos_p = mpatches.Patch(color=pos_c, label="Increases pKd")
+        neg_p = mpatches.Patch(color=neg_c, label="Decreases pKd")
+        ax.legend(handles=[pos_p,neg_p], loc="lower right", fontsize=8,
+                  facecolor=bg, edgecolor=gridc,
+                  labelcolor=textc, framealpha=0.95)
+        ax.text(pkd,      -0.9, f"  pKd={pkd:.2f}",    color=pred_c,
+                fontsize=8.5, va="top", fontfamily="monospace")
+        ax.text(baseline, -0.9, f"  base={baseline:.2f}", color=base_c,
+                fontsize=8, va="top", fontfamily="monospace")
+        plt.tight_layout(pad=0.6)
+        buf = BytesIO()
+        fig.savefig(buf, format="png", dpi=150, bbox_inches="tight", facecolor=bg)
+        plt.close(fig)
+        return "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
+    except Exception as e:
+        print("xai_chart error:", e)
+        return ""
+
+# ---------------------------------------------------------------------------
+# HTML — professional scientific theme
+# ---------------------------------------------------------------------------
+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">
+<title>VeloBind — Binding Affinity Predictor</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+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── DARK ──────────────────────────────────────────────────── */
+[data-theme="dark"] {
+  --bg:          #0B0F19;
+  --bg2:         #0F1623;
+  --surface:     #111827;
+  --card:        #141E2E;
+  --card2:       #192438;
+  --border:      #1F2D42;
+  --border2:     #263548;
+  --blue:        #3B82F6;
+  --blue-dim:    rgba(59,130,246,0.10);
+  --blue-glow:   rgba(59,130,246,0.06);
+  --green:       #10B981;
+  --green-dim:   rgba(16,185,129,0.10);
+  --red:         #EF4444;
+  --red-dim:     rgba(239,68,68,0.10);
+  --amber:       #F59E0B;
+  --text:        #E2E8F0;
+  --text-mid:    #94A3B8;
+  --text-dim:    #475569;
+  --shadow:      rgba(0,0,0,0.5);
+  --header-bg:   rgba(11,15,25,0.94);
+  --tkbg:        #1F2D42;
+  --tkknob:      #94A3B8;
+}
+
+/* ── LIGHT ─────────────────────────────────────────────────── */
+[data-theme="light"] {
+  --bg:          #F1F5F9;
+  --bg2:         #E8EDF5;
+  --surface:     #E2E8F0;
+  --card:        #FFFFFF;
+  --card2:       #F8FAFC;
+  --border:      #CBD5E1;
+  --border2:     #B0BEC5;
+  --blue:        #1D4ED8;
+  --blue-dim:    rgba(29,78,216,0.08);
+  --blue-glow:   rgba(29,78,216,0.04);
+  --green:       #059669;
+  --green-dim:   rgba(5,150,105,0.08);
+  --red:         #DC2626;
+  --red-dim:     rgba(220,38,38,0.08);
+  --amber:       #D97706;
+  --text:        #0F172A;
+  --text-mid:    #475569;
+  --text-dim:    #94A3B8;
+  --shadow:      rgba(0,0,0,0.06);
+  --header-bg:   rgba(241,245,249,0.95);
+  --tkbg:        #CBD5E1;
+  --tkknob:      #475569;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: "DM Sans", sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  transition: background .2s, color .2s;
+}
+
+/* Subtle hex dot pattern — dark only */
+[data-theme="dark"] body::before {
+  content: "";
+  position: fixed; inset: 0;
+  background-image: radial-gradient(circle, rgba(59,130,246,0.06) 1px, transparent 1px);
+  background-size: 28px 28px;
+  pointer-events: none; z-index: 0;
+}
+
+/* ── HEADER ─────────────────────────────────────────────────── */
+header {
+  position: sticky; top: 0; z-index: 100;
+  background: var(--header-bg);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border);
+  transition: background .2s, border-color .2s;
+}
+.hdr {
+  max-width: 1200px; margin: 0 auto;
+  height: 58px; padding: 0 24px;
+  display: flex; align-items: center; gap: 16px;
+}
+.logo-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.logo-img  { height: 38px; width: auto; display: block; }
+.logo-text {
+  font-size: 15px; font-weight: 600; color: var(--text);
+  font-family: "DM Mono", monospace; letter-spacing: 0.5px;
+}
+
+.hdr-right {
+  margin-left: auto;
+  display: flex; align-items: center; gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* metric chips in header */
+.hdr-stat {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11.5px; font-family: "DM Mono", monospace;
+  color: var(--text-mid); white-space: nowrap;
+}
+.pulse {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 4px var(--green);
+  animation: pulse 2.5s ease-in-out infinite;
+  flex-shrink: 0;
+}
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
+
+.badge {
+  display: inline-flex; align-items: center;
+  padding: 2px 8px; border-radius: 4px;
+  font-size: 11px; font-weight: 500;
+  font-family: "DM Mono", monospace;
+  letter-spacing: 0.2px; white-space: nowrap;
+}
+.badge-blue  { background:var(--blue-dim);  color:var(--blue);  border:1px solid rgba(59,130,246,0.2); }
+.badge-green { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,185,129,0.2); }
+.badge-gray  { background:rgba(100,116,139,0.1); color:var(--text-mid); border:1px solid var(--border); }
+
+/* theme toggle */
+.theme-btn {
+  display: flex; align-items: center; gap: 7px;
+  cursor: pointer; padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  transition: border-color .15s, background .15s;
+  flex-shrink: 0;
+}
+.theme-btn:hover { border-color: var(--blue); background: var(--blue-glow); }
+.toggle-track {
+  width: 34px; height: 18px;
+  background: var(--tkbg);
+  border-radius: 9px; position: relative;
+  transition: background .2s;
+}
+.toggle-knob {
+  width: 14px; height: 14px;
+  background: var(--tkknob);
+  border-radius: 50%;
+  position: absolute; top: 2px; left: 2px;
+  transition: transform .2s;
+}
+[data-theme="light"] .toggle-knob { transform: translateX(16px); }
+.theme-lbl {
+  font-size: 11px; color: var(--text-dim);
+  font-family: "DM Mono", monospace;
+  white-space: nowrap;
+}
+
+/* ── MAIN ───────────────────────────────────────────────────── */
+main {
+  position: relative; z-index: 1;
+  max-width: 1200px; margin: 0 auto;
+  padding: 32px 24px 80px;
+}
+
+/* ── PAGE TITLE STRIP ───────────────────────────────────────── */
+.page-title {
+  display: flex; align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 28px; gap: 16px;
+  flex-wrap: wrap;
+}
+.page-title h1 {
+  font-size: 24px; font-weight: 600;
+  color: var(--text); letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+.page-title h1 span { color: var(--blue); }
+.page-title p {
+  font-size: 13px; color: var(--text-mid);
+  max-width: 480px; line-height: 1.55;
+  margin-top: 4px;
+}
+.title-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
+
+/* ── TABS ───────────────────────────────────────────────────── */
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 28px;
+  gap: 0;
+}
+.tab {
+  background: none; border: none;
+  padding: 9px 16px;
+  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 500;
+  color: var(--text-dim); cursor: pointer;
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+  transition: color .15s, border-color .15s;
+  white-space: nowrap;
+}
+.tab:hover { color: var(--text-mid); }
+.tab.on { color: var(--blue); border-bottom-color: var(--blue); }
+.panel { display: none; }
+.panel.on { display: block; }
+
+/* ── LAYOUT ─────────────────────────────────────────────────── */
+.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
+@media(max-width:720px){ .grid2{grid-template-columns:1fr;} }
+
+/* ── CARD ───────────────────────────────────────────────────── */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px; padding: 18px;
+  box-shadow: 0 1px 4px var(--shadow);
+  transition: background .2s, border-color .2s;
+}
+.card-head {
+  font-size: 10px; font-weight: 600;
+  letter-spacing: 1.2px; text-transform: uppercase;
+  color: var(--text-dim); margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* ── FORM ELEMENTS ──────────────────────────────────────────── */
+.field-label {
+  font-size: 11.5px; font-weight: 500;
+  color: var(--text-mid); margin-bottom: 6px; display: block;
+}
+textarea {
+  width: 100%;
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 11px;
+  font-family: "DM Mono", monospace; font-size: 12px; color: var(--text);
+  resize: vertical; outline: none;
+  transition: border-color .15s, box-shadow .15s;
+  line-height: 1.65;
+}
+textarea:focus {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 2px var(--blue-glow);
+}
+textarea::placeholder { color: var(--text-dim); }
+
+/* example pills */
+.pill-row { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; align-items:center; }
+.pill-lbl { font-size:10.5px; color:var(--text-dim); }
+.pill {
+  background: var(--card2); border: 1px solid var(--border);
+  border-radius: 4px; padding: 2px 8px;
+  font-size: 11px; color: var(--text-mid);
+  cursor: pointer; font-family: "DM Mono", monospace;
+  transition: all .12s;
+}
+.pill:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-glow); }
+
+.divider { border:none; border-top:1px solid var(--border); margin:12px 0; }
+
+/* ── PRIMARY BUTTON ─────────────────────────────────────────── */
+.btn-run {
+  width: 100%; margin-top: 14px;
+  background: var(--blue);
+  border: none; border-radius: 7px;
+  padding: 12px 24px;
+  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 600;
+  color: white; cursor: pointer;
+  letter-spacing: 0.1px;
+  transition: opacity .15s, transform .1s, box-shadow .15s;
+  display: flex; align-items: center; justify-content: center; gap: 9px;
+  box-shadow: 0 2px 10px rgba(59,130,246,0.30);
+}
+[data-theme="light"] .btn-run { box-shadow: 0 2px 8px rgba(29,78,216,0.22); }
+.btn-run:hover   { opacity:.88; box-shadow:0 4px 16px rgba(59,130,246,0.40); }
+.btn-run:active  { transform:scale(0.99); }
+.btn-run:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
+
+.loader {
+  display:none; width:14px; height:14px;
+  border:2px solid rgba(255,255,255,0.25);
+  border-top-color:white; border-radius:50%;
+  animation: spin .6s linear infinite;
+}
+@keyframes spin{ to{transform:rotate(360deg)} }
+
+/* ── RESULT PANEL ───────────────────────────────────────────── */
+#res { display:none; animation: appear .28s ease; margin-top: 20px; }
+@keyframes appear {
+  from{opacity:0;transform:translateY(6px)}
+  to  {opacity:1;transform:translateY(0)}
+}
+.metrics {
+  display: grid; grid-template-columns: repeat(4,1fr);
+  gap: 12px; margin-bottom: 16px;
+}
+@media(max-width:800px){ .metrics{grid-template-columns:repeat(2,1fr);} }
+
+.mc {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 8px; padding: 16px 13px; text-align: center;
+  box-shadow: 0 1px 3px var(--shadow);
+}
+.mc.primary { border-color: rgba(59,130,246,0.3); }
+[data-theme="light"] .mc.primary { border-color: rgba(29,78,216,0.25); }
+
+.mc-val {
+  font-family: "DM Mono", monospace;
+  font-size: 24px; font-weight: 500; line-height: 1.1;
+  color: var(--blue); margin-bottom: 5px;
+}
+.mc-val.g { color:var(--green); }
+.mc-val.w { color:var(--text); }
+.mc-val.sm{ font-size:17px; }
+.mc-lbl { font-size:10.5px; color:var(--text-dim); letter-spacing:.5px; text-transform:uppercase; }
+
+.ad-pill {
+  display:inline-flex; align-items:center; gap:5px;
+  padding:4px 11px; border-radius:4px; margin-top:3px;
+  font-family:"DM Mono",monospace; font-size:11.5px; font-weight:500;
+}
+.ad-in  { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,185,129,0.22); }
+.ad-out { background:var(--red-dim);   color:var(--red);   border:1px solid rgba(239,68,68,0.22); }
+.ad-dot { width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block; }
+
+/* ── XAI SECTION ────────────────────────────────────────────── */
+.xai-card {
+  background:var(--card); border:1px solid var(--border);
+  border-radius:8px; padding:18px; margin-bottom:16px;
+  box-shadow:0 1px 3px var(--shadow);
+}
+.xai-head {
+  display:flex; align-items:center; justify-content:space-between;
+  margin-bottom:14px;
+}
+.xai-title { font-size:14px; font-weight:600; color:var(--text); }
+.xai-sub   { font-size:11.5px; color:var(--text-dim); margin-top:2px; }
+.xai-img   { width:100%; border-radius:5px; display:block; }
+#xai-ph    { text-align:center; padding:18px; color:var(--text-dim); font-size:13px; }
+
+/* meta line */
+.meta-line {
+  font-size:11px; color:var(--text-dim);
+  font-family:"DM Mono",monospace; margin-top:6px;
+  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
+}
+.sep { color:var(--border2); }
+
+/* ── ERROR ──────────────────────────────────────────────────── */
+.err {
+  background:var(--red-dim); border:1px solid rgba(239,68,68,0.2);
+  border-radius:6px; padding:9px 13px;
+  color:var(--red); font-size:13px; margin-top:10px; display:none;
+}
+
+/* ── HINT ───────────────────────────────────────────────────── */
+.hint {
+  display:flex; align-items:flex-start; gap:8px;
+  background:var(--blue-dim); border:1px solid rgba(59,130,246,0.18);
+  border-radius:6px; padding:9px 12px;
+  font-size:12px; color:var(--blue);
+  font-family:"DM Mono",monospace; margin-top:12px;
+}
+[data-theme="light"] .hint { border-color:rgba(29,78,216,0.18); }
+.hint-icon { flex-shrink:0; font-size:13px; line-height:1.5; }
+
+/* ── DROPZONE ───────────────────────────────────────────────── */
+.dz {
+  border:2px dashed var(--border2); border-radius:8px;
+  background:var(--bg2); padding:30px 16px;
+  text-align:center; cursor:pointer;
+  transition:border-color .15s, background .15s; position:relative;
+}
+.dz:hover,.dz.over { border-color:var(--blue); background:var(--blue-glow); }
+.dz input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
+.dz svg { width:24px;height:24px;stroke:var(--text-dim);display:block;margin:0 auto 8px; }
+.dz-txt { font-size:13px; color:var(--text-mid); margin-bottom:3px; }
+.dz-sub { font-size:11px; color:var(--text-dim); font-family:"DM Mono",monospace; }
+
+/* ── PROGRESS ───────────────────────────────────────────────── */
+.prog-wrap { background:var(--surface); border-radius:2px; height:2px; overflow:hidden; margin-top:10px; display:none; }
+.prog-fill { height:100%; background:var(--blue); width:0%; transition:width .3s ease; }
+
+/* ── TABLE ──────────────────────────────────────────────────── */
+.tbl-wrap { overflow-x:auto; margin-top:14px; }
+table { width:100%; border-collapse:collapse; font-size:12.5px; }
+thead th {
+  background:var(--card2); padding:8px 11px;
+  text-align:left; font-size:10.5px; font-weight:600;
+  color:var(--text-dim); letter-spacing:.6px; text-transform:uppercase;
+  border-bottom:1px solid var(--border);
+}
+tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
+tbody tr:hover { background:var(--card2); }
+tbody td { padding:8px 11px; color:var(--text); font-family:"DM Mono",monospace; font-size:12px; }
+.td-nm { font-family:"DM Sans",sans-serif; font-size:13px; }
+.r1  { color:var(--blue);  font-weight:600; }
+.rtop{ color:var(--green); }
+
+/* download */
+.btn-dl {
+  display:inline-flex; align-items:center; gap:6px;
+  background:var(--surface); border:1px solid var(--border);
+  border-radius:6px; padding:5px 12px;
+  font-size:12.5px; color:var(--text-mid);
+  font-family:"DM Sans",sans-serif; font-weight:500;
+  text-decoration:none; transition:all .12s; margin-top:10px;
+}
+.btn-dl:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-glow); }
+.btn-dl svg { width:12px;height:12px;stroke:currentColor; }
+
+/* ── SELECTIVITY ────────────────────────────────────────────── */
+.sel-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
+@media(max-width:640px){ .sel-grid{grid-template-columns:1fr;} }
+.sel-card {
+  background:var(--card2); border:1px solid var(--border);
+  border-radius:8px; padding:13px 15px;
+  display:flex; align-items:center; gap:13px;
+}
+.sel-val { font-family:"DM Mono",monospace; font-size:21px; font-weight:500; min-width:50px; text-align:center; }
+.sel-info { flex:1; min-width:0; }
+.sel-lbl { font-size:12.5px; font-weight:500; margin-bottom:2px; }
+.sel-seq {
+  font-family:"DM Mono",monospace; font-size:10px; color:var(--text-dim);
+  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+}
+.sel-row { display:flex; align-items:center; gap:7px; margin-top:5px; }
+
+/* ── FOOTER ─────────────────────────────────────────────────── */
+footer {
+  position:relative; z-index:1;
+  border-top:1px solid var(--border);
+  padding:18px 24px; text-align:center;
+  font-size:11.5px; color:var(--text-dim);
+  font-family:"DM Mono",monospace;
+  transition:border-color .2s;
+}
+footer a { color:var(--blue); text-decoration:none; }
+footer a:hover { text-decoration:underline; }
+</style>
+</head>
+<body>
+
+<!-- HEADER -->
+<header>
+  <div class="hdr">
+    <div class="logo-wrap">
+      <img src="/static/logo.png" class="logo-img" alt="VeloBind"
+           onerror="this.style.display='none'">
+      <span class="logo-text">VeloBind</span>
+    </div>
+    <div class="hdr-right">
+      <div class="hdr-stat">
+        <div class="pulse"></div>
+        R = 0.8469 &nbsp;|&nbsp; CASF-2016
+      </div>
+      <div class="badge badge-green">No 3D structure</div>
+      <div class="badge badge-blue">45-model ensemble</div>
+      <div class="theme-btn" onclick="toggleTheme()" title="Toggle theme">
+        <div class="toggle-track"><div class="toggle-knob"></div></div>
+        <span class="theme-lbl" id="tlbl">Light</span>
+      </div>
+    </div>
+  </div>
+</header>
+
+<!-- MAIN -->
+<main>
+
+  <!-- Page title -->
+  <div class="page-title">
+    <div>
+      <h1>Protein-Ligand <span>Binding Affinity</span> Prediction</h1>
+      <p>Sequence and SMILES-based prediction — no docking, no 3D preprocessing, no crystal structure required. Trained on LP-PDBBind, benchmarked on CASF-2016 and CASF-2013.</p>
+      <div class="title-badges">
+        <span class="badge badge-blue">ESM-2 35M frozen</span>
+        <span class="badge badge-green">LightGBM · CatBoost · XGBoost</span>
+        <span class="badge badge-gray">LP-PDBBind training</span>
+        <span class="badge badge-gray">Applicability domain</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabs -->
+  <div class="tabs">
+    <button class="tab on"  onclick="setTab('single',this)">Single Query</button>
+    <button class="tab"     onclick="setTab('batch',this)">Batch Screening</button>
+    <button class="tab"     onclick="setTab('sel',this)">Selectivity Profile</button>
+  </div>
+
+  <!-- TAB: SINGLE -->
+  <div id="panel-single" class="panel on">
+    <div class="grid2">
+      <div class="card">
+        <div class="card-head">Target Protein</div>
+        <span class="field-label">Amino acid sequence — plain or FASTA</span>
+        <textarea id="seq" rows="7" placeholder=">TargetProtein&#10;MKTAYIAKQRQISFVK..."></textarea>
+        <div class="pill-row">
+          <span class="pill-lbl">Examples:</span>
+          <button class="pill" onclick="loadSeq('egfr')">EGFR kinase</button>
+          <button class="pill" onclick="loadSeq('hiv')">HIV protease</button>
+          <button class="pill" onclick="loadSeq('thrombin')">Thrombin</button>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-head">Ligand</div>
+        <span class="field-label">SMILES string</span>
+        <textarea id="smi" rows="3" placeholder="CCOc1cc2c(cc1OCC)ncnc2Nc1cccc(Cl)c1"></textarea>
+        <div class="pill-row">
+          <span class="pill-lbl">Examples:</span>
+          <button class="pill" onclick="loadSmi('erlotinib')">Erlotinib</button>
+          <button class="pill" onclick="loadSmi('imatinib')">Imatinib</button>
+          <button class="pill" onclick="loadSmi('indinavir')">Indinavir</button>
+        </div>
+      </div>
+    </div>
+
+    <button class="btn-run" id="run-btn" onclick="runSingle()">
+      <div class="loader" id="run-ldr"></div>
+      <span id="run-lbl">Predict Binding Affinity</span>
+    </button>
+    <div class="err" id="single-err"></div>
+
+    <div id="res">
+      <hr class="divider" style="margin-top:18px">
+      <div class="metrics">
+        <div class="mc primary">
+          <div class="mc-val" id="r-pkd">--</div>
+          <div class="mc-lbl">Predicted pKd</div>
+        </div>
+        <div class="mc">
+          <div class="mc-val g sm" id="r-ci">--</div>
+          <div class="mc-lbl">95% model interval</div>
+        </div>
+        <div class="mc">
+          <div class="mc-val w sm" id="r-ki">--</div>
+          <div class="mc-lbl">Estimated Ki</div>
+        </div>
+        <div class="mc">
+          <div id="r-ad" class="ad-pill ad-in">
+            <span class="ad-dot"></span> IN DOMAIN
+          </div>
+          <div class="mc-lbl" style="margin-top:8px">Applicability domain</div>
+        </div>
+      </div>
+
+      <div class="xai-card">
+        <div class="xai-head">
+          <div>
+            <div class="xai-title">Feature Attribution</div>
+            <div class="xai-sub">Physicochemical drivers of this prediction</div>
+          </div>
+          <div class="badge badge-blue">SHAP / LightGBM</div>
+        </div>
+        <img id="xai-img" class="xai-img" src="" alt="" style="display:none">
+        <div id="xai-ph">Chart will appear after prediction</div>
+      </div>
+
+      <div class="meta-line" id="meta"></div>
+    </div>
+  </div>
+
+  <!-- TAB: BATCH -->
+  <div id="panel-batch" class="panel">
+    <div class="grid2">
+      <div class="card">
+        <div class="card-head">Target Protein</div>
+        <span class="field-label">Sequence — plain or FASTA</span>
+        <textarea id="bseq" rows="7" placeholder=">TargetProtein&#10;MKTAYIAKQRQISFVK..."></textarea>
+      </div>
+      <div class="card">
+        <div class="card-head">Compound Library</div>
+        <span class="field-label">CSV with a <code style="color:var(--blue)">smiles</code> column (optional: <code style="color:var(--green)">name</code>)</span>
+        <div class="dz" id="dz">
+          <input type="file" id="bfile" accept=".csv" onchange="fileChosen(this)">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <polyline points="14 2 14 8 20 8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <line x1="12" y1="18" x2="12" y2="12" stroke-width="1.5" stroke-linecap="round"/>
+            <polyline points="9 15 12 12 15 15" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <div class="dz-txt" id="dz-txt">Drop CSV here or click to upload</div>
+          <div class="dz-sub">Requires a smiles column</div>
+        </div>
+        <div class="hint">
+          <span class="hint-icon">i</span>
+          Max 500 compounds per batch on this server. For larger libraries, use the Python API.
+        </div>
+      </div>
+    </div>
+
+    <button class="btn-run" id="batch-btn" onclick="runBatch()">
+      <div class="loader" id="batch-ldr"></div>
+      <span id="batch-lbl">Run Batch Screening</span>
+    </button>
+    <div class="prog-wrap" id="prog-wrap"><div class="prog-fill" id="prog-fill"></div></div>
+    <div class="err" id="batch-err"></div>
+
+    <div id="batch-out" style="display:none;margin-top:18px">
+      <div style="display:flex;align-items:center;justify-content:space-between">
+        <div style="font-size:15px;font-weight:600">Ranked results</div>
+        <a id="dl-csv" class="btn-dl" href="#" download="velobind_results.csv">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <polyline points="7 10 12 15 17 10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <line x1="12" y1="15" x2="12" y2="3" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          Download CSV
+        </a>
+      </div>
+      <div class="tbl-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Rank</th><th>Name</th><th>pKd</th>
+              <th>95% CI</th><th>Ki estimate</th><th>AD</th><th>SMILES</th>
+            </tr>
+          </thead>
+          <tbody id="btbody"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- TAB: SELECTIVITY -->
+  <div id="panel-sel" class="panel">
+    <div class="grid2">
+      <div class="card">
+        <div class="card-head">Ligand</div>
+        <span class="field-label">SMILES string</span>
+        <textarea id="ssmi" rows="4" placeholder="Paste SMILES..."></textarea>
+      </div>
+      <div class="card">
+        <div class="card-head">Off-target Panel</div>
+        <span class="field-label">One protein sequence per line (plain or FASTA)</span>
+        <textarea id="sseqs" rows="4" placeholder="Paste sequences, one per line..."></textarea>
+        <!--
+        <div class="pill-row" style="margin-top:10px">
+          <button class="pill" onclick="loadPanel('kinase')">Kinase panel</button>
+          <button class="pill" onclick="loadPanel('protease')">Protease panel</button>
+        </div>
+        -->
+      </div>
+    </div>
+
+    <button class="btn-run" id="sel-btn" onclick="runSel()">
+      <div class="loader" id="sel-ldr"></div>
+      <span id="sel-lbl">Run Selectivity Profile</span>
+    </button>
+    <div class="err" id="sel-err"></div>
+
+    <div id="sel-out" style="display:none;margin-top:18px">
+      <div style="font-size:15px;font-weight:600;margin-bottom:12px">Selectivity profile</div>
+      <div class="sel-grid" id="sel-cards"></div>
+    </div>
+  </div>
+
+</main>
+
+<footer>
+  VeloBind &nbsp;·&nbsp; R = 0.8469 CASF-2016 / R = 0.7799 CASF-2013 &nbsp;·&nbsp;
+  Sequence + SMILES only &nbsp;·&nbsp;
+  <a href="https://github.com/umarbioinfo/VeloBind" target="_blank">GitHub</a>
+  &nbsp;·&nbsp;
+  <a href="#" onclick="return false">Preprint</a>
+</footer>
+
+<script>
+// Theme
+function toggleTheme(){
+  const h   = document.documentElement;
+  const nxt = h.getAttribute('data-theme')==='dark' ? 'light' : 'dark';
+  h.setAttribute('data-theme', nxt);
+  document.getElementById('tlbl').textContent = nxt==='dark' ? 'Light' : 'Dark';
+  localStorage.setItem('vb-theme', nxt);
+}
+(function(){
+  const s = localStorage.getItem('vb-theme');
+  if(s){
+    document.documentElement.setAttribute('data-theme',s);
+    document.getElementById('tlbl').textContent = s==='dark'?'Light':'Dark';
+  }
+})();
+
+// Tabs
+function setTab(name,btn){
+  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('on'));
+  document.querySelectorAll('.tab').forEach(b=>b.classList.remove('on'));
+  document.getElementById('panel-'+name).classList.add('on');
+  btn.classList.add('on');
+}
+
+// Example data
+const SEQS = {
+  egfr:"MRPSGTAGAALLALLAALCPASRALEEKKVCQGTSNKLTQLGTFEDHFLSLQRMFNNCEVVLGNLEITYVQRNYDLSFLKTIQEVAGYVLIALNTVERIPLENLQIIRGNMYYENSYALAVLSNYDANKTGLKELPMRNLQEILHGAVRFSNNPALCNVESIQWRDIVSSDFLSNMSMDFQNHLGSCQKCDPSCPNGSCWGAGEENCQKLTKIICAQQCSGRCRGKSPSDCCHNQCAAGCTGPRESDCLVCRKFRDEATCKDTCPPLMLYNPTTYQMDVNPEGKYSFGATCVKKCPRNYVVTDHGSCVRACGADSYEMEEDGVRKCKKCEGPCRKVCNGIGIGEFKDSLSINATNIKHFKNCTSISGDLHILPVAFRGDSFTHTPPLDPQELDILKTVKEITGFLLIQAWPENRTDLHAFENLEIIRGRTKQHGQFSLAVVSLNITSLGLRSLKEISDGDVIISGNKNLCYANTINWKKLFGTSGQKTKIISNRGENSCKATGQVCHALCSPEGCWGPEPRDCVSCRNVSRGRECVDKCNLLEGEPREFVENSECIQCHPECLPQAMNITCTGRGPDNCIQCAHYIDGPHCVKTCPAGVMGENNTLVWKYADAGHVCHLCHPNCTYGCTGPGLEGCPTNGPKIPSIATGMVGALLLLLVVALGIGLFMRRRHIVRKRTLRRLLQERELVEPLTPSGEAPNQALLRILKETEFKKIKVLGSGAFGTVYKGLWIPEGEKVKIPVAIKELREATSPKANKEILDEAYVMASVDNPHVCRLLGICLTSTVQLITQLMPFGCLLDYVREHKDNIGSQYLLNWCVQIAKGMNYLEDRRLVHRDLAARNVLVKTPQHVKITDFGLAKLLGAEEKEYHAEGGKVPIKWMALESILHRIYTHQSDVWSYGVTVWELMTFGSKPYDGIPASEISSILEKGERLPQPPICTIDVYMIMVKCWMIDADSRPKFRELIIEFSKMARDPQRYLVIQGDERMHLPSPTDSNFYRALMDEEDMDDVVDADEYLIPQQGFFSSPSTSRTPLLSSLSATSNNSTVACIDRNGLQSCPIKEDSFLQRYSSDPTGALTEDSIDDTFLPVPEYINQSVPKRPAGSVQNPVYHNQPLNPAPSRDPHYQDPHSTAVGNPEYLNTVQPTCVNSTFDSPAHWAQKGSHQISLDNPDYQQDFFPKEAKPNGIFKGSTAENAEYLRVAPQSSEFIGA",
+  hiv:"PQITLWQRPLVTIKIGGQLKEALLDTGADDTVLEEMNLPGRWKPKMIGGIGGFIKVRQYDQILIEICGHKAIGTVLVGPTPVNIIGRNLLTQIGCTLNF",
+  thrombin:"MAHVRGLQLPGCLALAALCSLVHSQHVFLAPQQARSLLQRVRRANTFLEEVRKGNLERECVEETCSYEEAFEALESSTATDVFWAKYTACETARTPRDKLAACLEGNCAEGLGTNYRGHVNITRSGIECQLWRSRYPHKPEINSTTHPGADLQENFCRNPDSSTTGPWCYTTDPTVRRQECSIPVCGQDQVTVAMTPRSEGSSVNLSPPLEQCVPDRGQQYQLRPVQPFLNQLREIFNMAR",
+};
+const SMIS = {
+  erlotinib:"CCOc1cc2c(cc1OCC)ncnc2Nc1cccc(Cl)c1",
+  imatinib: "Cc1ccc(NC(=O)c2ccc(CN3CCN(C)CC3)cc2)cc1Nc1nccc(-c2cccnc2)n1",
+  indinavir:"OC[C@@H](NC(=O)[C@@H]1CN(Cc2cccnc2)C[C@H]1NC(=O)[C@@H](CC(C)C)NC(=O)c1cc2ccccc2[nH]1)Cc1ccccc1",
+};
+function loadSeq(k){ document.getElementById('seq').value=SEQS[k]||''; }
+function loadSmi(k){ document.getElementById('smi').value=SMIS[k]||''; }
+
+// Single
+async function runSingle(){
+  const seq=document.getElementById('seq').value.trim();
+  const smi=document.getElementById('smi').value.trim();
+  const err=document.getElementById('single-err');
+  err.style.display='none';
+  if(!seq) return showErr(err,'Please enter a protein sequence.');
+  if(!smi) return showErr(err,'Please enter a SMILES string.');
+  const dark = document.documentElement.getAttribute('data-theme')==='dark';
+  setL('run',true);
+  document.getElementById('res').style.display='none';
+  try{
+    const t0=performance.now();
+    const r=await fetch('/predict',{
+      method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({sequence:seq,smiles:smi,dark})
+    });
+    const d=await r.json();
+    const ms=((performance.now()-t0)/1000).toFixed(2);
+    if(!r.ok||d.error) return showErr(err,d.error||'Prediction failed.');
+    document.getElementById('r-pkd').textContent=d.pkd.toFixed(2);
+    document.getElementById('r-ci').textContent='['+d.ci_lo.toFixed(2)+', '+d.ci_hi.toFixed(2)+']';
+    document.getElementById('r-ki').textContent=d.ki;
+    const ad=document.getElementById('r-ad');
+    ad.className='ad-pill '+(d.in_domain?'ad-in':'ad-out');
+    ad.innerHTML='<span class="ad-dot"></span> '+(d.in_domain?'IN DOMAIN':'OUT OF DOMAIN');
+    if(d.xai_img){
+      document.getElementById('xai-img').src=d.xai_img;
+      document.getElementById('xai-img').style.display='block';
+      document.getElementById('xai-ph').style.display='none';
+    }
+    document.getElementById('meta').innerHTML=
+      `<span>Time: ${ms}s</span><span class="sep">|</span>`+
+      `<span>45-model ensemble</span><span class="sep">|</span>`+
+      `<span>Device: CPU</span>`;
+    document.getElementById('res').style.display='block';
+  }catch(e){ showErr(err,'Network error: '+e.message); }
+  finally{ setL('run',false); }
+}
+
+// Batch
+async function runBatch(){
+  const seq=document.getElementById('bseq').value.trim();
+  const file=document.getElementById('bfile').files[0];
+  const err=document.getElementById('batch-err');
+  err.style.display='none';
+  if(!seq)  return showErr(err,'Please enter a protein sequence.');
+  if(!file) return showErr(err,'Please upload a CSV file.');
+  const fd=new FormData(); fd.append('sequence',seq); fd.append('file',file);
+  setL('batch',true);
+  document.getElementById('batch-out').style.display='none';
+  animProg();
+  try{
+    const r=await fetch('/batch',{method:'POST',body:fd});
+    const d=await r.json();
+    if(!r.ok||d.error) return showErr(err,d.error||'Batch failed.');
+    renderBatch(d.results);
+  }catch(e){ showErr(err,'Network error: '+e.message); }
+  finally{ setL('batch',false); stopProg(); }
+}
+
+function renderBatch(rows){
+  const tb=document.getElementById('btbody');
+  tb.innerHTML='';
+  rows.forEach((r,i)=>{
+    const rank=i+1;
+    const cls=rank===1?'r1':rank<=5?'rtop':'';
+    const tr=document.createElement('tr');
+    tr.innerHTML=`
+      <td class="${cls}">#${rank}</td>
+      <td class="td-nm">${r.name||'--'}</td>
+      <td class="${cls}" style="font-weight:${rank<=3?600:400}">${r.pkd.toFixed(2)}</td>
+      <td>[${r.ci_lo.toFixed(2)}, ${r.ci_hi.toFixed(2)}]</td>
+      <td>${r.ki}</td>
+      <td><span class="ad-pill ${r.in_domain?'ad-in':'ad-out'}" style="font-size:10.5px;padding:2px 7px">
+        ${r.in_domain?'In domain':'Out of domain'}</span></td>
+      <td style="max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+          title="${r.smiles}">${r.smiles}</td>`;
+    tb.appendChild(tr);
+  });
+  let csv='rank,name,smiles,pkd,ci_lo,ci_hi,ki,in_domain\n';
+  rows.forEach((r,i)=>{ csv+=`${i+1},"${r.name||''}","${r.smiles}",${r.pkd.toFixed(3)},${r.ci_lo.toFixed(3)},${r.ci_hi.toFixed(3)},"${r.ki}",${r.in_domain}\n`; });
+  document.getElementById('dl-csv').href=URL.createObjectURL(new Blob([csv],{type:'text/csv'}));
+  document.getElementById('batch-out').style.display='block';
+}
+
+// Selectivity
+async function runSel(){
+  const smi=document.getElementById('ssmi').value.trim();
+  const seqs=document.getElementById('sseqs').value.trim();
+  const err=document.getElementById('sel-err');
+  err.style.display='none';
+  if(!smi)  return showErr(err,'Please enter a SMILES string.');
+  if(!seqs) return showErr(err,'Please enter at least one sequence.');
+  const arr=seqs.split('\n').map(s=>s.trim()).filter(s=>s&&!s.startsWith('>'));
+  setL('sel',true);
+  document.getElementById('sel-out').style.display='none';
+  try{
+    const r=await fetch('/selectivity',{
+      method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({smiles:smi,sequences:arr})
+    });
+    const d=await r.json();
+    if(!r.ok||d.error) return showErr(err,d.error||'Failed.');
+    const c=document.getElementById('sel-cards');
+    c.innerHTML='';
+    const pal=['var(--blue)','var(--green)','#8B5CF6','var(--red)','#06B6D4'];
+    d.results.forEach((r,i)=>{
+      const col=pal[i%pal.length];
+      c.innerHTML+=`
+        <div class="sel-card">
+          <div class="sel-val" style="color:${col}">${r.pkd.toFixed(2)}</div>
+          <div class="sel-info">
+            <div class="sel-lbl">Target ${i+1}</div>
+            <div class="sel-seq">${(r.sequence||'').substring(0,44)}...</div>
+            <div class="sel-row">
+              <span class="ad-pill ${r.in_domain?'ad-in':'ad-out'}" style="font-size:10px;padding:2px 7px">
+                ${r.in_domain?'In domain':'Out of domain'}</span>
+              <span style="font-family:'DM Mono',monospace;font-size:11px;color:var(--text-mid)">Ki ~ ${r.ki}</span>
+            </div>
+          </div>
+        </div>`;
+    });
+    document.getElementById('sel-out').style.display='block';
+  }catch(e){ showErr(err,'Network error: '+e.message); }
+  finally{ setL('sel',false); }
+}
+
+// Dropzone
+const dz=document.getElementById('dz');
+['dragenter','dragover'].forEach(e=>dz.addEventListener(e,ev=>{ev.preventDefault();dz.classList.add('over');}));
+['dragleave','drop'].forEach(e=>dz.addEventListener(e,ev=>{
+  ev.preventDefault();dz.classList.remove('over');
+  if(ev.type==='drop'){
+    const f=ev.dataTransfer.files[0];
+    if(f){document.getElementById('bfile').files=ev.dataTransfer.files;fileChosen({files:[f]});}
+  }
+}));
+function fileChosen(input){
+  const f=input.files[0];
+  if(f) document.getElementById('dz-txt').textContent=f.name;
+}
+
+// Helpers
+function setL(key,on){
+  const btn=document.getElementById(key+'-btn');
+  const ldr=document.getElementById(key+'-ldr');
+  const lbl=document.getElementById(key+'-lbl');
+  btn.disabled=on; ldr.style.display=on?'block':'none';
+  lbl.textContent=on?'Computing...':{run:'Predict Binding Affinity',batch:'Run Batch Screening',sel:'Run Selectivity Profile'}[key];
+}
+function showErr(el,msg){ el.textContent=msg; el.style.display='block'; }
+
+let pi=null;
+function animProg(){
+  const w=document.getElementById('prog-wrap');
+  const f=document.getElementById('prog-fill');
+  w.style.display='block'; let p=0;
+  pi=setInterval(()=>{ p=Math.min(p+Math.random()*7,88); f.style.width=p+'%'; },300);
+}
+function stopProg(){
+  clearInterval(pi);
+  const f=document.getElementById('prog-fill');
+  const w=document.getElementById('prog-wrap');
+  f.style.width='100%';
+  setTimeout(()=>{ w.style.display='none'; f.style.width='0%'; },500);
+}
+</script>
+</body>
+</html>"""
+
+# ---------------------------------------------------------------------------
+# Routes
+# ---------------------------------------------------------------------------
+@app.route("/")
+def index():
+    return render_template_string(HTML)
+
+@app.route("/static/<path:filename>")
+def static_files(filename):
+    return send_from_directory("static", filename)
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    data   = request.get_json(force=True)
+    seq    = clean_fasta(data.get("sequence","").strip())
+    smiles = data.get("smiles","").strip()
+    dark   = data.get("dark", True)
+    if not seq:    return jsonify({"error":"Protein sequence is required."}), 400
+    if not smiles: return jsonify({"error":"SMILES string is required."}), 400
+    t0 = time.time()
+    try:
+        lig, err = ligand_features(smiles)
+        if err: return jsonify({"error":f"Ligand: {err}"}), 400
+        esm_mean = embed_sequence(seq)
+        seqfeat  = seq_features(seq)
+        X        = assemble(esm_mean, seqfeat, lig)
+        pkd, ci_lo, ci_hi = predict_pkd(X)
+        if pkd is None:
+            import random; random.seed(hash(seq[:20]+smiles[:20])%2**31)
+            pkd=random.uniform(5.5,9.0); ci_lo=pkd-0.8; ci_hi=pkd+0.8
+        in_domain, ad_dist = check_ad(esm_mean)
+        return jsonify({
+            "pkd":round(pkd,3), "ci_lo":round(ci_lo,3), "ci_hi":round(ci_hi,3),
+            "ki":pkd_to_ki(pkd), "in_domain":bool(in_domain),
+            "ad_dist":round(ad_dist,3),
+            "xai_img":xai_chart(smiles,pkd,dark=bool(dark)),
+            "elapsed":round(time.time()-t0,2),
+        })
+    except Exception as e:
+        return jsonify({"error":str(e)}), 500
+
+@app.route("/batch", methods=["POST"])
+def batch():
+    seq  = clean_fasta(request.form.get("sequence","").strip())
+    file = request.files.get("file")
+    if not seq:  return jsonify({"error":"Protein sequence required."}), 400
+    if not file: return jsonify({"error":"CSV file required."}), 400
+    try: df=pd.read_csv(file)
+    except Exception as e: return jsonify({"error":f"Could not read CSV: {e}"}), 400
+    col=next((c for c in df.columns if c.lower() in ("smiles","smile","smi","canonical_smiles")),None)
+    if col is None: return jsonify({"error":"No 'smiles' column found."}), 400
+    df=df.head(500)
+    name_col=next((c for c in df.columns if c.lower() in ("name","compound_name","id","molecule_name")),None)
+    try:
+        esm_mean=embed_sequence(seq); seqfeat=seq_features(seq)
+        in_domain,_=check_ad(esm_mean)
+    except Exception as e: return jsonify({"error":f"Protein error: {e}"}), 500
+    results=[]
+    for _,row in df.iterrows():
+        smi=str(row[col]).strip(); name=str(row[name_col]).strip() if name_col else ""
+        try:
+            lig,err=ligand_features(smi)
+            if err: continue
+            X=assemble(esm_mean,seqfeat,lig)
+            pkd,ci_lo,ci_hi=predict_pkd(X)
+            if pkd is None:
+                import random; random.seed(hash(smi)%2**31)
+                pkd=random.uniform(5.0,9.0); ci_lo=pkd-0.8; ci_hi=pkd+0.8
+            results.append({"name":name,"smiles":smi,"pkd":round(pkd,3),
+                             "ci_lo":round(ci_lo,3),"ci_hi":round(ci_hi,3),
+                             "ki":pkd_to_ki(pkd),"in_domain":bool(in_domain)})
+        except: continue
+    results.sort(key=lambda r:r["pkd"],reverse=True)
+    return jsonify({"results":results})
+
+@app.route("/selectivity", methods=["POST"])
+def selectivity():
+    data=request.get_json(force=True)
+    smiles=data.get("smiles","").strip(); seqs=data.get("sequences",[])
+    if not smiles: return jsonify({"error":"SMILES required."}), 400
+    if not seqs:   return jsonify({"error":"At least one sequence required."}), 400
+    try:
+        lig,err=ligand_features(smiles)
+        if err: return jsonify({"error":f"Ligand: {err}"}), 400
+    except Exception as e: return jsonify({"error":str(e)}), 500
+    results=[]
+    for seq in seqs[:10]:
+        seq=clean_fasta(seq.strip())
+        if not seq: continue
+        try:
+            esm_mean=embed_sequence(seq); seqfeat=seq_features(seq)
+            X=assemble(esm_mean,seqfeat,lig)
+            pkd,ci_lo,ci_hi=predict_pkd(X)
+            if pkd is None:
+                import random; random.seed(hash(seq[:20])%2**31)
+                pkd=random.uniform(4.5,9.0); ci_lo=pkd-0.8; ci_hi=pkd+0.8
+            in_domain,_=check_ad(esm_mean)
+            results.append({"sequence":seq,"pkd":round(pkd,3),
+                             "ci_lo":round(ci_lo,3),"ci_hi":round(ci_hi,3),
+                             "ki":pkd_to_ki(pkd),"in_domain":bool(in_domain)})
+        except: continue
+    results.sort(key=lambda r:r["pkd"],reverse=True)
+    return jsonify({"results":results})
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port, debug=False)