Custom gr.Server frontend + 6-teacher model (Nemotron), token streaming, arena

README.md

@@ -4,18 +4,30 @@ emoji: 🧬
 colorFrom: indigo
 colorTo: purple
 sdk: gradio
-sdk_version: "5.33.2"
-app_file: app.py
+sdk_version: "6.18.0"
+app_file: server_app.py
 pinned: false
 license: mit
 ---
 
 ![One for All demo](one_for_all.gif)
 
-**One for All** distills 5 heterogeneous teacher LLMs (Qwen2.5-1.5B, SmolLM2-1.7B, Phi-3.5-mini, gemma-2-2b-it, MiniCPM-2B) into a single Qwen2.5-0.5B student via gated CKA geometry distillation (Path B — geometry-only, tokenizer-agnostic).
+**One for All** distills 6 heterogeneous teacher LLMs (Qwen2.5-1.5B, SmolLM2-1.7B, Phi-3.5-mini, gemma-2-2b-it, MiniCPM-2B, Nemotron-Mini-4B) into a single Qwen2.5-0.5B student via gated CKA geometry distillation (Path B — geometry-only, tokenizer-agnostic).
 
 ### Tabs
 
-- **∀ Almas** — 3D UMAP soul space of all 6 models over 24 probe texts. Type a prompt to run the student live on ZeroGPU and see where it lands in the embedding space.
-- **⬡ Geometria** — CKA alignment heatmap across all model pairs.
-- **↗ Treino** — Loss curves and gate evolution over training steps.
+- **∀ Souls** — 3D UMAP soul space of all models over 24 probe texts. Type a prompt and watch the student answer **token by token** while the gate bars show, live, which teacher's geometry is dominant. The pooled prompt lands as a new point in soul space.
+- **⚔ Arena** — one prompt, two models: the untouched Qwen2.5-0.5B base races the distilled student side by side (same weights, LoRA off vs on).
+- **⬡ Geometry** — CKA alignment heatmap across all model pairs.
+- **↗ Training** — Loss curves and gate evolution over training steps.
+
+### UI
+
+`server_app.py` is a **custom frontend on `gr.Server`** 🎨 — our own HTML/JS/Three.js
+(`frontend/`) talking to Gradio API endpoints via `@gradio/client`. The legacy
+Blocks UI still works: set `app_file: app.py` (it also runs on sdk 6.18).
+
+### Backends
+
+- default — torch + ZeroGPU (per-token gates).
+- `OFA_BACKEND=llamacpp` — the student runs as a **GGUF through llama.cpp** 🦙 (CPU-friendly; gates computed on the prompt embedding via numpy, no torch in the hot path).

_boot.py

@@ -0,0 +1,136 @@
+"""
+space/_boot.py — shared startup + backend dispatch for both Space entrypoints.
+
+app.py (Gradio Blocks, legacy) and server_app.py (gr.Server + custom frontend)
+load the exact same runtime: viz data, UMAP reducer, and the student in either
+backend (torch / llamacpp). Keeping it here means the two UIs can't drift.
+"""
+from __future__ import annotations
+
+import os
+from dataclasses import dataclass, field
+from typing import Any
+
+import _data
+import _probe
+
+
+@dataclass
+class Runtime:
+    hf_token: str | None = None
+    backend: str = "torch"
+    viz: dict = field(default_factory=dict)
+    reducer: Any = None
+    coords3d: Any = None
+    tok: Any = None
+    student: Any = None
+    gating: Any = None
+    lcs: Any = None
+    model_ready: bool = False
+
+
+def load_runtime() -> Runtime:
+    rt = Runtime(hf_token=os.environ.get("HF_TOKEN"), backend=_probe.BACKEND)
+
+    local_viz = os.environ.get("VIZ_DATA_PATH")
+    try:
+        if local_viz:
+            rt.viz = _data.load_from_path(local_viz)
+            print(f"[ofa-space] loaded viz from {local_viz}")
+        else:
+            rt.viz = _data.load_and_parse(rt.hf_token)
+    except Exception as e:
+        print(f"[ofa-space] viz_data.json not available ({e}), using empty state")
+        rt.viz = _data.make_empty_viz()
+
+    try:
+        if rt.viz["stacked"].shape[0] > 3:
+            rt.reducer = _data.fit_umap3d(rt.viz["stacked"])
+            rt.coords3d = rt.reducer.embedding_
+            print(f"[ofa-space] UMAP done: {rt.coords3d.shape}")
+        else:
+            print(f"[ofa-space] not enough points for UMAP: {rt.viz['stacked'].shape[0]}")
+    except Exception as e:
+        print(f"[ofa-space] UMAP failed ({e}), 3D disabled")
+        rt.reducer = rt.coords3d = None
+
+    try:
+        if rt.backend == "llamacpp":
+            rt.lcs = _probe.load_student_llamacpp(rt.hf_token)
+            print(f"[ofa-space] llama.cpp backend ready ({_probe.GGUF_FILE})")
+        else:
+            rt.tok, rt.student, rt.gating = _probe.load_student(rt.hf_token)
+        rt.model_ready = True
+    except Exception as e:
+        print(f"[ofa-space] Student not available ({e}). Probe disabled.")
+        rt.model_ready = False
+
+    return rt
+
+
+# ── Backend dispatch: same call sites drive torch and llama.cpp ────────────
+
+def to_device(rt: Runtime) -> None:
+    if rt.backend != "llamacpp" and rt.student is not None:
+        device = "cuda" if __import__("torch").cuda.is_available() else "cpu"
+        rt.student.to(device)
+
+
+def stream(rt: Runtime, text: str):
+    if rt.backend == "llamacpp":
+        return _probe.stream_generate_llamacpp(text, rt.lcs)
+    return _probe.stream_generate(text, rt.student, rt.tok, rt.gating)
+
+
+def stream_pair(rt: Runtime, text: str):
+    if rt.backend == "llamacpp":
+        return _probe.stream_pair_llamacpp(text, rt.lcs)
+    return _probe.stream_pair(text, rt.student, rt.tok, rt.gating)
+
+
+def final_probe(rt: Runtime, text: str):
+    if rt.backend == "llamacpp":
+        return _probe.run_probe_llamacpp(text, rt.lcs, rt.reducer)
+    return _probe.run_probe(text, rt.student, rt.tok, rt.gating, rt.reducer)
+
+
+# ── Payload for the custom frontend (server_app.py) ────────────────────────
+
+# Frontend palette — student first, then teachers (qwen, smollm, phi, gemma,
+# minicpm, nemotron). No purple by design; the legacy Blocks UI keeps its own
+# palette in _fig.py.
+MODEL_COLORS = ["#e6edf3", "#38bdf8", "#f59e0b", "#f43f5e", "#2dd4bf", "#f472b6", "#76b900"]
+
+# Canonical 6-teacher lineup. viz_data.json exported from an older 5-teacher
+# run is a prefix of this — pad it so the UI already shows nemotron (its meter
+# stays at 0 until a 6-gate checkpoint is published).
+CANONICAL_TEACHERS = ["qwen", "smollm", "phi", "gemma", "minicpm", "nemotron"]
+
+
+def viz_payload(viz: dict, coords3d, backend: str = "torch",
+                model_ready: bool = False) -> dict:
+    """Everything the JS frontend needs in one JSON-safe dict."""
+    models = []
+    if coords3d is not None and viz.get("labels"):
+        labels = viz["labels"]
+        for i, name in enumerate(viz.get("model_names", [])):
+            pts = [list(map(float, coords3d[j]))
+                   for j, lab in enumerate(labels) if lab == name]
+            models.append({
+                "name": name,
+                "color": MODEL_COLORS[i % len(MODEL_COLORS)],
+                "points": pts,
+            })
+    teachers = viz.get("teacher_names", [])
+    if teachers == CANONICAL_TEACHERS[:len(teachers)]:
+        teachers = CANONICAL_TEACHERS
+    return {
+        "models": models,
+        "teachers": teachers,
+        "teacher_colors": [MODEL_COLORS[1 + i % (len(MODEL_COLORS) - 1)]
+                           for i in range(len(teachers))],
+        "cka": viz.get("cka", {}),
+        "curves": viz.get("curves", {}),
+        "backend": backend,
+        "model_ready": model_ready,
+    }

_fig.py

