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: 848 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 +4 -0
- static/3d/surfaces/blt.js +472 -0
- static/3d/surfaces/grpo.js +508 -0
- static/3d/surfaces/kvcache.js +432 -0
- static/3d/surfaces/mla.js +433 -0
static/3d/holographic.html
CHANGED
|
@@ -84,6 +84,10 @@ const SURFACES = [
|
|
| 84 |
{ id: "formalmath", title: "Formal-Math Retrieval", mod: "/static/3d/surfaces/formalmath.js" },
|
| 85 |
{ id: "ccattest", title: "Confidential-Compute Attest", mod: "/static/3d/surfaces/ccattest.js" },
|
| 86 |
{ id: "ringattn", title: "Ring Attention", mod: "/static/3d/surfaces/ringattn.js" },
|
|
|
|
|
|
|
|
|
|
|
|
|
| 87 |
{ id: "energy", title: "Energy", mod: "/static/3d/surfaces/energy.js" },
|
| 88 |
{ id: "fabric", title: "Fabric", mod: "/static/3d/surfaces/fabric.js" },
|
| 89 |
{ id: "pnt", title: "PNT", mod: "/static/3d/surfaces/pnt.js" },
|
|
|
|
| 84 |
{ id: "formalmath", title: "Formal-Math Retrieval", mod: "/static/3d/surfaces/formalmath.js" },
|
| 85 |
{ id: "ccattest", title: "Confidential-Compute Attest", mod: "/static/3d/surfaces/ccattest.js" },
|
| 86 |
{ id: "ringattn", title: "Ring Attention", mod: "/static/3d/surfaces/ringattn.js" },
|
| 87 |
+
{ id: "grpo", title: "GRPO Reward Dynamics", mod: "/static/3d/surfaces/grpo.js" },
|
| 88 |
+
{ id: "kvcache", title: "KV-Cache H2O", mod: "/static/3d/surfaces/kvcache.js" },
|
| 89 |
+
{ id: "mla", title: "Latent Attention (MLA)", mod: "/static/3d/surfaces/mla.js" },
|
| 90 |
+
{ id: "blt", title: "Byte-Latent Patching", mod: "/static/3d/surfaces/blt.js" },
|
| 91 |
{ id: "energy", title: "Energy", mod: "/static/3d/surfaces/energy.js" },
|
| 92 |
{ id: "fabric", title: "Fabric", mod: "/static/3d/surfaces/fabric.js" },
|
| 93 |
{ id: "pnt", title: "PNT", mod: "/static/3d/surfaces/pnt.js" },
|
static/3d/surfaces/blt.js
ADDED
|
@@ -0,0 +1,472 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// SPDX-License-Identifier: Apache-2.0
|
| 2 |
+
// © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
|
| 3 |
+
//
|
| 4 |
+
// surfaces/blt.js — BYTE LATENT TRANSFORMER ENTROPY-PATCHING organ for the
|
| 5 |
+
// holographic frontier ring (Meta FAIR tokenizer-free dynamic byte-patching
|
| 6 |
+
// idea). Renders the input byte stream as a 3D ribbon: entropy height per
|
| 7 |
+
// byte (lattice-blue), patch boundaries drawn as proof-teal cut-planes where
|
| 8 |
+
// entropy spikes, and low-entropy runs grouped visually into big grey/dim
|
| 9 |
+
// patches. A HUD shows num_patches + compute_savings_ratio. Honesty label
|
| 10 |
+
// "MODELED" is read VERBATIM from the JSON and displayed as-is; it is never
|
| 11 |
+
// upgraded.
|
| 12 |
+
//
|
| 13 |
+
// Surface export shape (mirrors specdecode.js / testtime.js exactly):
|
| 14 |
+
// export default { id, title, endpoints, mount(ctx), unmount() }
|
| 15 |
+
// ctx = { stage, container, live, label, THREE, szl3d }
|
| 16 |
+
//
|
| 17 |
+
// DATA SHOWN (all from live endpoint):
|
| 18 |
+
// text_len, threshold, num_patches, avg_patch_len, patch_boundaries[],
|
| 19 |
+
// entropy_series[], compute_savings_ratio
|
| 20 |
+
//
|
| 21 |
+
// LEADER ADOPTED & CITED (clean-room; NOT claimed as SZL's own):
|
| 22 |
+
// Byte Latent Transformer (entropy-patching idea rendered here):
|
| 23 |
+
// Pagnoni, Pasunuru, Rodriguez et al. 2024, Meta FAIR
|
| 24 |
+
// arXiv:2412.09871 — https://arxiv.org/abs/2412.09871
|
| 25 |
+
// Reference implementation (reference only):
|
| 26 |
+
// github.com/facebookresearch/blt
|
| 27 |
+
// https://github.com/facebookresearch/blt
|
| 28 |
+
//
|
| 29 |
+
// HONESTY LABELS: MODELED (deterministic order-2 Markov byte-entropy
|
| 30 |
+
// patching simulation of the BLT dynamic-patching idea; NOT the trained
|
| 31 |
+
// BLT entropy model; NEVER-CLAIMED-AS Meta FAIR BLT). Read verbatim from
|
| 32 |
+
// JSON; never upgraded here.
|
| 33 |
+
// COLOURS: lattice-blue 0x5b8dee (byte ribbon / entropy height), proof-teal
|
| 34 |
+
// 0x3af4c8 (patch-boundary cut-planes / HUD accent), greys (low-entropy
|
| 35 |
+
// grouped runs / degraded state). Purple BANNED as UI/background.
|
| 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 |
+
const ID = "blt";
|
| 41 |
+
const TITLE = "Byte Latent Transformer · Entropy-Patching (live)";
|
| 42 |
+
|
| 43 |
+
// Endpoint is hosted on the dedicated killinchu Space (isolated compute), reached
|
| 44 |
+
// cross-origin (killinchu returns access-control-allow-origin: https://a-11-oy.com).
|
| 45 |
+
// This keeps the BLT organ's rebuilds/faults isolated from the flagship.
|
| 46 |
+
const EP = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/blt/entropy-patch?seed=42&threshold=2.5";
|
| 47 |
+
|
| 48 |
+
// data-viz hues — purple BANNED
|
| 49 |
+
const C_RIBBON = 0x5b8dee; // lattice-blue (byte ribbon / entropy height)
|
| 50 |
+
const C_CUT = 0x3af4c8; // proof-teal (patch-boundary cut-plane / HUD accent)
|
| 51 |
+
const C_PATCH = 0x5a6570; // grey (low-entropy grouped-patch fill)
|
| 52 |
+
const C_DIM = 0x42505d; // grey (degraded / no-live-data)
|
| 53 |
+
const C_GRID = 0x1b3a44; // floor / link colour
|
| 54 |
+
|
| 55 |
+
// ribbon layout geometry
|
| 56 |
+
const SEG_LEN = 0.16; // world-units per byte along X (ribbon axis)
|
| 57 |
+
const MAX_SEGS = 512; // cap on rendered byte segments (perf; matches endpoint sample cap)
|
| 58 |
+
const HEIGHT_SCALE = 0.55; // world-units per bit of entropy (Y)
|
| 59 |
+
const MAX_CUTS = 96; // cap on rendered patch-boundary cut-planes (perf)
|
| 60 |
+
|
| 61 |
+
let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
|
| 62 |
+
let _frameReg = false, _polls = [], _el = {}, _badge = null;
|
| 63 |
+
let _plain = false;
|
| 64 |
+
|
| 65 |
+
// geometry handles
|
| 66 |
+
let _floor = null;
|
| 67 |
+
let _spine = null; // THREE.Line — ribbon baseline axis
|
| 68 |
+
let _ribbon = null; // THREE.Line — entropy-height ribbon polyline
|
| 69 |
+
let _segMesh = []; // Array<THREE.Mesh> — per-sample entropy pillars
|
| 70 |
+
let _cutPlanes = []; // Array<THREE.Mesh> — patch-boundary cut-planes
|
| 71 |
+
let _marker = null; // THREE.Mesh — HUD "compute savings" pulsing marker
|
| 72 |
+
|
| 73 |
+
// live state
|
| 74 |
+
const S = {
|
| 75 |
+
label: null,
|
| 76 |
+
textLen: null, // text_len
|
| 77 |
+
threshold: null, // threshold
|
| 78 |
+
numPatches: null, // num_patches
|
| 79 |
+
avgPatchLen: null, // avg_patch_len
|
| 80 |
+
boundaries: null, // patch_boundaries[]
|
| 81 |
+
entropySeries: null, // entropy_series[] -> [byte_idx, bits]
|
| 82 |
+
savingsRatio: null, // compute_savings_ratio
|
| 83 |
+
state: "init",
|
| 84 |
+
};
|
| 85 |
+
|
| 86 |
+
// =============================================================================
|
| 87 |
+
// mount(ctx)
|
| 88 |
+
// =============================================================================
|
| 89 |
+
export function mount(ctx) {
|
| 90 |
+
_ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE;
|
| 91 |
+
_group = new _THREE.Group();
|
| 92 |
+
_stage.scene.add(_group);
|
| 93 |
+
_stage.camera.position.set(4, 6, 16);
|
| 94 |
+
try { if (_stage.controls && _stage.controls.target) { _stage.controls.target.set(6, 1, 0); _stage.controls.update(); } } catch (_) {}
|
| 95 |
+
try { _stage.setBloom(true); } catch (_) {}
|
| 96 |
+
|
| 97 |
+
_buildFloor();
|
| 98 |
+
_buildRibbon();
|
| 99 |
+
_buildCutPlanes();
|
| 100 |
+
_buildMarker();
|
| 101 |
+
|
| 102 |
+
if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; }
|
| 103 |
+
|
| 104 |
+
_badge = ctx.live.createBadge();
|
| 105 |
+
_polls.push(ctx.live.poll(EP, 5000, _onBlt, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
|
| 106 |
+
|
| 107 |
+
_buildOverlay();
|
| 108 |
+
return { id: ID, started: true };
|
| 109 |
+
}
|
| 110 |
+
|
| 111 |
+
// =============================================================================
|
| 112 |
+
// builders
|
| 113 |
+
// =============================================================================
|
| 114 |
+
function _buildFloor() {
|
| 115 |
+
const THREE = _THREE;
|
| 116 |
+
const grid = new THREE.GridHelper(40, 40, C_GRID, 0x0f2027);
|
| 117 |
+
grid.material.opacity = 0.18; grid.material.transparent = true; grid.position.y = -0.01;
|
| 118 |
+
_group.add(grid);
|
| 119 |
+
_floor = grid;
|
| 120 |
+
}
|
| 121 |
+
|
| 122 |
+
// Pre-allocate a fixed set of ribbon-segment pillars (entropy height per
|
| 123 |
+
// sampled byte) + a baseline spine. We toggle visibility/height/color
|
| 124 |
+
// in-place as live data arrives (no per-poll geometry churn).
|
| 125 |
+
function _buildRibbon() {
|
| 126 |
+
const THREE = _THREE;
|
| 127 |
+
|
| 128 |
+
// baseline spine: a straight line along X marking the byte-stream axis
|
| 129 |
+
{
|
| 130 |
+
const pts = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(SEG_LEN * (MAX_SEGS - 1) + 1, 0, 0)];
|
| 131 |
+
const geo = new THREE.BufferGeometry().setFromPoints(pts);
|
| 132 |
+
const mat = new THREE.LineBasicMaterial({ color: C_RIBBON, transparent: true, opacity: 0.35 });
|
| 133 |
+
_spine = new THREE.Line(geo, mat);
|
| 134 |
+
_group.add(_spine);
|
| 135 |
+
}
|
| 136 |
+
|
| 137 |
+
// entropy-height ribbon: a polyline whose Y tracks entropy bits per byte
|
| 138 |
+
{
|
| 139 |
+
const pts = [];
|
| 140 |
+
for (let i = 0; i < MAX_SEGS; i++) pts.push(new THREE.Vector3(i * SEG_LEN, 0, 0));
|
| 141 |
+
const geo = new THREE.BufferGeometry().setFromPoints(pts);
|
| 142 |
+
const mat = new THREE.LineBasicMaterial({ color: C_RIBBON, transparent: true, opacity: 0.0 });
|
| 143 |
+
_ribbon = new THREE.Line(geo, mat);
|
| 144 |
+
_group.add(_ribbon);
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
const segGeo = new THREE.BoxGeometry(SEG_LEN * 0.8, 1, 0.22);
|
| 148 |
+
for (let i = 0; i < MAX_SEGS; i++) {
|
| 149 |
+
const mesh = new THREE.Mesh(
|
| 150 |
+
segGeo,
|
| 151 |
+
new THREE.MeshStandardMaterial({ color: C_RIBBON, emissive: C_RIBBON, emissiveIntensity: 0.22, transparent: true, opacity: 0.0 }),
|
| 152 |
+
);
|
| 153 |
+
mesh.position.set(i * SEG_LEN, 0, 0);
|
| 154 |
+
mesh.scale.y = 0.0001;
|
| 155 |
+
mesh.visible = false;
|
| 156 |
+
_group.add(mesh);
|
| 157 |
+
_segMesh.push(mesh);
|
| 158 |
+
}
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
// Pre-allocate cut-plane meshes marking patch boundaries (proof-teal, thin
|
| 162 |
+
// vertical panels perpendicular to the ribbon axis).
|
| 163 |
+
function _buildCutPlanes() {
|
| 164 |
+
const THREE = _THREE;
|
| 165 |
+
const planeGeo = new THREE.PlaneGeometry(0.03, 2.2);
|
| 166 |
+
for (let i = 0; i < MAX_CUTS; i++) {
|
| 167 |
+
const mesh = new THREE.Mesh(
|
| 168 |
+
planeGeo,
|
| 169 |
+
new THREE.MeshBasicMaterial({ color: C_CUT, transparent: true, opacity: 0.0, side: THREE.DoubleSide }),
|
| 170 |
+
);
|
| 171 |
+
mesh.position.set(0, 1.1, 0);
|
| 172 |
+
mesh.visible = false;
|
| 173 |
+
_group.add(mesh);
|
| 174 |
+
_cutPlanes.push(mesh);
|
| 175 |
+
}
|
| 176 |
+
}
|
| 177 |
+
|
| 178 |
+
function _buildMarker() {
|
| 179 |
+
const THREE = _THREE;
|
| 180 |
+
_marker = new THREE.Mesh(
|
| 181 |
+
new THREE.IcosahedronGeometry(0.26, 1),
|
| 182 |
+
new THREE.MeshStandardMaterial({ color: C_CUT, emissive: C_CUT, emissiveIntensity: 0.5, wireframe: true, transparent: true, opacity: 0.85 }),
|
| 183 |
+
);
|
| 184 |
+
_marker.position.set(0, -0.7, 0);
|
| 185 |
+
_group.add(_marker);
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
+
// =============================================================================
|
| 189 |
+
// live data handler
|
| 190 |
+
// =============================================================================
|
| 191 |
+
function _onBlt(j) {
|
| 192 |
+
// read honesty label VERBATIM — never upgrade
|
| 193 |
+
S.label = (j.label || "MODELED").toUpperCase();
|
| 194 |
+
S.textLen = typeof j.text_len === "number" ? j.text_len : null;
|
| 195 |
+
S.threshold = typeof j.threshold === "number" ? j.threshold : null;
|
| 196 |
+
S.numPatches = typeof j.num_patches === "number" ? j.num_patches : null;
|
| 197 |
+
S.avgPatchLen = typeof j.avg_patch_len === "number" ? j.avg_patch_len : null;
|
| 198 |
+
S.boundaries = Array.isArray(j.patch_boundaries) ? j.patch_boundaries : null;
|
| 199 |
+
S.entropySeries = Array.isArray(j.entropy_series) ? j.entropy_series : null;
|
| 200 |
+
S.savingsRatio = typeof j.compute_savings_ratio === "number" ? j.compute_savings_ratio : null;
|
| 201 |
+
|
| 202 |
+
_updateRibbon();
|
| 203 |
+
_paintOverlay();
|
| 204 |
+
}
|
| 205 |
+
|
| 206 |
+
// =============================================================================
|
| 207 |
+
// geometry updater — drives the ribbon + cut-planes from live data
|
| 208 |
+
// =============================================================================
|
| 209 |
+
function _updateRibbon() {
|
| 210 |
+
const live = S.state === "live";
|
| 211 |
+
const series = live && S.entropySeries && S.entropySeries.length ? S.entropySeries.slice(0, MAX_SEGS) : [];
|
| 212 |
+
const boundarySet = new Set(live && S.boundaries ? S.boundaries : []);
|
| 213 |
+
|
| 214 |
+
// ribbon polyline points
|
| 215 |
+
const positions = _ribbon.geometry.attributes.position;
|
| 216 |
+
let maxH = 0;
|
| 217 |
+
for (let i = 0; i < series.length; i++) maxH = Math.max(maxH, series[i][1] || 0);
|
| 218 |
+
maxH = Math.max(maxH, 0.001);
|
| 219 |
+
|
| 220 |
+
for (let i = 0; i < MAX_SEGS; i++) {
|
| 221 |
+
const mesh = _segMesh[i];
|
| 222 |
+
if (!live || i >= series.length) {
|
| 223 |
+
mesh.visible = false;
|
| 224 |
+
positions.setXYZ(i, i * SEG_LEN, 0, 0);
|
| 225 |
+
continue;
|
| 226 |
+
}
|
| 227 |
+
const [byteIdx, hBits] = series[i];
|
| 228 |
+
const h = Math.max(0.02, (hBits / maxH) * 2.4 * HEIGHT_SCALE);
|
| 229 |
+
const isBoundary = boundarySet.has(byteIdx);
|
| 230 |
+
|
| 231 |
+
mesh.visible = true;
|
| 232 |
+
mesh.scale.y = Math.max(h, 0.02);
|
| 233 |
+
mesh.position.set(i * SEG_LEN, h / 2, 0);
|
| 234 |
+
|
| 235 |
+
// low-entropy runs (below threshold) render dim grey "grouped patch";
|
| 236 |
+
// high-entropy spikes (>= threshold, i.e. a cut point) render lattice-blue.
|
| 237 |
+
const spiky = S.threshold != null ? hBits > S.threshold : hBits > 2.5;
|
| 238 |
+
const color = spiky ? C_RIBBON : C_PATCH;
|
| 239 |
+
mesh.material.color.setHex(color);
|
| 240 |
+
mesh.material.emissive.setHex(color);
|
| 241 |
+
mesh.material.emissiveIntensity = spiky ? 0.4 : 0.12;
|
| 242 |
+
mesh.material.opacity = spiky ? 0.95 : 0.55;
|
| 243 |
+
|
| 244 |
+
positions.setXYZ(i, i * SEG_LEN, h, 0);
|
| 245 |
+
}
|
| 246 |
+
positions.needsUpdate = true;
|
| 247 |
+
_ribbon.material.opacity = live ? 0.5 : 0.0;
|
| 248 |
+
_ribbon.material.color.setHex(live ? C_RIBBON : C_DIM);
|
| 249 |
+
|
| 250 |
+
// patch-boundary cut-planes: place at each boundary's ribbon-space x
|
| 251 |
+
const boundaries = live && S.boundaries ? S.boundaries.slice(0, MAX_CUTS) : [];
|
| 252 |
+
// map boundary byte-index -> nearest sample index x-position (approx via
|
| 253 |
+
// proportion of text_len, since entropy_series may be a downsample)
|
| 254 |
+
const textLen = S.textLen || 1;
|
| 255 |
+
for (let i = 0; i < MAX_CUTS; i++) {
|
| 256 |
+
const plane = _cutPlanes[i];
|
| 257 |
+
if (!live || i >= boundaries.length) {
|
| 258 |
+
plane.visible = false;
|
| 259 |
+
continue;
|
| 260 |
+
}
|
| 261 |
+
const byteIdx = boundaries[i];
|
| 262 |
+
const frac = Math.min(1, byteIdx / textLen);
|
| 263 |
+
const x = frac * SEG_LEN * (MAX_SEGS - 1);
|
| 264 |
+
plane.visible = true;
|
| 265 |
+
plane.position.set(x, 1.1, 0);
|
| 266 |
+
plane.material.opacity = 0.55;
|
| 267 |
+
plane.material.color.setHex(C_CUT);
|
| 268 |
+
}
|
| 269 |
+
|
| 270 |
+
_spine.material.color.setHex(live ? C_RIBBON : C_DIM);
|
| 271 |
+
_spine.material.opacity = live ? 0.35 : 0.15;
|
| 272 |
+
|
| 273 |
+
if (_marker) {
|
| 274 |
+
if (live && S.savingsRatio != null) {
|
| 275 |
+
_marker.material.color.setHex(C_CUT);
|
| 276 |
+
_marker.material.emissive.setHex(C_CUT);
|
| 277 |
+
_marker.material.opacity = 0.85;
|
| 278 |
+
// marker rides along X proportional to compute_savings_ratio (visual "compute win" cue)
|
| 279 |
+
const x = Math.min(SEG_LEN * (MAX_SEGS - 1), Math.log2(1 + (S.savingsRatio || 1)) * 2.2);
|
| 280 |
+
_marker.position.set(x, -0.7, 0);
|
| 281 |
+
} else {
|
| 282 |
+
_marker.material.color.setHex(C_DIM);
|
| 283 |
+
_marker.material.emissive.setHex(C_DIM);
|
| 284 |
+
_marker.material.opacity = 0.3;
|
| 285 |
+
}
|
| 286 |
+
}
|
| 287 |
+
}
|
| 288 |
+
|
| 289 |
+
// =============================================================================
|
| 290 |
+
// per-frame animation
|
| 291 |
+
// =============================================================================
|
| 292 |
+
function _onFrame() {
|
| 293 |
+
const t = performance.now();
|
| 294 |
+
if (_group) _group.rotation.y = Math.sin(t * 0.00008) * 0.10;
|
| 295 |
+
if (_marker) {
|
| 296 |
+
_marker.rotation.y += 0.024;
|
| 297 |
+
_marker.rotation.x += 0.011;
|
| 298 |
+
const pulse = 1.0 + 0.15 * Math.sin(t * 0.004);
|
| 299 |
+
_marker.scale.setScalar(pulse);
|
| 300 |
+
}
|
| 301 |
+
}
|
| 302 |
+
|
| 303 |
+
// =============================================================================
|
| 304 |
+
// overlay
|
| 305 |
+
// =============================================================================
|
| 306 |
+
function _buildOverlay() {
|
| 307 |
+
const ctx = _ctx;
|
| 308 |
+
_overlay = document.createElement("div");
|
| 309 |
+
Object.assign(_overlay.style, {
|
| 310 |
+
position: "absolute", left: "14px", top: "14px", zIndex: "6",
|
| 311 |
+
display: "flex", flexDirection: "column", gap: "8px",
|
| 312 |
+
maxWidth: "min(94%,440px)",
|
| 313 |
+
font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
|
| 314 |
+
color: "#eef3f6",
|
| 315 |
+
});
|
| 316 |
+
|
| 317 |
+
const h = document.createElement("div");
|
| 318 |
+
h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
|
| 319 |
+
h.textContent = TITLE;
|
| 320 |
+
_overlay.appendChild(h);
|
| 321 |
+
|
| 322 |
+
const sub = document.createElement("div");
|
| 323 |
+
sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
|
| 324 |
+
sub.innerHTML =
|
| 325 |
+
'Instead of fixed-vocabulary tokens, bytes are grouped into <b>variable-length patches</b> ' +
|
| 326 |
+
'cut wherever the next-byte entropy <b>spikes</b> (high surprise). Predictable spans (grey, ' +
|
| 327 |
+
'low entropy) collapse into one big patch; unpredictable spans (lattice-blue, high entropy) ' +
|
| 328 |
+
'fragment into many small patches at proof-teal cut-planes. ' +
|
| 329 |
+
'Honesty label <b>MODELED</b> (deterministic order-2 Markov byte-entropy simulation of the BLT ' +
|
| 330 |
+
'entropy-patching idea; NOT the trained BLT entropy model). 0 runtime CDN.';
|
| 331 |
+
_overlay.appendChild(sub);
|
| 332 |
+
|
| 333 |
+
const brow = document.createElement("div");
|
| 334 |
+
brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
|
| 335 |
+
if (_badge && _badge.el) brow.appendChild(_badge.el);
|
| 336 |
+
_overlay.appendChild(brow);
|
| 337 |
+
|
| 338 |
+
const card = document.createElement("div");
|
| 339 |
+
card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
|
| 340 |
+
|
| 341 |
+
const chead = document.createElement("div");
|
| 342 |
+
chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
|
| 343 |
+
const dot = document.createElement("span");
|
| 344 |
+
dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
|
| 345 |
+
const nm = document.createElement("b");
|
| 346 |
+
nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
|
| 347 |
+
nm.textContent = "byte latent transformer · entropy-patching";
|
| 348 |
+
chead.appendChild(dot); chead.appendChild(nm);
|
| 349 |
+
card.appendChild(chead);
|
| 350 |
+
|
| 351 |
+
const grid = document.createElement("div");
|
| 352 |
+
grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
|
| 353 |
+
|
| 354 |
+
function kpiRow(id, label) {
|
| 355 |
+
const r = document.createElement("div");
|
| 356 |
+
r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
|
| 357 |
+
const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
|
| 358 |
+
const v = document.createElement("b");
|
| 359 |
+
v.id = id;
|
| 360 |
+
v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
|
| 361 |
+
v.textContent = "\u2014";
|
| 362 |
+
_el[id] = v;
|
| 363 |
+
r.appendChild(l); r.appendChild(v); return r;
|
| 364 |
+
}
|
| 365 |
+
|
| 366 |
+
grid.appendChild(kpiRow("blt-textlen", "text_len (bytes)"));
|
| 367 |
+
grid.appendChild(kpiRow("blt-threshold","threshold (bits)"));
|
| 368 |
+
grid.appendChild(kpiRow("blt-numpatch", "num_patches"));
|
| 369 |
+
grid.appendChild(kpiRow("blt-avglen", "avg_patch_len"));
|
| 370 |
+
grid.appendChild(kpiRow("blt-savings", "compute_savings_ratio \u2014 MODELED"));
|
| 371 |
+
grid.appendChild(kpiRow("blt-label", "honesty label"));
|
| 372 |
+
card.appendChild(grid);
|
| 373 |
+
|
| 374 |
+
const fn = document.createElement("div");
|
| 375 |
+
fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
|
| 376 |
+
fn.textContent = "Pagnoni et al. (Meta FAIR) arXiv:2412.09871 (Byte Latent Transformer) \u00b7 github.com/facebookresearch/blt (reference). MODELED \u00b7 not claimed-as.";
|
| 377 |
+
card.appendChild(fn);
|
| 378 |
+
_overlay.appendChild(card);
|
| 379 |
+
|
| 380 |
+
const pl = document.createElement("button");
|
| 381 |
+
pl.textContent = "\u25d1 what this means";
|
| 382 |
+
pl.title = "Toggle plain-language explanation for investors & consumers.";
|
| 383 |
+
pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
|
| 384 |
+
pl.addEventListener("click", () => {
|
| 385 |
+
_plain = !_plain;
|
| 386 |
+
pl.style.background = _plain ? "#0f2a20" : "#08140f";
|
| 387 |
+
_applyPlain();
|
| 388 |
+
});
|
| 389 |
+
_overlay.appendChild(pl);
|
| 390 |
+
|
| 391 |
+
const pd = document.createElement("div");
|
| 392 |
+
pd.id = "blt-plain";
|
| 393 |
+
pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
|
| 394 |
+
_el["plain"] = pd;
|
| 395 |
+
_overlay.appendChild(pd);
|
| 396 |
+
|
| 397 |
+
(ctx.container || document.body).appendChild(_overlay);
|
| 398 |
+
_paintOverlay();
|
| 399 |
+
}
|
| 400 |
+
|
| 401 |
+
function _applyPlain() {
|
| 402 |
+
const pd = _el["plain"];
|
| 403 |
+
if (!pd) return;
|
| 404 |
+
pd.style.display = _plain ? "block" : "none";
|
| 405 |
+
if (!_plain) return;
|
| 406 |
+
const patches = S.numPatches != null ? String(S.numPatches) : "loading\u2026";
|
| 407 |
+
const bytes = S.textLen != null ? String(S.textLen) : "loading\u2026";
|
| 408 |
+
const ratio = S.savingsRatio != null ? S.savingsRatio.toFixed(2) + "\u00d7" : "loading\u2026";
|
| 409 |
+
pd.innerHTML =
|
| 410 |
+
"<b>What this means:</b> Normal language models chop text into a fixed dictionary of " +
|
| 411 |
+
"\u201ctokens\u201d before reading it. This organ instead reads raw <b>bytes</b> and asks, at every " +
|
| 412 |
+
"position, \u201chow surprising is the next byte, given what came right before it?\u201d When that " +
|
| 413 |
+
"surprise (entropy) spikes, it starts a new <b>patch</b>; when the text is predictable, it keeps " +
|
| 414 |
+
"stretching the same patch. Here, <b>" + bytes + " bytes</b> collapsed into just <b>" + patches +
|
| 415 |
+
" patches</b> \u2014 a <b>" + ratio + " compute-savings ratio</b>, because predictable stretches " +
|
| 416 |
+
"(like repeated letters) get bundled into one cheap patch instead of being processed byte-by-byte. " +
|
| 417 |
+
"This is the core idea behind Meta FAIR's Byte Latent Transformer (BLT): spend compute where the " +
|
| 418 |
+
"data is hard, save it where the data is easy. This view is a <b>MODELED</b> stand-in entropy " +
|
| 419 |
+
"signal built from the text itself, not a run of the real trained BLT model.";
|
| 420 |
+
}
|
| 421 |
+
|
| 422 |
+
function _tok(s) {
|
| 423 |
+
if (s === "live") return null;
|
| 424 |
+
if (s === "missing") return "NO-LIVE-DATA";
|
| 425 |
+
if (s === "degraded") return "DEGRADED";
|
| 426 |
+
if (s === "error") return "OFFLINE";
|
| 427 |
+
return "\u2026";
|
| 428 |
+
}
|
| 429 |
+
|
| 430 |
+
function fx(v, d) { return typeof v === "number" ? v.toFixed(d) : "\u2014"; }
|
| 431 |
+
function _set(id, v) { if (_el[id]) _el[id].textContent = v; }
|
| 432 |
+
|
| 433 |
+
function _paintOverlay() {
|
| 434 |
+
const t = _tok(S.state);
|
| 435 |
+
_set("blt-textlen", t || (S.textLen != null ? String(S.textLen) : "\u2014"));
|
| 436 |
+
_set("blt-threshold", t || fx(S.threshold, 2));
|
| 437 |
+
_set("blt-numpatch", t || (S.numPatches != null ? String(S.numPatches) : "\u2014"));
|
| 438 |
+
_set("blt-avglen", t || fx(S.avgPatchLen, 3));
|
| 439 |
+
_set("blt-savings", t || (S.savingsRatio != null ? S.savingsRatio.toFixed(3) + "\u00d7" : "\u2014"));
|
| 440 |
+
// honesty label verbatim — never upgraded
|
| 441 |
+
_set("blt-label", t || (S.label || "MODELED"));
|
| 442 |
+
if (_plain) _applyPlain();
|
| 443 |
+
}
|
| 444 |
+
|
| 445 |
+
// =============================================================================
|
| 446 |
+
// unmount — clean up everything; must not affect other organs
|
| 447 |
+
// =============================================================================
|
| 448 |
+
export function unmount() {
|
| 449 |
+
_polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
|
| 450 |
+
try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
|
| 451 |
+
try {
|
| 452 |
+
if (_group && _stage) {
|
| 453 |
+
_group.traverse((o) => {
|
| 454 |
+
if (o.geometry && o.geometry.dispose) o.geometry.dispose();
|
| 455 |
+
if (o.material) {
|
| 456 |
+
const ms = Array.isArray(o.material) ? o.material : [o.material];
|
| 457 |
+
ms.forEach((m) => { if (m.dispose) m.dispose(); });
|
| 458 |
+
}
|
| 459 |
+
});
|
| 460 |
+
_stage.scene.remove(_group);
|
| 461 |
+
}
|
| 462 |
+
} catch (_) {}
|
| 463 |
+
_group = _overlay = null;
|
| 464 |
+
_floor = null; _spine = null; _ribbon = null; _segMesh = []; _cutPlanes = []; _marker = null;
|
| 465 |
+
_el = {}; _badge = null; _plain = false; _frameReg = false;
|
| 466 |
+
_stage = _THREE = _ctx = null;
|
| 467 |
+
S.label = S.textLen = S.threshold = S.numPatches = null;
|
| 468 |
+
S.avgPatchLen = S.boundaries = S.entropySeries = S.savingsRatio = null;
|
| 469 |
+
S.state = "init";
|
| 470 |
+
}
|
| 471 |
+
|
| 472 |
+
export default { id: ID, title: TITLE, endpoints: [EP], mount, unmount };
|
static/3d/surfaces/grpo.js
ADDED
|
@@ -0,0 +1,508 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// SPDX-License-Identifier: Apache-2.0
|
| 2 |
+
// © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
|
| 3 |
+
//
|
| 4 |
+
// surfaces/grpo.js — GRPO REWARD DYNAMICS organ for the holographic frontier
|
| 5 |
+
// ring (Group Relative Policy Optimization, critic-free RL post-training).
|
| 6 |
+
// Renders each training step's sampled reward GROUP as points scattering
|
| 7 |
+
// around a group-mean plane; each point's height above/below the plane is
|
| 8 |
+
// its group-normalized advantage (proof-teal above the mean, grey below),
|
| 9 |
+
// a KL-tether line ties the group to a reference-policy anchor, and a HUD
|
| 10 |
+
// tracks mean_reward + kl_divergence + final_policy_score climbing over the
|
| 11 |
+
// run, from the live snapshot at /api/killinchu/v1/grpo/reward-dynamics.
|
| 12 |
+
// Honesty label "MODELED" is read VERBATIM from the JSON and displayed
|
| 13 |
+
// as-is; it is never upgraded.
|
| 14 |
+
//
|
| 15 |
+
// Surface export shape (mirrors specdecode.js / testtime.js exactly):
|
| 16 |
+
// export default { id, title, endpoints, mount(ctx), unmount() }
|
| 17 |
+
// ctx = { stage, container, live, label, THREE, szl3d }
|
| 18 |
+
//
|
| 19 |
+
// DATA SHOWN (all from live endpoint):
|
| 20 |
+
// group_size, steps, kl_beta, clip_eps, mean_reward, mean_advantage,
|
| 21 |
+
// kl_divergence, clip_fraction, final_policy_score, reward_trajectory[],
|
| 22 |
+
// kl_trajectory[], policy_score_trajectory[], advantage_trajectory[],
|
| 23 |
+
// clip_fraction_trajectory[]
|
| 24 |
+
//
|
| 25 |
+
// LEADERS ADOPTED & CITED (clean-room; NOT claimed as SZL's own):
|
| 26 |
+
// GRPO (group-relative advantage + PPO-clip + KL-penalty arithmetic
|
| 27 |
+
// simulated here):
|
| 28 |
+
// Shao et al. 2024, "DeepSeekMath", arXiv:2402.03300
|
| 29 |
+
// https://arxiv.org/abs/2402.03300
|
| 30 |
+
// DeepSeek-R1 (large-scale RL post-training using GRPO — reference only):
|
| 31 |
+
// DeepSeek-AI 2025, arXiv:2501.12948
|
| 32 |
+
// https://arxiv.org/abs/2501.12948
|
| 33 |
+
//
|
| 34 |
+
// HONESTY LABELS: MODELED (deterministic simulation of GRPO group-advantage +
|
| 35 |
+
// PPO-clip + KL arithmetic; NOT a trained policy; NEVER-CLAIMED-AS
|
| 36 |
+
// DeepSeek-R1/DeepSeekMath training). Read verbatim from JSON; never
|
| 37 |
+
// upgraded here.
|
| 38 |
+
// COLOURS: lattice-blue 0x5b8dee (group-mean plane / spine), proof-teal
|
| 39 |
+
// 0x3af4c8 (above-mean / positive-advantage samples, HUD accent), greys
|
| 40 |
+
// (below-mean / degraded state). Purple BANNED as UI/background.
|
| 41 |
+
// 0 RUNTIME CDN. Vendored three.js r170 via page importmap.
|
| 42 |
+
// DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
|
| 43 |
+
// Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
|
| 44 |
+
|
| 45 |
+
const ID = "grpo";
|
| 46 |
+
const TITLE = "GRPO Reward Dynamics · Group-Relative Advantage (live)";
|
| 47 |
+
|
| 48 |
+
// Endpoint is hosted on the dedicated killinchu Space (isolated compute), reached
|
| 49 |
+
// cross-origin (killinchu returns access-control-allow-origin: https://a-11-oy.com).
|
| 50 |
+
// This keeps the GRPO organ's rebuilds/faults isolated from the flagship.
|
| 51 |
+
const EP = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/grpo/reward-dynamics?seed=42&group_size=8&steps=200&kl_beta=0.04";
|
| 52 |
+
|
| 53 |
+
// data-viz hues — purple BANNED
|
| 54 |
+
const C_PLANE = 0x5b8dee; // lattice-blue (group-mean plane / spine)
|
| 55 |
+
const C_ABOVE = 0x3af4c8; // proof-teal (above-mean / positive-advantage sample, HUD accent)
|
| 56 |
+
const C_BELOW = 0x5a6570; // grey (below-mean / negative-advantage sample)
|
| 57 |
+
const C_DIM = 0x42505d; // grey (degraded / no-live-data)
|
| 58 |
+
const C_GRID = 0x1b3a44; // floor / link colour
|
| 59 |
+
const C_KL = 0x8a6bff; // NOTE: reserved slot unused — see doctrine note below
|
| 60 |
+
|
| 61 |
+
// Doctrine v11 colour scope: purple (any hue) is BANNED — the KL-tether line
|
| 62 |
+
// below intentionally uses lattice-blue (dimmed), never the 0x8a6bff constant
|
| 63 |
+
// above. The constant is retained ONLY as a documented "never use" marker so
|
| 64 |
+
// future edits do not accidentally reach for a purple hue for the tether.
|
| 65 |
+
const C_TETHER = 0x5b8dee; // KL-tether line — lattice-blue, dimmed via opacity
|
| 66 |
+
|
| 67 |
+
// group/step scatter layout geometry
|
| 68 |
+
const STEP_LEN = 1.9; // world-units between steps along X (training-step axis)
|
| 69 |
+
const GROUP_SPAN = 3.2; // world-units spread of a group across Z (per-sample jitter)
|
| 70 |
+
const MAX_STEPS = 14; // number of recent steps rendered along the axis
|
| 71 |
+
const MAX_SAMPLES = 16; // cap on group_size rendered per step (perf)
|
| 72 |
+
const ADV_SCALE = 1.6; // world-units of height per unit of |advantage|
|
| 73 |
+
|
| 74 |
+
let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
|
| 75 |
+
let _frameReg = false, _polls = [], _el = {}, _badge = null;
|
| 76 |
+
let _plain = false;
|
| 77 |
+
|
| 78 |
+
// geometry handles
|
| 79 |
+
let _floor = null;
|
| 80 |
+
let _plane = null; // THREE.Mesh — translucent group-mean plane
|
| 81 |
+
let _spine = null; // THREE.Line — training-step axis
|
| 82 |
+
let _sampleMesh = []; // Array<Array<THREE.Mesh>> — [step][sampleIdx]
|
| 83 |
+
let _tethers = []; // Array<THREE.Line> — KL-tether per step
|
| 84 |
+
let _marker = null; // THREE.Mesh — HUD "policy_score" pulsing marker
|
| 85 |
+
|
| 86 |
+
// live state
|
| 87 |
+
const S = {
|
| 88 |
+
label: null,
|
| 89 |
+
groupSize: null, // group_size
|
| 90 |
+
steps: null, // steps
|
| 91 |
+
klBeta: null, // kl_beta
|
| 92 |
+
clipEps: null, // clip_eps
|
| 93 |
+
meanReward: null, // mean_reward
|
| 94 |
+
meanAdv: null, // mean_advantage
|
| 95 |
+
klDiv: null, // kl_divergence
|
| 96 |
+
clipFrac: null, // clip_fraction
|
| 97 |
+
policyScore: null, // final_policy_score
|
| 98 |
+
rewardTraj: null, // reward_trajectory[]
|
| 99 |
+
klTraj: null, // kl_trajectory[]
|
| 100 |
+
scoreTraj: null, // policy_score_trajectory[]
|
| 101 |
+
advTraj: null, // advantage_trajectory[]
|
| 102 |
+
clipTraj: null, // clip_fraction_trajectory[]
|
| 103 |
+
state: "init",
|
| 104 |
+
};
|
| 105 |
+
|
| 106 |
+
// =============================================================================
|
| 107 |
+
// mount(ctx)
|
| 108 |
+
// =============================================================================
|
| 109 |
+
export function mount(ctx) {
|
| 110 |
+
_ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE;
|
| 111 |
+
_group = new _THREE.Group();
|
| 112 |
+
_stage.scene.add(_group);
|
| 113 |
+
_stage.camera.position.set(4, 7, 17);
|
| 114 |
+
try { if (_stage.controls && _stage.controls.target) { _stage.controls.target.set(6, 1, 0); _stage.controls.update(); } } catch (_) {}
|
| 115 |
+
try { _stage.setBloom(true); } catch (_) {}
|
| 116 |
+
|
| 117 |
+
_buildFloor();
|
| 118 |
+
_buildPlaneAndSpine();
|
| 119 |
+
_buildScatterGrid();
|
| 120 |
+
_buildMarker();
|
| 121 |
+
|
| 122 |
+
if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; }
|
| 123 |
+
|
| 124 |
+
_badge = ctx.live.createBadge();
|
| 125 |
+
_polls.push(ctx.live.poll(EP, 5000, _onGrpo, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
|
| 126 |
+
|
| 127 |
+
_buildOverlay();
|
| 128 |
+
return { id: ID, started: true };
|
| 129 |
+
}
|
| 130 |
+
|
| 131 |
+
// =============================================================================
|
| 132 |
+
// builders
|
| 133 |
+
// =============================================================================
|
| 134 |
+
function _buildFloor() {
|
| 135 |
+
const THREE = _THREE;
|
| 136 |
+
const grid = new THREE.GridHelper(40, 40, C_GRID, 0x0f2027);
|
| 137 |
+
grid.material.opacity = 0.18; grid.material.transparent = true; grid.position.y = -0.01;
|
| 138 |
+
_group.add(grid);
|
| 139 |
+
_floor = grid;
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
// Group-mean plane: a thin, translucent strip along the training-step axis at
|
| 143 |
+
// y=0 representing "the group mean" for each step — advantage is literally
|
| 144 |
+
// the height of each sample above/below this plane.
|
| 145 |
+
function _buildPlaneAndSpine() {
|
| 146 |
+
const THREE = _THREE;
|
| 147 |
+
|
| 148 |
+
const planeGeo = new THREE.PlaneGeometry(STEP_LEN * (MAX_STEPS - 1) + 1.4, GROUP_SPAN + 0.6);
|
| 149 |
+
const planeMat = new THREE.MeshBasicMaterial({
|
| 150 |
+
color: C_PLANE, transparent: true, opacity: 0.08, side: THREE.DoubleSide,
|
| 151 |
+
});
|
| 152 |
+
_plane = new THREE.Mesh(planeGeo, planeMat);
|
| 153 |
+
_plane.rotation.x = -Math.PI / 2;
|
| 154 |
+
_plane.position.set((STEP_LEN * (MAX_STEPS - 1)) / 2, 0, 0);
|
| 155 |
+
_group.add(_plane);
|
| 156 |
+
|
| 157 |
+
const pts = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(STEP_LEN * (MAX_STEPS - 1) + 1, 0, 0)];
|
| 158 |
+
const geo = new THREE.BufferGeometry().setFromPoints(pts);
|
| 159 |
+
const mat = new THREE.LineBasicMaterial({ color: C_PLANE, transparent: true, opacity: 0.5 });
|
| 160 |
+
_spine = new THREE.Line(geo, mat);
|
| 161 |
+
_group.add(_spine);
|
| 162 |
+
}
|
| 163 |
+
|
| 164 |
+
// Pre-allocate a fixed grid of sample meshes: MAX_STEPS steps x MAX_SAMPLES
|
| 165 |
+
// samples per step, plus one KL-tether line per step. We toggle
|
| 166 |
+
// visibility/color/position in-place as live data arrives (no per-poll
|
| 167 |
+
// geometry churn).
|
| 168 |
+
function _buildScatterGrid() {
|
| 169 |
+
const THREE = _THREE;
|
| 170 |
+
|
| 171 |
+
const sampleGeo = new THREE.SphereGeometry(0.16, 12, 10);
|
| 172 |
+
for (let s = 0; s < MAX_STEPS; s++) {
|
| 173 |
+
const stepSamples = [];
|
| 174 |
+
const x = s * STEP_LEN;
|
| 175 |
+
for (let t = 0; t < MAX_SAMPLES; t++) {
|
| 176 |
+
// deterministic-looking jitter across Z for visual spread (purely
|
| 177 |
+
// layout, not data — actual height/color comes from live advantage)
|
| 178 |
+
const z = (((t * 2654435761) % 1000) / 1000 - 0.5) * GROUP_SPAN;
|
| 179 |
+
const mesh = new THREE.Mesh(
|
| 180 |
+
sampleGeo,
|
| 181 |
+
new THREE.MeshStandardMaterial({ color: C_ABOVE, emissive: C_ABOVE, emissiveIntensity: 0.25, transparent: true, opacity: 0.0 }),
|
| 182 |
+
);
|
| 183 |
+
mesh.position.set(x, 0, z);
|
| 184 |
+
mesh.visible = false;
|
| 185 |
+
_group.add(mesh);
|
| 186 |
+
stepSamples.push(mesh);
|
| 187 |
+
}
|
| 188 |
+
_sampleMesh.push(stepSamples);
|
| 189 |
+
|
| 190 |
+
// KL-tether: vertical line from the plane up to a small anchor point,
|
| 191 |
+
// whose height encodes that step's KL-divergence-vs-reference estimate.
|
| 192 |
+
const tetherGeo = new THREE.BufferGeometry().setFromPoints([
|
| 193 |
+
new THREE.Vector3(x, 0, GROUP_SPAN / 2 + 0.4), new THREE.Vector3(x, 0.01, GROUP_SPAN / 2 + 0.4),
|
| 194 |
+
]);
|
| 195 |
+
const tetherMat = new THREE.LineBasicMaterial({ color: C_TETHER, transparent: true, opacity: 0.55 });
|
| 196 |
+
const tether = new THREE.Line(tetherGeo, tetherMat);
|
| 197 |
+
tether.visible = false;
|
| 198 |
+
_group.add(tether);
|
| 199 |
+
_tethers.push(tether);
|
| 200 |
+
}
|
| 201 |
+
}
|
| 202 |
+
|
| 203 |
+
function _buildMarker() {
|
| 204 |
+
const THREE = _THREE;
|
| 205 |
+
_marker = new THREE.Mesh(
|
| 206 |
+
new THREE.IcosahedronGeometry(0.26, 1),
|
| 207 |
+
new THREE.MeshStandardMaterial({ color: C_ABOVE, emissive: C_ABOVE, emissiveIntensity: 0.5, wireframe: true, transparent: true, opacity: 0.85 }),
|
| 208 |
+
);
|
| 209 |
+
_marker.position.set(0, -0.6, 0);
|
| 210 |
+
_group.add(_marker);
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
// =============================================================================
|
| 214 |
+
// live data handler
|
| 215 |
+
// =============================================================================
|
| 216 |
+
function _onGrpo(j) {
|
| 217 |
+
// read honesty label VERBATIM — never upgrade
|
| 218 |
+
S.label = (j.label || "MODELED").toUpperCase();
|
| 219 |
+
S.groupSize = typeof j.group_size === "number" ? j.group_size : null;
|
| 220 |
+
S.steps = typeof j.steps === "number" ? j.steps : null;
|
| 221 |
+
S.klBeta = typeof j.kl_beta === "number" ? j.kl_beta : null;
|
| 222 |
+
S.clipEps = typeof j.clip_eps === "number" ? j.clip_eps : null;
|
| 223 |
+
S.meanReward = typeof j.mean_reward === "number" ? j.mean_reward : null;
|
| 224 |
+
S.meanAdv = typeof j.mean_advantage === "number" ? j.mean_advantage : null;
|
| 225 |
+
S.klDiv = typeof j.kl_divergence === "number" ? j.kl_divergence : null;
|
| 226 |
+
S.clipFrac = typeof j.clip_fraction === "number" ? j.clip_fraction : null;
|
| 227 |
+
S.policyScore = typeof j.final_policy_score === "number" ? j.final_policy_score : null;
|
| 228 |
+
S.rewardTraj = Array.isArray(j.reward_trajectory) ? j.reward_trajectory : null;
|
| 229 |
+
S.klTraj = Array.isArray(j.kl_trajectory) ? j.kl_trajectory : null;
|
| 230 |
+
S.scoreTraj = Array.isArray(j.policy_score_trajectory) ? j.policy_score_trajectory : null;
|
| 231 |
+
S.advTraj = Array.isArray(j.advantage_trajectory) ? j.advantage_trajectory : null;
|
| 232 |
+
S.clipTraj = Array.isArray(j.clip_fraction_trajectory)? j.clip_fraction_trajectory: null;
|
| 233 |
+
|
| 234 |
+
_updateScatter();
|
| 235 |
+
_paintOverlay();
|
| 236 |
+
}
|
| 237 |
+
|
| 238 |
+
// =============================================================================
|
| 239 |
+
// geometry updater — drives the group scatter / KL-tethers from live data
|
| 240 |
+
// =============================================================================
|
| 241 |
+
function _updateScatter() {
|
| 242 |
+
const live = S.state === "live";
|
| 243 |
+
const groupSize = live && S.groupSize ? Math.min(S.groupSize, MAX_SAMPLES) : 0;
|
| 244 |
+
|
| 245 |
+
// Use the tail of each trajectory (most recent MAX_STEPS points) so the
|
| 246 |
+
// pipeline always shows the latest training window.
|
| 247 |
+
const rewardTail = live && S.rewardTraj && S.rewardTraj.length ? S.rewardTraj.slice(-MAX_STEPS) : [];
|
| 248 |
+
const advTail = live && S.advTraj && S.advTraj.length ? S.advTraj.slice(-MAX_STEPS) : [];
|
| 249 |
+
const klTail = live && S.klTraj && S.klTraj.length ? S.klTraj.slice(-MAX_STEPS) : [];
|
| 250 |
+
const nSteps = rewardTail.length;
|
| 251 |
+
|
| 252 |
+
for (let s = 0; s < MAX_STEPS; s++) {
|
| 253 |
+
const showStep = live && s < nSteps && groupSize > 0;
|
| 254 |
+
const meanAdvAtStep = showStep ? advTail[s] : 0;
|
| 255 |
+
const klAtStep = showStep ? klTail[s] : 0;
|
| 256 |
+
|
| 257 |
+
_tethers[s].visible = showStep;
|
| 258 |
+
if (showStep) {
|
| 259 |
+
const tetherHeight = Math.min(2.4, 0.3 + klAtStep * 6.0);
|
| 260 |
+
const pos = _tethers[s].geometry.attributes.position;
|
| 261 |
+
pos.setXYZ(1, s * STEP_LEN, tetherHeight, GROUP_SPAN / 2 + 0.4);
|
| 262 |
+
pos.needsUpdate = true;
|
| 263 |
+
_tethers[s].material.color.setHex(C_TETHER);
|
| 264 |
+
_tethers[s].material.opacity = 0.55;
|
| 265 |
+
}
|
| 266 |
+
|
| 267 |
+
for (let t = 0; t < MAX_SAMPLES; t++) {
|
| 268 |
+
const mesh = _sampleMesh[s][t];
|
| 269 |
+
if (!showStep || t >= groupSize) {
|
| 270 |
+
mesh.visible = false;
|
| 271 |
+
continue;
|
| 272 |
+
}
|
| 273 |
+
mesh.visible = true;
|
| 274 |
+
// per-sample advantage sign alternates deterministically around the
|
| 275 |
+
// step's mean |advantage| so the cloud visibly straddles the plane —
|
| 276 |
+
// exact per-sample values are not re-transmitted by the endpoint
|
| 277 |
+
// (only the step aggregate is), so this renders the aggregate
|
| 278 |
+
// magnitude as a symmetric scatter, which is an honest visual proxy.
|
| 279 |
+
const sign = (t % 2 === 0) ? 1 : -1;
|
| 280 |
+
const jitter = 0.65 + 0.35 * (((t * 2246822519) % 1000) / 1000);
|
| 281 |
+
const height = sign * meanAdvAtStep * ADV_SCALE * jitter;
|
| 282 |
+
mesh.position.y = height;
|
| 283 |
+
|
| 284 |
+
const above = height >= 0;
|
| 285 |
+
const color = above ? C_ABOVE : C_BELOW;
|
| 286 |
+
mesh.material.color.setHex(color);
|
| 287 |
+
mesh.material.emissive.setHex(color);
|
| 288 |
+
mesh.material.emissiveIntensity = above ? 0.5 : 0.15;
|
| 289 |
+
mesh.material.opacity = above ? 0.92 : 0.45;
|
| 290 |
+
}
|
| 291 |
+
}
|
| 292 |
+
|
| 293 |
+
// plane + spine + marker degrade to grey when not live
|
| 294 |
+
_plane.material.color.setHex(live ? C_PLANE : C_DIM);
|
| 295 |
+
_plane.material.opacity = live ? 0.08 : 0.03;
|
| 296 |
+
_spine.material.color.setHex(live ? C_PLANE : C_DIM);
|
| 297 |
+
_spine.material.opacity = live ? 0.5 : 0.15;
|
| 298 |
+
|
| 299 |
+
if (_marker) {
|
| 300 |
+
if (live && S.policyScore != null) {
|
| 301 |
+
_marker.material.color.setHex(C_ABOVE);
|
| 302 |
+
_marker.material.emissive.setHex(C_ABOVE);
|
| 303 |
+
_marker.material.opacity = 0.85;
|
| 304 |
+
// marker rides along X proportional to final_policy_score (visual
|
| 305 |
+
// "convergence" cue — climbs toward the end of the pipeline as the
|
| 306 |
+
// policy score approaches 1.0)
|
| 307 |
+
const x = Math.min(STEP_LEN * (MAX_STEPS - 1), (S.policyScore || 0) * STEP_LEN * (MAX_STEPS - 1));
|
| 308 |
+
_marker.position.set(x, -0.6, 0);
|
| 309 |
+
} else {
|
| 310 |
+
_marker.material.color.setHex(C_DIM);
|
| 311 |
+
_marker.material.emissive.setHex(C_DIM);
|
| 312 |
+
_marker.material.opacity = 0.3;
|
| 313 |
+
}
|
| 314 |
+
}
|
| 315 |
+
}
|
| 316 |
+
|
| 317 |
+
// =============================================================================
|
| 318 |
+
// per-frame animation
|
| 319 |
+
// =============================================================================
|
| 320 |
+
function _onFrame() {
|
| 321 |
+
const t = performance.now();
|
| 322 |
+
if (_group) _group.rotation.y = Math.sin(t * 0.00009) * 0.12;
|
| 323 |
+
if (_marker) {
|
| 324 |
+
_marker.rotation.y += 0.025;
|
| 325 |
+
_marker.rotation.x += 0.012;
|
| 326 |
+
const pulse = 1.0 + 0.15 * Math.sin(t * 0.004);
|
| 327 |
+
_marker.scale.setScalar(pulse);
|
| 328 |
+
}
|
| 329 |
+
}
|
| 330 |
+
|
| 331 |
+
// =============================================================================
|
| 332 |
+
// overlay
|
| 333 |
+
// =============================================================================
|
| 334 |
+
function _buildOverlay() {
|
| 335 |
+
const ctx = _ctx;
|
| 336 |
+
_overlay = document.createElement("div");
|
| 337 |
+
Object.assign(_overlay.style, {
|
| 338 |
+
position: "absolute", left: "14px", top: "14px", zIndex: "6",
|
| 339 |
+
display: "flex", flexDirection: "column", gap: "8px",
|
| 340 |
+
maxWidth: "min(94%,440px)",
|
| 341 |
+
font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
|
| 342 |
+
color: "#eef3f6",
|
| 343 |
+
});
|
| 344 |
+
|
| 345 |
+
const h = document.createElement("div");
|
| 346 |
+
h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
|
| 347 |
+
h.textContent = TITLE;
|
| 348 |
+
_overlay.appendChild(h);
|
| 349 |
+
|
| 350 |
+
const sub = document.createElement("div");
|
| 351 |
+
sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
|
| 352 |
+
sub.innerHTML =
|
| 353 |
+
'GRPO samples a <b>group</b> of completions per step and normalizes each reward against ' +
|
| 354 |
+
'the group\'s own mean/std \u2014 <b>no critic network</b> needed. The policy is updated via a ' +
|
| 355 |
+
'PPO-clip surrogate (\u03b5=0.2) on that group-relative advantage, plus a KL penalty vs a fixed ' +
|
| 356 |
+
'reference policy. Honesty label <b>MODELED</b> (deterministic group-advantage + PPO-clip + KL ' +
|
| 357 |
+
'arithmetic; NOT a trained policy). 0 runtime CDN.';
|
| 358 |
+
_overlay.appendChild(sub);
|
| 359 |
+
|
| 360 |
+
const brow = document.createElement("div");
|
| 361 |
+
brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
|
| 362 |
+
if (_badge && _badge.el) brow.appendChild(_badge.el);
|
| 363 |
+
_overlay.appendChild(brow);
|
| 364 |
+
|
| 365 |
+
const card = document.createElement("div");
|
| 366 |
+
card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
|
| 367 |
+
|
| 368 |
+
const chead = document.createElement("div");
|
| 369 |
+
chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
|
| 370 |
+
const dot = document.createElement("span");
|
| 371 |
+
dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
|
| 372 |
+
const nm = document.createElement("b");
|
| 373 |
+
nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
|
| 374 |
+
nm.textContent = "GRPO reward dynamics";
|
| 375 |
+
chead.appendChild(dot); chead.appendChild(nm);
|
| 376 |
+
card.appendChild(chead);
|
| 377 |
+
|
| 378 |
+
const grid = document.createElement("div");
|
| 379 |
+
grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
|
| 380 |
+
|
| 381 |
+
function kpiRow(id, label) {
|
| 382 |
+
const r = document.createElement("div");
|
| 383 |
+
r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
|
| 384 |
+
const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
|
| 385 |
+
const v = document.createElement("b");
|
| 386 |
+
v.id = id;
|
| 387 |
+
v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
|
| 388 |
+
v.textContent = "\u2014";
|
| 389 |
+
_el[id] = v;
|
| 390 |
+
r.appendChild(l); r.appendChild(v); return r;
|
| 391 |
+
}
|
| 392 |
+
|
| 393 |
+
grid.appendChild(kpiRow("gr-groupsize", "group_size (G samples/step)"));
|
| 394 |
+
grid.appendChild(kpiRow("gr-steps", "steps simulated"));
|
| 395 |
+
grid.appendChild(kpiRow("gr-klbeta", "kl_beta (KL-penalty coeff.)"));
|
| 396 |
+
grid.appendChild(kpiRow("gr-clipeps", "clip_eps (PPO-clip \u03b5)"));
|
| 397 |
+
grid.appendChild(kpiRow("gr-reward", "mean_reward \u2014 MODELED"));
|
| 398 |
+
grid.appendChild(kpiRow("gr-adv", "mean_advantage \u2014 MODELED"));
|
| 399 |
+
grid.appendChild(kpiRow("gr-kl", "kl_divergence (k3) \u2014 MODELED"));
|
| 400 |
+
grid.appendChild(kpiRow("gr-clipfrac", "clip_fraction \u2014 MODELED"));
|
| 401 |
+
grid.appendChild(kpiRow("gr-score", "final_policy_score \u2014 MODELED"));
|
| 402 |
+
grid.appendChild(kpiRow("gr-label", "honesty label"));
|
| 403 |
+
card.appendChild(grid);
|
| 404 |
+
|
| 405 |
+
const fn = document.createElement("div");
|
| 406 |
+
fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
|
| 407 |
+
fn.textContent = "Shao et al. (DeepSeekMath GRPO) arXiv:2402.03300 \u00b7 DeepSeek-R1 arXiv:2501.12948. MODELED \u00b7 not claimed-as.";
|
| 408 |
+
card.appendChild(fn);
|
| 409 |
+
_overlay.appendChild(card);
|
| 410 |
+
|
| 411 |
+
const pl = document.createElement("button");
|
| 412 |
+
pl.textContent = "\u25d1 what this means";
|
| 413 |
+
pl.title = "Toggle plain-language explanation for investors & consumers.";
|
| 414 |
+
pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
|
| 415 |
+
pl.addEventListener("click", () => {
|
| 416 |
+
_plain = !_plain;
|
| 417 |
+
pl.style.background = _plain ? "#0f2a20" : "#08140f";
|
| 418 |
+
_applyPlain();
|
| 419 |
+
});
|
| 420 |
+
_overlay.appendChild(pl);
|
| 421 |
+
|
| 422 |
+
const pd = document.createElement("div");
|
| 423 |
+
pd.id = "gr-plain";
|
| 424 |
+
pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
|
| 425 |
+
_el["plain"] = pd;
|
| 426 |
+
_overlay.appendChild(pd);
|
| 427 |
+
|
| 428 |
+
(ctx.container || document.body).appendChild(_overlay);
|
| 429 |
+
_paintOverlay();
|
| 430 |
+
}
|
| 431 |
+
|
| 432 |
+
function _applyPlain() {
|
| 433 |
+
const pd = _el["plain"];
|
| 434 |
+
if (!pd) return;
|
| 435 |
+
pd.style.display = _plain ? "block" : "none";
|
| 436 |
+
if (!_plain) return;
|
| 437 |
+
const g = S.groupSize != null ? String(S.groupSize) : "loading\u2026";
|
| 438 |
+
const reward = S.meanReward != null ? (S.meanReward * 100).toFixed(1) + "%" : "loading\u2026";
|
| 439 |
+
const score = S.policyScore != null ? (S.policyScore * 100).toFixed(1) + "%" : "loading\u2026";
|
| 440 |
+
pd.innerHTML =
|
| 441 |
+
"<b>What this means:</b> Instead of training a second, separate \u201ccritic\u201d network to judge how " +
|
| 442 |
+
"good an answer is (as classic PPO does), GRPO just generates <b>" + g + " candidate answers</b> to the " +
|
| 443 |
+
"same question and compares them <i>to each other</i> \u2014 the group's own average becomes the yardstick. " +
|
| 444 |
+
"Answers better than the group average get reinforced; worse ones get discouraged. A safety clip keeps " +
|
| 445 |
+
"any single update from swinging too far, and a KL \u201cleash\u201d keeps the model from drifting too far " +
|
| 446 |
+
"from where it started. Over simulated training, the average reward per group reaches about <b>" + reward + "</b> " +
|
| 447 |
+
"and a convergence proxy (<b>policy_score</b>) climbs to about <b>" + score + "</b>. This view is a <b>MODELED</b> " +
|
| 448 |
+
"closed-form simulation of the group-advantage/PPO-clip/KL arithmetic from the DeepSeekMath paper, not a run of " +
|
| 449 |
+
"DeepSeek-R1 or DeepSeekMath training.";
|
| 450 |
+
}
|
| 451 |
+
|
| 452 |
+
function _tok(s) {
|
| 453 |
+
if (s === "live") return null;
|
| 454 |
+
if (s === "missing") return "NO-LIVE-DATA";
|
| 455 |
+
if (s === "degraded") return "DEGRADED";
|
| 456 |
+
if (s === "error") return "OFFLINE";
|
| 457 |
+
return "\u2026";
|
| 458 |
+
}
|
| 459 |
+
|
| 460 |
+
function fx(v, d) { return typeof v === "number" ? v.toFixed(d) : "\u2014"; }
|
| 461 |
+
function pct(v, d) { return typeof v === "number" ? (v * 100).toFixed(d) + "%" : "\u2014"; }
|
| 462 |
+
function _set(id, v) { if (_el[id]) _el[id].textContent = v; }
|
| 463 |
+
|
| 464 |
+
function _paintOverlay() {
|
| 465 |
+
const t = _tok(S.state);
|
| 466 |
+
_set("gr-groupsize", t || (S.groupSize != null ? String(S.groupSize) : "\u2014"));
|
| 467 |
+
_set("gr-steps", t || (S.steps != null ? String(S.steps) : "\u2014"));
|
| 468 |
+
_set("gr-klbeta", t || fx(S.klBeta, 4));
|
| 469 |
+
_set("gr-clipeps", t || fx(S.clipEps, 2));
|
| 470 |
+
_set("gr-reward", t || fx(S.meanReward, 4));
|
| 471 |
+
_set("gr-adv", t || fx(S.meanAdv, 4));
|
| 472 |
+
_set("gr-kl", t || fx(S.klDiv, 6));
|
| 473 |
+
_set("gr-clipfrac", t || pct(S.clipFrac, 2));
|
| 474 |
+
_set("gr-score", t || pct(S.policyScore, 2));
|
| 475 |
+
// honesty label verbatim — never upgraded
|
| 476 |
+
_set("gr-label", t || (S.label || "MODELED"));
|
| 477 |
+
if (_plain) _applyPlain();
|
| 478 |
+
}
|
| 479 |
+
|
| 480 |
+
// =============================================================================
|
| 481 |
+
// unmount — clean up everything; must not affect other organs
|
| 482 |
+
// =============================================================================
|
| 483 |
+
export function unmount() {
|
| 484 |
+
_polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
|
| 485 |
+
try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
|
| 486 |
+
try {
|
| 487 |
+
if (_group && _stage) {
|
| 488 |
+
_group.traverse((o) => {
|
| 489 |
+
if (o.geometry && o.geometry.dispose) o.geometry.dispose();
|
| 490 |
+
if (o.material) {
|
| 491 |
+
const ms = Array.isArray(o.material) ? o.material : [o.material];
|
| 492 |
+
ms.forEach((m) => { if (m.dispose) m.dispose(); });
|
| 493 |
+
}
|
| 494 |
+
});
|
| 495 |
+
_stage.scene.remove(_group);
|
| 496 |
+
}
|
| 497 |
+
} catch (_) {}
|
| 498 |
+
_group = _overlay = null;
|
| 499 |
+
_floor = null; _plane = null; _spine = null; _sampleMesh = []; _tethers = []; _marker = null;
|
| 500 |
+
_el = {}; _badge = null; _plain = false; _frameReg = false;
|
| 501 |
+
_stage = _THREE = _ctx = null;
|
| 502 |
+
S.label = S.groupSize = S.steps = S.klBeta = S.clipEps = null;
|
| 503 |
+
S.meanReward = S.meanAdv = S.klDiv = S.clipFrac = S.policyScore = null;
|
| 504 |
+
S.rewardTraj = S.klTraj = S.scoreTraj = S.advTraj = S.clipTraj = null;
|
| 505 |
+
S.state = "init";
|
| 506 |
+
}
|
| 507 |
+
|
| 508 |
+
export default { id: ID, title: TITLE, endpoints: [EP], mount, unmount };
|
static/3d/surfaces/kvcache.js
ADDED
|
@@ -0,0 +1,432 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// SPDX-License-Identifier: Apache-2.0
|
| 2 |
+
// © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
|
| 3 |
+
//
|
| 4 |
+
// surfaces/kvcache.js — KV-CACHE H2O EVICTION organ for the holographic frontier
|
| 5 |
+
// ring (Heavy-Hitter Oracle runtime cache eviction, Zhang et al. 2023-style).
|
| 6 |
+
// Renders a simulated decoding stream of `seq_len` tokens as a 3D token row:
|
| 7 |
+
// kept heavy-hitters glow proof-teal, the recent sliding window glows
|
| 8 |
+
// lattice-blue, and evicted tokens fade to grey and drop out of the row. A HUD
|
| 9 |
+
// shows memory_ratio + mass_retained per policy (H2O / sliding-window / full-
|
| 10 |
+
// cache oracle) from the live snapshot at
|
| 11 |
+
// /api/killinchu/v1/kvcache/h2o-evict. Honesty label "MODELED" is read
|
| 12 |
+
// VERBATIM from the JSON and displayed as-is; it is never upgraded.
|
| 13 |
+
//
|
| 14 |
+
// Surface export shape (mirrors specdecode.js / testtime.js exactly):
|
| 15 |
+
// export default { id, title, endpoints, mount(ctx), unmount() }
|
| 16 |
+
// ctx = { stage, container, live, label, THREE, szl3d }
|
| 17 |
+
//
|
| 18 |
+
// DATA SHOWN (all from live endpoint):
|
| 19 |
+
// seq_len, capacity, window, memory_ratio, h2o_mass_retained,
|
| 20 |
+
// sliding_mass_retained, full_mass_retained, h2o_vs_sliding_gain,
|
| 21 |
+
// evicted_count, per_token[] {i, mass, h2o_kept, sliding_kept}
|
| 22 |
+
//
|
| 23 |
+
// LEADERS ADOPTED & CITED (clean-room; NOT claimed as SZL's own; VERIFY real):
|
| 24 |
+
// H2O — Heavy-Hitter Oracle KV-cache eviction (policy simulated here):
|
| 25 |
+
// Zhang et al. 2023, arXiv:2306.14048
|
| 26 |
+
// https://arxiv.org/abs/2306.14048
|
| 27 |
+
// StreamingLLM (recency-window / attention-sink baseline — reference only):
|
| 28 |
+
// Xiao et al. 2023, arXiv:2309.17453
|
| 29 |
+
// https://arxiv.org/abs/2309.17453
|
| 30 |
+
//
|
| 31 |
+
// HONESTY LABELS: MODELED (deterministic simulation of the H2O heavy-hitter
|
| 32 |
+
// eviction policy on a synthetic attention-mass trace; NOT a real KV cache
|
| 33 |
+
// or trained model; NEVER-CLAIMED-AS a production inference engine). Read
|
| 34 |
+
// verbatim from JSON; never upgraded here.
|
| 35 |
+
// COLOURS: lattice-blue 0x5b8dee (recent sliding window), proof-teal 0x3af4c8
|
| 36 |
+
// (kept heavy hitters / HUD accent), greys (evicted tokens / degraded state).
|
| 37 |
+
// Purple BANNED as UI/background.
|
| 38 |
+
// 0 RUNTIME CDN. Vendored three.js r170 via page importmap.
|
| 39 |
+
// DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
|
| 40 |
+
// Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
|
| 41 |
+
|
| 42 |
+
const ID = "kvcache";
|
| 43 |
+
const TITLE = "KV-Cache H2O Eviction · Heavy-Hitter Oracle (live)";
|
| 44 |
+
|
| 45 |
+
// Endpoint is hosted on the dedicated killinchu Space (isolated compute), reached
|
| 46 |
+
// cross-origin (killinchu returns access-control-allow-origin: https://a-11-oy.com).
|
| 47 |
+
// This keeps the KV-cache eviction organ's rebuilds/faults isolated from the flagship.
|
| 48 |
+
const EP = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/kvcache/h2o-evict?seed=42&seq_len=512&capacity=128&window=32";
|
| 49 |
+
|
| 50 |
+
// data-viz hues — purple BANNED
|
| 51 |
+
const C_WINDOW = 0x5b8dee; // lattice-blue (recent sliding-window tokens)
|
| 52 |
+
const C_HEAVY = 0x3af4c8; // proof-teal (kept heavy hitters / HUD accent)
|
| 53 |
+
const C_EVICTED = 0x5a6570; // grey (evicted token)
|
| 54 |
+
const C_DIM = 0x42505d; // grey (degraded / no-live-data)
|
| 55 |
+
const C_GRID = 0x1b3a44; // floor / link colour
|
| 56 |
+
|
| 57 |
+
// token-row layout geometry
|
| 58 |
+
const TOKEN_GAP = 0.42; // world-units between tokens along X (decoding axis)
|
| 59 |
+
const MAX_TOKENS = 160; // cap on tokens rendered in the row (perf)
|
| 60 |
+
const ROW_Y = 0.4; // resting height of a kept token
|
| 61 |
+
const EVICT_Y = -1.6; // dropped height of an evicted token
|
| 62 |
+
|
| 63 |
+
let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
|
| 64 |
+
let _frameReg = false, _polls = [], _el = {}, _badge = null;
|
| 65 |
+
let _plain = false;
|
| 66 |
+
|
| 67 |
+
// geometry handles
|
| 68 |
+
let _floor = null;
|
| 69 |
+
let _spine = null; // THREE.Line — decoding-stream spine
|
| 70 |
+
let _tokenMesh = []; // Array<THREE.Mesh> — one per rendered token slot
|
| 71 |
+
let _marker = null; // THREE.Mesh — HUD pulsing marker (memory_ratio cue)
|
| 72 |
+
|
| 73 |
+
// live state
|
| 74 |
+
const S = {
|
| 75 |
+
label: null,
|
| 76 |
+
seqLen: null, // seq_len
|
| 77 |
+
capacity: null, // capacity
|
| 78 |
+
window: null, // window
|
| 79 |
+
memoryRatio: null, // memory_ratio
|
| 80 |
+
h2oMassRetained: null, // h2o_mass_retained
|
| 81 |
+
slidingMassRetained: null, // sliding_mass_retained
|
| 82 |
+
fullMassRetained: null, // full_mass_retained
|
| 83 |
+
h2oVsSlidingGain: null, // h2o_vs_sliding_gain
|
| 84 |
+
evictedCount: null, // evicted_count
|
| 85 |
+
perToken: null, // per_token[]
|
| 86 |
+
state: "init",
|
| 87 |
+
};
|
| 88 |
+
|
| 89 |
+
// =============================================================================
|
| 90 |
+
// mount(ctx)
|
| 91 |
+
// =============================================================================
|
| 92 |
+
export function mount(ctx) {
|
| 93 |
+
_ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE;
|
| 94 |
+
_group = new _THREE.Group();
|
| 95 |
+
_stage.scene.add(_group);
|
| 96 |
+
_stage.camera.position.set(4, 7, 18);
|
| 97 |
+
try { if (_stage.controls && _stage.controls.target) { _stage.controls.target.set(6, 2, 0); _stage.controls.update(); } } catch (_) {}
|
| 98 |
+
try { _stage.setBloom(true); } catch (_) {}
|
| 99 |
+
|
| 100 |
+
_buildFloor();
|
| 101 |
+
_buildTokenRow();
|
| 102 |
+
_buildMarker();
|
| 103 |
+
|
| 104 |
+
if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; }
|
| 105 |
+
|
| 106 |
+
_badge = ctx.live.createBadge();
|
| 107 |
+
_polls.push(ctx.live.poll(EP, 5000, _onKvcache, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
|
| 108 |
+
|
| 109 |
+
_buildOverlay();
|
| 110 |
+
return { id: ID, started: true };
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
// =============================================================================
|
| 114 |
+
// builders
|
| 115 |
+
// =============================================================================
|
| 116 |
+
function _buildFloor() {
|
| 117 |
+
const THREE = _THREE;
|
| 118 |
+
const grid = new THREE.GridHelper(40, 40, C_GRID, 0x0f2027);
|
| 119 |
+
grid.material.opacity = 0.18; grid.material.transparent = true; grid.position.y = -0.01;
|
| 120 |
+
_group.add(grid);
|
| 121 |
+
_floor = grid;
|
| 122 |
+
}
|
| 123 |
+
|
| 124 |
+
// Pre-allocate a fixed row of token meshes: MAX_TOKENS slots. We toggle
|
| 125 |
+
// visibility / color / position in-place as live data arrives (no per-poll
|
| 126 |
+
// geometry churn).
|
| 127 |
+
function _buildTokenRow() {
|
| 128 |
+
const THREE = _THREE;
|
| 129 |
+
|
| 130 |
+
// decoding-stream spine: a straight line along X marking the token order
|
| 131 |
+
{
|
| 132 |
+
const pts = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(TOKEN_GAP * (MAX_TOKENS - 1) + 1, 0, 0)];
|
| 133 |
+
const geo = new THREE.BufferGeometry().setFromPoints(pts);
|
| 134 |
+
const mat = new THREE.LineBasicMaterial({ color: C_WINDOW, transparent: true, opacity: 0.4 });
|
| 135 |
+
_spine = new THREE.Line(geo, mat);
|
| 136 |
+
_group.add(_spine);
|
| 137 |
+
}
|
| 138 |
+
|
| 139 |
+
const tokenGeo = new THREE.OctahedronGeometry(0.16, 0);
|
| 140 |
+
for (let t = 0; t < MAX_TOKENS; t++) {
|
| 141 |
+
const x = t * TOKEN_GAP;
|
| 142 |
+
const mesh = new THREE.Mesh(
|
| 143 |
+
tokenGeo,
|
| 144 |
+
new THREE.MeshStandardMaterial({ color: C_EVICTED, emissive: C_EVICTED, emissiveIntensity: 0.2, transparent: true, opacity: 0.0 }),
|
| 145 |
+
);
|
| 146 |
+
mesh.position.set(x, ROW_Y, 0);
|
| 147 |
+
mesh.visible = false;
|
| 148 |
+
_group.add(mesh);
|
| 149 |
+
_tokenMesh.push(mesh);
|
| 150 |
+
}
|
| 151 |
+
}
|
| 152 |
+
|
| 153 |
+
function _buildMarker() {
|
| 154 |
+
const THREE = _THREE;
|
| 155 |
+
_marker = new THREE.Mesh(
|
| 156 |
+
new THREE.IcosahedronGeometry(0.26, 1),
|
| 157 |
+
new THREE.MeshStandardMaterial({ color: C_HEAVY, emissive: C_HEAVY, emissiveIntensity: 0.5, wireframe: true, transparent: true, opacity: 0.85 }),
|
| 158 |
+
);
|
| 159 |
+
_marker.position.set(0, -0.9, 0);
|
| 160 |
+
_group.add(_marker);
|
| 161 |
+
}
|
| 162 |
+
|
| 163 |
+
// =============================================================================
|
| 164 |
+
// live data handler
|
| 165 |
+
// =============================================================================
|
| 166 |
+
function _onKvcache(j) {
|
| 167 |
+
// read honesty label VERBATIM — never upgrade
|
| 168 |
+
S.label = (j.label || "MODELED").toUpperCase();
|
| 169 |
+
S.seqLen = typeof j.seq_len === "number" ? j.seq_len : null;
|
| 170 |
+
S.capacity = typeof j.capacity === "number" ? j.capacity : null;
|
| 171 |
+
S.window = typeof j.window === "number" ? j.window : null;
|
| 172 |
+
S.memoryRatio = typeof j.memory_ratio === "number" ? j.memory_ratio : null;
|
| 173 |
+
S.h2oMassRetained = typeof j.h2o_mass_retained === "number" ? j.h2o_mass_retained : null;
|
| 174 |
+
S.slidingMassRetained = typeof j.sliding_mass_retained === "number" ? j.sliding_mass_retained : null;
|
| 175 |
+
S.fullMassRetained = typeof j.full_mass_retained === "number" ? j.full_mass_retained : null;
|
| 176 |
+
S.h2oVsSlidingGain = typeof j.h2o_vs_sliding_gain === "number" ? j.h2o_vs_sliding_gain : null;
|
| 177 |
+
S.evictedCount = typeof j.evicted_count === "number" ? j.evicted_count : null;
|
| 178 |
+
S.perToken = Array.isArray(j.per_token) ? j.per_token : null;
|
| 179 |
+
|
| 180 |
+
_updateTokenRow();
|
| 181 |
+
_paintOverlay();
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
// =============================================================================
|
| 185 |
+
// geometry updater — drives the token row from live data
|
| 186 |
+
// =============================================================================
|
| 187 |
+
function _updateTokenRow() {
|
| 188 |
+
const live = S.state === "live";
|
| 189 |
+
const toks = live && S.perToken && S.perToken.length ? S.perToken.slice(0, MAX_TOKENS) : [];
|
| 190 |
+
|
| 191 |
+
for (let t = 0; t < MAX_TOKENS; t++) {
|
| 192 |
+
const mesh = _tokenMesh[t];
|
| 193 |
+
if (!live || t >= toks.length) {
|
| 194 |
+
mesh.visible = false;
|
| 195 |
+
continue;
|
| 196 |
+
}
|
| 197 |
+
mesh.visible = true;
|
| 198 |
+
const rec = toks[t];
|
| 199 |
+
const kept = !!rec.h2o_kept;
|
| 200 |
+
const inWindow = kept && !!rec.sliding_kept; // recent tokens are kept by BOTH policies
|
| 201 |
+
let color;
|
| 202 |
+
if (!kept) {
|
| 203 |
+
color = C_EVICTED; // evicted under H2O -> grey, dropped
|
| 204 |
+
} else if (inWindow) {
|
| 205 |
+
color = C_WINDOW; // recent-window heavy hitter -> lattice-blue
|
| 206 |
+
} else {
|
| 207 |
+
color = C_HEAVY; // pure heavy hitter (older) -> proof-teal
|
| 208 |
+
}
|
| 209 |
+
mesh.material.color.setHex(color);
|
| 210 |
+
mesh.material.emissive.setHex(color);
|
| 211 |
+
mesh.material.emissiveIntensity = kept ? (inWindow ? 0.45 : 0.6) : 0.12;
|
| 212 |
+
mesh.material.opacity = kept ? 0.95 : 0.30;
|
| 213 |
+
// evicted tokens visually drop out of the row (H2O eviction cue); mass
|
| 214 |
+
// scales the resting height slightly for kept heavy hitters (taller = heavier).
|
| 215 |
+
const massScale = typeof rec.mass === "number" ? Math.min(1.0, rec.mass * 2.0) : 0.0;
|
| 216 |
+
mesh.position.y = kept ? ROW_Y + massScale * 0.5 : EVICT_Y;
|
| 217 |
+
mesh.position.z = kept ? 0 : -0.4;
|
| 218 |
+
}
|
| 219 |
+
|
| 220 |
+
// spine degrades to grey when not live
|
| 221 |
+
_spine.material.color.setHex(live ? C_WINDOW : C_DIM);
|
| 222 |
+
_spine.material.opacity = live ? 0.4 : 0.15;
|
| 223 |
+
|
| 224 |
+
if (_marker) {
|
| 225 |
+
if (live && S.memoryRatio != null) {
|
| 226 |
+
_marker.material.color.setHex(C_HEAVY);
|
| 227 |
+
_marker.material.emissive.setHex(C_HEAVY);
|
| 228 |
+
_marker.material.opacity = 0.85;
|
| 229 |
+
// marker rides along X proportional to memory_ratio (visual "budget" cue)
|
| 230 |
+
const x = Math.min(TOKEN_GAP * (MAX_TOKENS - 1), (S.memoryRatio || 0) * TOKEN_GAP * (MAX_TOKENS - 1));
|
| 231 |
+
_marker.position.set(x, -0.9, 0);
|
| 232 |
+
} else {
|
| 233 |
+
_marker.material.color.setHex(C_DIM);
|
| 234 |
+
_marker.material.emissive.setHex(C_DIM);
|
| 235 |
+
_marker.material.opacity = 0.3;
|
| 236 |
+
}
|
| 237 |
+
}
|
| 238 |
+
}
|
| 239 |
+
|
| 240 |
+
// =============================================================================
|
| 241 |
+
// per-frame animation
|
| 242 |
+
// =============================================================================
|
| 243 |
+
function _onFrame() {
|
| 244 |
+
const t = performance.now();
|
| 245 |
+
if (_group) _group.rotation.y = Math.sin(t * 0.00009) * 0.12;
|
| 246 |
+
if (_marker) {
|
| 247 |
+
_marker.rotation.y += 0.025;
|
| 248 |
+
_marker.rotation.x += 0.012;
|
| 249 |
+
const pulse = 1.0 + 0.15 * Math.sin(t * 0.004);
|
| 250 |
+
_marker.scale.setScalar(pulse);
|
| 251 |
+
}
|
| 252 |
+
}
|
| 253 |
+
|
| 254 |
+
// =============================================================================
|
| 255 |
+
// overlay
|
| 256 |
+
// =============================================================================
|
| 257 |
+
function _buildOverlay() {
|
| 258 |
+
const ctx = _ctx;
|
| 259 |
+
_overlay = document.createElement("div");
|
| 260 |
+
Object.assign(_overlay.style, {
|
| 261 |
+
position: "absolute", left: "14px", top: "14px", zIndex: "6",
|
| 262 |
+
display: "flex", flexDirection: "column", gap: "8px",
|
| 263 |
+
maxWidth: "min(94%,440px)",
|
| 264 |
+
font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
|
| 265 |
+
color: "#eef3f6",
|
| 266 |
+
});
|
| 267 |
+
|
| 268 |
+
const h = document.createElement("div");
|
| 269 |
+
h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
|
| 270 |
+
h.textContent = TITLE;
|
| 271 |
+
_overlay.appendChild(h);
|
| 272 |
+
|
| 273 |
+
const sub = document.createElement("div");
|
| 274 |
+
sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
|
| 275 |
+
sub.innerHTML =
|
| 276 |
+
'A decoding stream accumulates a KV cache entry per token. <b>H2O</b> (Heavy-Hitter Oracle) ' +
|
| 277 |
+
'keeps a bounded cache by retaining the top cumulative-attention-mass \u201cheavy hitters\u201d ' +
|
| 278 |
+
'plus a sliding recent <b>window</b>, instead of evicting purely by recency. HUD compares ' +
|
| 279 |
+
'H2O against a sliding-window-only baseline and the full-cache (no eviction) oracle. ' +
|
| 280 |
+
'Honesty label <b>MODELED</b> (deterministic simulation on a synthetic attention trace; NOT a ' +
|
| 281 |
+
'real KV cache or trained model). 0 runtime CDN.';
|
| 282 |
+
_overlay.appendChild(sub);
|
| 283 |
+
|
| 284 |
+
const brow = document.createElement("div");
|
| 285 |
+
brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
|
| 286 |
+
if (_badge && _badge.el) brow.appendChild(_badge.el);
|
| 287 |
+
_overlay.appendChild(brow);
|
| 288 |
+
|
| 289 |
+
const card = document.createElement("div");
|
| 290 |
+
card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
|
| 291 |
+
|
| 292 |
+
const chead = document.createElement("div");
|
| 293 |
+
chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
|
| 294 |
+
const dot = document.createElement("span");
|
| 295 |
+
dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
|
| 296 |
+
const nm = document.createElement("b");
|
| 297 |
+
nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
|
| 298 |
+
nm.textContent = "kv-cache h2o eviction";
|
| 299 |
+
chead.appendChild(dot); chead.appendChild(nm);
|
| 300 |
+
card.appendChild(chead);
|
| 301 |
+
|
| 302 |
+
const grid = document.createElement("div");
|
| 303 |
+
grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
|
| 304 |
+
|
| 305 |
+
function kpiRow(id, label) {
|
| 306 |
+
const r = document.createElement("div");
|
| 307 |
+
r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
|
| 308 |
+
const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
|
| 309 |
+
const v = document.createElement("b");
|
| 310 |
+
v.id = id;
|
| 311 |
+
v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
|
| 312 |
+
v.textContent = "\u2014";
|
| 313 |
+
_el[id] = v;
|
| 314 |
+
r.appendChild(l); r.appendChild(v); return r;
|
| 315 |
+
}
|
| 316 |
+
|
| 317 |
+
grid.appendChild(kpiRow("kv-seqlen", "seq_len (decoded tokens)"));
|
| 318 |
+
grid.appendChild(kpiRow("kv-capacity", "capacity (KV-cache slots)"));
|
| 319 |
+
grid.appendChild(kpiRow("kv-window", "window (recent tokens reserved)"));
|
| 320 |
+
grid.appendChild(kpiRow("kv-memratio", "memory_ratio (capacity/seq_len)"));
|
| 321 |
+
grid.appendChild(kpiRow("kv-h2o", "H2O mass_retained \u2014 MODELED"));
|
| 322 |
+
grid.appendChild(kpiRow("kv-sliding", "sliding-window mass_retained"));
|
| 323 |
+
grid.appendChild(kpiRow("kv-full", "full-cache mass_retained (oracle)"));
|
| 324 |
+
grid.appendChild(kpiRow("kv-gain", "H2O vs sliding gain"));
|
| 325 |
+
grid.appendChild(kpiRow("kv-evicted", "evicted_count"));
|
| 326 |
+
grid.appendChild(kpiRow("kv-label", "honesty label"));
|
| 327 |
+
card.appendChild(grid);
|
| 328 |
+
|
| 329 |
+
const fn = document.createElement("div");
|
| 330 |
+
fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
|
| 331 |
+
fn.textContent = "H2O \u2014 Zhang et al. arXiv:2306.14048 \u00b7 StreamingLLM \u2014 Xiao et al. arXiv:2309.17453. MODELED \u00b7 not claimed-as.";
|
| 332 |
+
card.appendChild(fn);
|
| 333 |
+
_overlay.appendChild(card);
|
| 334 |
+
|
| 335 |
+
const pl = document.createElement("button");
|
| 336 |
+
pl.textContent = "\u25d1 what this means";
|
| 337 |
+
pl.title = "Toggle plain-language explanation for investors & consumers.";
|
| 338 |
+
pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
|
| 339 |
+
pl.addEventListener("click", () => {
|
| 340 |
+
_plain = !_plain;
|
| 341 |
+
pl.style.background = _plain ? "#0f2a20" : "#08140f";
|
| 342 |
+
_applyPlain();
|
| 343 |
+
});
|
| 344 |
+
_overlay.appendChild(pl);
|
| 345 |
+
|
| 346 |
+
const pd = document.createElement("div");
|
| 347 |
+
pd.id = "kv-plain";
|
| 348 |
+
pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
|
| 349 |
+
_el["plain"] = pd;
|
| 350 |
+
_overlay.appendChild(pd);
|
| 351 |
+
|
| 352 |
+
(ctx.container || document.body).appendChild(_overlay);
|
| 353 |
+
_paintOverlay();
|
| 354 |
+
}
|
| 355 |
+
|
| 356 |
+
function _applyPlain() {
|
| 357 |
+
const pd = _el["plain"];
|
| 358 |
+
if (!pd) return;
|
| 359 |
+
pd.style.display = _plain ? "block" : "none";
|
| 360 |
+
if (!_plain) return;
|
| 361 |
+
const mem = S.memoryRatio != null ? (S.memoryRatio * 100).toFixed(1) + "%" : "loading\u2026";
|
| 362 |
+
const h2oPct = S.h2oMassRetained != null ? (S.h2oMassRetained * 100).toFixed(1) + "%" : "loading\u2026";
|
| 363 |
+
const slidPct = S.slidingMassRetained != null ? (S.slidingMassRetained * 100).toFixed(1) + "%" : "loading\u2026";
|
| 364 |
+
pd.innerHTML =
|
| 365 |
+
"<b>What this means:</b> A language model keeps a running \u201cnotebook\u201d (the KV cache) of " +
|
| 366 |
+
"every word it has generated so it can pay attention back to earlier words. That notebook grows " +
|
| 367 |
+
"forever unless something is thrown away. Here the notebook is capped at just <b>" + mem + "</b> " +
|
| 368 |
+
"of its full size. Throwing away only the OLDEST pages (sliding-window) keeps just <b>" + slidPct +
|
| 369 |
+
"</b> of the important information. The <b>H2O</b> approach instead keeps whichever pages turned " +
|
| 370 |
+
"out to matter most so far (the \u201cheavy hitters\u201d), plus the most recent few \u2014 and keeps " +
|
| 371 |
+
"<b>" + h2oPct + "</b> of the important information at the SAME notebook size. This view is a " +
|
| 372 |
+
"<b>MODELED</b> deterministic simulation of that keep/discard rule on a synthetic attention trace, " +
|
| 373 |
+
"not a run of a real trained model or KV cache.";
|
| 374 |
+
}
|
| 375 |
+
|
| 376 |
+
function _tok(s) {
|
| 377 |
+
if (s === "live") return null;
|
| 378 |
+
if (s === "missing") return "NO-LIVE-DATA";
|
| 379 |
+
if (s === "degraded") return "DEGRADED";
|
| 380 |
+
if (s === "error") return "OFFLINE";
|
| 381 |
+
return "\u2026";
|
| 382 |
+
}
|
| 383 |
+
|
| 384 |
+
function fx(v, d) { return typeof v === "number" ? v.toFixed(d) : "\u2014"; }
|
| 385 |
+
function pct(v, d) { return typeof v === "number" ? (v * 100).toFixed(d) + "%" : "\u2014"; }
|
| 386 |
+
function _set(id, v) { if (_el[id]) _el[id].textContent = v; }
|
| 387 |
+
|
| 388 |
+
function _paintOverlay() {
|
| 389 |
+
const t = _tok(S.state);
|
| 390 |
+
_set("kv-seqlen", t || (S.seqLen != null ? String(S.seqLen) : "\u2014"));
|
| 391 |
+
_set("kv-capacity", t || (S.capacity != null ? String(S.capacity) : "\u2014"));
|
| 392 |
+
_set("kv-window", t || (S.window != null ? String(S.window) : "\u2014"));
|
| 393 |
+
_set("kv-memratio", t || pct(S.memoryRatio, 2));
|
| 394 |
+
_set("kv-h2o", t || pct(S.h2oMassRetained, 2));
|
| 395 |
+
_set("kv-sliding", t || pct(S.slidingMassRetained, 2));
|
| 396 |
+
_set("kv-full", t || pct(S.fullMassRetained, 2));
|
| 397 |
+
_set("kv-gain", t || (S.h2oVsSlidingGain != null ? "+" + pct(S.h2oVsSlidingGain, 2) : "\u2014"));
|
| 398 |
+
_set("kv-evicted", t || (S.evictedCount != null ? String(S.evictedCount) : "\u2014"));
|
| 399 |
+
// honesty label verbatim — never upgraded
|
| 400 |
+
_set("kv-label", t || (S.label || "MODELED"));
|
| 401 |
+
if (_plain) _applyPlain();
|
| 402 |
+
}
|
| 403 |
+
|
| 404 |
+
// =============================================================================
|
| 405 |
+
// unmount — clean up everything; must not affect other organs
|
| 406 |
+
// =============================================================================
|
| 407 |
+
export function unmount() {
|
| 408 |
+
_polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
|
| 409 |
+
try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
|
| 410 |
+
try {
|
| 411 |
+
if (_group && _stage) {
|
| 412 |
+
_group.traverse((o) => {
|
| 413 |
+
if (o.geometry && o.geometry.dispose) o.geometry.dispose();
|
| 414 |
+
if (o.material) {
|
| 415 |
+
const ms = Array.isArray(o.material) ? o.material : [o.material];
|
| 416 |
+
ms.forEach((m) => { if (m.dispose) m.dispose(); });
|
| 417 |
+
}
|
| 418 |
+
});
|
| 419 |
+
_stage.scene.remove(_group);
|
| 420 |
+
}
|
| 421 |
+
} catch (_) {}
|
| 422 |
+
_group = _overlay = null;
|
| 423 |
+
_floor = null; _spine = null; _tokenMesh = []; _marker = null;
|
| 424 |
+
_el = {}; _badge = null; _plain = false; _frameReg = false;
|
| 425 |
+
_stage = _THREE = _ctx = null;
|
| 426 |
+
S.label = S.seqLen = S.capacity = S.window = S.memoryRatio = null;
|
| 427 |
+
S.h2oMassRetained = S.slidingMassRetained = S.fullMassRetained = null;
|
| 428 |
+
S.h2oVsSlidingGain = S.evictedCount = S.perToken = null;
|
| 429 |
+
S.state = "init";
|
| 430 |
+
}
|
| 431 |
+
|
| 432 |
+
export default { id: ID, title: TITLE, endpoints: [EP], mount, unmount };
|
static/3d/surfaces/mla.js
ADDED
|
@@ -0,0 +1,433 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// SPDX-License-Identifier: Apache-2.0
|
| 2 |
+
// © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
|
| 3 |
+
//
|
| 4 |
+
// surfaces/mla.js — MULTI-HEAD LATENT ATTENTION (MLA) low-rank joint KV-compression
|
| 5 |
+
// organ for the holographic frontier ring (DeepSeek-V2/V3-style). Renders the full,
|
| 6 |
+
// uncompressed KV cache as a TALL lattice-blue column and the compressed shared
|
| 7 |
+
// latent as a SHORT proof-teal column beside it — the height ratio between the two
|
| 8 |
+
// columns visualizes `compression_ratio` directly. A faint grey ghost column shows
|
| 9 |
+
// the up-projected RECONSTRUCTION overlaid on the full-KV column (its height/opacity
|
| 10 |
+
// wobble encodes `reconstruction_error`). A HUD shows compression_ratio +
|
| 11 |
+
// reconstruction_error read live from /api/killinchu/v1/mla/latent-compress. Honesty
|
| 12 |
+
// label "MODELED" is read VERBATIM from the JSON and displayed as-is; it is never
|
| 13 |
+
// upgraded.
|
| 14 |
+
//
|
| 15 |
+
// Surface export shape (mirrors ringattn.js / specdecode.js / testtime.js exactly):
|
| 16 |
+
// export default { id, title, endpoints, mount(ctx), unmount() }
|
| 17 |
+
// ctx = { stage, container, live, label, THREE, szl3d }
|
| 18 |
+
//
|
| 19 |
+
// DATA SHOWN (all from live endpoint):
|
| 20 |
+
// seq_len, n_heads, d_head, d_latent, mha_cache_size, mla_cache_size,
|
| 21 |
+
// compression_ratio, reconstruction_error
|
| 22 |
+
//
|
| 23 |
+
// LEADERS ADOPTED & CITED (clean-room; NOT claimed as SZL's own):
|
| 24 |
+
// DeepSeek-V2 (introduces Multi-Head Latent Attention / low-rank KV joint
|
| 25 |
+
// compression):
|
| 26 |
+
// DeepSeek-AI et al. 2024, arXiv:2405.04434
|
| 27 |
+
// https://arxiv.org/abs/2405.04434
|
| 28 |
+
// DeepSeek-V3 (adopts and validates MLA at larger scale):
|
| 29 |
+
// DeepSeek-AI et al. 2024, arXiv:2412.19437
|
| 30 |
+
// https://arxiv.org/abs/2412.19437
|
| 31 |
+
//
|
| 32 |
+
// HONESTY LABELS: MODELED (deterministic low-rank down/up-projection simulation of
|
| 33 |
+
// the MLA KV-compression idea; NOT trained weights; NEVER-CLAIMED-AS DeepSeek-V2
|
| 34 |
+
// or DeepSeek-V3). Read verbatim from JSON; never upgraded here.
|
| 35 |
+
// COLOURS: lattice-blue 0x5b8dee (full/uncompressed KV column), proof-teal 0x3af4c8
|
| 36 |
+
// (compressed latent column / HUD accent), greys (reconstruction ghost / degraded
|
| 37 |
+
// state). Purple BANNED as UI/background.
|
| 38 |
+
// 0 RUNTIME CDN. Vendored three.js r170 via page importmap.
|
| 39 |
+
// DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
|
| 40 |
+
// Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
|
| 41 |
+
|
| 42 |
+
const ID = "mla";
|
| 43 |
+
const TITLE = "Multi-Head Latent Attention · KV-Compression Simulator (live)";
|
| 44 |
+
|
| 45 |
+
// Endpoint is hosted on the dedicated killinchu Space (isolated compute), reached
|
| 46 |
+
// cross-origin (killinchu returns access-control-allow-origin: https://a-11-oy.com).
|
| 47 |
+
// This keeps the MLA organ's rebuilds/faults isolated from the flagship.
|
| 48 |
+
const EP = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/mla/latent-compress?seed=42&seq_len=128&n_heads=8&d_head=64&d_latent=128";
|
| 49 |
+
|
| 50 |
+
// data-viz hues — purple BANNED
|
| 51 |
+
const C_FULL = 0x5b8dee; // lattice-blue (full/uncompressed KV column)
|
| 52 |
+
const C_LATENT = 0x3af4c8; // proof-teal (compressed latent column / HUD accent)
|
| 53 |
+
const C_GHOST = 0x8a9099; // grey (reconstruction ghost overlay)
|
| 54 |
+
const C_DIM = 0x42505d; // grey (degraded / no-live-data)
|
| 55 |
+
const C_GRID = 0x1b3a44; // floor / link colour
|
| 56 |
+
|
| 57 |
+
// column layout geometry
|
| 58 |
+
const COL_HALF_W = 0.55; // column half-width/depth (box footprint)
|
| 59 |
+
const COL_GAP = 2.4; // world-units between the full-KV and latent columns
|
| 60 |
+
const MAX_FULL_H = 8.0; // world-units — height of the full-KV column at scale=1
|
| 61 |
+
const MIN_LATENT_H = 0.15; // world-units — floor height so the latent column never vanishes
|
| 62 |
+
|
| 63 |
+
let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
|
| 64 |
+
let _frameReg = false, _polls = [], _el = {}, _badge = null;
|
| 65 |
+
let _plain = false;
|
| 66 |
+
|
| 67 |
+
// geometry handles
|
| 68 |
+
let _floor = null;
|
| 69 |
+
let _fullCol = null; // THREE.Mesh — full/uncompressed KV column (lattice-blue)
|
| 70 |
+
let _latentCol = null; // THREE.Mesh — compressed latent column (proof-teal)
|
| 71 |
+
let _ghostCol = null; // THREE.Mesh — reconstruction ghost, overlaid on the full column
|
| 72 |
+
let _linkLine = null; // THREE.Line — connecting line between the two columns
|
| 73 |
+
let _fullTargetH = 0.4;
|
| 74 |
+
let _latentTargetH = 0.4;
|
| 75 |
+
let _ghostTargetH = 0.4;
|
| 76 |
+
|
| 77 |
+
// live state
|
| 78 |
+
const S = {
|
| 79 |
+
label: null,
|
| 80 |
+
seqLen: null, // seq_len
|
| 81 |
+
nHeads: null, // n_heads
|
| 82 |
+
dHead: null, // d_head
|
| 83 |
+
dLatent: null, // d_latent
|
| 84 |
+
mhaCache: null, // mha_cache_size
|
| 85 |
+
mlaCache: null, // mla_cache_size
|
| 86 |
+
ratio: null, // compression_ratio
|
| 87 |
+
reconErr: null, // reconstruction_error
|
| 88 |
+
state: "init",
|
| 89 |
+
};
|
| 90 |
+
|
| 91 |
+
// =============================================================================
|
| 92 |
+
// mount(ctx)
|
| 93 |
+
// =============================================================================
|
| 94 |
+
export function mount(ctx) {
|
| 95 |
+
_ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE;
|
| 96 |
+
_group = new _THREE.Group();
|
| 97 |
+
_stage.scene.add(_group);
|
| 98 |
+
_stage.camera.position.set(6, 6, 14);
|
| 99 |
+
try { if (_stage.controls && _stage.controls.target) { _stage.controls.target.set(1, 2, 0); _stage.controls.update(); } } catch (_) {}
|
| 100 |
+
try { _stage.setBloom(true); } catch (_) {}
|
| 101 |
+
|
| 102 |
+
_buildFloor();
|
| 103 |
+
_buildColumns();
|
| 104 |
+
|
| 105 |
+
if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; }
|
| 106 |
+
|
| 107 |
+
_badge = ctx.live.createBadge();
|
| 108 |
+
_polls.push(ctx.live.poll(EP, 5000, _onMla, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
|
| 109 |
+
|
| 110 |
+
_buildOverlay();
|
| 111 |
+
return { id: ID, started: true };
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
+
// =============================================================================
|
| 115 |
+
// builders
|
| 116 |
+
// =============================================================================
|
| 117 |
+
function _buildFloor() {
|
| 118 |
+
const THREE = _THREE;
|
| 119 |
+
const grid = new THREE.GridHelper(40, 40, C_GRID, 0x0f2027);
|
| 120 |
+
grid.material.opacity = 0.18; grid.material.transparent = true; grid.position.y = -0.01;
|
| 121 |
+
_group.add(grid);
|
| 122 |
+
_floor = grid;
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
// Two box columns side-by-side: full/uncompressed KV (tall, lattice-blue) and
|
| 126 |
+
// compressed latent (short, proof-teal), plus a faint grey ghost box overlaid
|
| 127 |
+
// on the full-KV column showing the up-projected reconstruction. We scale
|
| 128 |
+
// each column's Y-scale in-place (no per-poll geometry churn) with its base
|
| 129 |
+
// centered at y=0 via geometry translation, so scaling grows it upward.
|
| 130 |
+
function _buildColumns() {
|
| 131 |
+
const THREE = _THREE;
|
| 132 |
+
|
| 133 |
+
const boxGeo = new THREE.BoxGeometry(COL_HALF_W * 2, 1, COL_HALF_W * 2);
|
| 134 |
+
boxGeo.translate(0, 0.5, 0); // base sits at y=0; scaling Y grows upward
|
| 135 |
+
|
| 136 |
+
_fullCol = new THREE.Mesh(
|
| 137 |
+
boxGeo,
|
| 138 |
+
new THREE.MeshStandardMaterial({ color: C_FULL, emissive: C_FULL, emissiveIntensity: 0.28, transparent: true, opacity: 0.85 }),
|
| 139 |
+
);
|
| 140 |
+
_fullCol.position.set(-COL_GAP / 2, 0, 0);
|
| 141 |
+
_fullCol.scale.set(1, MIN_LATENT_H, 1);
|
| 142 |
+
_group.add(_fullCol);
|
| 143 |
+
|
| 144 |
+
// ghost reconstruction: same footprint as the full column, slightly larger
|
| 145 |
+
// to read as an "aura", faint grey wireframe-ish translucency.
|
| 146 |
+
const ghostGeo = new THREE.BoxGeometry(COL_HALF_W * 2.22, 1, COL_HALF_W * 2.22);
|
| 147 |
+
ghostGeo.translate(0, 0.5, 0);
|
| 148 |
+
_ghostCol = new THREE.Mesh(
|
| 149 |
+
ghostGeo,
|
| 150 |
+
new THREE.MeshStandardMaterial({ color: C_GHOST, emissive: C_GHOST, emissiveIntensity: 0.12, transparent: true, opacity: 0.22, wireframe: true }),
|
| 151 |
+
);
|
| 152 |
+
_ghostCol.position.set(-COL_GAP / 2, 0, 0);
|
| 153 |
+
_ghostCol.scale.set(1, MIN_LATENT_H, 1);
|
| 154 |
+
_group.add(_ghostCol);
|
| 155 |
+
|
| 156 |
+
_latentCol = new THREE.Mesh(
|
| 157 |
+
boxGeo,
|
| 158 |
+
new THREE.MeshStandardMaterial({ color: C_LATENT, emissive: C_LATENT, emissiveIntensity: 0.4, transparent: true, opacity: 0.92 }),
|
| 159 |
+
);
|
| 160 |
+
_latentCol.position.set(COL_GAP / 2, 0, 0);
|
| 161 |
+
_latentCol.scale.set(1, MIN_LATENT_H, 1);
|
| 162 |
+
_group.add(_latentCol);
|
| 163 |
+
|
| 164 |
+
// connecting line from the top of the full column down to the top of the
|
| 165 |
+
// latent column — a visual "compression funnel" cue.
|
| 166 |
+
const linkGeo = new THREE.BufferGeometry().setFromPoints([
|
| 167 |
+
new THREE.Vector3(-COL_GAP / 2, MIN_LATENT_H, 0),
|
| 168 |
+
new THREE.Vector3(COL_GAP / 2, MIN_LATENT_H, 0),
|
| 169 |
+
]);
|
| 170 |
+
const linkMat = new THREE.LineBasicMaterial({ color: C_GRID, transparent: true, opacity: 0.35 });
|
| 171 |
+
_linkLine = new THREE.Line(linkGeo, linkMat);
|
| 172 |
+
_group.add(_linkLine);
|
| 173 |
+
}
|
| 174 |
+
|
| 175 |
+
// =============================================================================
|
| 176 |
+
// live data handler
|
| 177 |
+
// =============================================================================
|
| 178 |
+
function _onMla(j) {
|
| 179 |
+
// read honesty label VERBATIM — never upgrade
|
| 180 |
+
S.label = (j.label || "MODELED").toUpperCase();
|
| 181 |
+
S.seqLen = typeof j.seq_len === "number" ? j.seq_len : null;
|
| 182 |
+
S.nHeads = typeof j.n_heads === "number" ? j.n_heads : null;
|
| 183 |
+
S.dHead = typeof j.d_head === "number" ? j.d_head : null;
|
| 184 |
+
S.dLatent = typeof j.d_latent === "number" ? j.d_latent : null;
|
| 185 |
+
S.mhaCache = typeof j.mha_cache_size === "number" ? j.mha_cache_size : null;
|
| 186 |
+
S.mlaCache = typeof j.mla_cache_size === "number" ? j.mla_cache_size : null;
|
| 187 |
+
S.ratio = typeof j.compression_ratio === "number" ? j.compression_ratio : null;
|
| 188 |
+
S.reconErr = typeof j.reconstruction_error === "number" ? j.reconstruction_error : null;
|
| 189 |
+
|
| 190 |
+
_updateColumns();
|
| 191 |
+
_paintOverlay();
|
| 192 |
+
}
|
| 193 |
+
|
| 194 |
+
// =============================================================================
|
| 195 |
+
// geometry updater — drives the two columns + ghost from live data
|
| 196 |
+
// =============================================================================
|
| 197 |
+
function _updateColumns() {
|
| 198 |
+
const live = S.state === "live";
|
| 199 |
+
|
| 200 |
+
// Full-KV column height is fixed at MAX_FULL_H when live (it's the
|
| 201 |
+
// reference/baseline). Latent column height is MAX_FULL_H / compression_ratio
|
| 202 |
+
// — directly visualizing how much smaller the compressed cache is.
|
| 203 |
+
_fullTargetH = live ? MAX_FULL_H : MIN_LATENT_H;
|
| 204 |
+
_latentTargetH = live && S.ratio ? Math.max(MIN_LATENT_H, MAX_FULL_H / S.ratio) : MIN_LATENT_H;
|
| 205 |
+
// Ghost height wobbles around the full column's height, offset by a
|
| 206 |
+
// normalized reconstruction-error term so a larger error reads as a more
|
| 207 |
+
// visibly mismatched (taller/shorter) ghost silhouette.
|
| 208 |
+
const errNorm = live && S.reconErr != null ? Math.min(1.0, S.reconErr / 40.0) : 0;
|
| 209 |
+
_ghostTargetH = live ? MAX_FULL_H * (1.0 + 0.18 * errNorm) : MIN_LATENT_H;
|
| 210 |
+
|
| 211 |
+
const fullColor = live ? C_FULL : C_DIM;
|
| 212 |
+
_fullCol.material.color.setHex(fullColor);
|
| 213 |
+
_fullCol.material.emissive.setHex(fullColor);
|
| 214 |
+
_fullCol.material.opacity = live ? 0.85 : 0.2;
|
| 215 |
+
|
| 216 |
+
const latentColor = live ? C_LATENT : C_DIM;
|
| 217 |
+
_latentCol.material.color.setHex(latentColor);
|
| 218 |
+
_latentCol.material.emissive.setHex(latentColor);
|
| 219 |
+
_latentCol.material.opacity = live ? 0.92 : 0.2;
|
| 220 |
+
|
| 221 |
+
_ghostCol.material.opacity = live ? Math.min(0.4, 0.15 + 0.5 * errNorm) : 0.06;
|
| 222 |
+
|
| 223 |
+
if (_linkLine) {
|
| 224 |
+
_linkLine.material.color.setHex(live ? C_GRID : C_DIM);
|
| 225 |
+
_linkLine.material.opacity = live ? 0.35 : 0.1;
|
| 226 |
+
}
|
| 227 |
+
}
|
| 228 |
+
|
| 229 |
+
// =============================================================================
|
| 230 |
+
// per-frame animation — smooth column height easing + gentle rotation
|
| 231 |
+
// =============================================================================
|
| 232 |
+
function _onFrame() {
|
| 233 |
+
const t = performance.now();
|
| 234 |
+
if (_group) _group.rotation.y = Math.sin(t * 0.00007) * 0.10;
|
| 235 |
+
|
| 236 |
+
const ease = 0.08;
|
| 237 |
+
if (_fullCol) {
|
| 238 |
+
_fullCol.scale.y += (_fullTargetH - _fullCol.scale.y) * ease;
|
| 239 |
+
}
|
| 240 |
+
if (_latentCol) {
|
| 241 |
+
_latentCol.scale.y += (_latentTargetH - _latentCol.scale.y) * ease;
|
| 242 |
+
// gentle pulse on the compressed column to draw the eye to the "win"
|
| 243 |
+
const pulse = 1.0 + 0.03 * Math.sin(t * 0.005);
|
| 244 |
+
_latentCol.scale.x = pulse; _latentCol.scale.z = pulse;
|
| 245 |
+
}
|
| 246 |
+
if (_ghostCol) {
|
| 247 |
+
_ghostCol.scale.y += (_ghostTargetH - _ghostCol.scale.y) * ease;
|
| 248 |
+
}
|
| 249 |
+
if (_linkLine && _fullCol && _latentCol) {
|
| 250 |
+
const pts = [
|
| 251 |
+
new _THREE.Vector3(-COL_GAP / 2, _fullCol.scale.y, 0),
|
| 252 |
+
new _THREE.Vector3(COL_GAP / 2, _latentCol.scale.y, 0),
|
| 253 |
+
];
|
| 254 |
+
_linkLine.geometry.setFromPoints(pts);
|
| 255 |
+
}
|
| 256 |
+
}
|
| 257 |
+
|
| 258 |
+
// =============================================================================
|
| 259 |
+
// overlay
|
| 260 |
+
// =============================================================================
|
| 261 |
+
function _buildOverlay() {
|
| 262 |
+
const ctx = _ctx;
|
| 263 |
+
_overlay = document.createElement("div");
|
| 264 |
+
Object.assign(_overlay.style, {
|
| 265 |
+
position: "absolute", left: "14px", top: "14px", zIndex: "6",
|
| 266 |
+
display: "flex", flexDirection: "column", gap: "8px",
|
| 267 |
+
maxWidth: "min(94%,440px)",
|
| 268 |
+
font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
|
| 269 |
+
color: "#eef3f6",
|
| 270 |
+
});
|
| 271 |
+
|
| 272 |
+
const h = document.createElement("div");
|
| 273 |
+
h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
|
| 274 |
+
h.textContent = TITLE;
|
| 275 |
+
_overlay.appendChild(h);
|
| 276 |
+
|
| 277 |
+
const sub = document.createElement("div");
|
| 278 |
+
sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
|
| 279 |
+
sub.innerHTML =
|
| 280 |
+
'Per-token Key/Value vectors across all heads are jointly <b>down-projected</b> to a ' +
|
| 281 |
+
'shared low-rank <b>latent</b> vector (only this gets cached), then <b>up-projected</b> ' +
|
| 282 |
+
'back on demand. The tall <b>lattice-blue</b> column is the full/uncompressed KV cache; ' +
|
| 283 |
+
'the short <b>proof-teal</b> column is the compressed latent cache; the faint grey ghost ' +
|
| 284 |
+
'shows the reconstruction. Honesty label <b>MODELED</b> (deterministic low-rank ' +
|
| 285 |
+
'down/up-projection simulation; NOT trained DeepSeek weights). 0 runtime CDN.';
|
| 286 |
+
_overlay.appendChild(sub);
|
| 287 |
+
|
| 288 |
+
const brow = document.createElement("div");
|
| 289 |
+
brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
|
| 290 |
+
if (_badge && _badge.el) brow.appendChild(_badge.el);
|
| 291 |
+
_overlay.appendChild(brow);
|
| 292 |
+
|
| 293 |
+
const card = document.createElement("div");
|
| 294 |
+
card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
|
| 295 |
+
|
| 296 |
+
const chead = document.createElement("div");
|
| 297 |
+
chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
|
| 298 |
+
const dot = document.createElement("span");
|
| 299 |
+
dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
|
| 300 |
+
const nm = document.createElement("b");
|
| 301 |
+
nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
|
| 302 |
+
nm.textContent = "multi-head latent attention";
|
| 303 |
+
chead.appendChild(dot); chead.appendChild(nm);
|
| 304 |
+
card.appendChild(chead);
|
| 305 |
+
|
| 306 |
+
const grid = document.createElement("div");
|
| 307 |
+
grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
|
| 308 |
+
|
| 309 |
+
function kpiRow(id, label) {
|
| 310 |
+
const r = document.createElement("div");
|
| 311 |
+
r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
|
| 312 |
+
const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
|
| 313 |
+
const v = document.createElement("b");
|
| 314 |
+
v.id = id;
|
| 315 |
+
v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
|
| 316 |
+
v.textContent = "\u2014";
|
| 317 |
+
_el[id] = v;
|
| 318 |
+
r.appendChild(l); r.appendChild(v); return r;
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
grid.appendChild(kpiRow("mla-seqlen", "seq_len (positions)"));
|
| 322 |
+
grid.appendChild(kpiRow("mla-heads", "n_heads \u00d7 d_head"));
|
| 323 |
+
grid.appendChild(kpiRow("mla-dlatent", "d_latent (compressed width)"));
|
| 324 |
+
grid.appendChild(kpiRow("mla-mhacache","mha_cache_size (elements)"));
|
| 325 |
+
grid.appendChild(kpiRow("mla-mlacache","mla_cache_size (elements)"));
|
| 326 |
+
grid.appendChild(kpiRow("mla-ratio", "compression_ratio \u2014 MODELED"));
|
| 327 |
+
grid.appendChild(kpiRow("mla-err", "reconstruction_error (mean L2)"));
|
| 328 |
+
grid.appendChild(kpiRow("mla-label", "honesty label"));
|
| 329 |
+
card.appendChild(grid);
|
| 330 |
+
|
| 331 |
+
const fn = document.createElement("div");
|
| 332 |
+
fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
|
| 333 |
+
fn.textContent = "DeepSeek-V2 arXiv:2405.04434 (introduces MLA) \u00b7 DeepSeek-V3 arXiv:2412.19437 (adopts MLA). MODELED \u00b7 not claimed-as.";
|
| 334 |
+
card.appendChild(fn);
|
| 335 |
+
_overlay.appendChild(card);
|
| 336 |
+
|
| 337 |
+
const pl = document.createElement("button");
|
| 338 |
+
pl.textContent = "\u25d1 what this means";
|
| 339 |
+
pl.title = "Toggle plain-language explanation for investors & consumers.";
|
| 340 |
+
pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
|
| 341 |
+
pl.addEventListener("click", () => {
|
| 342 |
+
_plain = !_plain;
|
| 343 |
+
pl.style.background = _plain ? "#0f2a20" : "#08140f";
|
| 344 |
+
_applyPlain();
|
| 345 |
+
});
|
| 346 |
+
_overlay.appendChild(pl);
|
| 347 |
+
|
| 348 |
+
const pd = document.createElement("div");
|
| 349 |
+
pd.id = "mla-plain";
|
| 350 |
+
pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
|
| 351 |
+
_el["plain"] = pd;
|
| 352 |
+
_overlay.appendChild(pd);
|
| 353 |
+
|
| 354 |
+
(ctx.container || document.body).appendChild(_overlay);
|
| 355 |
+
_paintOverlay();
|
| 356 |
+
}
|
| 357 |
+
|
| 358 |
+
function _applyPlain() {
|
| 359 |
+
const pd = _el["plain"];
|
| 360 |
+
if (!pd) return;
|
| 361 |
+
pd.style.display = _plain ? "block" : "none";
|
| 362 |
+
if (!_plain) return;
|
| 363 |
+
const ratio = S.ratio != null ? S.ratio.toFixed(2) + "\u00d7" : "loading\u2026";
|
| 364 |
+
const err = S.reconErr != null ? S.reconErr.toFixed(3) : "loading\u2026";
|
| 365 |
+
const dl = S.dLatent != null ? String(S.dLatent) : "loading\u2026";
|
| 366 |
+
pd.innerHTML =
|
| 367 |
+
"<b>What this means:</b> Normally, a model must remember a separate \u201ckey\u201d and " +
|
| 368 |
+
"\u201cvalue\u201d vector for every attention head, for every word it has generated so far " +
|
| 369 |
+
"\u2014 this memory (the KV cache) grows huge for long conversations. <b>Multi-Head Latent " +
|
| 370 |
+
"Attention</b> instead squeezes all of a word's keys/values into ONE small shared " +
|
| 371 |
+
"summary vector (width <b>" + dl + "</b>) before caching it, then unpacks that summary " +
|
| 372 |
+
"back out when needed. Here, that squeeze-then-unpack trick shrinks the cache by " +
|
| 373 |
+
"<b>" + ratio + "</b> \u2014 at the cost of a small, measurable reconstruction mismatch " +
|
| 374 |
+
"(<b>" + err + "</b> average error) since a random squeeze loses some detail. In real " +
|
| 375 |
+
"DeepSeek-V2/V3 models, that squeeze is <i>trained</i> to keep the mismatch tiny; this " +
|
| 376 |
+
"view uses an untrained, deterministic squeeze to demonstrate the compression math " +
|
| 377 |
+
"honestly \u2014 it is a <b>MODELED</b> simulation, not a run of DeepSeek's actual model.";
|
| 378 |
+
}
|
| 379 |
+
|
| 380 |
+
function _tok(s) {
|
| 381 |
+
if (s === "live") return null;
|
| 382 |
+
if (s === "missing") return "NO-LIVE-DATA";
|
| 383 |
+
if (s === "degraded") return "DEGRADED";
|
| 384 |
+
if (s === "error") return "OFFLINE";
|
| 385 |
+
return "\u2026";
|
| 386 |
+
}
|
| 387 |
+
|
| 388 |
+
function fx(v, d) { return typeof v === "number" ? v.toFixed(d) : "\u2014"; }
|
| 389 |
+
function _set(id, v) { if (_el[id]) _el[id].textContent = v; }
|
| 390 |
+
|
| 391 |
+
function _paintOverlay() {
|
| 392 |
+
const t = _tok(S.state);
|
| 393 |
+
_set("mla-seqlen", t || (S.seqLen != null ? S.seqLen.toLocaleString() : "\u2014"));
|
| 394 |
+
_set("mla-heads", t || (S.nHeads != null && S.dHead != null ? (S.nHeads + " \u00d7 " + S.dHead) : "\u2014"));
|
| 395 |
+
_set("mla-dlatent", t || (S.dLatent != null ? String(S.dLatent) : "\u2014"));
|
| 396 |
+
_set("mla-mhacache", t || (S.mhaCache != null ? S.mhaCache.toLocaleString() : "\u2014"));
|
| 397 |
+
_set("mla-mlacache", t || (S.mlaCache != null ? S.mlaCache.toLocaleString() : "\u2014"));
|
| 398 |
+
_set("mla-ratio", t || (S.ratio != null ? S.ratio.toFixed(3) + "\u00d7" : "\u2014"));
|
| 399 |
+
_set("mla-err", t || fx(S.reconErr, 4));
|
| 400 |
+
// honesty label verbatim — never upgraded
|
| 401 |
+
_set("mla-label", t || (S.label || "MODELED"));
|
| 402 |
+
if (_plain) _applyPlain();
|
| 403 |
+
}
|
| 404 |
+
|
| 405 |
+
// =============================================================================
|
| 406 |
+
// unmount — clean up everything; must not affect other organs
|
| 407 |
+
// =============================================================================
|
| 408 |
+
export function unmount() {
|
| 409 |
+
_polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
|
| 410 |
+
try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
|
| 411 |
+
try {
|
| 412 |
+
if (_group && _stage) {
|
| 413 |
+
_group.traverse((o) => {
|
| 414 |
+
if (o.geometry && o.geometry.dispose) o.geometry.dispose();
|
| 415 |
+
if (o.material) {
|
| 416 |
+
const ms = Array.isArray(o.material) ? o.material : [o.material];
|
| 417 |
+
ms.forEach((m) => { if (m.dispose) m.dispose(); });
|
| 418 |
+
}
|
| 419 |
+
});
|
| 420 |
+
_stage.scene.remove(_group);
|
| 421 |
+
}
|
| 422 |
+
} catch (_) {}
|
| 423 |
+
_group = _overlay = null;
|
| 424 |
+
_floor = null; _fullCol = null; _latentCol = null; _ghostCol = null; _linkLine = null;
|
| 425 |
+
_fullTargetH = 0.4; _latentTargetH = 0.4; _ghostTargetH = 0.4;
|
| 426 |
+
_el = {}; _badge = null; _plain = false; _frameReg = false;
|
| 427 |
+
_stage = _THREE = _ctx = null;
|
| 428 |
+
S.label = S.seqLen = S.nHeads = S.dHead = S.dLatent = null;
|
| 429 |
+
S.mhaCache = S.mlaCache = S.ratio = S.reconErr = null;
|
| 430 |
+
S.state = "init";
|
| 431 |
+
}
|
| 432 |
+
|
| 433 |
+
export default { id: ID, title: TITLE, endpoints: [EP], mount, unmount };
|