betterwithage Claude Opus 4.7 commited on
Commit
760376f
·
verified ·
1 Parent(s): 1d8d30d

deploy(hf): sync szl-holdings/a11oy@main derived COPY set

Browse files

Reusable 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 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 };