@@ -11,7 +11,7 @@ DARK = dict(
 GRID_COLOR = "#21262d"
 
 # index 0 = student, 1-5 = teachers
-MODEL_COLORS = ["#e6edf3", "#7c3aed", "#06b6d4", "#f59e0b", "#34d399", "#f472b6"]
+MODEL_COLORS = ["#e6edf3", "#7c3aed", "#06b6d4", "#f59e0b", "#34d399", "#f472b6", "#76b900"]
 
 
 def build_base_traces(viz: dict, coords3d: np.ndarray) -> list:

_glb.py

@@ -30,6 +30,7 @@ _COLORS_RGB: list[tuple[int, int, int]] = [
     (245, 158,  11),  # teacher2 — #f59e0b
     ( 52, 211, 153),  # teacher3 — #34d399
     (244, 114, 182),  # teacher4 — #f472b6
+    (118, 185,   0),  # teacher5 — #76b900 (nemotron / NVIDIA green)
 ]
 _PROBE_COLOR = (255, 255, 255)
 

_html.py

@@ -1,18 +1,18 @@
 from __future__ import annotations
 
-# index 0-4 = teachers (aligns with MODEL_COLORS[1:] in _fig.py)
-_TEACHER_COLORS = ["#7c3aed", "#06b6d4", "#f59e0b", "#34d399", "#f472b6"]
+# index 0-5 = teachers (aligns with MODEL_COLORS[1:] in _fig.py)
+_TEACHER_COLORS = ["#7c3aed", "#06b6d4", "#f59e0b", "#34d399", "#f472b6", "#76b900"]
 
 
-def gate_html(gate_weights: list[float], teacher_names: list[str]) -> str:
-    """Horizontal bar chart sorted by weight descending."""
-    ranked = sorted(
-        enumerate(zip(gate_weights, teacher_names)),
-        key=lambda x: x[1][0],
-        reverse=True,
-    )
+def gate_html(gate_weights: list[float], teacher_names: list[str],
+              ranked: bool = True) -> str:
+    """Horizontal bar chart. ranked=False keeps teacher order fixed — used
+    while streaming so bars animate in place instead of swapping rows."""
+    pairs = list(enumerate(zip(gate_weights, teacher_names)))
+    if ranked:
+        pairs.sort(key=lambda x: x[1][0], reverse=True)
     rows = []
-    for orig_idx, (w, name) in ranked:
+    for orig_idx, (w, name) in pairs:
         color = _TEACHER_COLORS[orig_idx % len(_TEACHER_COLORS)]
         bar_pct = int(w * 100)
         rows.append(
@@ -20,7 +20,8 @@ def gate_html(gate_weights: list[float], teacher_names: list[str]) -> str:
             f'<span style="width:80px;font-family:monospace;font-size:11px;color:{color};'
             f'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{name}</span>'
             f'<div style="flex:1;height:5px;background:#21262d;border-radius:3px;overflow:hidden;">'
-            f'<div style="width:{bar_pct}%;height:100%;background:{color};border-radius:3px;"></div>'
+            f'<div style="width:{bar_pct}%;height:100%;background:{color};border-radius:3px;'
+            f'transition:width 0.18s ease;"></div>'
             f'</div>'
             f'<span style="width:36px;font-family:monospace;font-size:11px;'
             f'color:#8b949e;text-align:right;">{w:.2f}</span>'
@@ -63,7 +64,7 @@ def task_html(gate_weights: list[float], teacher_names: list[str]) -> str:
     )
 
 
-def header_html() -> str:
+def header_html(n_teachers: int = 6, backend: str = "torch") -> str:
     """App header with ∀ logo, wordmark, and status pills."""
     def pill(color: str, dot_color: str, text: str, pulse: bool = False) -> str:
         dot_class = ' class="live-dot"' if pulse else ''
@@ -105,8 +106,9 @@ def header_html() -> str:
         # Right: pills
         '<div style="display:flex;gap:8px;flex-wrap:wrap;">'
         + pill("#06b6d4", "#06b6d4", "STUDENT · Qwen2.5-0.5B", pulse=True)
-        + pill("#7c3aed", "#7c3aed", "5 TEACHERS")
+        + pill("#7c3aed", "#7c3aed", f"{n_teachers} TEACHERS")
         + pill("#f59e0b", "#f59e0b", "PATH B · GEOMETRY")
+        + (pill("#76b900", "#76b900", "🦙 llama.cpp · GGUF") if backend == "llamacpp" else "")
         + '</div></div>'
 
         # Divider with glow

_probe.py

@@ -8,7 +8,13 @@ import numpy as np
 STUDENT_BASE = "Qwen/Qwen2.5-0.5B-Instruct"
 ADAPTER_REPO = "build-small-hackathon/deku"
 STUDENT_HIDDEN_DIM = 896  # Qwen2.5-0.5B hidden size
-N_TEACHERS = 5
+
+# Backend: "torch" (default) or "llamacpp" (GGUF via llama-cpp-python, CPU-friendly).
+BACKEND = os.environ.get("OFA_BACKEND", "torch").lower()
+GGUF_REPO = os.environ.get("OFA_GGUF_REPO", "build-small-hackathon/deku-gguf")
+GGUF_FILE = os.environ.get("OFA_GGUF_FILE", "deku-q8_0.gguf")
+BASE_GGUF_REPO = os.environ.get("OFA_BASE_GGUF_REPO", "Qwen/Qwen2.5-0.5B-Instruct-GGUF")
+BASE_GGUF_FILE = os.environ.get("OFA_BASE_GGUF_FILE", "qwen2.5-0.5b-instruct-q8_0.gguf")
 
 
 class GatingNetwork(nn.Module):
@@ -55,13 +61,32 @@ def load_student(hf_token: str | None = None):
         repo_type="model",
         token=token,
     )
-    gating = GatingNetwork(STUDENT_HIDDEN_DIM, N_TEACHERS)
-    gating.load_state_dict(torch.load(gating_path, map_location="cpu"))
-    gating.eval()
+    gating = _gating_from_state(torch.load(gating_path, map_location="cpu"))
 
     return tok, student, gating
 
 
