Spaces:
Running
Running
deploy(hf): sync szl-holdings/a11oy@main derived COPY set
Browse filesReusable Dockerfile-COPY-derived deploy from szl-holdings/a11oy main.
Files: 1003 Pruned: 0
Derived from Dockerfile COPY sources (NO hand-maintained allowlist).
Signed-off-by: SZL Holdings <noreply@szlholdings.ai>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- static/3d/holographic.html +1 -0
- static/3d/surfaces/blocksparse.js +420 -0
static/3d/holographic.html
CHANGED
|
@@ -314,6 +314,7 @@ const SURFACES = [
|
|
| 314 |
{ id: "execverify", cat: "reasoning", title: "Execution-Verified Synthesis Loop · eval → verified trajectory → corpus candidate → receipt (STRUCTURAL-ONLY)", mod: "/static/3d/surfaces/execverify.js" },
|
| 315 |
{ id: "opsdash", cat: "governance", flag: true, title: "Ops Dashboard · live estate health · GREEN/DEGRADED/UNAVAILABLE rollup + per-surface honest labels + /verify", mod: "/static/3d/surfaces/opsdash.js" },
|
| 316 |
{ id: "flowbrain", cat: "brain", flag: true, title: "FlowBrain · continuous belief-flow lens · tiers as thresholds crossed on x_t∈[0,1] + 1D-time⊗1D-node axis-factorization (STRUCTURAL-ONLY; borrows B[FM]² continuous-flow principle, NO EEG)", mod: "/static/3d/surfaces/flowbrain.js" },
|
|
|
|
| 317 |
];
|
| 318 |
|
| 319 |
const stageEl = document.getElementById("stage");
|
|
|
|
| 314 |
{ id: "execverify", cat: "reasoning", title: "Execution-Verified Synthesis Loop · eval → verified trajectory → corpus candidate → receipt (STRUCTURAL-ONLY)", mod: "/static/3d/surfaces/execverify.js" },
|
| 315 |
{ id: "opsdash", cat: "governance", flag: true, title: "Ops Dashboard · live estate health · GREEN/DEGRADED/UNAVAILABLE rollup + per-surface honest labels + /verify", mod: "/static/3d/surfaces/opsdash.js" },
|
| 316 |
{ id: "flowbrain", cat: "brain", flag: true, title: "FlowBrain · continuous belief-flow lens · tiers as thresholds crossed on x_t∈[0,1] + 1D-time⊗1D-node axis-factorization (STRUCTURAL-ONLY; borrows B[FM]² continuous-flow principle, NO EEG)", mod: "/static/3d/surfaces/flowbrain.js" },
|
| 317 |
+
{ id: "blocksparse", cat: "attention", title: "Learned Blockwise Top-k KV Sparse Attention · selection (MODELED)", mod: "/static/3d/surfaces/blocksparse.js" },
|
| 318 |
];
|
| 319 |
|
| 320 |
const stageEl = document.getElementById("stage");
|
static/3d/surfaces/blocksparse.js
ADDED
|
@@ -0,0 +1,420 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// SPDX-License-Identifier: Apache-2.0
|
| 2 |
+
// © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
|
| 3 |
+
//
|
| 4 |
+
// surfaces/blocksparse.js — LEARNED BLOCKWISE TOP-k KV SPARSE ATTENTION organ for
|
| 5 |
+
// the holographic frontier ring. Renders the KV cache as a row of BLOCKS: a cheap
|
| 6 |
+
// INDEX BRANCH scores each block, a per-GQA-group Top-k keeps only the most relevant
|
| 7 |
+
// blocks, and exact attention runs over just those. Selected blocks glow proof-teal
|
| 8 |
+
// and rise (kept); dropped blocks stay grey and low. A back column per block shows the
|
| 9 |
+
// TRUE dense attention mass, so you can see how much of what the dense model actually
|
| 10 |
+
// attends to the cheap selector captured. A HUD shows the compute-reduction vs dense,
|
| 11 |
+
// index-branch recall vs the exact oracle top-k, and the recall/quality ↔ compute
|
| 12 |
+
// tradeoff curve — all from the live snapshot at /api/a11oy/v1/blocksparse/select.
|
| 13 |
+
// Honesty label "MODELED" is read VERBATIM from the JSON and displayed as-is; never
|
| 14 |
+
// upgraded.
|
| 15 |
+
//
|
| 16 |
+
// Surface export shape (mirrors gateddelta.js / kvcache.js exactly):
|
| 17 |
+
// export default { id, title, endpoints, mount(ctx), unmount() }
|
| 18 |
+
// ctx = { stage, container, live, label, THREE, szl3d }
|
| 19 |
+
//
|
| 20 |
+
// DATA SHOWN (all from live endpoint):
|
| 21 |
+
// seq_len, block_size, n_blocks, top_k, n_groups, group_share, dim,
|
| 22 |
+
// dense_positions, sparse_positions, compute_fraction, compute_reduction,
|
| 23 |
+
// index_recall, oracle_recall, selection_precision, output_cos, output_rel_err,
|
| 24 |
+
// tradeoff[], per_group[]
|
| 25 |
+
//
|
| 26 |
+
// LEADERS ADOPTED & CITED (clean-room; NOT claimed as SZL's own; VERIFIED real ids):
|
| 27 |
+
// MiniMax Sparse Attention (MSA) — MiniMax 2026, arXiv:2606.13392
|
| 28 |
+
// SparDA: Sparse Decoupled Attention — 2026, arXiv:2606.04511
|
| 29 |
+
// Native Sparse Attention (NSA, DeepSeek) — Yuan et al. 2025, arXiv:2502.11089
|
| 30 |
+
//
|
| 31 |
+
// HONESTY LABELS: MODELED (deterministic simulation of the index-branch / Top-k /
|
| 32 |
+
// block-sparse attention over a synthetic long-context KV cache; NOT a real trained
|
| 33 |
+
// model or GPU). Read verbatim from JSON; never upgraded here.
|
| 34 |
+
// COLOURS: proof-teal 0x3af4c8 (selected block / HUD accent), lattice-blue 0x5b8dee
|
| 35 |
+
// (true dense mass column), greys (dropped block / degraded). Purple BANNED.
|
| 36 |
+
// 0 RUNTIME CDN. Vendored three.js r170 via page importmap.
|
| 37 |
+
// DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
|
| 38 |
+
// Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
|
| 39 |
+
|
| 40 |
+
import { createShowcase } from "./_showcase.js";
|
| 41 |
+
|
| 42 |
+
const ID = "blocksparse";
|
| 43 |
+
const TITLE = "Learned Blockwise Top-k KV Sparse Attention · selection (live)";
|
| 44 |
+
|
| 45 |
+
// PRIMARY endpoint is the a11oy-NATIVE self-hosted twin (same-origin, szl_blocksparse.py):
|
| 46 |
+
// real index-branch block scoring + per-GQA-group Top-k + exact block-sparse attention
|
| 47 |
+
// over a seeded long-context KV cache (label MODELED, read verbatim). No cross-origin dep.
|
| 48 |
+
const EP = "/api/a11oy/v1/blocksparse/select?seed=42&seq_len=256&block_size=16&top_k=4&n_groups=4&group_share=4&dim=8";
|
| 49 |
+
|
| 50 |
+
// data-viz hues — purple BANNED
|
| 51 |
+
const C_SEL = 0x3af4c8; // proof-teal (selected block / HUD accent)
|
| 52 |
+
const C_MASS = 0x5b8dee; // lattice-blue (true dense attention-mass column)
|
| 53 |
+
const C_DROP = 0x5a6570; // grey (dropped block)
|
| 54 |
+
const C_DIM = 0x42505d; // grey (degraded / no-live-data)
|
| 55 |
+
const C_GRID = 0x1b3a44; // floor / link colour
|
| 56 |
+
|
| 57 |
+
// block-row layout geometry
|
| 58 |
+
const BLK_GAP = 0.9; // world-units between block nodes along X
|
| 59 |
+
const MAX_BLKS = 64; // cap on blocks rendered (perf; backend clamps n_blocks)
|
| 60 |
+
const BASE_Y = 0.4; // resting height of a block node
|
| 61 |
+
|
| 62 |
+
let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
|
| 63 |
+
let _frameReg = false, _polls = [], _el = {}, _badge = null;
|
| 64 |
+
|
| 65 |
+
// geometry handles
|
| 66 |
+
let _spine = null; // THREE.Line — the KV-cache spine
|
| 67 |
+
let _blkMesh = []; // Array<THREE.Mesh> — one node per block (selection)
|
| 68 |
+
let _massBar = []; // Array<THREE.Mesh> — true dense-mass column per block
|
| 69 |
+
let _marker = null; // THREE.Mesh — HUD pulsing marker (compute-reduction cue)
|
| 70 |
+
|
| 71 |
+
// live state
|
| 72 |
+
const S = {
|
| 73 |
+
label: null,
|
| 74 |
+
seqLen: null,
|
| 75 |
+
blockSize: null,
|
| 76 |
+
nBlocks: null,
|
| 77 |
+
topK: null,
|
| 78 |
+
nGroups: null,
|
| 79 |
+
groupShare: null,
|
| 80 |
+
dim: null,
|
| 81 |
+
densePos: null,
|
| 82 |
+
sparsePos: null,
|
| 83 |
+
computeFrac: null, // compute_fraction
|
| 84 |
+
reduction: null, // compute_reduction
|
| 85 |
+
indexRecall: null,
|
| 86 |
+
oracleRecall: null,
|
| 87 |
+
selPrec: null, // selection_precision
|
| 88 |
+
outCos: null,
|
| 89 |
+
outRelErr: null,
|
| 90 |
+
tradeoff: null, // tradeoff[]
|
| 91 |
+
perGroup: null, // per_group[]
|
| 92 |
+
state: "init",
|
| 93 |
+
};
|
| 94 |
+
|
| 95 |
+
// =============================================================================
|
| 96 |
+
// mount(ctx)
|
| 97 |
+
// =============================================================================
|
| 98 |
+
export function mount(ctx) {
|
| 99 |
+
_ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE;
|
| 100 |
+
_group = new _THREE.Group();
|
| 101 |
+
_stage.scene.add(_group);
|
| 102 |
+
_stage.camera.position.set(6, 7, 18);
|
| 103 |
+
try { if (_stage.controls && _stage.controls.target) { _stage.controls.target.set(6, 1, 0); _stage.controls.update(); } } catch (_) {}
|
| 104 |
+
try { _stage.setBloom(true); } catch (_) {}
|
| 105 |
+
|
| 106 |
+
_buildFloor();
|
| 107 |
+
_buildBlockRow();
|
| 108 |
+
_buildMarker();
|
| 109 |
+
|
| 110 |
+
if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; }
|
| 111 |
+
|
| 112 |
+
_badge = ctx.live.createBadge();
|
| 113 |
+
_polls.push(ctx.live.poll(EP, 5000, _onBlockSparse, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
|
| 114 |
+
|
| 115 |
+
_buildOverlay();
|
| 116 |
+
return { id: ID, started: true };
|
| 117 |
+
}
|
| 118 |
+
|
| 119 |
+
// =============================================================================
|
| 120 |
+
// builders
|
| 121 |
+
// =============================================================================
|
| 122 |
+
function _buildFloor() {
|
| 123 |
+
const THREE = _THREE;
|
| 124 |
+
const grid = new THREE.GridHelper(48, 48, C_GRID, 0x0f2027);
|
| 125 |
+
grid.material.opacity = 0.18; grid.material.transparent = true; grid.position.y = -0.01;
|
| 126 |
+
_group.add(grid);
|
| 127 |
+
}
|
| 128 |
+
|
| 129 |
+
// Pre-allocate a fixed block file: MAX_BLKS slots. Each slot has a selection node
|
| 130 |
+
// (kept / dropped) + a true dense-attention-mass column. Toggled in-place as live
|
| 131 |
+
// data arrives (no per-poll geometry churn).
|
| 132 |
+
function _buildBlockRow() {
|
| 133 |
+
const THREE = _THREE;
|
| 134 |
+
|
| 135 |
+
// KV-cache spine along X
|
| 136 |
+
{
|
| 137 |
+
const pts = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(BLK_GAP * (MAX_BLKS - 1) + 1, 0, 0)];
|
| 138 |
+
const geo = new THREE.BufferGeometry().setFromPoints(pts);
|
| 139 |
+
const mat = new THREE.LineBasicMaterial({ color: C_SEL, transparent: true, opacity: 0.35 });
|
| 140 |
+
_spine = new THREE.Line(geo, mat);
|
| 141 |
+
_group.add(_spine);
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
const nodeGeo = new THREE.BoxGeometry(0.34, 0.34, 0.34);
|
| 145 |
+
const barGeo = new THREE.BoxGeometry(0.22, 1.0, 0.22);
|
| 146 |
+
for (let b = 0; b < MAX_BLKS; b++) {
|
| 147 |
+
const x = b * BLK_GAP;
|
| 148 |
+
const node = new THREE.Mesh(
|
| 149 |
+
nodeGeo,
|
| 150 |
+
new THREE.MeshStandardMaterial({ color: C_DROP, emissive: C_DROP, emissiveIntensity: 0.2, transparent: true, opacity: 0.0 }),
|
| 151 |
+
);
|
| 152 |
+
node.position.set(x, BASE_Y, 0);
|
| 153 |
+
node.visible = false;
|
| 154 |
+
_group.add(node);
|
| 155 |
+
_blkMesh.push(node);
|
| 156 |
+
|
| 157 |
+
const bar = new THREE.Mesh(
|
| 158 |
+
barGeo,
|
| 159 |
+
new THREE.MeshStandardMaterial({ color: C_MASS, emissive: C_MASS, emissiveIntensity: 0.15, transparent: true, opacity: 0.0 }),
|
| 160 |
+
);
|
| 161 |
+
bar.position.set(x, 0.5, -1.2);
|
| 162 |
+
bar.visible = false;
|
| 163 |
+
_group.add(bar);
|
| 164 |
+
_massBar.push(bar);
|
| 165 |
+
}
|
| 166 |
+
}
|
| 167 |
+
|
| 168 |
+
function _buildMarker() {
|
| 169 |
+
const THREE = _THREE;
|
| 170 |
+
_marker = new THREE.Mesh(
|
| 171 |
+
new THREE.IcosahedronGeometry(0.3, 1),
|
| 172 |
+
new THREE.MeshStandardMaterial({ color: C_SEL, emissive: C_SEL, emissiveIntensity: 0.5, wireframe: true, transparent: true, opacity: 0.85 }),
|
| 173 |
+
);
|
| 174 |
+
_marker.position.set(0, -1.0, 0);
|
| 175 |
+
_group.add(_marker);
|
| 176 |
+
}
|
| 177 |
+
|
| 178 |
+
// =============================================================================
|
| 179 |
+
// live data handler
|
| 180 |
+
// =============================================================================
|
| 181 |
+
function _onBlockSparse(j) {
|
| 182 |
+
// read honesty label VERBATIM — never upgrade
|
| 183 |
+
S.label = (j.label || "MODELED").toUpperCase();
|
| 184 |
+
S.seqLen = typeof j.seq_len === "number" ? j.seq_len : null;
|
| 185 |
+
S.blockSize = typeof j.block_size === "number" ? j.block_size : null;
|
| 186 |
+
S.nBlocks = typeof j.n_blocks === "number" ? j.n_blocks : null;
|
| 187 |
+
S.topK = typeof j.top_k === "number" ? j.top_k : null;
|
| 188 |
+
S.nGroups = typeof j.n_groups === "number" ? j.n_groups : null;
|
| 189 |
+
S.groupShare = typeof j.group_share === "number" ? j.group_share : null;
|
| 190 |
+
S.dim = typeof j.dim === "number" ? j.dim : null;
|
| 191 |
+
S.densePos = typeof j.dense_positions === "number" ? j.dense_positions : null;
|
| 192 |
+
S.sparsePos = typeof j.sparse_positions === "number" ? j.sparse_positions : null;
|
| 193 |
+
S.computeFrac = typeof j.compute_fraction === "number" ? j.compute_fraction : null;
|
| 194 |
+
S.reduction = typeof j.compute_reduction === "number" ? j.compute_reduction : null;
|
| 195 |
+
S.indexRecall = typeof j.index_recall === "number" ? j.index_recall : null;
|
| 196 |
+
S.oracleRecall = typeof j.oracle_recall === "number" ? j.oracle_recall : null;
|
| 197 |
+
S.selPrec = typeof j.selection_precision === "number" ? j.selection_precision : null;
|
| 198 |
+
S.outCos = typeof j.output_cos === "number" ? j.output_cos : null;
|
| 199 |
+
S.outRelErr = typeof j.output_rel_err === "number" ? j.output_rel_err : null;
|
| 200 |
+
S.tradeoff = Array.isArray(j.tradeoff) ? j.tradeoff : null;
|
| 201 |
+
S.perGroup = Array.isArray(j.per_group) ? j.per_group : null;
|
| 202 |
+
|
| 203 |
+
_updateBlockRow();
|
| 204 |
+
_paintOverlay();
|
| 205 |
+
}
|
| 206 |
+
|
| 207 |
+
// =============================================================================
|
| 208 |
+
// geometry updater — drives the block file from live data
|
| 209 |
+
// =============================================================================
|
| 210 |
+
function _updateBlockRow() {
|
| 211 |
+
const live = S.state === "live";
|
| 212 |
+
const nBlk = live && S.nBlocks != null ? Math.min(MAX_BLKS, S.nBlocks) : 0;
|
| 213 |
+
|
| 214 |
+
// union of blocks selected across all groups (per-group Top-k, coalesced)
|
| 215 |
+
const selected = new Set();
|
| 216 |
+
let massByBlock = null;
|
| 217 |
+
if (live && S.perGroup && S.perGroup.length) {
|
| 218 |
+
for (const g of S.perGroup) {
|
| 219 |
+
if (Array.isArray(g.selected_blocks)) g.selected_blocks.forEach((b) => selected.add(b));
|
| 220 |
+
}
|
| 221 |
+
}
|
| 222 |
+
// final tradeoff row (k=n_blocks) has full dense mass; use per-k row nearest topK for
|
| 223 |
+
// per-block mass display is not returned, so we colour mass columns by a smooth proxy:
|
| 224 |
+
// recall of the requested operating point spread across selected blocks. Kept honest:
|
| 225 |
+
// the exact per-block mass is summarized by index_recall in the HUD.
|
| 226 |
+
|
| 227 |
+
for (let b = 0; b < MAX_BLKS; b++) {
|
| 228 |
+
const node = _blkMesh[b];
|
| 229 |
+
const bar = _massBar[b];
|
| 230 |
+
if (!live || b >= nBlk) {
|
| 231 |
+
node.visible = false;
|
| 232 |
+
bar.visible = false;
|
| 233 |
+
continue;
|
| 234 |
+
}
|
| 235 |
+
node.visible = true;
|
| 236 |
+
bar.visible = true;
|
| 237 |
+
|
| 238 |
+
const isSel = selected.has(b);
|
| 239 |
+
node.material.color.setHex(isSel ? C_SEL : C_DROP);
|
| 240 |
+
node.material.emissive.setHex(isSel ? C_SEL : C_DROP);
|
| 241 |
+
node.material.emissiveIntensity = isSel ? 0.55 : 0.15;
|
| 242 |
+
node.material.opacity = isSel ? 0.98 : 0.5;
|
| 243 |
+
node.position.y = BASE_Y + (isSel ? 0.9 : 0.0);
|
| 244 |
+
node.scale.setScalar(isSel ? 1.15 : 0.8);
|
| 245 |
+
|
| 246 |
+
// mass column: selected blocks carry the captured mass (proof-teal-ish), dropped
|
| 247 |
+
// blocks show residual grey. Height scaled by recall so the "kept mass" reads.
|
| 248 |
+
const rec = typeof S.indexRecall === "number" ? S.indexRecall : 0;
|
| 249 |
+
const h = isSel ? Math.max(0.08, 2.4 * (rec / Math.max(1, selected.size))) : 0.06;
|
| 250 |
+
bar.scale.y = h;
|
| 251 |
+
bar.position.y = h * 0.5;
|
| 252 |
+
bar.material.color.setHex(isSel ? C_MASS : C_DROP);
|
| 253 |
+
bar.material.emissive.setHex(isSel ? C_MASS : C_DROP);
|
| 254 |
+
bar.material.emissiveIntensity = isSel ? 0.35 : 0.1;
|
| 255 |
+
bar.material.opacity = isSel ? 0.6 : 0.3;
|
| 256 |
+
}
|
| 257 |
+
|
| 258 |
+
// spine degrades to grey when not live
|
| 259 |
+
_spine.material.color.setHex(live ? C_SEL : C_DIM);
|
| 260 |
+
_spine.material.opacity = live ? 0.35 : 0.15;
|
| 261 |
+
|
| 262 |
+
if (_marker) {
|
| 263 |
+
if (live && S.reduction != null) {
|
| 264 |
+
_marker.material.color.setHex(C_SEL);
|
| 265 |
+
_marker.material.emissive.setHex(C_SEL);
|
| 266 |
+
_marker.material.opacity = 0.85;
|
| 267 |
+
// marker slides along the row proportional to the fraction of blocks kept
|
| 268 |
+
const frac = (S.topK != null && S.nBlocks) ? Math.min(1, S.topK / S.nBlocks) : 0;
|
| 269 |
+
_marker.position.set(frac * BLK_GAP * (MAX_BLKS - 1), -1.0, 0);
|
| 270 |
+
} else {
|
| 271 |
+
_marker.material.color.setHex(C_DIM);
|
| 272 |
+
_marker.material.emissive.setHex(C_DIM);
|
| 273 |
+
_marker.material.opacity = 0.3;
|
| 274 |
+
}
|
| 275 |
+
}
|
| 276 |
+
}
|
| 277 |
+
|
| 278 |
+
// =============================================================================
|
| 279 |
+
// per-frame animation
|
| 280 |
+
// =============================================================================
|
| 281 |
+
function _onFrame() {
|
| 282 |
+
const t = performance.now();
|
| 283 |
+
if (_group) _group.rotation.y = Math.sin(t * 0.00009) * 0.1;
|
| 284 |
+
if (_marker) {
|
| 285 |
+
_marker.rotation.y += 0.025;
|
| 286 |
+
_marker.rotation.x += 0.012;
|
| 287 |
+
const pulse = 1.0 + 0.15 * Math.sin(t * 0.004);
|
| 288 |
+
_marker.scale.setScalar(pulse);
|
| 289 |
+
}
|
| 290 |
+
}
|
| 291 |
+
|
| 292 |
+
// =============================================================================
|
| 293 |
+
// overlay
|
| 294 |
+
// =============================================================================
|
| 295 |
+
function _buildOverlay() {
|
| 296 |
+
const ctx = _ctx;
|
| 297 |
+
_show = createShowcase(ctx, {
|
| 298 |
+
id: ID, title: TITLE, accent: "#3af4c8",
|
| 299 |
+
badge: _badge,
|
| 300 |
+
chips: [{ label: "MODELED", text: "blockwise Top-k", name: "bs" }],
|
| 301 |
+
legend: ["MODELED", "SAMPLE"],
|
| 302 |
+
description:
|
| 303 |
+
'A long-context decoder must attend over a huge <b>KV cache</b>. Dense attention ' +
|
| 304 |
+
'scans every position — O(L). This surface models the <b>learned blockwise</b> ' +
|
| 305 |
+
'approach (DeepSeek NSA · MiniMax MSA · SparDA): split the cache into <b>blocks</b>, ' +
|
| 306 |
+
'let a cheap <b>index branch</b> score each block from a compressed (mean-pooled) ' +
|
| 307 |
+
'key, keep only the <b>Top-k</b> blocks per GQA group (the most recent block is ' +
|
| 308 |
+
'always kept), then run EXACT attention over just those. The HUD reports the ' +
|
| 309 |
+
'compute reduction vs dense, how much of the true dense attention MASS the cheap ' +
|
| 310 |
+
'selector captured (index recall) against the exact oracle top-k, and the ' +
|
| 311 |
+
'recall/quality ↔ compute tradeoff. Selected blocks glow; dropped blocks stay grey. ' +
|
| 312 |
+
'Honesty label <b>MODELED</b> (deterministic simulation on a synthetic KV cache; ' +
|
| 313 |
+
'NOT a real trained model or GPU). 0 runtime CDN.',
|
| 314 |
+
citations:
|
| 315 |
+
"MiniMax MSA — arXiv:2606.13392 · SparDA — arXiv:2606.04511 · " +
|
| 316 |
+
"NSA (DeepSeek) — Yuan et al. arXiv:2502.11089. MODELED · not claimed-as.",
|
| 317 |
+
plain: { html: _plainHtml },
|
| 318 |
+
});
|
| 319 |
+
|
| 320 |
+
_el["bs-ctx"] = _show.addField("context (seq_len)");
|
| 321 |
+
_el["bs-blocks"] = _show.addField("blocks × block_size");
|
| 322 |
+
_el["bs-topk"] = _show.addField("Top-k blocks kept / total");
|
| 323 |
+
_el["bs-gqa"] = _show.addField("GQA groups × heads/group");
|
| 324 |
+
_el["bs-pos"] = _show.addField("positions read (sparse / dense)");
|
| 325 |
+
_el["bs-reduction"]= _show.addField("compute reduction vs dense — MODELED");
|
| 326 |
+
_el["bs-idxrecall"]= _show.addField("index-branch recall (mass captured)");
|
| 327 |
+
_el["bs-orcrecall"]= _show.addField("oracle Top-k recall (exact ceiling)");
|
| 328 |
+
_el["bs-prec"] = _show.addField("selection precision (index vs oracle)");
|
| 329 |
+
_el["bs-cos"] = _show.addField("block-sparse ↔ dense output cosine");
|
| 330 |
+
_el["bs-curve"] = _show.addField("tradeoff @k (compute → recall)");
|
| 331 |
+
_el["bs-label"] = _show.addField("honesty label");
|
| 332 |
+
|
| 333 |
+
_paintOverlay();
|
| 334 |
+
}
|
| 335 |
+
|
| 336 |
+
function _plainHtml() {
|
| 337 |
+
const rx = S.reduction != null ? S.reduction.toFixed(1) + "×" : "loading…";
|
| 338 |
+
const ir = S.indexRecall != null ? (S.indexRecall * 100).toFixed(0) + "%" : "loading…";
|
| 339 |
+
const kk = (S.topK != null && S.nBlocks != null) ? (S.topK + " of " + S.nBlocks) : "loading…";
|
| 340 |
+
return (
|
| 341 |
+
"<b>What this means:</b> A model reading a very long document keeps a giant pile of notes " +
|
| 342 |
+
"(the KV cache). Re-reading the whole pile for every next word is slow. So it chops the pile " +
|
| 343 |
+
"into <b>blocks</b> and uses a quick <b>index</b> — one cheap glance per block — to guess which " +
|
| 344 |
+
"blocks matter, keeping only the best <b>" + kk + "</b> (plus the most recent). Here that reads " +
|
| 345 |
+
"about <b>" + rx + "</b> less than looking at everything, while still capturing roughly <b>" + ir + "</b> " +
|
| 346 |
+
"of the attention the full model would have spent — and the most recent block is never dropped. " +
|
| 347 |
+
"This view is a <b>MODELED</b> deterministic simulation of that pick-the-blocks rule on a " +
|
| 348 |
+
"synthetic cache, not a run of a real trained model.");
|
| 349 |
+
}
|
| 350 |
+
|
| 351 |
+
function _tok(s) {
|
| 352 |
+
if (s === "live") return null;
|
| 353 |
+
if (s === "missing") return "NO-LIVE-DATA";
|
| 354 |
+
if (s === "degraded") return "DEGRADED";
|
| 355 |
+
if (s === "error") return "OFFLINE";
|
| 356 |
+
return "…";
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
function fx(v, d) { return typeof v === "number" ? v.toFixed(d) : "—"; }
|
| 360 |
+
function _set(id, v) { if (_el[id]) _el[id].textContent = v; }
|
| 361 |
+
|
| 362 |
+
function _curveText() {
|
| 363 |
+
if (!S.tradeoff || !S.tradeoff.length) return "—";
|
| 364 |
+
// show three operating points: k=1, requested k, k=all
|
| 365 |
+
const rows = S.tradeoff;
|
| 366 |
+
const first = rows[0];
|
| 367 |
+
const last = rows[rows.length - 1];
|
| 368 |
+
const at = S.topK != null ? rows.find((r) => r.top_k === S.topK) : null;
|
| 369 |
+
const seg = (r) => r ? ("k" + r.top_k + ":" + (r.compute_fraction * 100).toFixed(0) + "%→" + (r.index_recall * 100).toFixed(0) + "%") : null;
|
| 370 |
+
return [seg(first), seg(at), seg(last)].filter(Boolean).join(" · ");
|
| 371 |
+
}
|
| 372 |
+
|
| 373 |
+
function _paintOverlay() {
|
| 374 |
+
const t = _tok(S.state);
|
| 375 |
+
_set("bs-ctx", t || (S.seqLen != null ? String(S.seqLen) : "—"));
|
| 376 |
+
_set("bs-blocks", t || ((S.nBlocks != null && S.blockSize != null) ? (S.nBlocks + " × " + S.blockSize) : "—"));
|
| 377 |
+
_set("bs-topk", t || ((S.topK != null && S.nBlocks != null) ? (S.topK + " / " + S.nBlocks) : "—"));
|
| 378 |
+
_set("bs-gqa", t || ((S.nGroups != null && S.groupShare != null) ? (S.nGroups + " × " + S.groupShare) : "—"));
|
| 379 |
+
_set("bs-pos", t || ((S.sparsePos != null && S.densePos != null) ? (fx(S.sparsePos, 0) + " / " + S.densePos) : "—"));
|
| 380 |
+
_set("bs-reduction", t || (S.reduction != null ? S.reduction.toFixed(2) + "×" : "—"));
|
| 381 |
+
_set("bs-idxrecall", t || (S.indexRecall != null ? (S.indexRecall * 100).toFixed(1) + "%" : "—"));
|
| 382 |
+
_set("bs-orcrecall", t || (S.oracleRecall != null ? (S.oracleRecall * 100).toFixed(1) + "%" : "—"));
|
| 383 |
+
_set("bs-prec", t || (S.selPrec != null ? (S.selPrec * 100).toFixed(0) + "%" : "—"));
|
| 384 |
+
_set("bs-cos", t || fx(S.outCos, 4));
|
| 385 |
+
_set("bs-curve", t || _curveText());
|
| 386 |
+
// honesty label verbatim — never upgraded
|
| 387 |
+
_set("bs-label", t || (S.label || "MODELED"));
|
| 388 |
+
if (_show) { _show.setChip("bs", S.label || "MODELED", { text: "blockwise Top-k" }); _show.refreshPlain(); }
|
| 389 |
+
}
|
| 390 |
+
|
| 391 |
+
// =============================================================================
|
| 392 |
+
// unmount — clean up everything; must not affect other organs
|
| 393 |
+
// =============================================================================
|
| 394 |
+
export function unmount() {
|
| 395 |
+
_polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
|
| 396 |
+
try { if (_show) _show.destroy(); } catch (_) {}
|
| 397 |
+
try {
|
| 398 |
+
if (_group && _stage) {
|
| 399 |
+
_group.traverse((o) => {
|
| 400 |
+
if (o.geometry && o.geometry.dispose) o.geometry.dispose();
|
| 401 |
+
if (o.material) {
|
| 402 |
+
const ms = Array.isArray(o.material) ? o.material : [o.material];
|
| 403 |
+
ms.forEach((m) => { if (m.dispose) m.dispose(); });
|
| 404 |
+
}
|
| 405 |
+
});
|
| 406 |
+
_stage.scene.remove(_group);
|
| 407 |
+
}
|
| 408 |
+
} catch (_) {}
|
| 409 |
+
_group = _show = null;
|
| 410 |
+
_spine = null; _blkMesh = []; _massBar = []; _marker = null;
|
| 411 |
+
_el = {}; _badge = null; _frameReg = false;
|
| 412 |
+
_stage = _THREE = _ctx = null;
|
| 413 |
+
S.label = S.seqLen = S.blockSize = S.nBlocks = S.topK = null;
|
| 414 |
+
S.nGroups = S.groupShare = S.dim = S.densePos = S.sparsePos = null;
|
| 415 |
+
S.computeFrac = S.reduction = S.indexRecall = S.oracleRecall = null;
|
| 416 |
+
S.selPrec = S.outCos = S.outRelErr = S.tradeoff = S.perGroup = null;
|
| 417 |
+
S.state = "init";
|
| 418 |
+
}
|
| 419 |
+
|
| 420 |
+
export default { id: ID, title: TITLE, endpoints: [EP], mount, unmount };
|