// SPDX-License-Identifier: Apache-2.0 // © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11 // // surfaces/genie.js — GENERATIVE / INTERACTIVE LATENT-ACTION WORLD-MODEL organ for the // holographic frontier ring, inspired by (clean-room, not a reproduction of) Google // DeepMind's Genie / Genie 2 / Genie 3 generative interactive world models. // // DISTINCT FROM worldmodel.js: that surface renders a PREDICTOR's latent trajectory — // two static-ish paths (observed vs predicted) with a "surprise" gap between them. THIS // surface instead renders a GENERATED, EVOLVING NxN GRID-WORLD — a lattice of cells that // visibly changes shape/colour every time a new latent action code is applied, i.e. a // *playable* rollout being generated frame-by-frame, not a predicted path being scored. // There is no "observed vs predicted" comparison here at all — only forward generation. // // Renders the live /api/killinchu/v1/genie/rollout snapshot as an NxN plane of cubes // (the generated grid-world state) that steps forward through the rollout's // generated_states[] on a timer, each step driven by the next latent action_code in the // sequence. A HUD shows the action-code sequence + coherence score. Honesty label // "MODELED" is read VERBATIM from the JSON and displayed as-is; it is never upgraded. // // Surface export shape (mirrors interpretability.js / worldmodel.js exactly): // export default { id, title, endpoints, mount(ctx), unmount() } // ctx = { stage, container, live, label, THREE, szl3d } // // DATA SHOWN (all from live endpoint): // grid_size, n_latent_actions, rollout_horizon — rollout shape // action_codes[] — the latent-action-code sequence applied // latent_action_codebook[] — clustered latent-action centroids (dx,dy,dstate) // generated_states[] — per-step {mean, active_cells, delta_from_prev} // coherence_score — MODELED world-consistency analogue // // LEADERS ADOPTED & CITED (clean-room; NOT claimed as SZL's own): // Genie (v1): Bruce, Segar, Mnih et al. (2024) arXiv:2402.15391 // https://arxiv.org/abs/2402.15391 // Genie 2 (Google DeepMind blog): // https://deepmind.google/discover/blog/genie-2-a-large-scale-foundation-world-model/ // Genie 3 (Google DeepMind blog): // https://deepmind.google/discover/blog/genie-3-a-new-frontier-for-world-models/ // // HONESTY LABELS: MODELED (a toy simulation of the Genie COMPUTATION SHAPE; no video // tokenizer, no trained dynamics model, no learned latent-action model, no borrowed // weights). Read verbatim from JSON; never upgraded here. SZL does not claim parity // with any real Genie model. // COLOURS: lattice-blue 0x5b8dee (generated cell — low activation), violet-blue 0x8a6bff // (generated cell — high activation / most-recently-changed flash — data-viz only), // proof-teal 0x3af4c8 (coherence halo), greys for degraded/no-data. Purple BANNED. // 0 RUNTIME CDN. Vendored three.js r170 via page importmap. // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown. import { createShowcase } from "./_showcase.js"; const ID = "genie"; const TITLE = "Genie · Generative Latent-Action World (live)"; // Endpoint is hosted on the dedicated killinchu Space (isolated compute), reached // cross-origin (killinchu returns access-control-allow-origin: https://a-11-oy.com). // This keeps the genie organ's rebuilds/faults isolated from the flagship. const EP = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/genie/rollout?seed=42&grid=8&horizon=16&n_latent_actions=6"; // data-viz hues — purple BANNED const C_LO = 0x5b8dee; // lattice-blue (generated cell, low activation) const C_HI = 0x8a6bff; // violet-blue (generated cell, high activation / just-changed flash) const C_DIM = 0x42505d; // grey (degraded / no-live-data) const C_ACCENT = 0x3af4c8; // proof-teal accent (coherence halo) const C_GRID = 0x1b3a44; // floor / wire colour const MAX_GRID = 16; // visual cap on grid_size (endpoint clamps grid<=64; we tile at most 16x16 cells for perf) const CELL = 0.62; // world-unit spacing between generated cells const STEP_MS = 650; // ms between generated-rollout steps (one latent action applied per tick) let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null; let _frameReg = false, _polls = [], _el = {}, _badge = null; // geometry handles let _cells = []; // Array — one per generated grid cell (row-major) let _halo = null; // THREE.Mesh — coherence halo above the grid let _floor = null; // rollout playback state (steps through generated_states[] to visibly "play" the world) let _stepTimer = null; let _curStep = 0; // live state const S = { label: null, gridSize: null, nActions: null, horizon: null, actionCodes: null, // Array codebook: null, // Array<{code,dx,dy,dstate}> states: null, // Array<{step,action_code,mean,active_cells,delta_from_prev}> coherence: null, state: "init", }; // deterministic per-cell base pattern so the grid has visible structure even before the // first generated step lands (re-derived client-side from grid_size only — cosmetic). function _basePattern(n, r, c) { return 0.5 + 0.5 * Math.sin((r * 1.7 + c * 2.3)); } // ============================================================================= // mount(ctx) // ============================================================================= export function mount(ctx) { _ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE; _group = new _THREE.Group(); _stage.scene.add(_group); _stage.camera.position.set(0, 9, 16); try { if (_stage.controls && _stage.controls.target) { _stage.controls.target.set(0, 0, 0); _stage.controls.update(); } } catch (_) {} try { _stage.setBloom(true); } catch (_) {} _buildFloor(); _buildHalo(); if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; } _badge = ctx.live.createBadge(); _polls.push(ctx.live.poll(EP, 5000, _onRollout, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } })); _buildOverlay(); return { id: ID, started: true }; } // ============================================================================= // builders // ============================================================================= function _buildFloor() { const THREE = _THREE; const grid = new THREE.GridHelper(40, 40, C_GRID, 0x0f2027); grid.material.opacity = 0.18; grid.material.transparent = true; grid.position.y = -0.01; _group.add(grid); _floor = grid; } function _buildHalo() { const THREE = _THREE; // Coherence halo — a torus above the grid whose fullness/brightness tracks // coherence_score (higher = generated rollout stays more "on-manifold"). _halo = new THREE.Mesh( new THREE.TorusGeometry(3.2, 0.035, 10, 64), new THREE.MeshStandardMaterial({ color: C_ACCENT, emissive: C_ACCENT, emissiveIntensity: 0.35, transparent: true, opacity: 0.4 }), ); _halo.position.set(0, 3.4, 0); _halo.rotation.x = Math.PI / 2; _group.add(_halo); } function _disposeGrid() { _cells.forEach((m) => { if (m.geometry && m.geometry.dispose) m.geometry.dispose(); if (m.material && m.material.dispose) m.material.dispose(); if (_group) _group.remove(m); }); _cells = []; } // (re)build the NxN generated-grid-world lattice function _buildGrid(n) { const THREE = _THREE; _disposeGrid(); const dim = Math.min(n || 8, MAX_GRID); const geo = new THREE.BoxGeometry(CELL * 0.86, 0.2, CELL * 0.86); const offset = (dim - 1) / 2; for (let r = 0; r < dim; r++) { for (let c = 0; c < dim; c++) { const v = _basePattern(dim, r, c); const mat = new THREE.MeshStandardMaterial({ color: C_DIM, emissive: C_DIM, emissiveIntensity: 0.12, metalness: 0.2, roughness: 0.6, }); const mesh = new THREE.Mesh(geo, mat); mesh.position.set((c - offset) * CELL, 0, (r - offset) * CELL); mesh.userData.baseHeight = 0.2; mesh.userData.value = v; _group.add(mesh); _cells.push(mesh); } } } // ============================================================================= // live data handler // ============================================================================= function _onRollout(j) { // read honesty label VERBATIM — never upgrade S.label = (j.label || "MODELED").toUpperCase(); S.gridSize = typeof j.grid_size === "number" ? j.grid_size : null; S.nActions = typeof j.n_latent_actions === "number" ? j.n_latent_actions : null; S.horizon = typeof j.rollout_horizon === "number" ? j.rollout_horizon : null; S.actionCodes = Array.isArray(j.action_codes) ? j.action_codes : null; S.codebook = Array.isArray(j.latent_action_codebook) ? j.latent_action_codebook : null; S.states = Array.isArray(j.generated_states) ? j.generated_states : null; S.coherence = typeof j.coherence_score === "number" ? j.coherence_score : null; const dim = Math.min(S.gridSize || 8, MAX_GRID); if (_cells.length !== dim * dim) _buildGrid(dim); _curStep = 0; _startPlayback(); _updateHalo(); _paintOverlay(); } // ============================================================================= // rollout playback — visibly EVOLVE the grid one generated step at a time, // driven by the corresponding latent action_code (this is what makes the organ // "generative/interactive" rather than a static readout) // ============================================================================= function _startPlayback() { if (_stepTimer) { clearInterval(_stepTimer); _stepTimer = null; } if (!S.states || !S.states.length) return; _applyStep(0); _stepTimer = setInterval(() => { _curStep = (_curStep + 1) % S.states.length; _applyStep(_curStep); }, STEP_MS); } function _applyStep(i) { const live = S.state === "live"; const step = S.states && S.states[i]; const dim = Math.min(S.gridSize || 8, MAX_GRID); if (!step || !_cells.length) return; // Deterministically re-derive a per-cell activation for THIS step from the step's // scalar summary (mean/delta) + each cell's base pattern + which latent action code // is currently being applied — a light client-side visual analogue of the server's // generated lattice (full per-cell state is not shipped over the wire to keep the // payload small; the endpoint's generated_states[] gives the authoritative summary). const code = step.action_code != null ? step.action_code : 0; const codebookEntry = (S.codebook && S.codebook[code]) ? S.codebook[code] : { dx: 1, dy: 0, dstate: 0.5 }; const mean = typeof step.mean === "number" ? step.mean : 0.5; const delta = typeof step.delta_from_prev === "number" ? step.delta_from_prev : 0; _cells.forEach((mesh, idx) => { const r = Math.floor(idx / dim), c = idx % dim; const phase = (r * codebookEntry.dx + c * codebookEntry.dy) * 0.6 + i * 0.4; const v = live ? Math.max(0, Math.min(1, mean + 0.35 * Math.sin(phase) * codebookEntry.dstate)) : mesh.userData.value; mesh.userData.value = v; const col = v > 0.62 ? C_HI : C_LO; if (live) { mesh.material.color.setHex(col); mesh.material.emissive.setHex(col); mesh.material.emissiveIntensity = 0.15 + 0.75 * v; const h = 0.2 + v * 1.3; mesh.scale.set(1, h / mesh.userData.baseHeight, 1); mesh.position.y = (h - 0.2) / 2; } else { mesh.material.color.setHex(C_DIM); mesh.material.emissive.setHex(C_DIM); mesh.material.emissiveIntensity = 0.1; mesh.scale.set(1, 1, 1); mesh.position.y = 0; } }); _paintOverlay(delta); } // ============================================================================= // halo updater — driven by coherence_score // ============================================================================= function _updateHalo() { const live = S.state === "live"; if (!_halo) return; const coh = S.coherence != null ? S.coherence : 0.5; const col = live ? C_ACCENT : C_DIM; _halo.material.color.setHex(col); _halo.material.emissive.setHex(col); _halo.material.emissiveIntensity = live ? 0.2 + 0.6 * coh : 0.12; _halo.material.opacity = live ? 0.5 : 0.2; _halo.scale.setScalar(live ? (0.6 + coh) : 0.8); // fuller halo = higher generated-world coherence } // ============================================================================= // per-frame animation // ============================================================================= function _onFrame() { const t = performance.now(); if (_group) _group.rotation.y = Math.sin(t * 0.00009) * 0.15; if (_halo) _halo.rotation.z += 0.0035; } // ============================================================================= // overlay // ============================================================================= function _buildOverlay() { _show = createShowcase(_ctx, { id: ID, title: TITLE, accent: "#5b8dee", badge: _badge, chips: [{ label: "MODELED", text: "genie", name: "hl" }], legend: ["MODELED"], description: 'A small latent-action codebook is clustered from state deltas, then applied ' + 'step-by-step to GENERATE a brand-new grid-world \u2014 the grid you see evolving ' + 'below \u2014 rather than predicting a pre-recorded path. Honesty label MODELED ' + '(a toy simulation of the Genie-style computation shape \u2014 no trained dynamics model, ' + 'no video tokenizer, no borrowed weights). 0 runtime CDN.', citations: "Bruce, Segar, Mnih et al. arXiv:2402.15391 (Genie) \u00b7 deepmind.google Genie 2 blog \u00b7 deepmind.google Genie 3 blog. MODELED \u00b7 not claimed-as \u00b7 not claimed at parity.", plain: { html: _plainHtml }, }); _el["gn-grid"] = _show.addField("grid_size \u00d7 n_latent_actions"); _el["gn-step"] = _show.addField("step (action code applied)"); _el["gn-seq"] = _show.addField("action-code sequence"); _el["gn-coh"] = _show.addField("coherence score \u2014 MODELED"); _el["gn-label"] = _show.addField("honesty label"); _paintOverlay(); } function _plainHtml() { const coh = S.coherence != null ? (S.coherence * 100).toFixed(1) + "%" : "loading\u2026"; const na = S.nActions != null ? String(S.nActions) : "loading\u2026"; return ( "What this means: Instead of just watching and predicting a pre-recorded clip, " + "this organ generates a brand-new interactive world one step at a time \u2014 each " + "step conditioned on one of " + na + " discrete \u201clatent actions\u201d, the same " + "idea behind Google DeepMind's Genie models: learn a small action vocabulary with no " + "labels, then let you \u2018play\u2019 the generated world through it. The grid evolves live " + "as each action is applied, and it stays " + coh + " consistent with itself " + "step-to-step. " + "Plain: this is the shape of computation behind a playable AI-generated world \u2014 but " + "this view is a MODELED toy simulation of the technique, not a readout from any " + "trained Genie model or real video."); } function _tok(s) { if (s === "live") return null; if (s === "missing") return "NO-LIVE-DATA"; if (s === "degraded") return "DEGRADED"; if (s === "error") return "OFFLINE"; return "\u2026"; } function fx(v, d) { return typeof v === "number" ? v.toFixed(d) : "\u2014"; } function _set(id, v) { if (_el[id]) _el[id].textContent = v; } function _paintOverlay(latestDelta) { const t = _tok(S.state); _set("gn-grid", t || ((S.gridSize != null && S.nActions != null) ? (S.gridSize + "\u00d7" + S.gridSize + " \u00d7 " + S.nActions) : "\u2014")); const stepInfo = (S.states && S.states[_curStep]) ? S.states[_curStep] : null; _set("gn-step", t || (stepInfo ? ("#" + stepInfo.step + " code=" + stepInfo.action_code + " \u0394=" + fx(stepInfo.delta_from_prev, 4)) : "\u2014")); const seq = S.actionCodes ? S.actionCodes.slice(0, 12).join(",") + (S.actionCodes.length > 12 ? "\u2026" : "") : "\u2014"; _set("gn-seq", t || seq); _set("gn-coh", t || fx(S.coherence, 4)); // honesty label verbatim — never upgraded _set("gn-label", t || (S.label || "MODELED")); if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "genie" }); _show.refreshPlain(); } } // ============================================================================= // unmount — clean up everything; must not affect other organs // ============================================================================= export function unmount() { _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = []; if (_stepTimer) { clearInterval(_stepTimer); _stepTimer = null; } try { if (_show) _show.destroy(); } catch (_) {} try { if (_group && _stage) { _group.traverse((o) => { if (o.geometry && o.geometry.dispose) o.geometry.dispose(); if (o.material) { const ms = Array.isArray(o.material) ? o.material : [o.material]; ms.forEach((m) => { if (m.dispose) m.dispose(); }); } }); _stage.scene.remove(_group); } } catch (_) {} _group = _show = null; _cells = []; _halo = null; _floor = null; _el = {}; _badge = null; _frameReg = false; _stage = _THREE = _ctx = null; S.label = S.gridSize = S.nActions = S.horizon = null; S.actionCodes = S.codebook = S.states = S.coherence = null; S.state = "init"; _curStep = 0; } export default { id: ID, title: TITLE, endpoints: [EP], mount, unmount };