+def _gating_from_state(state: dict) -> GatingNetwork:
+    """Build the gate from a checkpoint, inferring n_teachers from the weight
+    shape — keeps the Space compatible with 5- and 6-teacher runs."""
+    n_teachers, hidden = state["fc.weight"].shape
+    gating = GatingNetwork(hidden, n_teachers)
+    gating.load_state_dict(state)
+    gating.eval()
+    return gating
+
+
+def _chat_prompt(text: str, tok) -> str:
+    try:
+        return tok.apply_chat_template(
+            [{"role": "user", "content": text}],
+            tokenize=False,
+            add_generation_prompt=True,
+        )
+    except Exception:
+        return text
+
+
 def generate_response(
     text: str,
     student: nn.Module,
@@ -70,15 +95,7 @@ def generate_response(
 ) -> str:
     """Run student generation and return decoded answer text."""
     device = next(student.parameters()).device
-    try:
-        prompt = tok.apply_chat_template(
-            [{"role": "user", "content": text}],
-            tokenize=False,
-            add_generation_prompt=True,
-        )
-    except Exception:
-        prompt = text
-    enc = tok(prompt, return_tensors="pt").to(device)
+    enc = tok(_chat_prompt(text, tok), return_tensors="pt").to(device)
     with torch.no_grad():
         out = student.generate(
             input_ids=enc["input_ids"],
@@ -91,6 +108,121 @@ def generate_response(
     return tok.decode(new_tokens, skip_special_tokens=True)
 
 
+def _decode_step(student: nn.Module, ids: torch.Tensor, past):
+    """One greedy decode step. Returns (next_id, new_past, last_hidden)."""
+    with torch.no_grad():
+        out = student(
+            input_ids=ids,
+            past_key_values=past,
+            use_cache=True,
+            output_hidden_states=True,
+        )
+    next_id = out.logits[:, -1, :].argmax(dim=-1, keepdim=True)
+    h_last = out.hidden_states[-1][:, -1, :].float()
+    return next_id, out.past_key_values, h_last
+
+
+def _adapter_off(student: nn.Module):
+    """disable_adapter() ctx on PeftModel; no-op for plain models (tests)."""
+    disable = getattr(student, "disable_adapter", None)
+    if disable is not None:
+        return disable()
+    import contextlib
+    return contextlib.nullcontext()
+
+
+def stream_generate(
+    text: str,
+    student: nn.Module,
+    tok,
+    gating: GatingNetwork,
+    max_new_tokens: int = 200,
+    ema: float = 0.3,
+):
+    """Greedy decode loop that exposes the gate at every step.
+
+    Yields (partial_text, gate_weights) per generated token. Gate weights are
+    EMA-smoothed so the live bars move instead of flickering. model.generate()
+    can't do this — it doesn't surface hidden states mid-stream.
+    """
+    device = next(student.parameters()).device
+    enc = tok(_chat_prompt(text, tok), return_tensors="pt")
+    ids = enc["input_ids"].to(device)
+    past = None
+    gate_smooth: torch.Tensor | None = None
+    out_ids: list[int] = []
+    for _ in range(max_new_tokens):
+        next_id, past, h_last = _decode_step(student, ids, past)
+        with torch.no_grad():
+            g = gating(h_last).squeeze(0)
+        gate_smooth = g if gate_smooth is None else ema * g + (1 - ema) * gate_smooth
+        if next_id.item() == tok.eos_token_id:
+            break
+        out_ids.append(next_id.item())
+        ids = next_id
+        yield (
+            tok.decode(out_ids, skip_special_tokens=True),
+            gate_smooth.tolist(),
+        )
+
+
+def stream_pair(
+    text: str,
+    student: nn.Module,
+    tok,
+    gating: GatingNetwork,
+    max_new_tokens: int = 160,
+    ema: float = 0.3,
+):
+    """Race base (LoRA off) vs deku (LoRA on) — one token each per round.
+
+    Same PeftModel serves both sides via disable_adapter(), so no extra
+    memory. Yields (base_text, deku_text, gate_weights); gates come from the
+    deku side only.
+    """
+    device = next(student.parameters()).device
+    enc = tok(_chat_prompt(text, tok), return_tensors="pt")
+    prompt_ids = enc["input_ids"].to(device)
+
+    sides = {
+        "base": {"ids": prompt_ids, "past": None, "out": [], "done": False},
+        "deku": {"ids": prompt_ids, "past": None, "out": [], "done": False},
+    }
+    gate_smooth: torch.Tensor | None = None
+
+    for _ in range(max_new_tokens):
+        if not sides["base"]["done"]:
+            s = sides["base"]
+            with _adapter_off(student):
+                next_id, s["past"], _ = _decode_step(student, s["ids"], s["past"])
+            if next_id.item() == tok.eos_token_id:
+                s["done"] = True
+            else:
+                s["out"].append(next_id.item())
+                s["ids"] = next_id
+
+        if not sides["deku"]["done"]:
+            s = sides["deku"]
+            next_id, s["past"], h_last = _decode_step(student, s["ids"], s["past"])
+            with torch.no_grad():
+                g = gating(h_last).squeeze(0)
+            gate_smooth = g if gate_smooth is None else ema * g + (1 - ema) * gate_smooth
+            if next_id.item() == tok.eos_token_id:
+                s["done"] = True
+            else:
+                s["out"].append(next_id.item())
+                s["ids"] = next_id
+
+        if sides["base"]["done"] and sides["deku"]["done"]:
+            break
+        yield (
+            tok.decode(sides["base"]["out"], skip_special_tokens=True),
+            tok.decode(sides["deku"]["out"], skip_special_tokens=True),
+            gate_smooth.tolist() if gate_smooth is not None
+            else [1.0 / gating.fc.out_features] * gating.fc.out_features,
+        )
+
+
 def run_probe(
     text: str,
     student: nn.Module,
@@ -121,3 +253,111 @@ def run_probe(
         "z": float(coords3d[0, 2]),
         "label": "probe",
     }, gate_weights
+
+
+# ── llama.cpp backend (🦙 badge — GGUF student, runs on CPU, no torch path) ──
+
+def _np_softmax(x: np.ndarray) -> np.ndarray:
+    e = np.exp(x - x.max())
+    return e / e.sum()
+
+
+def gate_from_embedding(emb: np.ndarray, weight: np.ndarray, bias: np.ndarray) -> list[float]:
+    """Gate in pure numpy: softmax(W @ e + b). Mirrors GatingNetwork.forward."""
+    return _np_softmax(weight @ emb + bias).tolist()
+
+
+class LlamaCppStudent:
+    """deku as GGUF: one llama.cpp instance for generation, one in embedding
+    mode (mean pooling) for the gate / soul-space probe, numpy gate weights.
+    The base model (Arena) is downloaded lazily on first use."""
+
+    def __init__(self, gen, emb, gate_w: np.ndarray, gate_b: np.ndarray, token=None):
+        self.gen = gen
+        self.emb = emb
+        self.gate_w = gate_w
+        self.gate_b = gate_b
+        self.base = None
+        self._token = token
+
+    @property
+    def n_teachers(self) -> int:
+        return self.gate_w.shape[0]
+
+    def embed(self, text: str) -> np.ndarray:
+        return np.asarray(self.emb.embed(text, normalize=False), dtype=np.float32)
+
+    def prompt_gates(self, text: str) -> list[float]:
+        return gate_from_embedding(self.embed(text), self.gate_w, self.gate_b)
+
+    def ensure_base(self) -> None:
+        if self.base is None:
+            from llama_cpp import Llama
+            from huggingface_hub import hf_hub_download
+            path = hf_hub_download(BASE_GGUF_REPO, BASE_GGUF_FILE, token=self._token)
+            self.base = Llama(model_path=path, n_ctx=2048, verbose=False)
+
+
+def load_student_llamacpp(hf_token: str | None = None) -> LlamaCppStudent:
+    from llama_cpp import Llama
+    from huggingface_hub import hf_hub_download
+
+    token = hf_token or os.environ.get("HF_TOKEN")
+    gguf = hf_hub_download(GGUF_REPO, GGUF_FILE, token=token)
+    npz = np.load(hf_hub_download(GGUF_REPO, "gating.npz", token=token))
+    gen = Llama(model_path=gguf, n_ctx=2048, verbose=False)
+    emb = Llama(model_path=gguf, n_ctx=2048, embedding=True, verbose=False)
+    return LlamaCppStudent(gen, emb,
+                           npz["weight"].astype(np.float32),
+                           npz["bias"].astype(np.float32), token=token)
+
+
+def _chat_stream(llm, text: str, max_tokens: int):
+    """Yield accumulated text from a llama.cpp chat-completion stream."""
+    pieces: list[str] = []
+    for chunk in llm.create_chat_completion(
+        messages=[{"role": "user", "content": text}],
+        max_tokens=max_tokens, temperature=0.0, stream=True,
+    ):
+        delta = chunk["choices"][0]["delta"].get("content")
+        if delta:
+            pieces.append(delta)
+            yield "".join(pieces)
+
+
+def stream_generate_llamacpp(text: str, lcs: LlamaCppStudent, max_tokens: int = 200):
+    """Yields (partial_text, gate_weights). llama.cpp doesn't expose hidden
+    states mid-generation, so gates are computed once on the prompt embedding
+    (vs per-token in the torch path) — documented drift, same gate network."""
+    gates = lcs.prompt_gates(text)
+    for partial in _chat_stream(lcs.gen, text, max_tokens):
+        yield partial, gates
+
+
+def stream_pair_llamacpp(text: str, lcs: LlamaCppStudent, max_tokens: int = 160):
+    """Arena on llama.cpp: deku GGUF vs official base GGUF, interleaved.
+    Yields (base_text, deku_text, gate_weights)."""
+    import itertools
+    lcs.ensure_base()
+    gates = lcs.prompt_gates(text)
+    base_txt, deku_txt = "", ""
+    for b, d in itertools.zip_longest(
+        _chat_stream(lcs.base, text, max_tokens),
+        _chat_stream(lcs.gen, text, max_tokens),
+    ):
+        base_txt = b if b is not None else base_txt
+        deku_txt = d if d is not None else deku_txt
+        yield base_txt, deku_txt, gates
+
+
+def run_probe_llamacpp(text: str, lcs: LlamaCppStudent, reducer) -> tuple[dict, list[float]]:
+    """llama.cpp analogue of run_probe: mean-pooled embedding → gate + UMAP point."""
+    pooled = lcs.embed(text)
+    gates = gate_from_embedding(pooled, lcs.gate_w, lcs.gate_b)
+    coords3d = reducer.transform(pooled[None, :])
+    return {
+        "x": float(coords3d[0, 0]),
+        "y": float(coords3d[0, 1]),
+        "z": float(coords3d[0, 2]),
+        "label": "probe",
+    }, gates

_three.py

@@ -13,7 +13,7 @@ import html as _html
 import json
 import numpy as np
 
-MODEL_COLORS = ["#e6edf3", "#7c3aed", "#06b6d4", "#f59e0b", "#34d399", "#f472b6"]
+MODEL_COLORS = ["#e6edf3", "#7c3aed", "#06b6d4", "#f59e0b", "#34d399", "#f472b6", "#76b900"]
 
 _EMPTY = """
 <div style="width:100%;height:520px;background:#0d1117;border-radius:8px;

app.py

@@ -10,47 +10,20 @@ import html as _html_stdlib
 import gradio as gr
 import spaces
 
-import _data
 import _fig
 import _glb
 import _html
-import _probe
-
-# ── Startup: load data, fit UMAP, load student ───────────────────────────
-HF_TOKEN = os.environ.get("HF_TOKEN")
-
-_local_viz = os.environ.get("VIZ_DATA_PATH")
-try:
-    if _local_viz:
-        VIZ = _data.load_from_path(_local_viz)
-        print(f"[ofa-space] loaded viz from {_local_viz}")
-    else:
-        VIZ = _data.load_and_parse(HF_TOKEN)
-except Exception as e:
-    print(f"[ofa-space] viz_data.json not available ({e}), using empty state")
-    VIZ = _data.make_empty_viz()
-
-try:
-    if VIZ["stacked"].shape[0] > 3:
-        REDUCER  = _data.fit_umap3d(VIZ["stacked"])
-        COORDS3D = REDUCER.embedding_
-        print(f"[ofa-space] UMAP done: {COORDS3D.shape}")
-    else:
-        print(f"[ofa-space] not enough points for UMAP: {VIZ['stacked'].shape[0]}")
-        REDUCER  = None
-        COORDS3D = None
-except Exception as e:
-    print(f"[ofa-space] UMAP failed ({e}), 3D disabled")
-    REDUCER  = None
-    COORDS3D = None
-
-try:
-    TOK, STUDENT, GATING = _probe.load_student(HF_TOKEN)
-    _MODEL_READY = True
-except Exception as e:
-    print(f"[ofa-space] Student not available ({e}). Probe disabled.")
-    TOK = STUDENT = GATING = None
-    _MODEL_READY = False
+
+# ── Startup: shared runtime (viz + UMAP + student) lives in _boot ─────────
+import _boot
+
+RT = _boot.load_runtime()
+HF_TOKEN     = RT.hf_token
+VIZ          = RT.viz
+REDUCER      = RT.reducer
+COORDS3D     = RT.coords3d
+BACKEND      = RT.backend
+_MODEL_READY = RT.model_ready
 
 _INIT_GLB = _glb.build_glb(VIZ, COORDS3D, [])
 print(f"[ofa-space] GLB path: {_INIT_GLB}")
@@ -66,37 +39,86 @@ else:
     _CAM = (45, 30, 10)
 
 
-def _response_html(text: str) -> str:
+def _response_html(text: str, title: str = "MODEL RESPONSE", accent: str = "#8b949e") -> str:
     safe = _html_stdlib.escape(text).replace("\n", "<br>")
     return (
         '<div style="background:#0d1117;border:1px solid #30363d;border-radius:6px;'
         'padding:14px;margin-top:8px;">'
-        '<div style="font-size:10px;color:#8b949e;font-family:monospace;'
-        'margin-bottom:8px;letter-spacing:0.04em;">MODEL RESPONSE</div>'
+        f'<div style="font-size:10px;color:{accent};font-family:monospace;'
+        f'margin-bottom:8px;letter-spacing:0.04em;">{title}</div>'
         f'<div style="font-size:13px;color:#e6edf3;line-height:1.65;">{safe}</div>'
         "</div>"
     )
 
 
-# ── ZeroGPU probe handler ─────────────────────────────────────────────────
+# ── Backend dispatch: same handler code drives torch and llama.cpp ────────
+def _to_device():
+    _boot.to_device(RT)
+
+
+def _stream(text: str):
+    return _boot.stream(RT, text)
+
+
+def _stream_pair(text: str):
+    return _boot.stream_pair(RT, text)
+
+
+def _final_probe(text: str):
+    return _boot.final_probe(RT, text)
+
+
+# ── ZeroGPU probe handler (streaming generator) ───────────────────────────
 @spaces.GPU
-def probe_fn(text: str, probe_points: list) -> tuple:
-    no_change = _glb.build_glb(VIZ, COORDS3D, probe_points), probe_points, "", "", ""
+def probe_fn(text: str, probe_points: list):
     if not text.strip():
-        return no_change
+        yield gr.skip(), probe_points, "", "", ""
+        return
     if not _MODEL_READY or REDUCER is None:
         msg = _html.gate_html([0.2] * 5, VIZ["teacher_names"] or ["—"] * 5)
-        return _glb.build_glb(VIZ, COORDS3D, probe_points), probe_points, "", msg, ""
-    device = "cuda" if __import__("torch").cuda.is_available() else "cpu"
-    STUDENT.to(device)
-    answer               = _probe.generate_response(text, STUDENT, TOK)
-    new_pt, gate_weights = _probe.run_probe(text, STUDENT, TOK, GATING, REDUCER)
-    updated              = probe_points + [new_pt]
-    glb_path             = _glb.build_glb(VIZ, COORDS3D, updated)
-    gate_h               = _html.gate_html(gate_weights, VIZ["teacher_names"])
-    task_h               = _html.task_html(gate_weights, VIZ["teacher_names"])
-    resp_h               = _response_html(answer)
-    return glb_path, updated, resp_h, gate_h, task_h
+        yield _glb.build_glb(VIZ, COORDS3D, probe_points), probe_points, "", msg, ""
+        return
+    _to_device()
+    names = VIZ["teacher_names"]
+
+    # Stream tokens + live gate bars; skip the 3D plot until the end.
+    partial = ""
+    for partial, gates in _stream(text):
+        yield (
+            gr.skip(), probe_points,
+            _response_html(partial),
+            _html.gate_html(gates, names, ranked=False),
+            gr.skip(),
+        )
+
+    # Final pass: pooled probe point in soul space + dominant-teacher badge.
+    new_pt, gate_weights = _final_probe(text)
+    updated = probe_points + [new_pt]
+    yield (
+        _glb.build_glb(VIZ, COORDS3D, updated), updated,
+        _response_html(partial),
+        _html.gate_html(gate_weights, names),
+        _html.task_html(gate_weights, names),
+    )
+
+
+# ── ZeroGPU arena handler: base (LoRA off) vs deku, same prompt ───────────
+@spaces.GPU
+def arena_fn(text: str):
+    if not text.strip():
+        yield "", "", ""
+        return
+    if not _MODEL_READY:
+        yield "", _response_html("model not loaded", "DEKU · DISTILLED"), ""
+        return
+    _to_device()
+    names = VIZ["teacher_names"]
+    for base_text, deku_text, gates in _stream_pair(text):
+        yield (
+            _response_html(base_text, "BASE · QWEN2.5-0.5B", accent="#8b949e"),
+            _response_html(deku_text, "DEKU · DISTILLED", accent="#7c3aed"),
+            _html.gate_html(gates, names, ranked=False),
+        )
 
 
 # ── CSS ───────────────────────────────────────────────────────────────────
@@ -294,7 +316,10 @@ div[data-testid="model3d"], .model3D-component {
 # ── Layout ────────────────────────────────────────────────────────────────
 with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="One for All") as demo:
 
-    gr.HTML(_html.header_html())
+    gr.HTML(_html.header_html(
+        n_teachers=len(VIZ["teacher_names"]) or 6,
+        backend=BACKEND,
+    ))
     probe_state = gr.State([])
 
     with gr.Tabs():
@@ -335,7 +360,42 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="One for All") as demo:
                         'font-family:monospace;">↑ new probe point will appear in soul space</div>'
                     )
 
-        # ── Tab 2: Geometria ──────────────────────────────────────────────
+        # ── Tab 2: Arena — base vs deku, same prompt ──────────────────────
+        with gr.TabItem("Arena"):
+            gr.HTML(
+                '<div style="display:flex;align-items:center;gap:8px;'
+                'font-size:14px;font-weight:600;color:#e6edf3;margin:8px 0;">'
+                '<span style="color:#f59e0b;">⚔</span>One prompt, two models'
+                '<span style="font-family:monospace;font-size:10px;color:#8b949e;">'
+                'same 0.5B weights — LoRA adapter off vs on</span>'
+                '</div>'
+            )
+            arena_box = gr.Textbox(
+                lines=3,
+                placeholder="Ask something — watch base and distilled race side by side…",
+                label="",
+            )
+            arena_btn = gr.Button("Run both", variant="primary")
+            with gr.Row():
+                with gr.Column():
+                    base_out = gr.HTML()
+                with gr.Column():
+                    deku_out = gr.HTML()
+            arena_gate_out = gr.HTML()
+            gr.Examples(
+                examples=[
+                    "Natalia sold clips to 48 of her friends in April, and then she "
+                    "sold half as many clips in May. How many clips did Natalia sell "
+                    "altogether in April and May?",
+                    "Which property of a mineral can be determined just by looking "
+                    "at it? (A) luster (B) mass (C) weight (D) hardness",
+                    "Write a Python function that checks if a word is a palindrome.",
+                    "Explain why the sky is blue in two sentences.",
+                ],
+                inputs=[arena_box],
+            )
+
+        # ── Tab 3: Geometria ──────────────────────────────────────────────
         with gr.TabItem("Geometry"):
             with gr.Row():
                 with gr.Column(scale=7):
@@ -371,7 +431,7 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="One for All") as demo:
                             f'</div>'
                         )
 
-        # ── Tab 3: Treino ─────────────────────────────────────────────────
+        # ── Tab 4: Treino ─────────────────────────────────────────────────
         with gr.TabItem("Training"):
             with gr.Row():
                 gr.Plot(
@@ -389,6 +449,11 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="One for All") as demo:
         inputs=[prompt_box, probe_state],
         outputs=[umap_plot, probe_state, resp_out, gate_out, task_out],
     )
+    arena_btn.click(
+        arena_fn,
+        inputs=[arena_box],
+        outputs=[base_out, deku_out, arena_gate_out],
+    )
 
 
 if __name__ == "__main__":

frontend/app.js

@@ -0,0 +1,388 @@
+/* One for All — custom frontend wired to the gr.Server backend.
+ * Visual design is unchanged from the static mock; the mock answer engine and
+ * the random thought-map are replaced by real calls to /probe, /arena, /viz
+ * via @gradio/client (browser-side calls are required for ZeroGPU). */
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/+esm";
+
+const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const cssv = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+
+// ── teacher lineup (order matches the backend gate vector) ──
+const TEACHERS = [
+  { id: "qwen",     label: "qwen",     varc: "--t-qwen" },
+  { id: "smollm",   label: "smollm",   varc: "--t-smollm" },
+  { id: "phi",      label: "phi",      varc: "--t-phi" },
+  { id: "gemma",    label: "gemma",    varc: "--t-gemma" },
+  { id: "minicpm",  label: "minicpm",  varc: "--t-minicpm" },
+  { id: "nemotron", label: "nemotron", varc: "--t-nemo" },
+];
+const colorFor = (name) =>
+  name === "student" ? cssv("--spark")
+    : cssv((TEACHERS.find((t) => t.id === name) || {}).varc || "--text-dim");
+
+// ── 1. CONVERGENCE DIAGRAM (unchanged) ──────────────────────────────────
+(function buildConverge() {
+  const cx = 300, cy = 300, R = 232;
+  const threads = document.getElementById("threads");
+  const flows = document.getElementById("flows");
+  const tnodes = document.getElementById("tnodes");
+  TEACHERS.forEach((t, i) => {
+    const a = (-90 + i * 60) * Math.PI / 180;
+    const x = cx + R * Math.cos(a), y = cy + R * Math.sin(a);
+    const mx = (x + cx) / 2, my = (y + cy) / 2;
+    const perp = a + Math.PI / 2;
+    const ctrlX = mx + 46 * Math.cos(perp), ctrlY = my + 46 * Math.sin(perp);
+    const d = `M ${x} ${y} Q ${ctrlX} ${ctrlY} ${cx} ${cy}`;
+    const col = cssv(t.varc);
+
+    const base = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    base.setAttribute("d", d); base.setAttribute("class", "thread");
+    base.setAttribute("stroke", col);
+    threads.appendChild(base);
+
+    const flow = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    flow.setAttribute("d", d); flow.setAttribute("class", "thread-flow");
+    flow.setAttribute("stroke", col);
+    if (!reduce) flow.style.animation = `flow ${2.4 + i * 0.25}s linear infinite`;
+    flows.appendChild(flow);
+
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const halo = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    halo.setAttribute("cx", x); halo.setAttribute("cy", y); halo.setAttribute("r", 13);
+    halo.setAttribute("fill", col); halo.setAttribute("opacity", "0.22"); halo.setAttribute("filter", "url(#soft)");
+    const node = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    node.setAttribute("cx", x); node.setAttribute("cy", y); node.setAttribute("r", 7);
+    node.setAttribute("fill", col); node.setAttribute("class", "tnode");
+    const lx = cx + (R + 30) * Math.cos(a), ly = cy + (R + 30) * Math.sin(a);
+    const isRight = Math.cos(a) > 0.2, isLeft = Math.cos(a) < -0.2;
+    const lbl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    lbl.setAttribute("x", lx); lbl.setAttribute("y", ly + 4);
+    lbl.setAttribute("text-anchor", isRight ? "start" : isLeft ? "end" : "middle");
+    lbl.setAttribute("class", "tlabel"); lbl.textContent = t.label;
+    g.appendChild(halo); g.appendChild(node); g.appendChild(lbl);
+    tnodes.appendChild(g);
+  });
+})();
+
+// ── 2. EXAMPLES + INFLUENCE ROWS (unchanged scaffold) ───────────────────
+const EXAMPLES = [
+  "Natalia sold clips to 48 friends in April, then half as many in May. How many altogether?",
+  "Which property of a mineral can be determined just by looking at it? (A) luster (B) mass (C) weight (D) hardness",
+  "Write a Python function that checks if a word is a palindrome.",
+  "Explain why the sky is blue in two sentences.",
+];
+const exWrap = document.getElementById("examples");
+EXAMPLES.forEach((ex, i) => {
+  const li = document.createElement("li");
+  const b = document.createElement("button");
+  b.className = "chip"; b.type = "button";
+  b.innerHTML = `<span class="ix">0${i + 1}</span><span class="qt"></span><span class="go">↵</span>`;
+  b.querySelector(".qt").textContent = ex;
+  b.addEventListener("click", () => {
+    document.getElementById("ask").value = ex;
+    document.getElementById("ask").focus();
+  });
+  li.appendChild(b); exWrap.appendChild(li);
+});
+
+const infRows = document.getElementById("infRows");
+const fills = {};
+TEACHERS.forEach((t) => {
+  const row = document.createElement("div"); row.className = "inf-row";
+  row.style.color = cssv(t.varc);
+  row.innerHTML = `<span class="nm">${t.label}</span>
+    <span class="track"><span class="fill"></span></span>
+    <span class="pc">—</span>`;
+  infRows.appendChild(row);
+  fills[t.id] = { fill: row.querySelector(".fill"), pc: row.querySelector(".pc") };
+});
+
+function setInfluence(gates) {
+  if (!gates) return;
+  TEACHERS.forEach((t, i) => {
+    const val = gates[i] || 0;
+    fills[t.id].fill.style.width = (val * 100).toFixed(0) + "%";
+    fills[t.id].pc.textContent = val > 0 ? val.toFixed(2).slice(1) : "—";
+  });
+}
+function resetInfluence() {
+  TEACHERS.forEach((t) => { fills[t.id].fill.style.width = "0%"; fills[t.id].pc.textContent = "—"; });
+}
+function topIdx(g) { let m = 0; for (let i = 1; i < g.length; i++) if (g[i] > g[m]) m = i; return m; }
+
+// ── 3. BACKEND-WIRED ASK / COMPARE ──────────────────────────────────────
+let mode = "ask";
+let busy = false;
+let client = null;
+const answers = document.getElementById("answers");
+const beforeCard = document.getElementById("beforeCard");
+const bodyAfter = document.getElementById("bodyAfter");
+const bodyBefore = document.getElementById("bodyBefore");
+const askBtn = document.getElementById("askBtn");
+const infNote = document.getElementById("infNote");
+
+document.querySelectorAll(".seg button").forEach((b) => {
+  b.addEventListener("click", () => {
+    document.querySelectorAll(".seg button").forEach((x) => x.setAttribute("aria-pressed", "false"));
+    b.setAttribute("aria-pressed", "true");
+    mode = b.dataset.mode;
+    answers.classList.toggle("compare", mode === "compare");
+    beforeCard.hidden = (mode !== "compare");
+  });
+});
+
+function render(el, text, streaming) {
+  el.textContent = text || "";
+  if (streaming) {
+    const caret = document.createElement("span");
+    caret.className = "caret"; caret.textContent = "▋";
+    el.appendChild(caret);
+  }
+}
+
+async function ask() {
+  const text = document.getElementById("ask").value.trim();
+  if (!text || busy) return;
+  if (!client) { render(bodyAfter, "⚠ backend not connected", false); return; }
+
+  busy = true;
+  askBtn.classList.add("busy"); askBtn.firstChild.textContent = "Thinking ";
+  infNote.textContent = "routing through teachers…";
+  resetInfluence();
+  bodyAfter.innerHTML = '<span class="placeholder-note">distilling…</span>';
+  if (mode === "compare") bodyBefore.textContent = "";
+
+  try {
+    let gates = null;
+    if (mode === "compare") {
+      const job = client.submit("/arena", { text });
+      for await (const msg of job) {
+        if (msg.type !== "data" || !msg.data?.[0]) continue;
+        const d = msg.data[0];
+        if (d.error) { render(bodyAfter, "⚠ " + d.error, false); break; }
+        gates = d.gates; setInfluence(gates);
+        render(bodyBefore, d.base, !d.done);
+        render(bodyAfter, d.deku, !d.done);
+        if (d.done && gates) dropProbeByGates(gates);
+      }
+    } else {
+      const job = client.submit("/probe", { text });
+      for await (const msg of job) {
+        if (msg.type !== "data" || !msg.data?.[0]) continue;
+        const d = msg.data[0];
+        if (d.error) { render(bodyAfter, "⚠ " + d.error, false); break; }
+        gates = d.gates; setInfluence(gates);
+        render(bodyAfter, d.text, !d.done);
+        if (d.done) { if (d.point) dropProbePoint(d.point); else if (gates) dropProbeByGates(gates); }
+      }
+    }
+    if (gates) {
+      const t = TEACHERS[topIdx(gates)].label;
+      infNote.textContent = `leaning on ${t} · ${(gates[topIdx(gates)] * 100).toFixed(0)}%`;
+    } else {
+      infNote.textContent = "idle — waiting for a prompt";
+    }
+  } catch (e) {
+    console.error(e);
+    render(bodyAfter, "⚠ " + (e.message || e), false);
+    infNote.textContent = "error";
+  } finally {
+    busy = false;
+    askBtn.classList.remove("busy"); askBtn.firstChild.textContent = "Ask ";
+  }
+}
+askBtn.addEventListener("click", ask);
+document.getElementById("ask").addEventListener("keydown", (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") ask();
+});
+
+// ── 4. THOUGHT MAP (real coords from /viz, procedural fallback offline) ──
+const stage = document.getElementById("mapStage");
+const layers = {
+  far: document.getElementById("mapFar"),
+  mid: document.getElementById("mapMid"),
+  near: document.getElementById("mapNear"),
+};
+const legend = document.getElementById("mapLegend");
+
+let VIZ = null;
+let PROJ = null;       // {minX,maxX,minY,maxY} bbox of all model points
+let CENTROIDS = {};    // teacher id → [nx, ny] in 0..1, for gate-based probe drop
+
+// fallback cluster centers (used only when the backend has no coords)
+const CENTERS = {
+  qwen: [0.30, 0.32], smollm: [0.70, 0.26], phi: [0.80, 0.58],
+  gemma: [0.58, 0.78], minicpm: [0.30, 0.72], nemotron: [0.46, 0.50],
+};
+const rnd = (n) => (Math.random() - 0.5) * n;
+
+function clearLayers() { Object.values(layers).forEach((l) => (l.innerHTML = "")); }
+
+function addDot(layer, leftPct, topPct, size, color, opacity) {
+  const d = document.createElement("div"); d.className = "dot";
+  d.style.left = leftPct + "%"; d.style.top = topPct + "%";
+  d.style.width = d.style.height = size + "px";
+  d.style.color = color; d.style.background = color; d.style.opacity = opacity;
+  layer.appendChild(d);
+  return d;
+}
+
+function computeProjection(models) {
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const m of models) for (const p of m.points) {
+    if (p[0] < minX) minX = p[0]; if (p[0] > maxX) maxX = p[0];
+    if (p[1] < minY) minY = p[1]; if (p[1] > maxY) maxY = p[1];
+  }
+  return { minX, maxX, minY, maxY };
+}
+function project(p) {  // 3D point → [leftPct, topPct] with 8% padding
+  const { minX, maxX, minY, maxY } = PROJ;
+  const nx = (p[0] - minX) / ((maxX - minX) || 1);
+  const ny = (p[1] - minY) / ((maxY - minY) || 1);
+  return [
+    Math.max(0, Math.min(1, 0.08 + nx * 0.84)) * 100,
+    Math.max(0, Math.min(1, 0.08 + ny * 0.84)) * 100,
+  ];
+}
+
+function placeReal() {
+  clearLayers();
+  PROJ = computeProjection(VIZ.models);
+  CENTROIDS = {};
+  for (const m of VIZ.models) {
+    const col = colorFor(m.name);
+    const isStudent = m.name === "student";
+    let sx = 0, sy = 0;
+    m.points.forEach((p, k) => {
+      const [lp, tp] = project(p);
+      sx += lp; sy += tp;
+      const depth = isStudent ? "near" : (k % 3 === 0 ? "far" : k % 3 === 1 ? "mid" : "near");
+      const sz = isStudent ? 7 : depth === "near" ? 6 : depth === "mid" ? 4.5 : 3;
+      const op = isStudent ? 1 : depth === "near" ? 1 : depth === "mid" ? 0.8 : 0.55;
+      addDot(layers[depth], lp, tp, sz, col, op);
+    });
+    if (!isStudent && m.points.length) CENTROIDS[m.name] = [sx / m.points.length / 100, sy / m.points.length / 100];
+  }
+}
+
+function placeFallback() {
+  clearLayers();
+  PROJ = null;
+  CENTROIDS = {};
+  TEACHERS.forEach((t) => {
+    const c = CENTERS[t.id]; const col = cssv(t.varc);
+    CENTROIDS[t.id] = c;
+    for (let k = 0; k < 11; k++) {
+      const depth = k % 3 === 0 ? "far" : k % 3 === 1 ? "mid" : "near";
+      const sz = depth === "near" ? 6 : depth === "mid" ? 4.5 : 3;
+      const op = depth === "near" ? 1 : depth === "mid" ? 0.8 : 0.55;
+      addDot(layers[depth], (c[0] + rnd(0.13)) * 100, (c[1] + rnd(0.13)) * 100, sz, col, op);
+    }
+  });
+  for (let k = 0; k < 9; k++) {
+    addDot(layers.near, (0.5 + rnd(0.22)) * 100, (0.52 + rnd(0.2)) * 100, 7, cssv("--spark"), 1);
+  }
+}
+
+function placeMap() {
+  if (VIZ && VIZ.models && VIZ.models.length) placeReal();
+  else placeFallback();
+}
+
+function dropProbePoint(point) {
+  let lp, tp;
+  if (PROJ) { [lp, tp] = project([point.x, point.y, point.z]); }
+  else { lp = 50 + rnd(20) * 2; tp = 52 + rnd(18) * 2; }
+  const d = addDot(layers.near, lp, tp, 9, cssv("--text"), 1);
+  d.classList.add("probe");
+}
+function dropProbeByGates(gates) {
+  const id = TEACHERS[topIdx(gates)].id;
+  const c = CENTROIDS[id] || [0.5, 0.5];
+  const lp = (c[0] * 0.6 + 0.5 * 0.4 + rnd(0.06)) * 100;
+  const tp = (c[1] * 0.6 + 0.52 * 0.4 + rnd(0.06)) * 100;
+  const d = addDot(layers.near, lp, tp, 9, cssv("--text"), 1);
+  d.classList.add("probe");
+}
+
+function buildLegend() {
+  legend.innerHTML = "";
+  [{ label: "student", c: "--spark" }, ...TEACHERS.map((t) => ({ label: t.label, c: t.varc })), { label: "probe", c: "--text" }]
+    .forEach((it) => {
+      const s = document.createElement("div"); s.className = "lg"; s.style.color = cssv(it.c);
+      s.innerHTML = `<span class="s"></span><span style="color:var(--text-dim)">${it.label}</span>`;
+      legend.appendChild(s);
+    });
+}
+buildLegend();
+placeMap();
+window.addEventListener("resize", () => { clearTimeout(window.__rt); window.__rt = setTimeout(placeMap, 250); });
+
+// ── 5. PARALLAX (unchanged) ─────────────────────────────────────────────
+const ambient = document.getElementById("ambient");
+const converge = document.getElementById("converge");
+let sy = 0, ticking = false;
+function onScroll() { sy = window.scrollY || 0; if (!ticking) { requestAnimationFrame(applyScroll); ticking = true; } }
+function applyScroll() {
+  if (!reduce) {
+    ambient.style.transform = `translate3d(0, ${sy * 0.18}px, 0)`;
+    converge.style.transform = `translate3d(0, ${sy * -0.04}px, 0)`;
+  }
+  ticking = false;
+}
+window.addEventListener("scroll", onScroll, { passive: true });
+
+let mx = 0, my = 0, cmx = 0, cmy = 0;
+document.addEventListener("mousemove", (e) => {
+  mx = (e.clientX / window.innerWidth - 0.5);
+  my = (e.clientY / window.innerHeight - 0.5);
+});
+function rafMouse() {
+  cmx += (mx - cmx) * 0.06; cmy += (my - cmy) * 0.06;
+  if (!reduce) {
+    const tn = document.getElementById("tnodes");
+    const fl = document.getElementById("flows");
+    if (tn) tn.style.transform = `translate(${cmx * 22}px, ${cmy * 22}px)`;
+    if (fl) fl.style.transform = `translate(${cmx * 10}px, ${cmy * 10}px)`;
+    const r = stage.getBoundingClientRect();
+    if (r.top < window.innerHeight && r.bottom > 0) {
+      Object.values(layers).forEach((l) => {
+        const dep = parseFloat(l.dataset.depth) * 1;
+        l.style.transform = `translate(${cmx * dep * 900}px, ${cmy * dep * 700}px)`;
+      });
+    }
+  }
+  requestAnimationFrame(rafMouse);
+}
+requestAnimationFrame(rafMouse);
+
+// ── 6. SCROLL REVEAL (unchanged) ────────────────────────────────────────
+const io = new IntersectionObserver((ents) => {
+  ents.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
+}, { threshold: 0.18 });
+document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
+
+// ── 7. smooth scroll buttons (unchanged) ────────────────────────────────
+document.querySelectorAll("[data-scroll]").forEach((b) => {
+  b.addEventListener("click", () => {
+    const el = document.querySelector(b.dataset.scroll);
+    if (el) el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
+  });
+});
+
+// ── 0. connect + load viz ───────────────────────────────────────────────
+(async () => {
+  try {
+    client = await Client.connect(location.origin);
+    const res = await client.predict("/viz", {});
+    VIZ = res.data[0];
+    const n = (VIZ.teachers && VIZ.teachers.length) || 6;
+    document.getElementById("statTeachers").innerHTML =
+      `<span class="d t"></span>${n} Teachers <b>· 1.5–4B</b>`;
+    if (!VIZ.model_ready) infNote.textContent = "model offline — UI preview only";
+    placeMap();
+  } catch (e) {
+    console.error("boot failed", e);
+    infNote.textContent = "backend unreachable — UI preview only";
+  }
+})();

frontend/index.html

@@ -0,0 +1,507 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>One for All — the strength of many, carried by one</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=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    /* ── ink base (deep, cool, near-black) ── */
+    --ink-0: oklch(0.155 0.012 264);
+    --ink-1: oklch(0.195 0.013 264);
+    --ink-2: oklch(0.235 0.014 264);
+    --line:      oklch(0.42 0.02 264 / 0.42);
+    --line-soft: oklch(0.42 0.02 264 / 0.20);
+
+    --text:       oklch(0.955 0.008 85);
+    --text-dim:   oklch(0.72 0.012 264);
+    --text-faint: oklch(0.56 0.012 264);
+
+    /* ── the one warm accent (inherited light / the student) ── */
+    --spark:      oklch(0.83 0.125 74);
+    --spark-deep: oklch(0.74 0.135 66);
+    --spark-soft: oklch(0.83 0.125 74 / 0.13);
+    --spark-line: oklch(0.83 0.125 74 / 0.30);
+
+    /* ── 6 teachers: one family, lightness+chroma fixed, hue varies ── */
+    --t-qwen:    oklch(0.76 0.115 252);
+    --t-smollm:  oklch(0.76 0.115 200);
+    --t-phi:     oklch(0.76 0.115 156);
+    --t-gemma:   oklch(0.76 0.115 122);
+    --t-minicpm: oklch(0.76 0.115 38);
+    --t-nemo:    oklch(0.76 0.115 322);
+
+    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
+    --ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+    --maxw: 1180px;
+    --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  * { box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    margin: 0;
+    background: var(--ink-0);
+    color: var(--text);
+    font-family: var(--ui);
+    font-size: 16px;
+    line-height: 1.55;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    overflow-x: hidden;
+  }
+
+  /* layered ambient field — fixed, gets parallax via JS */
+  .ambient {
+    position: fixed; inset: -10% -10% -10% -10%;
+    z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42% 38% at 22% 14%, oklch(0.76 0.115 252 / 0.10), transparent 70%),
+      radial-gradient(40% 36% at 82% 8%,  var(--spark-soft), transparent 72%),
+      radial-gradient(50% 46% at 60% 96%, oklch(0.76 0.115 322 / 0.07), transparent 74%);
+    will-change: transform;
+  }
+  .grain {
+    position: fixed; inset: 0; z-index: 1; pointer-events: none;
+    opacity: 0.035; mix-blend-mode: screen;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+
+  ::-webkit-scrollbar { width: 11px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--ink-2); border-radius: 99px; border: 3px solid var(--ink-0); }
+  ::-webkit-scrollbar-thumb:hover { background: var(--spark-deep); }
+  ::selection { background: var(--spark-soft); color: var(--text); }
+
+  /* ── top bar ── */
+  .topbar {
+    position: sticky; top: 0; z-index: 40;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px clamp(20px, 4vw, 40px);
+    backdrop-filter: blur(14px) saturate(1.2);
+    background: linear-gradient(180deg, oklch(0.155 0.012 264 / 0.86), oklch(0.155 0.012 264 / 0.4));
+    border-bottom: 1px solid var(--line-soft);
+  }
+  .brand { display: flex; align-items: center; gap: 12px; }
+  .mark {
+    font-family: var(--serif); font-size: 30px; line-height: 1;
+    color: var(--spark);
+    text-shadow: 0 0 22px var(--spark-line);
+    transform: translateY(-1px);
+  }
+  .brand .name { font-weight: 600; letter-spacing: -0.01em; font-size: 16px; white-space: nowrap; }
+  .brand .name b { font-weight: 600; }
+  .stat-row { display: flex; align-items: center; gap: 18px; }
+  .stat {
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
+    color: var(--text-faint); display: flex; align-items: center; gap: 7px;
+    text-transform: uppercase;
+  }
+  .stat .d { width: 6px; height: 6px; border-radius: 50%; }
+  .stat .d.s { background: var(--spark); box-shadow: 0 0 8px var(--spark); }
+  .stat .d.t { background: var(--t-qwen); box-shadow: 0 0 8px var(--t-qwen); }
+  .stat b { color: var(--text-dim); font-weight: 500; }
+  @media (max-width: 760px){ .stat-row .stat:last-child { display: none; } }
+
+  /* ── shared layout ── */
+  .wrap { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
+  .eyebrow {
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em;
+    text-transform: uppercase; color: var(--text-faint);
+  }
+
+  /* ── HERO ── */
+  .hero { position: relative; padding: clamp(56px, 11vh, 130px) 0 clamp(40px, 7vh, 90px); }
+  .hero-grid {
+    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 5vw, 64px);
+    align-items: center;
+  }
+  .hero h1 {
+    font-family: var(--serif); font-weight: 400;
+    font-size: clamp(46px, 7.6vw, 104px); line-height: 0.96;
+    letter-spacing: -0.015em; margin: 18px 0 0;
+  }
+  .hero h1 .em { font-style: italic; color: var(--spark); }
+  .hero .lede {
+    margin: 26px 0 0; max-width: 30em;
+    font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; color: var(--text-dim);
+  }
+  .hero .lede b { color: var(--text); font-weight: 600; }
+  .hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
+  .btn {
+    appearance: none; border: 0; cursor: pointer; font-family: var(--ui);
+    font-weight: 600; font-size: 15px; letter-spacing: 0.005em;
+    padding: 13px 22px; border-radius: 99px;
+    display: inline-flex; align-items: center; gap: 10px;
+    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
+  }
+  .btn-spark {
+    color: oklch(0.2 0.04 70);
+    background: linear-gradient(180deg, var(--spark), var(--spark-deep));
+    box-shadow: 0 1px 0 oklch(1 0 0 / 0.3) inset, 0 10px 30px -10px var(--spark-deep);
+  }
+  .btn-spark:hover { transform: translateY(-2px); box-shadow: 0 1px 0 oklch(1 0 0 / 0.3) inset, 0 16px 36px -12px var(--spark-deep); }
+  .btn-ghost { color: var(--text-dim); background: transparent; border: 1px solid var(--line); }
+  .btn-ghost:hover { color: var(--text); border-color: var(--text-faint); }
+  .btn .arrow { font-family: var(--mono); }
+
+  /* convergence diagram */
+  .converge { position: relative; aspect-ratio: 1 / 1; width: 100%; }
+  .converge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+  .converge .tlabel {
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; fill: var(--text-dim);
+  }
+  .thread { fill: none; stroke-width: 1.4; opacity: 0.5; }
+  .thread-flow { fill: none; stroke-width: 1.6; stroke-dasharray: 2 13; stroke-linecap: round; }
+  @keyframes flow { to { stroke-dashoffset: -150; } }
+  .core-ring { animation: spinSlow 38s linear infinite; transform-origin: 300px 300px; }
+  @keyframes spinSlow { to { transform: rotate(360deg); } }
+  @keyframes breathe { 0%,100% { opacity: .55; r: 30; } 50% { opacity: .9; r: 36; } }
+  .core-halo { animation: breathe 4.5s ease-in-out infinite; }
+  .tnode { transition: r .3s var(--ease); }
+
+  .scrollcue {
+    margin-top: clamp(34px, 6vh, 70px); display: flex; align-items: center; gap: 12px;
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--text-faint);
+  }
+  .scrollcue .ln { width: 46px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
+  .scrollcue .ln::after { content:""; position:absolute; inset:0; width:40%; background: var(--spark); animation: cue 2.6s var(--ease) infinite; }
+  @keyframes cue { 0%{ transform: translateX(-120%);} 60%,100%{ transform: translateX(320%);} }
+
+  /* ── reveal ── */
+  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
+  .reveal.in { opacity: 1; transform: none; }
+
+  /* ── section heading ── */
+  .section { padding: clamp(60px, 11vh, 130px) 0; position: relative; }
+  .sec-head { max-width: 40em; margin-bottom: 40px; }
+  .sec-head h2 {
+    font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 50px);
+    line-height: 1.04; letter-spacing: -0.01em; margin: 14px 0 0;
+  }
+  .sec-head p { color: var(--text-dim); margin: 16px 0 0; font-size: 17px; max-width: 34em; }
+
+  /* ── ask panel ── */
+  .ask-shell {
+    display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px;
+  }
+  .card {
+    background: linear-gradient(180deg, oklch(0.205 0.013 264 / 0.7), oklch(0.18 0.012 264 / 0.7));
+    border: 1px solid var(--line-soft);
+    border-radius: 18px;
+    padding: 22px;
+    position: relative;
+  }
+  .seg {
+    display: inline-flex; padding: 3px; gap: 2px;
+    background: var(--ink-0); border: 1px solid var(--line-soft); border-radius: 99px;
+    margin-bottom: 18px;
+  }
+  .seg button {
+    appearance: none; border: 0; background: transparent; cursor: pointer;
+    font-family: var(--ui); font-weight: 600; font-size: 13px;
+    color: var(--text-faint); padding: 7px 16px; border-radius: 99px;
+    transition: color .2s, background .2s;
+  }
+  .seg button[aria-pressed="true"] { background: var(--ink-2); color: var(--text); }
+
+  .ask-box {
+    width: 100%; min-height: 96px; resize: vertical;
+    background: var(--ink-0); border: 1px solid var(--line-soft);
+    border-radius: 12px; padding: 15px 16px;
+    color: var(--text); font-family: var(--ui); font-size: 16px; line-height: 1.5;
+    outline: none; transition: border-color .2s, box-shadow .2s;
+  }
+  .ask-box:focus { border-color: var(--spark-line); box-shadow: 0 0 0 4px var(--spark-soft); }
+  .ask-box::placeholder { color: var(--text-faint); }
+
+  .ask-row { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
+  .run-hint { margin-right: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
+  .run-hint .kbd { border: 1px solid var(--line-soft); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--text-dim); background: var(--ink-0); }
+
+  /* example questions — visible list */
+  .examples-block { margin-top: 22px; }
+  .examples-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
+  .examples { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
+  .chip {
+    appearance: none; cursor: pointer; width: 100%; text-align: left;
+    font-family: var(--ui); font-size: 14.5px; color: var(--text-dim);
+    background: oklch(0.205 0.013 264 / 0.4); border: 0;
+    padding: 13px 15px; display: flex; align-items: center; gap: 12px;
+    transition: color .18s, background .18s, padding .18s var(--ease);
+  }
+  .chip + .chip { border-top: 1px solid var(--line-soft); }
+  .chip .ix { font-family: var(--mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; transition: color .18s; }
+  .chip .qt { flex: 1; }
+  .chip .go { font-family: var(--mono); color: var(--spark); opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s var(--ease); flex-shrink: 0; }
+  .chip:hover { color: var(--text); background: oklch(0.235 0.014 264 / 0.7); padding-left: 19px; }
+  .chip:hover .ix { color: var(--spark); }
+  .chip:hover .go { opacity: 1; transform: none; }
+
+  .ask-btn {
+    appearance: none; border: 0; cursor: pointer; flex-shrink: 0;
+    font-family: var(--ui); font-weight: 700; font-size: 15px;
+    color: oklch(0.2 0.04 70);
+    background: linear-gradient(180deg, var(--spark), var(--spark-deep));
+    padding: 12px 24px; border-radius: 12px;
+    display: inline-flex; align-items: center; gap: 12px;
+    box-shadow: 0 1px 0 oklch(1 0 0 / 0.3) inset, 0 10px 26px -12px var(--spark-deep);
+    transition: transform .2s var(--ease), filter .2s;
+  }
+  .ask-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
+  .ask-btn small { font-family: var(--mono); font-weight: 400; font-size: 10.5px; opacity: 0.7; letter-spacing: 0.04em; }
+  .ask-btn.busy { animation: pulseBtn 1.1s ease-in-out infinite; }
+  @keyframes pulseBtn { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.18);} }
+
+  /* answers */
+  .answers { margin-top: 22px; display: grid; gap: 16px; }
+  .answers.compare { grid-template-columns: 1fr 1fr; }
+  .ans {
+    border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px;
+    background: var(--ink-0);
+  }
+  .ans .tag {
+    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
+    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
+  }
+  .ans.before .tag { color: var(--text-faint); }
+  .ans.after  .tag { color: var(--spark); }
+  .ans .tag .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
+  .ans .body { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); white-space: pre-wrap; min-height: 3em; }
+  .ans.after .body { color: var(--text); }
+  .ans.before { opacity: 0.72; }
+  .ans .body .caret { color: var(--spark); animation: blink 1s step-end infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
+  .placeholder-note { color: var(--text-faint); font-size: 13.5px; font-style: italic; }
+  @media (max-width: 640px){ .answers.compare { grid-template-columns: 1fr; } }
+
+  /* teacher influence */
+  .influence .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
+  .influence .head .ttl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
+  .influence > p { color: var(--text-dim); font-size: 13.5px; margin: 0 0 20px; }
+  .inf-rows { display: flex; flex-direction: column; gap: 15px; }
+  .inf-row { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 12px; }
+  .inf-row .nm { font-family: var(--mono); font-size: 12.5px; }
+  .inf-row .track { height: 5px; border-radius: 99px; background: oklch(0.3 0.01 264 / 0.5); overflow: hidden; position: relative; }
+  .inf-row .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: currentColor; box-shadow: 0 0 10px currentColor; transition: width 1s var(--ease); }
+  .inf-row .pc { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); text-align: right; }
+  .inf-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
+    font-family: var(--mono); font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
+  .inf-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 8px var(--spark); }
+
+  /* ── thought map ── */
+  .map-stage {
+    position: relative; height: clamp(440px, 64vh, 680px);
+    border-radius: 22px; overflow: hidden;
+    border: 1px solid var(--line-soft);
+    background:
+      radial-gradient(60% 60% at 50% 50%, oklch(0.2 0.013 264 / 0.5), transparent 75%),
+      var(--ink-0);
+  }
+  .map-stage .vignette { position: absolute; inset: 0; pointer-events: none;
+    box-shadow: inset 0 0 140px 30px oklch(0.13 0.01 264 / 0.9); }
+  .map-layer { position: absolute; inset: 0; will-change: transform; }
+  .dot {
+    position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
+    box-shadow: 0 0 10px currentColor; will-change: transform;
+  }
+  .dot.probe { background: var(--text); color: var(--text); }
+  .dot.probe::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--text); opacity:0; animation: ping 1.6s var(--ease) 2; }
+  @keyframes ping { 0%{ transform: scale(.4); opacity:.8;} 100%{ transform: scale(1.6); opacity:0; } }
+  .map-legend {
+    position: absolute; left: 20px; bottom: 18px; z-index: 3;
+    display: flex; flex-wrap: wrap; gap: 14px;
+  }
+  .map-legend .lg { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
+  .map-legend .lg .s { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 7px currentColor; background: currentColor; }
+  .map-cap { position: absolute; top: 20px; left: 22px; z-index: 3; max-width: 30em; }
+  .map-cap .t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
+  .map-cap p { margin: 8px 0 0; color: var(--text-dim); font-size: 14px; }
+
+  /* ── footer ── */
+  footer { position: relative; z-index: 2; border-top: 1px solid var(--line-soft); margin-top: 40px; }
+  .foot-in { max-width: var(--maxw); margin: 0 auto; padding: 30px clamp(20px,4vw,40px);
+    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
+  .foot-in .tag { font-family: var(--serif); font-size: 22px; color: var(--text-dim); }
+  .foot-in .tag .em { font-style: italic; color: var(--spark); }
+  .foot-links { display: flex; gap: 22px; font-family: var(--mono); font-size: 12px; }
+  .foot-links a { color: var(--text-faint); text-decoration: none; transition: color .2s; }
+  .foot-links a:hover { color: var(--spark); }
+
+  @media (max-width: 900px){
+    .hero-grid { grid-template-columns: 1fr; }
+    .converge { max-width: 460px; margin: 8px auto 0; }
+    .ask-shell { grid-template-columns: 1fr; }
+  }
+
+  @media (prefers-reduced-motion: reduce){
+    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
+    html { scroll-behavior: auto; }
+    .reveal { opacity: 1; transform: none; }
+  }
+</style>
+</head>
+<body>
+  <div class="ambient" id="ambient"></div>
+  <div class="grain"></div>
+
+  <!-- ── TOP BAR ── -->
+  <header class="topbar">
+    <div class="brand">
+      <span class="name">One for <b>All</b></span>
+    </div>
+    <div class="stat-row">
+      <span class="stat"><span class="d s"></span>Student <b>· 0.5B</b></span>
+      <span class="stat" id="statTeachers"><span class="d t"></span>6 Teachers <b>· 1.5–4B</b></span>
+    </div>
+  </header>
+
+  <!-- ── HERO ── -->
+  <section class="hero">
+    <div class="wrap hero-grid">
+      <div class="hero-copy">
+        <span class="eyebrow">Multi-teacher distillation</span>
+        <h1>Six minds,<br />one&nbsp;<span class="em">student</span>.</h1>
+        <p class="lede">
+          Six specialist AIs pour what they know into a single half-billion-parameter
+          model — <b>the strength of many, carried by one.</b> Ask it anything and watch
+          the inheritance happen, live.
+        </p>
+        <div class="hero-cta">
+          <button class="btn btn-spark" data-scroll="#try">Ask the student <span class="arrow">↓</span></button>
+          <button class="btn btn-ghost" data-scroll="#map">See the thought map</button>
+        </div>
+        <div class="scrollcue"><span class="ln"></span> watch the transfer</div>
+      </div>
+
+      <!-- convergence diagram: 6 teachers → 1 student -->
+      <div class="converge" id="converge" aria-hidden="true">
+        <svg viewBox="0 0 600 600">
+          <defs>
+            <radialGradient id="coreG" cx="50%" cy="50%" r="50%">
+              <stop offset="0%"  stop-color="oklch(0.97 0.05 80)" />
+              <stop offset="45%" stop-color="var(--spark)" />
+              <stop offset="100%" stop-color="var(--spark-deep)" />
+            </radialGradient>
+            <filter id="soft" x="-60%" y="-60%" width="220%" height="220%">
+              <feGaussianBlur stdDeviation="7" />
+            </filter>
+          </defs>
+
+          <!-- threads + flow + nodes are injected by JS -->
+          <g id="threads"></g>
+          <g id="flows"></g>
+
+          <!-- student core -->
+          <circle class="core-halo" cx="300" cy="300" r="32" fill="var(--spark)" opacity="0.5" filter="url(#soft)" />
+          <g class="core-ring">
+            <circle cx="300" cy="300" r="58" fill="none" stroke="var(--spark-line)" stroke-width="1" stroke-dasharray="3 9" />
+          </g>
+          <circle cx="300" cy="300" r="17" fill="url(#coreG)" />
+          <circle cx="300" cy="300" r="17" fill="none" stroke="oklch(1 0 0 / 0.5)" stroke-width="1" />
+          <text x="300" y="345" text-anchor="middle" class="tlabel" style="fill: var(--spark); font-size: 12px; letter-spacing:0.12em;">STUDENT · 0.5B</text>
+
+          <g id="tnodes"></g>
+        </svg>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── ASK / COMPARE ── -->
+  <section class="section" id="try">
+    <div class="wrap">
+      <div class="sec-head reveal">
+        <span class="eyebrow">Live probe</span>
+        <h2>One prompt. Two answers.<br />Before the teachers, and after.</h2>
+        <p>The exact same 0.5-billion-parameter model — with and without what it learned from the
+           six teachers. Type a question, or pick one below.</p>
+      </div>
+
+      <div class="ask-shell reveal">
+        <!-- left: prompt + answers -->
+        <div class="card">
+          <div class="seg" role="group" aria-label="view mode">
+            <button data-mode="ask" aria-pressed="true">Ask</button>
+            <button data-mode="compare" aria-pressed="false">Compare before / after</button>
+          </div>
+
+          <textarea class="ask-box" id="ask" placeholder="Ask anything — a math problem, a science question, a bit of code…">Write a Python function that checks if a word is a palindrome.</textarea>
+
+          <div class="ask-row">
+            <span class="run-hint"><span class="kbd">⌘</span><span class="kbd">↵</span> to run</span>
+            <button class="ask-btn" id="askBtn">Ask <small>0.5B model</small></button>
+          </div>
+
+          <div class="examples-block">
+            <span class="examples-label">Or pick a question</span>
+            <ul class="examples" id="examples"></ul>
+          </div>
+
+          <div class="answers" id="answers">
+            <div class="ans after">
+              <div class="tag"><span class="d"></span>After · taught by 6 teachers</div>
+              <div class="body" id="bodyAfter"><span class="placeholder-note">Ask the student to see how its answer changes after distillation.</span></div>
+            </div>
+            <div class="ans before" id="beforeCard" hidden>
+              <div class="tag"><span class="d"></span>Before · plain base model</div>
+              <div class="body" id="bodyBefore"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- right: teacher influence -->
+        <div class="card influence">
+          <div class="head"><span class="ttl">Teacher influence</span></div>
+          <p>While the student answers, these bars show how much it leans on what each teacher taught it.</p>
+          <div class="inf-rows" id="infRows"></div>
+          <div class="inf-foot"><span class="dot"></span><span id="infNote">idle — waiting for a prompt</span></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── THOUGHT MAP ── -->
+  <section class="section" id="map">
+    <div class="wrap">
+      <div class="sec-head reveal">
+        <span class="eyebrow">Representation space</span>
+        <h2>Where every mind keeps its thoughts.</h2>
+        <p>Each dot is how one model internally represents a piece of text. Teachers cluster by what
+           they're good at — and the student drifts toward all of them at once. Your prompts land here
+           as bright probes.</p>
+      </div>
+
+      <div class="map-stage reveal" id="mapStage">
+        <div class="map-cap">
+          <div class="t">Thought map</div>
+          <p>Move your cursor — the field has depth.</p>
+        </div>
+        <div class="map-layer" id="mapFar" data-depth="0.012"></div>
+        <div class="map-layer" id="mapMid" data-depth="0.028"></div>
+        <div class="map-layer" id="mapNear" data-depth="0.05"></div>
+        <div class="vignette"></div>
+        <div class="map-legend" id="mapLegend"></div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="foot-in">
+      <div class="tag">one for all — <span class="em">the strength of many, carried by one.</span></div>
+      <div class="foot-links">
+        <a href="https://huggingface.co/build-small-hackathon/deku" target="_blank" rel="noopener">model</a>
+        <a href="https://huggingface.co/build-small-hackathon/deku-gguf" target="_blank" rel="noopener">gguf</a>
+        <a href="https://huggingface.co/spaces/build-small-hackathon/one-for-all" target="_blank" rel="noopener">↗ space</a>
+      </div>
+    </div>
+  </footer>
+
+<script type="module" src="/static/app.js"></script>
+</body>
+</html>

requirements.txt

@@ -1,4 +1,4 @@
-gradio==5.33.2
+gradio>=6.18
 plotly>=5.20
 umap-learn>=0.5
 numpy
@@ -9,3 +9,7 @@ accelerate>=0.30
 spaces
 huggingface_hub>=0.22
 trimesh>=4.0
+# llama.cpp backend (OFA_BACKEND=llamacpp) is opt-in: it compiles from source on
+# the Spaces builder (~10 min, can fail), and the default torch/ZeroGPU path never
+# imports it. Uncomment only if you switch OFA_BACKEND to "llamacpp".
+# llama-cpp-python>=0.3

server_app.py

@@ -0,0 +1,84 @@
+"""
+space/server_app.py — One for All, custom frontend on gr.Server.
+
+gr.Server = FastAPI with Gradio's API engine: @app.api functions become
+queued/streaming endpoints (SSE), and we serve our own HTML/JS at "/" —
+the browser talks to the endpoints via @gradio/client (required for ZeroGPU).
+
+Run locally:
+    cd space && VIZ_DATA_PATH=/path/to/viz_data.json python server_app.py
+
+The legacy Blocks UI (app.py) keeps working — both share _boot.py.
+"""
+from __future__ import annotations
+
+from pathlib import Path
+
+import spaces
+from fastapi.responses import FileResponse, HTMLResponse
+from gradio import Server
+
+import _boot
+
+RT = _boot.load_runtime()
+FRONTEND = Path(__file__).parent / "frontend"
+
+app = Server()
+
+
+# ── API: static viz payload (soul space, CKA, curves, meta) ────────────────
+@app.api(name="viz")
+def viz() -> dict:
+    return _boot.viz_payload(RT.viz, RT.coords3d, RT.backend, RT.model_ready)
+
+
+# ── API: streaming probe — text + live gates, final soul-space point ───────
+@app.api(name="probe", stream_every=0.1)
+@spaces.GPU
+def probe(text: str) -> dict:  # annotation = type of each streamed chunk
+    if not text.strip() or not RT.model_ready:
+        yield {"error": "model not ready" if text.strip() else "empty prompt",
+               "done": True}
+        return
+    _boot.to_device(RT)
+    partial, gates = "", []
+    for partial, gates in _boot.stream(RT, text):
+        yield {"text": partial, "gates": gates, "done": False}
+    point = None
+    if RT.reducer is not None:
+        point, gates = _boot.final_probe(RT, text)
+    yield {"text": partial, "gates": gates, "point": point, "done": True}
+
+
+# ── API: streaming arena — base (LoRA off) vs deku, interleaved ────────────
+@app.api(name="arena", stream_every=0.1)
+@spaces.GPU
+def arena(text: str) -> dict:  # annotation = type of each streamed chunk
+    if not text.strip() or not RT.model_ready:
+        yield {"error": "model not ready" if text.strip() else "empty prompt",
+               "done": True}
+        return
+    _boot.to_device(RT)
+    base = deku = ""
+    gates: list[float] = []
+    for base, deku, gates in _boot.stream_pair(RT, text):
+        yield {"base": base, "deku": deku, "gates": gates, "done": False}
+    yield {"base": base, "deku": deku, "gates": gates, "done": True}
+
+
+# ── Custom frontend (overrides Gradio's default UI at "/") ────────────────
+@app.get("/", response_class=HTMLResponse)
+async def home():
+    return (FRONTEND / "index.html").read_text()
+
+
+@app.get("/static/{name}")
+async def static(name: str):
+    target = (FRONTEND / name).resolve()
+    if target.parent != FRONTEND.resolve() or not target.exists():
+        return HTMLResponse("not found", status_code=404)
+    return FileResponse(target)
+
+
+if __name__ == "__main__":
+    app.launch()