Spaces:

Sbhat2026
/

protfunc

Running

App Files Files Community

protfunc / static /interface.html

Sbhat2026

fix: version display v5.0 badge and footer

b127623 1 day ago

raw

history blame contribute delete

104 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>ProtFunc — Protein Function Prediction</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
	<link rel="stylesheet" href="/static/home.css" />
	<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
	<style>
	, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

	:root {
	/* Base palette — PRISM-consistent */
	--bg: #f5f7fa;
	--surface: #ffffff;
	--surface-2: #f0f2f6;
	--surface-3: #e8ebf2;
	--border: #e2e5ec;
	--text: #111827;
	--text-primary: #111827;
	--text-secondary:#6b7280;
	--text-muted: #9ca3af;
	--text-dim: #9ca3af;
	--accent: #6366f1;
	--accent-2: #8b5cf6;
	--accent-light: rgba(99,102,241,0.08);
	--accent-blue: #0891b2;
	--accent-blue-dim: rgba(8,145,178,0.1);
	/* Confidence palette */
	--high-bg: rgba(22,163,74,0.08);
	--high-border: rgba(22,163,74,0.25);
	--high-text: #15803d;
	--high-bar: #16a34a;
	--med-bg: rgba(202,138,4,0.08);
	--med-border: rgba(202,138,4,0.25);
	--med-text: #a16207;
	--med-bar: #ca8a04;
	--low-bg: rgba(220,38,38,0.06);
	--low-border: rgba(220,38,38,0.2);
	--low-text: #b91c1c;
	--low-bar: #dc2626;
	/* Layout */
	--sidebar-w: 228px;
	--radius: 10px;
	--radius-sm: 7px;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
	--transition: 0.15s cubic-bezier(0.4,0,0.2,1);
	}

	body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, sans-serif; }

	/* ── App layout ─────────────────────────────────────────────────────── */
	#pf-app { display: flex; height: 100vh; overflow: hidden; }
	#pf-app[hidden] { display: none !important; }

	.app-layout { display: flex; width: 100%; height: 100%; overflow: hidden; }

	/* ── Sidebar ────────────────────────────────────────────────────────── */
	.sidebar {
	width: var(--sidebar-w); flex-shrink: 0;
	background: var(--surface);
	border-right: 1px solid var(--border);
	display: flex; flex-direction: column;
	height: 100%; overflow: hidden;
	}
	.sidebar-header {
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--border);
	}
	.logo {
	display: flex; align-items: center; gap: 8px;
	text-decoration: none; color: var(--text);
	}
	.logo-icon {
	width: 28px; height: 28px; border-radius: 7px;
	background: var(--accent-light);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent);
	}
	.logo-text { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; }
	.logo-badge {
	font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em;
	background: var(--accent-light); color: var(--accent);
	padding: 2px 7px; border-radius: 10px; border: 1px solid rgba(99,102,241,0.2);
	}

	.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; }
	.nav-section { margin-bottom: 20px; }
	.nav-section-title {
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--text-muted);
	padding: 0 8px 6px;
	}
	.nav-item {
	display: flex; align-items: center; gap: 10px;
	width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
	font-size: 0.82rem; font-weight: 500; color: var(--text-secondary);
	background: none; border: none; cursor: pointer; text-align: left;
	text-decoration: none; transition: background var(--transition), color var(--transition);
	}
	.nav-item:hover { background: var(--surface-2); color: var(--text); }
	.nav-item.active { background: var(--accent-light); color: var(--accent); }
	.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }

	.history-section { margin-top: auto; }
	.sidebar-footer {
	padding: 12px 8px;
	border-top: 1px solid var(--border);
	}
	.model-badge {
	display: flex; align-items: center; gap: 6px;
	font-size: 0.72rem; color: var(--text-secondary);
	}
	.dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--high-bar); flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(22,163,74,0.2);
	}
	.sidebar-overlay { display: none; }

	/* ── Main content ───────────────────────────────────────────────────── */
	.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

	.topbar {
	height: 52px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	}
	.topbar-left { display: flex; align-items: center; gap: 12px; }
	.topbar-right { display: flex; align-items: center; gap: 10px; }
	.page-title { font-size: 0.95rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
	.mobile-menu-btn { display: none; }
	.icon-btn {
	width: 32px; height: 32px; border-radius: var(--radius-sm);
	background: none; border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; color: var(--text-secondary);
	transition: background var(--transition), border-color var(--transition);
	}
	.icon-btn:hover { background: var(--surface-2); color: var(--text); }
	.icon-btn svg { width: 15px; height: 15px; }

	.page-content { flex: 1; overflow-y: auto; padding: 24px; }

	/* ── Cards ──────────────────────────────────────────────────────────── */
	.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	margin-bottom: 16px;
	}
	.card-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--border);
	}
	.card-title { font-size: 0.85rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
	.card-body { padding: 16px 18px; }

	/* ── Input area ─────────────────────────────────────────────────────── */
	.demo-bar {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	margin-bottom: 12px;
	}
	.demo-label { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
	.demo-btn {
	font-size: 0.72rem; padding: 3px 10px; border-radius: 20px;
	border: 1px solid var(--border); background: var(--surface-2);
	color: var(--text-secondary); cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
	}
	.demo-btn:hover { border-color: var(--accent); color: var(--accent); }

	.textarea-wrapper { position: relative; margin-bottom: 10px; }
	.seq-textarea {
	width: 100%; min-height: 120px; max-height: 320px;
	padding: 12px 14px;
	background: var(--surface-2); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82rem; line-height: 1.6;
	resize: vertical; outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
	}
	.seq-textarea:focus { border-color: rgba(99,102,241,0.4); box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
	.seq-textarea::placeholder { color: var(--text-muted); font-style: italic; }
	.char-count { font-size: 0.72rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

	.action-bar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
	}
	.input-hints { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
	.hint-tag {
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em;
	padding: 3px 8px; border-radius: 20px;
	background: var(--accent-light); color: var(--accent);
	border: 1px solid rgba(99,102,241,0.2);
	}
	.taxon-select-wrap { display: flex; align-items: center; gap: 6px; }
	.taxon-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
	.taxon-select {
	padding: 5px 8px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--surface-2);
	color: var(--text); font-size: 0.8rem; font-family: inherit;
	outline: none; cursor: pointer;
	}

	.btn-primary {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 18px; border-radius: var(--radius-sm);
	background: var(--accent); color: #fff;
	border: none; font-size: 0.85rem; font-weight: 600;
	cursor: pointer; white-space: nowrap;
	transition: background var(--transition), transform 0.1s;
	}
	.btn-primary:hover { background: var(--accent-2); }
	.btn-primary:active { transform: scale(0.98); }
	.btn-primary svg { width: 14px; height: 14px; }
	.btn-primary:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }

	/* ── Status bar ─────────────────────────────────────────────────────── */
	.status-bar {
	padding: 10px 14px; border-radius: var(--radius-sm);
	font-size: 0.82rem; background: var(--surface-2);
	border: 1px solid var(--border); color: var(--text-secondary);
	margin-bottom: 12px; display: none;
	}
	.status-bar:not(:empty) { display: block; }
	.status-bar.running { border-color: rgba(99,102,241,0.3); color: var(--accent); }
	.status-bar.error { border-color: var(--low-border); color: var(--low-text); background: var(--low-bg); }

	/* ── Results toolbar ────────────────────────────────────────────────── */
	.results-toolbar {
	display: none; align-items: center; justify-content: space-between;
	gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
	}
	.results-toolbar.visible { display: flex; }
	.toolbar-left { flex: 1; }
	.toolbar-right { display: flex; gap: 6px; }
	.filter-input {
	width: 100%; max-width: 300px;
	padding: 7px 12px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--surface);
	color: var(--text); font-size: 0.82rem; font-family: inherit;
	outline: none;
	transition: border-color var(--transition);
	}
	.filter-input:focus { border-color: rgba(99,102,241,0.4); }
	.export-btn {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--surface);
	color: var(--text-secondary); font-size: 0.78rem; font-weight: 500;
	cursor: pointer; transition: border-color var(--transition), color var(--transition);
	}
	.export-btn:hover { border-color: var(--accent); color: var(--accent); }
	.export-btn svg { width: 13px; height: 13px; }

	/* ── Result cards ───────────────────────────────────────────────────── */
	.results-area { display: flex; flex-direction: column; gap: 12px; }

	.result-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	}
	.result-card.error { border-color: var(--low-border); }
	.result-card.error .result-header { background: var(--low-bg); }

	.result-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px; cursor: pointer;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	transition: background var(--transition);
	gap: 12px;
	}
	.result-header:hover { background: var(--surface-3); }
	.result-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
	.result-name {
	font-size: 0.82rem; font-weight: 600; color: var(--text);
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.result-stats {
	display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
	}

	/* Confidence badges */
	.conf-high { background: var(--high-bg); color: var(--high-text); border: 1px solid var(--high-border); border-radius: 20px; padding: 2px 9px; font-size: 0.7rem; font-weight: 600; }
	.conf-med { background: var(--med-bg); color: var(--med-text); border: 1px solid var(--med-border); border-radius: 20px; padding: 2px 9px; font-size: 0.7rem; font-weight: 600; }
	.conf-low { background: var(--low-bg); color: var(--low-text); border: 1px solid var(--low-border); border-radius: 20px; padding: 2px 9px; font-size: 0.7rem; font-weight: 600; }

	/* Confidence bars */
	.conf-bar-wrap { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; width: 60px; }
	.conf-bar { height: 100%; border-radius: 2px; }
	.conf-bar.high { background: var(--high-bar); }
	.conf-bar.med { background: var(--med-bar); }
	.conf-bar.low { background: var(--low-bar); }

	/* Card tabs inside result cards */
	.card-tab-strip {
	display: flex; gap: 0; border-bottom: 1px solid var(--border);
	background: var(--surface-2);
	}
	.card-tab {
	padding: 8px 14px; font-size: 0.75rem; font-weight: 500;
	color: var(--text-muted); cursor: pointer; border: none; background: none;
	border-bottom: 2px solid transparent; transition: color var(--transition);
	}
	.card-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
	.card-tab:hover:not(.active) { color: var(--text-secondary); }

	.card-tab-panel { padding: 14px 16px; }
	.card-tab-panel[hidden] { display: none !important; }

	/* Prediction rows inside result cards */
	.pred-row {
	display: flex; align-items: center; gap: 10px; padding: 6px 0;
	border-bottom: 1px solid var(--border); font-size: 0.8rem;
	}
	.pred-row:last-child { border-bottom: none; }
	.pred-go-id { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--accent); min-width: 80px; }
	.pred-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.pred-prob { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; min-width: 44px; text-align: right; }

	.no-preds { color: var(--text-muted); font-size: 0.82rem; padding: 12px 0; }
	.suppressed-note { font-size: 0.72rem; color: var(--text-muted); padding-top: 6px; }

	/* Saliency / structure */
	.saliency-btn {
	padding: 6px 14px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--surface-2);
	color: var(--text-secondary); font-size: 0.78rem; cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
	}
	.saliency-btn:hover { border-color: var(--accent); color: var(--accent); }

	/* ── Batch upload ───────────────────────────────────────────────────── */
	.batch-upload {
	border: 2px dashed var(--border); border-radius: var(--radius);
	padding: 40px 24px; text-align: center; cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
	}
	.batch-upload:hover { border-color: var(--accent); background: var(--accent-light); }
	.batch-upload-icon { width: 36px; height: 36px; stroke: var(--text-muted); margin-bottom: 10px; }
	.batch-upload-text { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 4px; }
	.batch-upload-hint { font-size: 0.75rem; color: var(--text-muted); }
	input[type="file"] { display: none; }

	/* ── Pagination ─────────────────────────────────────────────────────── */
	.pagination {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 0; font-size: 0.8rem;
	}
	.page-btn {
	padding: 5px 12px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--surface);
	color: var(--text-secondary); cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
	}
	.page-btn:hover { border-color: var(--accent); color: var(--accent); }
	.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
	.page-info { color: var(--text-muted); font-size: 0.75rem; }

	/* ── History list ───────────────────────────────────────────────────── */
	.history-item {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; border-radius: var(--radius-sm);
	font-size: 0.78rem; color: var(--text-secondary); cursor: pointer;
	transition: background var(--transition);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.history-item:hover { background: var(--surface-2); color: var(--text); }
	.history-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

	/* ── Filter toggles ─────────────────────────────────────────────────── */
	.filter-toggle {
	padding: 4px 10px; font-size: 0.72rem; border-radius: 20px;
	border: 1px solid var(--border); background: var(--surface-2);
	color: var(--text-muted); cursor: pointer;
	transition: border-color var(--transition), color var(--transition), background var(--transition);
	}
	.filter-toggle.active-med { border-color: var(--med-border); background: var(--med-bg); color: var(--med-text); }
	.filter-toggle.active-low { border-color: var(--low-border); background: var(--low-bg); color: var(--low-text); }

	/* ── Generalization table ───────────────────────────────────────────── */
	.gen-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
	.gen-table th {
	text-align: left; padding: 8px 12px; font-size: 0.7rem;
	font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--text-muted); background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	}
	.gen-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
	.gen-table tr:last-child td { border-bottom: none; }
	.gen-table tr:hover td { background: var(--surface-2); }

	/* ── Mobile ─────────────────────────────────────────────────────────── */
	@media (max-width: 700px) {
	.sidebar { position: fixed; left: -100%; top: 0; bottom: 0; z-index: 50; box-shadow: var(--shadow); transition: left 0.25s; }
	.sidebar.open { left: 0; }
	.sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.3); display: none; }
	.sidebar-overlay.visible { display: block; }
	.mobile-menu-btn { display: flex; }
	.page-content { padding: 16px; }
	}
	</style>
	</head>
	<body>

	<!-- ══ LANDING ════════════════════════════════════════════════════════════ -->
	<div id="pf-landing">

	<nav id="pf-nav">
	<a class="pf-nav-logo" href="#">Prot<em>Func</em></a>
	<span class="pf-nav-author">by Siddhant Bhat</span>
	<div class="pf-nav-links">
	<a href="https://github.com/SBhat2026/protfunc" target="_blank" rel="noopener">GitHub</a>
	<a href="https://huggingface.co/Sbhat2026" target="_blank" rel="noopener">Models</a>
	</div>
	<button class="pf-nav-enter" data-pf-cta="predict">Open App</button>
	</nav>

	<section id="pf-hero">
	<canvas id="pf-hero-canvas"></canvas>
	<div class="pf-hero-content">
	<div class="pf-hero-eyebrow pf-reveal">Metazoa-scale · CAFA5-compatible · v2</div>
	<h1 class="pf-hero-h1 pf-reveal pf-reveal-d1">Predicting protein<br><em>molecular function</em><br>from sequence.</h1>
	<p class="pf-hero-sub pf-reveal pf-reveal-d2">A multi-label classifier trained on insects and mammals that maps amino acid sequences to Gene Ontology Molecular Function terms — no structure required.</p>
	<div class="pf-hero-ctas pf-reveal pf-reveal-d3">
	<button class="pf-cta-primary" data-pf-cta="predict">Try a prediction →</button>
	<button class="pf-cta-secondary" data-pf-cta="batch">Batch upload</button>
	</div>
	</div>
	<div class="pf-scroll-hint">
	<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
	<path d="M12 5v14M5 12l7 7 7-7"/>
	</svg>
	Scroll to explore
	</div>
	</section>

	<div id="pf-stat-strip">
	<div class="pf-stat-item pf-reveal">
	<span class="pf-stat-val">0.939</span>
	<span class="pf-stat-label">micro-Fmax (insects · CAFA5)</span>
	</div>
	<div class="pf-stat-item pf-reveal pf-reveal-d1">
	<span class="pf-stat-val">~4,200</span>
	<span class="pf-stat-label">GO molecular function terms</span>
	</div>
	<div class="pf-stat-item pf-reveal pf-reveal-d2">
	<span class="pf-stat-val">35M</span>
	<span class="pf-stat-label">ESM-2 parameter backbone</span>
	</div>
	<div class="pf-stat-item pf-reveal pf-reveal-d3">
	<span class="pf-stat-val">Metazoa</span>
	<span class="pf-stat-label">cross-taxon coverage (insects + mammals)</span>
	</div>
	</div>

	<section class="pf-scrollytell" data-stage="1">
	<div class="pf-scrollytell-inner">
	<div class="pf-story-canvas-wrap">
	<canvas id="pf-story-canvas" width="300" height="300"></canvas>
	</div>
	<div class="pf-story-text">
	<div class="pf-stage-num pf-reveal">Step 1 — Representation</div>
	<h2 class="pf-reveal pf-reveal-d1">ESM-2 encodes each sequence into a rich embedding.</h2>
	<p class="pf-reveal pf-reveal-d2">Every amino acid sequence is passed through ESM-2 (35M parameters, 480-dimensional residue embeddings). Mean-pooling collapses per-residue representations into a single 480d protein vector, enriched with 11 physicochemical features.</p>
	<div class="pf-story-stat pf-reveal pf-reveal-d3"><strong>480d</strong> ESM-2 + <strong>11d</strong> physicochemical</div>
	</div>
	</div>
	</section>

	<section class="pf-scrollytell" data-stage="2">
	<div class="pf-scrollytell-inner reverse">
	<div class="pf-story-canvas-wrap"><canvas id="pf-story-canvas-2" width="320" height="280"></canvas></div>
	<div class="pf-story-text">
	<div class="pf-stage-num pf-reveal">Step 2 — Multi-label classification</div>
	<h2 class="pf-reveal pf-reveal-d1">A residual MLP predicts thousands of GO terms at once.</h2>
	<p class="pf-reveal pf-reveal-d2">The 491d feature vector feeds an ImprovedResidualMLP (2048-hidden, 8 ResBlocks, dropout, LayerNorm). Sigmoid outputs one probability per GO:MF term. Per-label Platt scaling calibrates confidence, and the GO DAG propagates predictions to parent terms.</p>
	<div class="pf-story-stat pf-reveal pf-reveal-d3"><strong>8</strong> ResBlocks · <strong>~4,200</strong> GO-MF outputs · Platt calibrated</div>
	</div>
	</div>
	</section>

	<section class="pf-scrollytell" data-stage="3">
	<div class="pf-scrollytell-inner">
	<div class="pf-story-canvas-wrap"><canvas id="pf-story-canvas-3" width="320" height="280"></canvas></div>
	<div class="pf-story-text">
	<div class="pf-stage-num pf-reveal">Step 3 — Cross-taxon generalization</div>
	<h2 class="pf-reveal pf-reveal-d1">Trained jointly on insects and mammals — generalises across Metazoa.</h2>
	<p class="pf-reveal pf-reveal-d2">An ESM-embedding taxon probe auto-detects whether the input sequence is insect, mammal, or other. The corresponding model variant and per-label thresholds are applied, giving calibrated predictions across taxonomic groups without manual selection.</p>
	<div class="pf-story-stat pf-reveal pf-reveal-d3">Insects ✓ · Mammals ✓ · Fish / Birds — roadmap</div>
	</div>
	</div>
	</section>

	<section class="pf-scrollytell" data-stage="4">
	<div class="pf-scrollytell-inner reverse">
	<div class="pf-story-canvas-wrap"><canvas id="pf-story-canvas-4" width="320" height="280"></canvas></div>
	<div class="pf-story-text">
	<div class="pf-stage-num pf-reveal">Step 4 — Validated against CAFA5</div>
	<h2 class="pf-reveal pf-reveal-d1">Benchmarked with the community standard.</h2>
	<p class="pf-reveal pf-reveal-d2">Evaluation follows the CAFA5 protocol (protein-centric Fmax, AUPR, Smin, coverage). The unified model achieves micro-Fmax 0.939 (insect CAFA5) and 0.804 (mammal, enriched GOA labels). A 480-d ESM-2 taxon probe (96% accuracy) auto-selects per-taxon calibration.</p>
	<div class="pf-story-stat pf-reveal pf-reveal-d3"><strong>0.939</strong> insect · <strong>0.804</strong> mammal · CAFA5 protein-centric</div>
	</div>
	</div>
	</section>

	<section id="pf-footer-cta">
	<h2 class="pf-reveal">Ready to predict?</h2>
	<p class="pf-reveal pf-reveal-d1">Paste any amino acid sequence — plain AA or FASTA — and get GO molecular function predictions in seconds.</p>
	<div class="pf-hero-ctas pf-reveal pf-reveal-d2">
	<button class="pf-cta-primary" data-pf-cta="predict">Try a prediction →</button>
	<button class="pf-cta-secondary" data-pf-cta="batch">Batch upload</button>
	</div>
	</section>

	<section id="pf-cite" style="padding:48px 40px;max-width:760px;margin:0 auto;">
	<h3 style="font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px;">How to cite</h3>
	<p style="font-size:0.8rem;color:var(--text-secondary);margin-bottom:14px;">If you use ProtFunc in your research, please cite:</p>
	<div style="position:relative;">
	<pre id="pf-bibtex" style="background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:16px;font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:0.72rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto;white-space:pre;">@software{bhat_protfunc_2026,
	author = {Bhat, Siddhant},
	title = {{ProtFunc}: Protein Molecular Function Prediction across Metazoa},
	year = {2026},
	url = {https://protfunc.prismlab.workers.dev},
	note = {ESM-2 35M + ImprovedResidualMLP, unified insect/mammal model}
	}</pre>
	<button onclick="(function(){navigator.clipboard.writeText(document.getElementById('pf-bibtex').textContent).then(()=>{this.textContent='Copied!';setTimeout(()=>{this.textContent='Copy'},1500)}).catch(()=>{})}).call(this)" style="position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:0.72rem;cursor:pointer;">Copy</button>
	</div>
	</section>

	<footer class="pf-home-footer">
	<span>ProtFunc · Protein Molecular Function Prediction · v5.0</span>
	<span>Created by <strong>Siddhant Bhat</strong> · Sole author of model, training pipeline, and webapp</span>
	<span>ESM-2 · PyTorch · FastAPI · <a href="https://huggingface.co/Sbhat2026" target="_blank" rel="noopener">HuggingFace Models</a></span>
	</footer>

	</div>
	<!-- ══ END LANDING ════════════════════════════════════════════════════════ -->

	<!-- ══ APP ════════════════════════════════════════════════════════════════ -->
	<div id="pf-app" hidden>
	<div class="app-layout">
	<!-- Sidebar -->
	<aside class="sidebar" id="sidebar">
	<div class="sidebar-header">
	<a href="#" class="logo" onclick="document.getElementById('pf-app').hidden=true;document.getElementById('pf-landing').hidden=false;document.getElementById('pf-landing').style.opacity='1';history.pushState({},'','#');return false;">
	<div class="logo-icon">
	<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
	<circle cx="12" cy="12" r="10"/>
	<path d="M8 12 C8 8 10 6 12 6 C14 6 16 8 16 12 C16 16 14 18 12 18"/>
	<circle cx="12" cy="12" r="2" fill="currentColor"/>
	</svg>
	</div>
	<span class="logo-text">ProtFunc</span>
	<span class="logo-badge" id="modelBadge">v2</span>
	</a>
	</div>

	<nav class="sidebar-nav">
	<div class="nav-section">
	<div class="nav-section-title">Predict</div>
	<button class="nav-item active" data-view="predict">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
	Single Prediction
	</button>
	<button class="nav-item" data-view="batch">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
	Batch Upload
	</button>
	</div>

	<div class="nav-section">
	<div class="nav-section-title">Info</div>
	<button class="nav-item" data-view="generalization">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
	Generalization
	</button>
	<button class="nav-item" data-view="about">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
	About
	</button>
	<a class="nav-item" href="https://www.uniprot.org" target="_blank" rel="noopener">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
	UniProt Database
	</a>
	</div>

	<div class="nav-section history-section">
	<div class="nav-section-title">Recent</div>
	<div id="historyList"></div>
	</div>
	</nav>

	<div class="sidebar-footer">
	<div class="model-badge" style="flex-direction:column;gap:3px;padding:6px 8px;">
	<div style="display:flex;align-items:center;gap:6px;">
	<span class="dot"></span>
	<span id="modelFooterLabel">ESM-2 35M + GO:MF</span>
	</div>
	<div style="font-size:0.65rem;color:var(--text-muted);">Metazoa · CAFA5-compatible</div>
	</div>
	</div>
	</aside>

	<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>

	<!-- Main content -->
	<main class="main-content">
	<header class="topbar">
	<div class="topbar-left">
	<button class="icon-btn mobile-menu-btn" onclick="toggleSidebar()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
	</button>
	<h1 class="page-title" id="pageTitle">Molecular Function Prediction</h1>
	</div>
	<div class="topbar-right">
	<div class="model-badge">
	<span class="dot"></span>
	Model Ready
	</div>
	</div>
	</header>

	<div class="page-content">
	<!-- Predict View -->
	<div id="predictView">
	<div class="card">
	<div class="card-header">
	<span class="card-title">Input Sequence</span>
	<span class="char-count" id="charCount">0 aa</span>
	</div>
	<div class="card-body">
	<div class="demo-bar">
	<span class="demo-label">Try example:</span>
	<button class="demo-btn" onclick="loadDemo('hippo')">Hippo Kinase</button>
	<button class="demo-btn" onclick="loadDemo('opsin')">Opsin Rh6</button>
	<button class="demo-btn" onclick="loadDemo('human')">Human P53</button>
	<button class="demo-btn" onclick="loadDemo('mouse_tp53')">Mouse Trp53</button>
	<button class="demo-btn" onclick="loadDemo('zebrafish_tp53')">Zebrafish tp53</button>
	</div>

	<div class="textarea-wrapper">
	<textarea id="sequenceInput" class="seq-textarea"
	placeholder=">MyProtein MKTIIALSYIFCLVFA... Paste your FASTA sequence above. Add a UniProt accession below to enable 3D structure + saliency visualization."
	spellcheck="false" autocomplete="off"></textarea>
	</div>

	<div style="display:flex;align-items:center;gap:10px;margin:8px 0 4px 0;">
	<label style="font-size:0.78rem;color:var(--text-secondary);white-space:nowrap;min-width:120px;">UniProt Accession <span style="opacity:0.6">(optional)</span></label>
	<input id="uniprotAccession" type="text"
	placeholder="e.g. P04637"
	style="flex:1;max-width:180px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-primary);font-size:0.85rem;font-family:inherit;"
	spellcheck="false" autocomplete="off" />
	<span style="font-size:0.72rem;color:var(--text-muted);">Enables 3D saliency map</span>
	</div>

	<div class="action-bar">
	<div class="input-hints">
	<span class="hint-tag">FASTA</span>
	<span class="hint-tag">Plain AA</span>
	<span class="hint-tag">Multi-sequence</span>
	</div>
	<div class="taxon-select-wrap">
	<label class="taxon-label" for="taxonSelect">Organism</label>
	<select id="taxonSelect" class="taxon-select">
	<option value="auto">Auto-detect</option>
	<option value="insect">Insect</option>
	<option value="mammal">Mammal</option>
	</select>
	</div>
	<button class="btn-primary" id="predictBtn" onclick="predict()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
	Predict Functions
	</button>
	</div>
	</div>
	</div>

	<div id="status" class="status-bar"></div>

	<div id="resultsToolbar" class="results-toolbar">
	<div class="toolbar-left">
	<input class="filter-input" id="termFilter" placeholder="Filter by GO term..." oninput="applyFilters()" />
	</div>
	<div class="toolbar-right">
	<button class="export-btn" onclick="downloadTSV()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
	TSV
	</button>
	<button class="export-btn" onclick="downloadJSON()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
	JSON
	</button>
	</div>
	</div>

	<div id="results" class="results-area"></div>
	<div id="pagination" class="pagination"></div>
	</div>

	<!-- Batch View -->
	<div id="batchView" style="display:none;">
	<div class="card">
	<div class="card-header">
	<span class="card-title">Batch Upload</span>
	</div>
	<div class="card-body">
	<p style="color:var(--text-secondary);margin-bottom:16px;font-size:0.9rem;">
	Upload a FASTA file with multiple sequences for batch prediction. Maximum 100 sequences per batch.
	</p>
	<div class="batch-upload" id="dropZone" onclick="document.getElementById('fileInput').click()">
	<svg class="batch-upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
	<polyline points="17 8 12 3 7 8"/>
	<line x1="12" y1="3" x2="12" y2="15"/>
	</svg>
	<div class="batch-upload-text">Drop FASTA file here or click to upload</div>
	<div class="batch-upload-hint">.fasta, .fa, .txt files supported</div>
	</div>
	<input type="file" id="fileInput" accept=".fasta,.fa,.txt" onchange="handleFileUpload(event)" />
	<div id="batchStatus" class="status-bar" style="margin-top:20px;"></div>
	<div id="batchResults" class="results-area" style="margin-top:20px;"></div>
	</div>
	</div>
	</div>

	<!-- Generalization View -->
	<div id="generalizationView" style="display:none;">
	<div class="card">
	<div class="card-header">
	<span class="card-title">Cross-Taxon Generalization</span>
	</div>
	<div class="card-body">
	<p style="color:var(--text-secondary);margin-bottom:16px;font-size:0.875rem;">
	Cross-taxon generalization: how well the model transfers to each taxonomic group.
	<strong style="color:var(--text-primary);">gen_ratio</strong> = taxon micro-Fmax ÷ insect test micro-Fmax (insect baseline ≈ 0.953).
	Target: ≥ 0.90 (strong), ≥ 0.85 (acceptable). CAFA5-protocol metrics shown where available.
	</p>
	<div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;">
	<div style="font-size:0.75rem;display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:50%;background:var(--high-bar);display:inline-block;"></span> gen_ratio ≥ 0.90</div>
	<div style="font-size:0.75rem;display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:50%;background:var(--med-bar);display:inline-block;"></span> 0.85–0.90</div>
	<div style="font-size:0.75rem;display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:50%;background:var(--low-bar);display:inline-block;"></span> < 0.85</div>
	</div>
	<div id="genTableContainer" style="overflow-x:auto;">
	<p style="color:var(--text-secondary);font-size:0.875rem;">Loading generalization data…</p>
	</div>
	</div>
	</div>
	</div>

	<!-- About View -->
	<div id="aboutView" style="display:none;">
	<div class="card">
	<div class="card-header">
	<span class="card-title">About ProtFunc</span>
	</div>
	<div class="card-body" style="line-height:1.8;color:var(--text-secondary);">
	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">Author</h3>
	<p style="margin-bottom:20px;">
	ProtFunc was designed, trained, and deployed by <strong style="color:var(--text-primary);">Siddhant Bhat</strong> as sole author. Model architecture, training data curation, evaluation against CAFA5 benchmarks, and webapp implementation are all original work.
	</p>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">What is ProtFunc?</h3>
	<p style="margin-bottom:20px;">
	ProtFunc predicts Gene Ontology Molecular Function (GO:MF) terms for protein sequences. It uses <strong style="color:var(--text-primary);">ESM-2</strong>, a protein language model trained on hundreds of millions of sequences, to generate embeddings that are passed through a trained classifier with attention pooling.
	</p>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">How to Use</h3>
	<ul style="padding-left:20px;margin-bottom:20px;">
	<li>Paste your sequence in plain amino acid or FASTA format in the input box</li>
	<li>Multiple sequences can be submitted at once</li>
	<li>Maximum sequence length: 2500 amino acids</li>
	<li>Click <strong>Predict Functions</strong> or press <strong>Cmd/Ctrl + Enter</strong></li>
	<li>For <strong>3D structure + saliency</strong>: enter a UniProt accession (e.g. <code style="background:var(--surface-3);padding:1px 5px;border-radius:3px;">P04637</code>), then click <strong>View Saliency</strong></li>
	</ul>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">Confidence Levels</h3>
	<ul style="padding-left:20px;margin-bottom:20px;">
	<li><span style="color:var(--high-text);">High (75%+)</span> — Strong prediction, reliable</li>
	<li><span style="color:var(--med-text);">Medium (55–75%)</span> — Moderate confidence, hidden by default</li>
	<li><span style="color:var(--low-text);">Low (<55%)</span> — Uncertain, use as supplementary signal only</li>
	</ul>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">Model Information</h3>
	<p style="margin-bottom:20px;">
	ProtFunc uses <strong style="color:var(--text-primary);">ESM-2</strong> (esm2_t12_35M, 480d embeddings) + 11 physicochemical features feeding an <strong style="color:var(--text-primary);">ImprovedResidualMLP</strong> (2048-hidden, 8 ResBlocks, ~4,200 GO-MF outputs). The model is fine-tuned jointly on insect and mammal proteins to support cross-taxon generalization.
	</p>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">CAFA Benchmark Compliance</h3>
	<p style="margin-bottom:12px;">
	Evaluations follow the <strong style="color:var(--text-primary);">CAFA5</strong> protocol (protein-centric Fmax, AUPR, Smin, coverage). The unified model achieves micro-Fmax <strong style="color:var(--high-text);">0.939</strong> (insect) and <strong style="color:var(--high-text);">0.804</strong> (mammal, enriched GOA labels).
	</p>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">Taxon Coverage</h3>
	<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
	<span style="font-size:0.75rem;padding:3px 10px;border-radius:12px;background:var(--high-bg);color:var(--high-text);border:1px solid var(--high-border);">Insects ✓ trained</span>
	<span style="font-size:0.75rem;padding:3px 10px;border-radius:12px;background:var(--accent-light);color:var(--accent);border:1px solid rgba(99,102,241,0.2);">Mammals ✓ fine-tuned</span>
	<span style="font-size:0.75rem;padding:3px 10px;border-radius:12px;background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border);">Fish — planned</span>
	<span style="font-size:0.75rem;padding:3px 10px;border-radius:12px;background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border);">Birds — planned</span>
	<span style="font-size:0.75rem;padding:3px 10px;border-radius:12px;background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border);">All Metazoa — roadmap</span>
	</div>

	<h3 style="color:var(--text-primary);margin-bottom:12px;font-size:1rem;">Research Roadmap</h3>
	<ul style="padding-left:20px;margin-bottom:20px;">
	<li><strong>AlphaFold embeddings</strong> — Augment ESM-2 with structural features from AF2 pLDDT + contact maps for better specificity on rare MF terms</li>
	<li><strong>Fish and bird fine-tuning</strong> — Extend the multi-taxon corpus with fish (Danio, Oreochromis) and avian (Gallus) reviewed SwissProt entries</li>
	<li><strong>Transformer pooling</strong> — Replace mean-pool with a learnable attention pooler over ESM-2 residue tokens</li>
	<li><strong>CAFA5 macro-Fmax</strong> — Target macro-Fmax improvement via threshold-free methods (AUROC ranking) for rare GO leaf terms</li>
	<li><strong>All Metazoa</strong> — Scale to full TrEMBL Metazoa with semi-supervised label propagation via GO DAG</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>
	<!-- ══ END APP ════════════════════════════════════════════════════════════ -->

	<script src="/static/home.js"></script>
	<script>
	// ── State ─────────────────────────────────────────────────────────────────
	const ta = document.getElementById('sequenceInput');
	const cc = document.getElementById('charCount');
	let allResults = [];
	let currentPage = 1;
	const PAGE_SIZE = 10;
	let _seqMap = {}; // globalIdx → raw sequence string for saliency
	let _explainData = {}; // globalIdx → last /api/explainability response
	let _explainViewers = {}; // globalIdx → 3Dmol viewer for explain panel

	// ── Theme ─────────────────────────────────────────────────────────────────
	function applyTheme(light) {
	document.documentElement.classList.toggle('light', light);
	localStorage.setItem('theme', light ? 'light' : 'dark');
	}

	function toggleTheme() {
	applyTheme(!document.documentElement.classList.contains('light'));
	}

	applyTheme(true); // fixed light theme to match PRISM style

	// ── Sidebar ───────────────────────────────────────────────────────────────
	function toggleSidebar() {
	document.getElementById('sidebar').classList.toggle('open');
	document.getElementById('sidebarOverlay').classList.toggle('visible');
	}

	// ── View Navigation ───────────────────────────────────────────────────────
	const views = {
	predict: { el: 'predictView', title: 'Molecular Function Prediction' },
	batch: { el: 'batchView', title: 'Batch Upload' },
	generalization: { el: 'generalizationView', title: 'Cross-Taxon Generalization' },
	about: { el: 'aboutView', title: 'About ProtFunc' }
	};

	document.querySelectorAll('.nav-item[data-view]').forEach(btn => {
	btn.addEventListener('click', () => {
	const view = btn.dataset.view;
	if (!views[view]) return;

	// Update active nav
	document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
	btn.classList.add('active');

	// Show view
	Object.keys(views).forEach(v => {
	document.getElementById(views[v].el).style.display = v === view ? 'block' : 'none';
	});

	// Update title
	document.getElementById('pageTitle').textContent = views[view].title;

	// Close mobile sidebar
	if (window.innerWidth <= 1024) toggleSidebar();
	});
	});

	// ── Char Counter ──────────────────────────────────────────────────────────
	ta.addEventListener('input', () => {
	const seq = ta.value.split('\n').filter(l => !l.trimStart().startsWith('>')).join('').replace(/[^A-Za-z]/g, '');
	cc.textContent = seq.length ? `${seq.length.toLocaleString()} aa` : '0 aa';
	});
	ta.addEventListener('keydown', e => { if (e.key === 'Enter' && (e.metaKey \|\| e.ctrlKey)) predict(); });

	// ── Helpers ───────────────────────────────────────────────────────────────
	function confClass(p) { return p >= 0.75 ? 'conf-high' : p >= 0.55 ? 'conf-med' : 'conf-low'; }
	function confLabel(p) { return p >= 0.75 ? 'High' : p >= 0.55 ? 'Medium' : 'Low'; }
	function confBarClass(p) { return p >= 0.75 ? 'high' : p >= 0.55 ? 'med' : 'low'; }
	function escHtml(s) { return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }

	// ── Validation ────────────────────────────────────────────────────────────
	const MIN_SEQ_LENGTH = 30;
	const MIN_ENTROPY_BITS = 2.5;
	const MAX_DOMINANT_FRAC = 0.60;
	const MIN_DISTINCT_AA = 5;
	const INVALID_AA_RE = /[BJOUXZ]/gi;

	function sequenceEntropy(seq) {
	const upper = seq.toUpperCase();
	const counts = {};
	for (const aa of upper) counts[aa] = (counts[aa] \|\| 0) + 1;
	const n = upper.length;
	return -Object.values(counts).reduce((h, c) => h + (c / n) * Math.log2(c / n), 0);
	}

	function parseSequences(raw) {
	const lines = raw.split('\n');
	const seqs = [];
	let current = null;
	for (const line of lines) {
	const trimmed = line.trim();
	if (trimmed.startsWith('>')) {
	if (current) seqs.push(current);
	current = { name: trimmed.slice(1).trim() \|\| `Sequence ${seqs.length + 1}`, residues: '' };
	} else if (trimmed) {
	if (!current) current = { name: `Sequence ${seqs.length + 1}`, residues: '' };
	current.residues += trimmed.replace(/\s+/g, '');
	}
	}
	if (current) seqs.push(current);
	return seqs;
	}

	function validateSequences(seqs) {
	const errors = [];
	for (const seq of seqs) {
	const label = `"${escHtml(seq.name)}"`;
	const res = seq.residues;

	if (res.length === 0) { errors.push(`${label}: sequence is empty.`); continue; }
	if (res.length < MIN_SEQ_LENGTH) {
	errors.push(`${label}: too short (${res.length} aa, minimum ${MIN_SEQ_LENGTH}).`);
	continue;
	}

	// Non-letter characters (digits, symbols)
	const nonLetter = [...new Set([...res].filter(c => !/[A-Za-z]/.test(c)))];
	if (nonLetter.length > 0) {
	const display = nonLetter.slice(0, 5).map(c => `'${c}'`).join(', ');
	errors.push(`${label}: contains non-amino-acid characters: ${display}. Only single-letter codes are accepted.`);
	continue;
	}

	// DNA/RNA detection
	const upper2 = res.toUpperCase();
	const nuclCount = [...upper2].filter(c => 'ATCGU'.includes(c)).length;
	const distinctChars = new Set(upper2).size;
	if (nuclCount / res.length > 0.85 && distinctChars <= 6) {
	errors.push(`${label}: looks like a nucleotide (DNA/RNA) sequence, not a protein. Enter an amino acid sequence.`);
	continue;
	}

	const badChars = [...new Set((res.match(INVALID_AA_RE) \|\| []).map(c => c.toUpperCase()))];
	if (badChars.length > 0) {
	errors.push(`${label}: invalid characters: ${badChars.join(', ')}.`);
	}

	const upper = res.toUpperCase();
	const counts = {};
	for (const aa of upper) counts[aa] = (counts[aa] \|\| 0) + 1;

	if (Object.keys(counts).length < MIN_DISTINCT_AA) {
	errors.push(`${label}: only ${Object.keys(counts).length} distinct residues (minimum ${MIN_DISTINCT_AA}).`);
	continue;
	}

	const maxCount = Math.max(...Object.values(counts));
	const domFrac = maxCount / res.length;
	if (domFrac > MAX_DOMINANT_FRAC) {
	errors.push(`${label}: low complexity (${Math.round(domFrac * 100)}% single residue).`);
	continue;
	}

	const H = sequenceEntropy(res);
	if (H < MIN_ENTROPY_BITS) {
	errors.push(`${label}: low entropy (${H.toFixed(2)} bits).`);
	}
	}
	return errors;
	}

	// ── Predict ───────────────────────────────────────────────────────────────
	async function predict() {
	const raw = ta.value.trim();
	if (!raw) { shake(); return; }

	const btn = document.getElementById('predictBtn');
	const status = document.getElementById('status');

	const seqs = parseSequences(raw);
	if (seqs.length === 0) { shake(); return; }

	const validationErrors = validateSequences(seqs);
	if (validationErrors.length > 0) {
	status.className = 'status-bar visible';
	status.innerHTML = `<span class="status-error">${validationErrors.join('<br>')}</span>`;
	document.getElementById('results').innerHTML = '';
	shake();
	return;
	}

	btn.disabled = true;
	btn.innerHTML = '<div class="spinner"></div>Running...';
	status.className = 'status-bar visible';
	status.innerHTML = '<div class="spinner"></div><span class="status-text">Running ESM-2 embeddings...</span>';
	document.getElementById('results').innerHTML = '';
	document.getElementById('pagination').className = 'pagination';
	document.getElementById('resultsToolbar').className = 'results-toolbar';

	try {
	const taxon = (document.getElementById('taxonSelect')?.value) \|\| 'auto';
	const res = await fetch('/predict', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ sequence: raw, taxon }),
	});
	if (!res.ok) throw new Error(`Server error ${res.status}`);
	const data = await res.json();
	if (data.error) throw new Error(data.error);
	status.className = 'status-bar';
	allResults = data.results \|\| [];
	currentPage = 1;
	// Store sequences for saliency lookup (by global index)
	_seqMap = {};
	seqs.forEach((seq, i) => { _seqMap[i] = seq.residues; });
	renderPage();
	if (allResults.length > 0) {
	document.getElementById('resultsToolbar').className = 'results-toolbar visible';
	addToHistory(allResults, raw);
	}
	} catch(e) {
	status.className = 'status-bar visible';
	status.innerHTML = `<span class="status-error">${escHtml(e.message)}</span>`;
	document.getElementById('results').innerHTML = `
	<div style="border:1px solid var(--low-border);background:var(--low-bg);border-radius:10px;padding:20px 24px;display:flex;gap:14px;align-items:flex-start;margin-top:8px;">
	<svg style="flex-shrink:0;width:20px;height:20px;color:var(--low-text);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
	<div>
	<div style="font-size:0.85rem;font-weight:600;color:var(--low-text);margin-bottom:4px;">Prediction failed</div>
	<div style="font-size:0.8rem;color:var(--text-secondary);margin-bottom:12px;">${escHtml(e.message)}</div>
	<div style="display:flex;gap:10px;flex-wrap:wrap;">
	<button onclick="predict()" style="padding:6px 14px;border-radius:6px;border:1px solid var(--low-border);background:var(--surface);color:var(--low-text);font-size:0.8rem;cursor:pointer;font-weight:600;">Retry</button>
	<a href="https://github.com/SBhat2026/protfunc/issues/new" target="_blank" rel="noopener" style="padding:6px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:0.8rem;text-decoration:none;display:inline-flex;align-items:center;">Report issue</a>
	</div>
	</div>
	</div>`;
	} finally {
	btn.disabled = false;
	btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>Predict Functions`;
	}
	}

	// ── Pagination ────────────────────────────────────────────────────────────
	function renderPage() {
	const start = (currentPage - 1) * PAGE_SIZE;
	const pageData = allResults.slice(start, start + PAGE_SIZE);
	renderResults(pageData, start);
	renderPagination();
	}

	function renderPagination() {
	const total = Math.ceil(allResults.length / PAGE_SIZE);
	const pag = document.getElementById('pagination');
	if (total <= 1) { pag.className = 'pagination'; return; }
	pag.className = 'pagination visible';
	let html = `<button class="page-btn" onclick="goPage(${currentPage-1})" ${currentPage===1?'disabled':''}>Prev</button>`;
	for (let i = 1; i <= total; i++) {
	html += `<button class="page-btn ${i===currentPage?'active':''}" onclick="goPage(${i})">${i}</button>`;
	}
	html += `<button class="page-btn" onclick="goPage(${currentPage+1})" ${currentPage===total?'disabled':''}>Next</button>`;
	html += `<span class="page-info">${allResults.length} sequences</span>`;
	pag.innerHTML = html;
	}

	function goPage(p) {
	const total = Math.ceil(allResults.length / PAGE_SIZE);
	if (p < 1 \|\| p > total) return;
	currentPage = p;
	renderPage();
	window.scrollTo({ top: document.getElementById('results').offsetTop - 80, behavior: 'smooth' });
	}

	// ── Render Results ────────────────────────────────────────────────────────
	function predRowHTML(p, extraClass = '') {
	const cc2 = confClass(p.prob);
	const barClass = confBarClass(p.prob);
	return `<div class="pred-row ${cc2} ${extraClass}" data-name="${escHtml((p.name\|\|'').toLowerCase())}" data-goid="${escHtml(p.go_id\|\|'')}">
	<div class="pred-main">
	<span class="pred-name">${escHtml(p.name)}</span>
	<span class="pred-goid"><a href="https://amigo.geneontology.org/amigo/term/${p.go_id}" target="_blank" rel="noopener">${escHtml(p.go_id)}</a></span>
	${extraClass === 'suppressed' ? '<span class="suppressed-reason">Parent term not predicted</span>' : ''}
	</div>
	<div class="pred-right">
	<div class="pred-conf">
	<span class="pred-conf-label">${confLabel(p.prob)}</span>
	<span class="pred-prob">${(p.prob*100).toFixed(1)}%</span>
	</div>
	<div class="prob-bar"><div class="prob-bar-fill ${barClass}" style="width:${Math.round(p.prob*100)}%"></div></div>
	</div>
	</div>`;
	}

	function renderResults(results, offset) {
	const container = document.getElementById('results');
	if (!results \|\| results.length === 0) {
	container.innerHTML = '<p class="no-preds">No results returned.</p>';
	return;
	}

	container.innerHTML = results.map((r, idx) => {
	const globalIdx = (offset \|\| 0) + idx;
	if (r.error) {
	return `<div class="result-card error">
	<div class="result-header">
	<div class="result-header-left">
	<span class="seq-name">${escHtml(r.name \|\| `Sequence ${globalIdx+1}`)}</span>
	</div>
	</div>
	<div class="error-message">${escHtml(r.error)}</div>
	</div>`;
	}

	const preds = r.predictions \|\| [];
	const suppressed = r.suppressed \|\| [];
	const seqName = r.name \|\| `Sequence ${globalIdx+1}`;

	// Sort: confidence band (high≥0.75, med≥0.55, low<0.55) then alphabetical within band
	const _band = p => p.prob >= 0.75 ? 0 : p.prob >= 0.55 ? 1 : 2;
	const _confSort = (a, b) => {
	const bd = _band(a) - _band(b);
	return bd !== 0 ? bd : a.name.localeCompare(b.name);
	};
	const directPreds = preds.filter(p => !p.implied).sort(_confSort);
	const impliedPreds = preds.filter(p => p.implied).sort(_confSort);

	const highCount = directPreds.filter(p => p.prob >= 0.75).length;
	const medCount = directPreds.filter(p => p.prob >= 0.55 && p.prob < 0.75).length;
	const lowCount = directPreds.filter(p => p.prob < 0.55).length;

	// Main display: direct predictions sorted by specificity (most specific first)
	const mainHTML = directPreds.length === 0
	? '<p class="no-preds">No molecular function predicted — lower the threshold or see broader terms below.</p>'
	: directPreds.map(p => predRowHTML(p)).join('');

	// Implied ancestors collapsed (broader MF context)
	const impliedHTML = impliedPreds.length === 0 ? '' : `
	<button class="lower-conf-toggle" aria-expanded="false" onclick="toggleLowerConf(this)">
	<span class="toggle-icon">▶</span>
	${impliedPreds.length} broader MF term${impliedPreds.length !== 1 ? 's' : ''}
	<span class="lower-conf-detail">implied ancestors</span>
	</button>
	<div class="lower-conf-list">
	${impliedPreds.map(p => predRowHTML(p)).join('')}
	</div>`;

	const suppressedHTML = suppressed.length === 0 ? '' : `
	<button class="suppressed-toggle" aria-expanded="false" onclick="toggleSuppressed(this)">
	<span class="toggle-icon">▶</span>
	${suppressed.length} suppressed prediction${suppressed.length > 1 ? 's' : ''}
	<span class="suppressed-tooltip">parent not predicted</span>
	</button>
	<div class="suppressed-list">
	${suppressed.map(p => predRowHTML(p, 'suppressed')).join('')}
	</div>`;

	const uid = (r.uniprot?.accession) \|\| extractUniProtId(seqName) \|\| null;
	const totalPreds = highCount + medCount + lowCount;

	// ── Taxon badge ──────────────────────────────────────────────────────
	const taxon = r.taxon_applied \|\| 'auto';
	const txSrc = r.taxon_source \|\| 'manual';
	const txConf = r.taxon_confidence \|\| 1.0;
	const txIcon = taxon === 'insect' ? '🪲' : '🐭';
	const txLabel = taxon === 'insect' ? 'Insect' : 'Mammal';
	const txSrcLabel = txSrc === 'uniprot' ? 'UniProt taxonomy'
	: txSrc === 'probe' ? `probe ${(txConf*100).toFixed(0)}%`
	: txSrc === 'composition' ? `composition ${(txConf*100).toFixed(0)}%`
	: 'manual';
	const txBadge = `<span class="taxon-badge taxon-${taxon}" title="Detected via ${txSrcLabel}">${txIcon} ${txLabel}</span>`;

	// ── UniProt annotation comparison ────────────────────────────────────
	let uniprotCompareHTML = '';
	if (r.uniprot && r.uniprot.go_mf_known && r.uniprot.go_mf_known.length > 0) {
	const knownIds = new Set(r.uniprot.go_mf_known.map(x => x.go_id));
	const predIds = new Set(preds.map(x => x.go_id));
	const tp = r.uniprot.go_mf_known.filter(x => predIds.has(x.go_id));
	const fn = r.uniprot.go_mf_known.filter(x => !predIds.has(x.go_id));
	const ev_icons = {"experimental":"✓","computational":"~","electronic":"⚡","other":"?"};
	const knownRows = r.uniprot.go_mf_known.map(x => {
	const hit = predIds.has(x.go_id);
	const cls = hit ? 'uniprot-tp' : 'uniprot-fn';
	const lbl = hit ? 'predicted' : 'missed';
	return `<div class="uniprot-row ${cls}">
	<span class="uniprot-ev" title="${x.ev_tier}">${ev_icons[x.ev_tier]\|\|'?'}</span>
	<span class="uniprot-name">${escHtml(x.name)}</span>
	<span class="uniprot-go">${escHtml(x.go_id)}</span>
	<span class="uniprot-lbl">${lbl}</span>
	</div>`;
	}).join('');
	const org = r.uniprot.organism ? `<span style="color:var(--text-muted);font-size:0.68rem;"> — ${escHtml(r.uniprot.organism)}</span>` : '';
	uniprotCompareHTML = `
	<div class="uniprot-compare">
	<div class="uniprot-compare-header">
	UniProt known GO-MF${org}
	<span class="uniprot-stats">
	<span class="tp-count">${tp.length}/${r.uniprot.go_mf_known.length} predicted</span>
	${fn.length ? `<span class="fn-count">${fn.length} missed</span>` : ''}
	</span>
	</div>
	<div class="uniprot-rows">${knownRows}</div>
	<div class="uniprot-legend">
	<span>✓ experimental</span><span>~ computational</span><span>⚡ electronic</span>
	</div>
	</div>`;
	}

	return `
	<div class="result-card" style="animation-delay:${idx*60}ms" data-card-idx="${globalIdx}">
	<div class="result-header">
	<div class="result-header-left">
	<span class="seq-name">${escHtml(seqName)}</span>
	<span class="seq-len">${r.sequence_length \|\| '?'} aa</span>
	${txBadge}
	</div>
	<div class="result-stats">
	${highCount ? `<span class="stat-chip high">${highCount} high</span>` : ''}
	${medCount ? `<span class="stat-chip med">${medCount} med</span>` : ''}
	${lowCount ? `<span class="stat-chip low">${lowCount} low</span>` : ''}
	</div>
	</div>
	<div class="card-tabs" role="tablist">
	<button class="card-tab active" data-tab="predictions" onclick="switchCardTab(${globalIdx}, 'predictions')">
	<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
	Predictions <span class="tab-badge">${totalPreds}</span>
	</button>
	<button class="card-tab" data-tab="explain" onclick="switchCardTab(${globalIdx}, 'explain', '${uid \|\| ''}')">
	<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
	Saliency
	</button>
	<button class="card-tab" data-tab="structure" onclick="switchCardTab(${globalIdx}, 'structure')">
	<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
	3D Structure
	</button>
	<button class="card-tab" data-tab="why" onclick="switchCardTab(${globalIdx}, 'why')">
	<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
	Why?
	</button>
	</div>
	<div class="tab-content active" data-panel="predictions">
	${uniprotCompareHTML}
	<div class="pred-list">${mainHTML}</div>
	${impliedHTML}
	${suppressedHTML}
	</div>
	<div class="tab-content" data-panel="explain">
	<div class="structure-panel open" id="saliency-panel-${globalIdx}"></div>
	</div>
	<div class="tab-content" data-panel="structure">
	<div class="structure-panel open" id="structure-panel-${globalIdx}"></div>
	</div>
	<div class="tab-content" data-panel="why">
	<div class="structure-panel open" id="why-panel-${globalIdx}"></div>
	</div>
	</div>`;
	}).join('');

	applyFilters();
	}

	// Card tab switching — lazy-loads saliency/structure on first view
	function switchCardTab(idx, tab, uid) {
	const card = document.querySelector(`.result-card[data-card-idx="${idx}"]`);
	if (!card) return;
	card.querySelectorAll('.card-tab').forEach(b => {
	b.classList.toggle('active', b.dataset.tab === tab);
	});
	card.querySelectorAll('.tab-content').forEach(c => {
	c.classList.toggle('active', c.dataset.panel === tab);
	});
	if (tab === 'explain') {
	const panel = document.getElementById(`saliency-panel-${idx}`);
	if (panel && panel.innerHTML.trim() === '') loadSaliencyPanel(idx, uid \|\| '');
	} else if (tab === 'structure') {
	const panel = document.getElementById(`structure-panel-${idx}`);
	if (panel && panel.innerHTML.trim() === '') loadStructurePanel(idx);
	} else if (tab === 'why') {
	const panel = document.getElementById(`why-panel-${idx}`);
	if (panel && panel.innerHTML.trim() === '') loadWhyPanel(idx);
	}
	}

	function toggleSuppressed(btn) {
	const expanded = btn.getAttribute('aria-expanded') === 'true';
	btn.setAttribute('aria-expanded', String(!expanded));
	btn.nextElementSibling.classList.toggle('open', !expanded);
	}

	function toggleLowerConf(btn) {
	const expanded = btn.getAttribute('aria-expanded') === 'true';
	btn.setAttribute('aria-expanded', String(!expanded));
	btn.nextElementSibling.classList.toggle('open', !expanded);
	}

	// ── Filters ───────────────────────────────────────────────────────────────
	let showMed = true;
	let showLow = true;

	function applyFilters() {
	const query = (document.getElementById('termFilter').value \|\| '').toLowerCase().trim();
	document.querySelectorAll('.pred-row').forEach(row => {
	const name = row.dataset.name \|\| '';
	const goid = row.dataset.goid \|\| '';
	const isMed = row.classList.contains('conf-med');
	const isLow = row.classList.contains('conf-low');
	const hiddenByConf = (isMed && !showMed) \|\| (isLow && !showLow);
	const hiddenByFilter = query && !name.includes(query) && !goid.includes(query);
	row.classList.toggle('hidden-med', isMed && !showMed);
	row.classList.toggle('hidden-low', isLow && !showLow);
	row.classList.toggle('filtered-out', !hiddenByConf && hiddenByFilter);
	});
	}

	function toggleMed() {
	showMed = !showMed;
	const btn = document.getElementById('toggleMedBtn');
	btn.textContent = showMed ? 'Hide Medium' : 'Show Medium';
	btn.classList.toggle('active', !showMed);
	applyFilters();
	}

	function toggleLow() {
	showLow = !showLow;
	const btn = document.getElementById('toggleLowBtn');
	btn.textContent = showLow ? 'Hide Low' : 'Show Low';
	btn.classList.toggle('active', showLow);
	applyFilters();
	}

	// ── Downloads ─────────────────────────────────────────────────────────────
	function downloadTSV() {
	if (!allResults.length) return;
	const rows = ['Protein\tLength\tGO_ID\tFunction\tConfidence'];
	for (const r of allResults) {
	if (r.error) continue;
	for (const p of (r.predictions \|\| [])) {
	rows.push([r.name, r.sequence_length, p.go_id, p.name, (p.prob*100).toFixed(1)+'%'].join('\t'));
	}
	}
	triggerDownload(rows.join('\n'), 'protfunc_results.tsv', 'text/tab-separated-values');
	}

	function downloadJSON() {
	if (!allResults.length) return;
	triggerDownload(JSON.stringify(allResults, null, 2), 'protfunc_results.json', 'application/json');
	}

	function triggerDownload(content, filename, mime) {
	const blob = new Blob([content], { type: mime });
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url; a.download = filename; a.click();
	URL.revokeObjectURL(url);
	}

	// ── History ───────────────────────────────────────────────────────────────
	const HISTORY_KEY = 'protfunc_history';
	const HISTORY_MAX = 10;

	function loadHistory() {
	try { return JSON.parse(localStorage.getItem(HISTORY_KEY)) \|\| []; }
	catch { return []; }
	}

	function saveHistory(h) { localStorage.setItem(HISTORY_KEY, JSON.stringify(h.slice(0, HISTORY_MAX))); }

	function addToHistory(results, inputSeq) {
	const h = loadHistory();
	const name = results[0]?.name \|\| 'Unknown';
	h.unshift({ name, ts: Date.now(), results, inputSeq });
	saveHistory(h);
	renderHistory();
	}

	function renderHistory() {
	const h = loadHistory();
	const list = document.getElementById('historyList');
	if (h.length === 0) {
	list.innerHTML = '<div class="history-empty">No recent predictions</div>';
	return;
	}
	list.innerHTML = h.slice(0, 5).map((entry, i) => {
	const time = new Date(entry.ts).toLocaleString(undefined, { month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' });
	return `<div class="history-item" onclick="restoreHistory(${i})">
	<span class="history-item-name">${escHtml(entry.name)}</span>
	<span class="history-item-time">${time}</span>
	</div>`;
	}).join('');
	}

	function restoreHistory(i) {
	const h = loadHistory();
	if (!h[i]) return;
	allResults = h[i].results;
	currentPage = 1;
	ta.value = h[i].inputSeq \|\| '';
	const seq = ta.value.split('\n').filter(l => !l.trimStart().startsWith('>')).join('').replace(/[^A-Za-z]/g, '');
	cc.textContent = seq.length ? `${seq.length.toLocaleString()} aa` : '0 aa';
	document.getElementById('resultsToolbar').className = 'results-toolbar visible';
	renderPage();
	}

	// ── Demo sequences ────────────────────────────────────────────────────────
	const DEMOS = {
	hippo: `>Drosophila_Hippo_kinase
	MSEPEVTSVVDMKSPNISSSCSFFKLKKLSEESLLQPPEKVFDIMYKLGEGSYGSVYKAVHKESSSIVAIKLVPVESDLHEIIKEISIMQQCDSPYVVRYYGSYFKQYDLWICMEYCGAGSVSDIMRLRKKTLTEDEIATILSDTLQGLVYLHLRRKIHRDIKAANILLNTEGYAKLADFGVAGQLTDTMAKRNTVIGTPFWMAPEVIEEIGYDCVADIWSLGITALEMAEGKPPYGEIHPMRAIFMIPQKPPPSFREPDRWSTEFIDFVSKCLVKEPDDRATATELLEHEFIRNAKHRSILKPMLEETCAIREQQRANRSFGGVLAASQAKSLATQENGMQQHITDNAFMEDPGTLVPEKFGEYQQSSASDATMIAHAEQGVDEGTLGPGGLRNLSKAAAPAAASSAASPLDMPAVDSGTMVELESNLGTMVINSDSDDSTTAKNNDDQKPRNRYRPQFLEHFDRKNAGDGRGDEKPIATEYSPAAAEQQQQQQQQQQQQDEQHLASGANDLNNWEHNMEMQFQQISAINQYGLQQHQQQQQVLMAYPLMNEQLIALNNQPNLLLSNAAPMGQQGIPAAAPAQPPPAYQNQHMHTQSHAYVEGEFEFLKFLTFDDLNQRLCNIDHEMELEIEQLNKKYNAKRQPIVDAMNAKRKRQQNINNNLIKI`,
	opsin: `>Drosophila_Opsin_Rh6
	MASLHPPSFAYMRDGRNLSLAESVPAEIMHMVDPYWYQWPPLEPMWFGIIGFVIAILGTMSLAGNFIVMYIFTSSKGLRTPSNMFVVNLAFSDFMMMFTMFPPVVLNGFYGTWIMGPFLCELYGMFGSLFGCVSIWSMTLIAYDRYCVIVKGMARKPLTATAAVLRLMVVWTICGAWALMPLFGWNRYVPEGNMTACGTDYFAKDWWNRSYIIVYSLWVYLTPLLTIIFSYWHIMKAVAAHEKAMREQAKKMNVASLRNSEADKSKAIEIKLAKVALTTISLWFFAWTPYTIINYAGIFESMHLSPLSTICGSVFAKANAVCNPIVYGLSHPKYKQVLREKMPCLACGKDDLTSDSRTQATAEISESQA`,
	human: `>Human_P53_Tumor_Suppressor
	MEEPQSDPSVEPPLSQETFSDLWKLLPENNVLSPLPSQAMDDLMLSPDDIEQWFTEDPGPDEAPRMPEAAPPVAPAPAAPTPAAPAPAPSWPLSSSVPSQKTYQGSYGFRLGFLHSGTAKSVTCTYSPALNKMFCQLAKTCPVQLWVDSTPPPGTRVRAMAIYKQSQHMTEVVRRCPHHERCSDSDGLAPPQHLIRVEGNLRVEYLDDRNTFRHSVVVPYEPPEVGSDCTTIHYNYMCNSSCMGGMNRRPILTIITLEDSSGNLLGRNSFEVRVCACPGRDRRTEEENLRKKGEPHHELPPGSTKRALPNNTSSSPQPKKKPLDGEYFTLQIRGRERFEMFRELNEALELKDAQAGKEPGGSRAHSSHLKSKKGQSTSRHKKLMFKTEGPDSD`,
	mouse_tp53: `>Mouse_P53_Trp53
	MTAMEESQSDISLELPLSQETFSGLWKLLPPEDILPSPHCMDDLLLPQDVEEFFEGPSEALRVSGAPAAQDPVTETPGPVAPAPAAPTPAAPAPAPSWPLSSSVPSQKTYPQGLUGFRLGFLHSGTAKSVTCTYSPALNKMFCQLAKTCPVQLWVDSTPPPGTRVRAMAIYKQSQHMTEVVRRCPHHERCSEGSDGLAPPQHLIRVEGNLRVEYLDDRNTFRHSVVVPYEPPEVGSDCTTIHYNYMCNSSCMGGMNRRPILTIITLEDSSGKLLGRDSFEVRVCACPGRDRRTEEENHRKKGQVLKEIREGQRLSQQHYREVAAAKDREAEDSREKPEPGEPPGEGGEDPDGHRMFPEHLLGDVPSSNTMAIFQSMEDSSGSLLNDSSPTQVPASQKTYQGLSPYQGSYGFRLGFLHSGTAKSVTCTYSPALNKMFCQLAK`,
	zebrafish_tp53: `>Danio_rerio_tp53
	MVVRCPHHERCSDSDGLAPPQHLIRVEGNLRVEYLDDRNTFRHSVVVPYEPPEVGSDCTTIHYNYMCNSSCMGGMNRRPILTIITLEDSSGKLLGRNSFEVRVCACPGRDKRTEEENLRKKGEPVHGQWLDSPRTFQQNLNKFPQPPKTCPDLIRWNPEEDPGPDEAPRMPEAAPPVAPASAPTPAAPVPAPSWPLSSSVPSQKTYPQGLDGFRLGFLHSGTAKSVTCTYSPALNKMFCQLAKTCPVQLWVDSTPPPGTRVRAMAIYKQSQHMTEVVRRCPHHERCSDSDGLAPPQHLIRVEGNLRVEYLDDRNTFRHSVVVPYEPPEVGSDCTTIHYNYMCNSSCMGGMNRRPILTIITLEDSSGKLL`
	};

	function loadDemo(key) {
	const seq = DEMOS[key];
	if (!seq) return;
	ta.value = seq;
	const aa = seq.split('\n').filter(l => !l.trimStart().startsWith('>')).join('').replace(/[^A-Za-z]/g, '');
	cc.textContent = aa.length ? `${aa.length.toLocaleString()} aa` : '0 aa';
	ta.focus();
	}

	function shake() {
	const card = document.querySelector('.card');
	card.classList.add('shake');
	card.addEventListener('animationend', () => card.classList.remove('shake'), { once: true });
	}

	// ── Batch Upload ──────────────────────────────────────────────────────────
	const dropZone = document.getElementById('dropZone');

	dropZone.addEventListener('dragover', (e) => {
	e.preventDefault();
	dropZone.classList.add('dragover');
	});

	dropZone.addEventListener('dragleave', () => {
	dropZone.classList.remove('dragover');
	});

	dropZone.addEventListener('drop', (e) => {
	e.preventDefault();
	dropZone.classList.remove('dragover');
	const file = e.dataTransfer.files[0];
	if (file) processFile(file);
	});

	function handleFileUpload(event) {
	const file = event.target.files[0];
	if (file) processFile(file);
	}

	async function processFile(file) {
	const status = document.getElementById('batchStatus');
	const results = document.getElementById('batchResults');

	status.className = 'status-bar visible';
	status.innerHTML = '<div class="spinner"></div><span class="status-text">Reading file...</span>';
	results.innerHTML = '';

	try {
	const text = await file.text();
	const seqs = parseSequences(text);

	if (seqs.length === 0) {
	status.innerHTML = '<span class="status-error">No valid sequences found in file.</span>';
	return;
	}

	if (seqs.length > 100) {
	status.innerHTML = '<span class="status-error">Maximum 100 sequences per batch. Found ' + seqs.length + '.</span>';
	return;
	}

	status.innerHTML = `<div class="spinner"></div><span class="status-text">Processing ${seqs.length} sequences...</span>`;

	const res = await fetch('/predict', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ sequence: text }),
	});

	if (!res.ok) throw new Error(`Server error ${res.status}`);
	const data = await res.json();

	status.className = 'status-bar';
	const batchResults = data.results \|\| [];
	renderResults(batchResults, 0);

	} catch(e) {
	status.innerHTML = `<span class="status-error">${escHtml(e.message)}</span>`;
	}
	}

	// ── 3Dmol.js Saliency Viewer ─────────────────────────────────────────────
	let tdmolLoaded = false;
	function load3Dmol() {
	if (tdmolLoaded) return Promise.resolve();
	return new Promise((resolve, reject) => {
	const s = document.createElement('script');
	s.src = 'https://cdn.jsdelivr.net/npm/3dmol@2.0.3/build/3Dmol-min.js';
	s.onload = () => { tdmolLoaded = true; resolve(); };
	s.onerror = reject;
	document.head.appendChild(s);
	});
	}

	function saliencyColor(score) {
	// score in [0,1]; blue (low) → white (mid) → red (high)
	const r = score > 0.5 ? 1.0 : 2 * score;
	const b = score < 0.5 ? 1.0 : 2 * (1 - score);
	const g = score > 0.5 ? 2 * (1 - score) : 2 * score;
	const toHex = v => Math.round(v * 255).toString(16).padStart(2, '0');
	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
	}

	function saliencyLegendHTML() {
	const steps = 10;
	let grad = '';
	for (let i = 0; i <= steps; i++) {
	grad += `<span style="display:inline-block;width:${100/(steps+1)}%;height:10px;background:${saliencyColor(i/steps)};"></span>`;
	}
	return `<div style="margin-top:8px; font-size:0.72rem; color:var(--text-muted);">
	<div style="display:flex; width:100%; border-radius:3px; overflow:hidden;">${grad}</div>
	<div style="display:flex; justify-content:space-between; margin-top:2px;"><span>Low importance</span><span>High importance</span></div>
	</div>`;
	}

	// Map [0,1] feature value to blue-white-red hex color
	function featureColor(v) {
	// 0 = blue (#3b82f6), 0.5 = white (#e5e7eb), 1 = red (#ef4444)
	const r = v < 0.5 ? Math.round(59 + (229 - 59) * (v * 2)) : Math.round(229 + (239 - 229) * ((v - 0.5) * 2));
	const g = v < 0.5 ? Math.round(130 + (231 - 130) * (v * 2)) : Math.round(231 + (68 - 231) * ((v - 0.5) * 2));
	const b = v < 0.5 ? Math.round(246 + (235 - 246) * (v * 2)) : Math.round(235 + (68 - 235) * ((v - 0.5) * 2));
	return `rgb(${r},${g},${b})`;
	}

	function renderExplainBars(idx, features, selectedKey) {
	const maxAbs = Math.max(...features.map(f => f.abs_importance), 1e-9);
	return features.map(f => {
	const pct = Math.round((f.abs_importance / maxAbs) * 100);
	const sign = f.importance >= 0 ? '+' : '−';
	const col = f.importance >= 0 ? '#4ade80' : '#f87171';
	const sel = f.key === selectedKey ? ' selected' : '';
	return `<div class="feat-bar-row${sel}" onclick="selectExplainFeature(${idx},'${f.key}')" title="${escHtml(f.desc)}">
	<span class="feat-bar-label">${escHtml(f.label)}</span>
	<div class="feat-bar-track">
	<div class="feat-bar-fill" style="width:${pct}%;background:${col};"></div>
	</div>
	<span class="feat-bar-val" style="color:${col}">${sign}${f.abs_importance.toFixed(3)}</span>
	</div>`;
	}).join('');
	}

	function selectExplainFeature(idx, featureKey) {
	const data = _explainData[idx];
	if (!data) return;

	// Update bar selection highlight
	const panel = document.getElementById(`saliency-panel-${idx}`);
	if (panel) {
	panel.querySelectorAll('.feat-bar-row').forEach(el => el.classList.remove('selected'));
	const sel = panel.querySelector(`.feat-bar-row[onclick*="'${featureKey}'"]`);
	if (sel) sel.classList.add('selected');
	}

	const feat = data.features.find(f => f.key === featureKey);
	if (!feat) return;

	// Update feature description text
	const descEl = document.getElementById(`explain-desc-${idx}`);
	if (descEl) {
	descEl.textContent = feat.desc;
	descEl.style.color = feat.color;
	}

	// Recolor 3D viewer
	const viewer = _explainViewers[idx];
	if (viewer && feat.per_residue) {
	feat.per_residue.forEach((v, i) => {
	viewer.setStyle({ resi: i + 1 }, { cartoon: { color: featureColor(v), opacity: 0.95 } });
	});
	viewer.render();
	}

	// Update sequence heatmap
	const seqBar = document.getElementById(`explain-seqbar-${idx}`);
	const seq = _seqMap[idx] \|\| '';
	if (seqBar && feat.per_residue) {
	const L = feat.per_residue.length;
	seqBar.innerHTML = feat.per_residue.map((v, i) => {
	const aa = seq[i] \|\| '?';
	return `<span title="${aa}${i+1}: ${v.toFixed(3)}" style="display:inline-block;width:${Math.max(4,Math.min(16,560/L))}px;height:16px;background:${featureColor(v)};margin:0 0.5px;border-radius:1px;"></span>`;
	}).join('');
	}
	}

	async function loadWhyPanel(idx) {
	const panel = document.getElementById(`why-panel-${idx}`);
	if (!panel) return;
	panel.innerHTML = '<div style="padding:12px;color:var(--label2);font-size:0.82rem">Loading definitions…</div>';
	const card = document.querySelector(`.result-card[data-card-idx="${idx}"]`);
	if (!card) { panel.innerHTML = ''; return; }
	const rows = card.querySelectorAll('.pred-row');
	const ids = [...new Set([...rows].map(r => r.dataset.goid).filter(Boolean))].slice(0, 30);
	if (!ids.length) { panel.innerHTML = '<div style="padding:12px;color:var(--label2);font-size:0.82rem">No terms to explain.</div>'; return; }
	try {
	const resp = await fetch(`/api/explain_terms?ids=${ids.join(',')}`);
	const data = await resp.json();
	const terms = (data.terms \|\| []).filter(t => t.definition);
	if (!terms.length) {
	panel.innerHTML = '<div style="padding:12px;color:var(--label2);font-size:0.82rem">No definitions available in the ontology.</div>';
	return;
	}
	panel.innerHTML = `
	<div style="padding:10px 14px">
	<p style="font-size:0.75rem;color:var(--label2);margin:0 0 10px">GO-MF term definitions from go-basic.obo. Showing ${terms.length} of ${ids.length} predicted terms.</p>
	${terms.map(t => `
	<div style="margin-bottom:10px;padding:8px 10px;border-radius:6px;background:var(--surface-2)">
	<div style="font-size:0.78rem;font-weight:600;color:var(--accent);margin-bottom:3px">${escHtml(t.name)}</div>
	<div style="font-size:0.72rem;color:var(--label2);line-height:1.4">${escHtml(t.definition)}</div>
	<div style="font-size:0.68rem;color:var(--label3);margin-top:3px">${escHtml(t.id)}</div>
	</div>`).join('')}
	</div>`;
	} catch(e) {
	panel.innerHTML = `<div style="padding:12px;color:var(--label2);font-size:0.82rem">Could not load definitions.</div>`;
	}
	}

	async function loadSaliencyPanel(idx, uid) {
	const panel = document.getElementById(`saliency-panel-${idx}`);
	if (!panel) return;
	if (panel.innerHTML.trim() !== '') return;

	const seq = _seqMap[idx] \|\| '';
	if (!seq) {
	panel.innerHTML = '<p class="structure-not-found">Sequence not available.</p>';
	return;
	}
	const taxon = document.getElementById('taxonSelect')?.value \|\| 'auto';
	panel.innerHTML = '<p class="structure-loading"><span style="opacity:0.6">Computing feature importance… (may take 3–10s)</span></p>';

	try {
	const resp = await fetch('/api/explainability', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ sequence: seq, uniprot_id: uid \|\| '', taxon }),
	});
	const d = await resp.json();
	if (d.error) {
	panel.innerHTML = `<p class="structure-not-found">Error: ${escHtml(d.error)}</p>`;
	return;
	}

	_explainData[idx] = d;
	const topFeat = d.features[0];
	const hasStruct = d.structure && d.structure.found && d.structure.cif_url;

	const structLinks = hasStruct
	? ` · <a href="${escHtml(d.structure.entry_url)}" target="_blank" rel="noopener" style="color:var(--accent-blue);">AlphaFold</a>
	· <a href="${escHtml(d.structure.uniprot_url)}" target="_blank" rel="noopener" style="color:var(--accent-blue);">UniProt</a>`
	: (uid ? `<span style="color:var(--text-muted); font-size:0.7rem;"> (no AF structure for ${escHtml(uid)})</span>` : '');

	const viewerHtml = hasStruct
	? `<div id="explain-viewer-${idx}" style="width:100%;height:340px;border-radius:8px;background:#0d0d1a;position:relative;"></div>`
	: `<div style="padding:24px;text-align:center;color:var(--text-muted);font-size:0.8rem;">
	Enter a UniProt accession above to see feature importance on the 3D structure.
	</div>`;

	panel.innerHTML = `
	<div class="explain-wrap">
	<div class="explain-left">
	<div class="explain-title">Feature Importance</div>
	<div style="font-size:0.68rem;color:var(--text-muted);margin-bottom:8px;">Gradient × input attribution<br>Click to color structure</div>
	${renderExplainBars(idx, d.features, topFeat?.key)}
	</div>
	<div class="explain-right">
	<div style="font-size:0.72rem;color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
	<span id="explain-desc-${idx}" style="color:${escHtml(topFeat?.color\|\|'#888')}">${escHtml(topFeat?.desc\|\|'')}</span>
	${structLinks}
	</div>
	<div id="explain-seqbar-${idx}" style="overflow-x:auto;padding:2px 0;margin-bottom:8px;"></div>
	<div style="display:flex;gap:8px;font-size:0.65rem;color:var(--text-muted);margin-bottom:8px;align-items:center;">
	<span style="display:inline-block;width:32px;height:7px;border-radius:3px;background:linear-gradient(to right,#3b82f6,#e5e7eb,#ef4444);"></span>
	<span>Low → neutral → high</span>
	</div>
	${viewerHtml}
	</div>
	</div>`;

	// Render initial sequence bar for top feature
	if (topFeat) selectExplainFeature(idx, topFeat.key);

	// Load 3Dmol viewer and color by top feature
	if (hasStruct) {
	await load3Dmol();
	const el = document.getElementById(`explain-viewer-${idx}`);
	if (el && window.$3Dmol) {
	const viewer = window.$3Dmol.createViewer(el, { backgroundColor: '#0d0d1a' });
	_explainViewers[idx] = viewer;
	fetch(d.structure.cif_url)
	.then(r => r.text())
	.then(cifText => {
	viewer.addModel(cifText, 'mmcif');
	viewer.setStyle({}, { cartoon: { color: '#888888', opacity: 0.9 } });
	viewer.zoomTo();
	viewer.render();
	// Color by top feature
	if (topFeat) selectExplainFeature(idx, topFeat.key);
	el.title = 'Double-click to spin / stop';
	let spinning = false;
	el.addEventListener('dblclick', () => {
	spinning = !spinning;
	if (spinning) viewer.spin('y'); else viewer.spin(false);
	});
	})
	.catch(() => {
	el.innerHTML = '<p style="color:#aaa;padding:16px;text-align:center;">CIF fetch failed.</p>';
	});
	}
	}
	} catch(e) {
	panel.innerHTML = `<p class="structure-not-found">Failed: ${escHtml(e.message)}</p>`;
	}
	}

	// ── AlphaFold Structure Viewer ────────────────────────────────────────────
	function extractUniProtId(name) {
	// Matches: sp\|P04637\|..., tr\|Q9Y5Z9\|..., bare P04637, or >P04637 style
	const m = name.match(/(?:sp\|tr)\\|([A-Z0-9]{4,10})\\|/i)
	\|\| name.match(/\b([OPQ][0-9][A-Z][A-Z0-9]{2}[0-9](?:[A-Z][A-Z0-9]{2}[0-9])?)\b/)
	\|\| name.match(/\b([A-NR-Z][0-9][A-Z][A-Z0-9]{2}[0-9](?:[A-Z][A-Z0-9]{2}[0-9])?)\b/);
	return m ? m[1].toUpperCase() : null;
	}

	// pLDDT → color: blue (>90), cyan (70-90), yellow (50-70), orange (<50) — AlphaFold convention
	function plddt_color(plddt) {
	if (plddt >= 90) return '#0053D6';
	if (plddt >= 70) return '#65CBF3';
	if (plddt >= 50) return '#FFDB13';
	return '#FF7D45';
	}

	async function loadStructurePanel(idx) {
	const panel = document.getElementById(`structure-panel-${idx}`);
	if (!panel) return;

	if (panel.innerHTML.trim() === '') {
	// Read accession from field or FASTA header (seqName not easily available here, use field)
	const uid = document.getElementById('uniprotAccession').value.trim().toUpperCase();
	if (!uid) {
	panel.innerHTML = `<p class="structure-not-found">Enter a UniProt accession in the field above (e.g. <strong>P04637</strong>) then click Structure.</p>`;
	return;
	}
	panel.innerHTML = `<p class="structure-loading"><span style="opacity:0.6">Loading AlphaFold structure for ${escHtml(uid)}…</span></p>`;
	try {
	const resp = await fetch(`/api/structure?uniprot_id=${encodeURIComponent(uid)}`);
	const d = await resp.json();
	if (!d.found) {
	panel.innerHTML = `<p class="structure-not-found">No AlphaFold structure found for <strong>${escHtml(uid)}</strong>.`
	+ (d.uniprot_url ? ` <a href="${d.uniprot_url}" target="_blank" rel="noopener">View on UniProt</a>` : '')
	+ `</p>`;
	return;
	}

	const meta = [
	d.gene ? `<strong>Gene:</strong> ${escHtml(d.gene)}` : '',
	d.organism ? `<strong>Organism:</strong> <em>${escHtml(d.organism)}</em>` : '',
	`<a href="${d.entry_url}" target="_blank" rel="noopener" style="color:var(--accent-blue)">AlphaFold</a>`,
	`<a href="${d.uniprot_url}" target="_blank" rel="noopener" style="color:var(--accent-blue)">UniProt</a>`,
	].filter(Boolean).join('  ·  ');

	panel.innerHTML = `
	<div class="structure-meta">${meta}</div>
	<div style="font-size:0.72rem;color:var(--text-muted);margin-bottom:4px;display:flex;gap:12px;flex-wrap:wrap;">
	<span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#0053D6;margin-right:3px;"></span>pLDDT ≥90 (very high)</span>
	<span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#65CBF3;margin-right:3px;"></span>70–90 (confident)</span>
	<span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#FFDB13;margin-right:3px;"></span>50–70 (low)</span>
	<span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#FF7D45;margin-right:3px;"></span><50 (very low)</span>
	</div>
	<div id="struct3d-${idx}" style="width:100%;height:400px;border-radius:8px;background:#0d0d1a;position:relative;"></div>`;

	await load3Dmol();
	const el = document.getElementById(`struct3d-${idx}`);
	if (!el \|\| !window.$3Dmol) return;

	const viewer = window.$3Dmol.createViewer(el, { backgroundColor: '#0d0d1a' });
	fetch(d.cif_url)
	.then(r => r.text())
	.then(cifText => {
	viewer.addModel(cifText, 'mmcif');
	// Color cartoon by B-factor (AlphaFold stores pLDDT in B-factor column)
	viewer.setStyle({}, {
	cartoon: {
	colorfunc: atom => plddt_color(atom.b \|\| 0),
	opacity: 1.0,
	}
	});
	viewer.zoomTo();
	viewer.render();
	// Add mouse spin toggle on double-click
	el.title = 'Double-click to spin / stop';
	let spinning = false;
	el.addEventListener('dblclick', () => {
	spinning = !spinning;
	if (spinning) viewer.spin('y'); else viewer.spin(false);
	});
	})
	.catch(() => {
	el.innerHTML = '<p style="color:#aaa;padding:16px;text-align:center;">CIF fetch failed — try again or check network.</p>';
	});
	} catch(e) {
	panel.innerHTML = `<p class="structure-not-found">Failed: ${escHtml(e.message)}</p>`;
	}
	}
	}

	// ── Generalization Panel ──────────────────────────────────────────────────
	function renderGenTable(data) {
	const container = document.getElementById('genTableContainer');
	if (!data.available \|\| data.taxa.length === 0) {
	container.innerHTML = `<p style="color: var(--text-secondary); font-size: 0.875rem;">
	No generalization data yet — run eval_generalization.py after model training completes.
	</p>`;
	return;
	}

	const cols = ['taxon', 'model_checkpoint', 'n_labeled', 'micro_fmax', 'cafa_fmax',
	'precision', 'recall', 'macro_f1', 'micro_auprc', 'label_coverage', 'generalization_ratio'];
	const labels = ['Taxon', 'Checkpoint', 'n_labeled', 'micro_Fmax', 'CAFA_Fmax',
	'Prec', 'Recall', 'macro_F1', 'AUPRC', 'label_cov', 'gen_ratio'];

	const genRatioColor = (v) => {
	if (v == null \|\| isNaN(v)) return 'var(--text-secondary)';
	if (v >= 0.90) return 'var(--high-text, #4ade80)';
	if (v >= 0.85) return 'var(--med-text, #facc15)';
	return 'var(--low-text, #f87171)';
	};

	let rows = data.taxa.map(taxon => {
	const r = data.results[taxon];
	return `<tr>
	${cols.map((c, i) => {
	const v = c === 'taxon' ? taxon : r[c];
	const fmt = (typeof v === 'number') ? v.toFixed(4) : (v ?? '—');
	const style = c === 'generalization_ratio'
	? `style="font-weight:600; color:${genRatioColor(v)}"` : '';
	return `<td ${style}>${fmt}</td>`;
	}).join('')}
	</tr>`;
	}).join('');

	container.innerHTML = `
	<table style="width:100%; border-collapse:collapse; font-size:0.8rem;">
	<thead>
	<tr style="border-bottom: 1px solid var(--border);">
	${labels.map(l => `<th style="text-align:left; padding:8px 10px; color:var(--text-secondary); white-space:nowrap;">${l}</th>`).join('')}
	</tr>
	</thead>
	<tbody>${rows}</tbody>
	</table>
	<p style="color:var(--text-secondary); font-size:0.75rem; margin-top:12px;">
	Last evaluated: ${data.taxa.map(t => data.results[t].evaluated_at).filter(Boolean).sort().pop() ?? '—'}
	</p>`;
	}

	// Load generalization data whenever the tab is opened
	document.querySelectorAll('.nav-item[data-view]').forEach(btn => {
	if (btn.dataset.view === 'generalization') {
	btn.addEventListener('click', () => {
	fetch('/api/generalization').then(r => r.json()).then(renderGenTable).catch(() => {
	document.getElementById('genTableContainer').innerHTML =
	'<p style="color:var(--text-secondary);">Failed to load generalization data.</p>';
	});
	});
	}
	});

	// ── Init ──────────────────────────────────────────────────────────────────
	// Fetch model version and update badge
	fetch('/api/model/info').then(r => r.json()).then(d => {
	const badge = document.getElementById('modelBadge');
	const footerLabel = document.getElementById('modelFooterLabel');
	if (!badge) return;
	if (d.model === 'unified_35M_v1' \|\| d.model === 'unified_v1' \|\| d.model?.includes('unified')) {
	badge.textContent = 'v5.0';
	badge.style.background = 'rgba(99,102,241,0.12)';
	badge.style.color = 'var(--accent)';
	if (footerLabel) footerLabel.textContent = 'ESM-2 35M · Multi-taxon';
	} else if (d.model === 'mammal_enriched' \|\| d.model?.includes('multitaxon')) {
	badge.textContent = 'v4.0';
	badge.style.background = 'rgba(59,130,246,0.15)';
	badge.style.color = 'var(--accent-blue)';
	if (footerLabel) footerLabel.textContent = 'ESM-2 8M · Multi-taxon';
	} else if (d.model === 'protfunc_v3_fixed') {
	badge.textContent = 'v3.1';
	} else if (d.model === 'protfunc_v3') {
	badge.textContent = 'v3';
	} else if (d.model === 'improved') {
	badge.textContent = 'v2+';
	} else {
	badge.textContent = 'v1';
	}
	}).catch(() => {});

	renderHistory();
	</script>
	</body>
	</html>