Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LarQL Vindex Viewer — Divinci AI</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { background: #050510; color: #e0e8ff; font-family: 'Courier New', monospace; overflow: hidden; } | |
| canvas { display: block; } | |
| /* ── Top UI bar ─────────────────────────────────────────────── */ | |
| #ui { | |
| position: absolute; top: 0; left: 0; right: 0; | |
| padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; | |
| background: linear-gradient(to bottom, rgba(5,5,16,0.95), transparent); | |
| pointer-events: none; z-index: 10; | |
| } | |
| #ui > * { pointer-events: all; } | |
| .logo { font-size: 11px; opacity: 0.5; letter-spacing: 0.12em; white-space: nowrap; } | |
| .logo span { color: #7b9fff; } | |
| select, button { | |
| background: rgba(20,24,60,0.9); border: 1px solid rgba(123,159,255,0.28); | |
| color: #e0e8ff; padding: 5px 10px; border-radius: 5px; font-size: 11px; | |
| cursor: pointer; outline: none; font-family: inherit; transition: border-color 0.15s; | |
| } | |
| select:hover, button:hover { border-color: rgba(123,159,255,0.65); } | |
| button.active { border-color: #7b9fff; background: rgba(40,55,130,0.9); color: #fff; } | |
| #hint { font-size: 10px; opacity: 0.35; } | |
| #search-input { | |
| background: rgba(20,24,60,0.9); border: 1px solid rgba(123,159,255,0.28); | |
| color: #e0e8ff; padding: 5px 10px; border-radius: 5px; font-size: 11px; | |
| width: 250px; font-family: inherit; outline: none; transition: border-color 0.15s; | |
| } | |
| #search-input:focus { border-color: #7b9fff; } | |
| #search-input::placeholder { color: rgba(224,232,255,0.3); } | |
| #search-status { font-size: 10px; opacity: 0.55; color: #ffd060; min-width: 110px; } | |
| /* ── Tier 1 info panel — always visible ─────────────────────── */ | |
| #info-panel { | |
| position: absolute; bottom: 16px; left: 16px; | |
| background: rgba(6,7,20,0.93); border: 1px solid rgba(123,159,255,0.2); | |
| border-radius: 10px; min-width: 240px; max-width: 280px; | |
| font-size: 11px; z-index: 10; overflow: hidden; | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.5); | |
| } | |
| .panel-tier1 { padding: 12px 14px 10px; } | |
| .model-title { | |
| font-size: 13px; font-weight: bold; letter-spacing: 0.04em; | |
| color: #e8f0ff; display: flex; justify-content: space-between; align-items: flex-start; | |
| gap: 8px; margin-bottom: 3px; | |
| } | |
| .hf-link { | |
| font-size: 9px; color: #7b9fff; text-decoration: none; opacity: 0.8; | |
| border: 1px solid rgba(123,159,255,0.25); border-radius: 3px; padding: 1px 5px; | |
| white-space: nowrap; flex-shrink: 0; | |
| } | |
| .hf-link:hover { opacity: 1; border-color: rgba(123,159,255,0.6); } | |
| .model-meta { font-size: 10px; opacity: 0.45; margin-bottom: 10px; letter-spacing: 0.02em; } | |
| .tier1-divider { border: none; border-top: 1px solid rgba(123,159,255,0.1); margin: 8px 0; } | |
| .c4-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } | |
| .c4-val { font-size: 15px; font-weight: bold; font-family: monospace; } | |
| .c4-val.good { color: #44ffaa; } | |
| .c4-val.warm { color: #ffcc44; } | |
| .c4-val.hot { color: #ff6644; } | |
| .c4-label { font-size: 9px; opacity: 0.5; } | |
| .c4-chip { | |
| margin-left: auto; font-size: 9px; padding: 2px 6px; border-radius: 10px; | |
| font-weight: bold; letter-spacing: 0.04em; | |
| } | |
| .chip-good { background: rgba(68,255,170,0.15); color: #44ffaa; border: 1px solid rgba(68,255,170,0.3); } | |
| .chip-warn { background: rgba(255,180,50,0.15); color: #ffcc44; border: 1px solid rgba(255,180,50,0.3); } | |
| .chip-alert { background: rgba(255,80,50,0.15); color: #ff6644; border: 1px solid rgba(255,80,50,0.3); } | |
| .chip-dead { background: rgba(255,40,40,0.18); color: #ff4444; border: 1px solid rgba(255,40,40,0.3); } | |
| .stage-bar-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } | |
| .stage-bar-label { font-size: 9px; opacity: 0.45; width: 60px; flex-shrink: 0; } | |
| .stage-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; } | |
| .stage-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; } | |
| .stage-bar-val { font-size: 9px; width: 28px; text-align: right; opacity: 0.7; } | |
| .gate3-row { | |
| display: flex; align-items: center; gap: 6px; | |
| margin-top: 7px; font-size: 10px; | |
| } | |
| .gate3-icon { font-size: 11px; } | |
| .anomaly-banner { | |
| margin: 8px 14px; padding: 6px 10px; | |
| background: rgba(255,100,50,0.1); border: 1px solid rgba(255,100,50,0.25); | |
| border-radius: 6px; font-size: 10px; color: #ffaa66; cursor: pointer; | |
| display: none; line-height: 1.5; | |
| } | |
| .anomaly-banner:hover { background: rgba(255,100,50,0.18); } | |
| /* ── Tier 2 — expandable metrics ───────────────────────────── */ | |
| .tier2-toggle { | |
| width: 100%; text-align: center; padding: 6px; font-size: 9px; | |
| letter-spacing: 0.1em; opacity: 0.4; cursor: pointer; border: none; | |
| background: rgba(123,159,255,0.04); border-top: 1px solid rgba(123,159,255,0.1); | |
| color: #e0e8ff; text-transform: uppercase; transition: opacity 0.15s, background 0.15s; | |
| } | |
| .tier2-toggle:hover { opacity: 0.75; background: rgba(123,159,255,0.08); } | |
| #tier2-metrics { display: none; padding: 10px 14px 12px; border-top: 1px solid rgba(123,159,255,0.08); } | |
| #tier2-metrics.open { display: block; } | |
| .m-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; } | |
| .m-name { font-size: 9px; opacity: 0.45; width: 64px; flex-shrink: 0; letter-spacing: 0.02em; } | |
| .m-bar-track { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; } | |
| .m-bar-fill { height: 100%; border-radius: 2px; } | |
| .m-val { font-size: 9px; width: 36px; text-align: right; font-family: monospace; } | |
| .m-val.good { color: #44ffaa; } | |
| .m-val.warn { color: #ffcc44; } | |
| .m-val.alert { color: #ff6644; } | |
| .m-val.dim { opacity: 0.35; } | |
| .shortid-row { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(123,159,255,0.08); | |
| font-size: 9px; | |
| } | |
| .shortid-val { font-family: monospace; opacity: 0.45; } | |
| .copy-btn { | |
| font-size: 9px; padding: 1px 6px; border-radius: 3px; cursor: pointer; | |
| border: 1px solid rgba(123,159,255,0.2); background: transparent; color: #7b9fff; | |
| } | |
| .copy-btn:hover { background: rgba(123,159,255,0.1); } | |
| /* ── Legend ──────────────────────────────────────────────────── */ | |
| #legend { | |
| position: absolute; bottom: 16px; right: 16px; | |
| background: rgba(6,7,20,0.93); border: 1px solid rgba(123,159,255,0.2); | |
| border-radius: 10px; padding: 12px 15px; font-size: 11px; line-height: 1.9; z-index: 10; | |
| } | |
| #legend h3 { font-size: 9px; letter-spacing: 0.14em; color: #7b9fff; margin-bottom: 6px; text-transform: uppercase; } | |
| .stage-row { display: flex; align-items: center; gap: 7px; } | |
| .stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } | |
| /* ── Compare panel ───────────────────────────────────────────── */ | |
| #compare-panel { | |
| position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); | |
| background: rgba(6,7,20,0.93); border: 1px solid rgba(123,159,255,0.2); | |
| border-radius: 10px; padding: 12px 16px; font-size: 11px; | |
| display: none; z-index: 10; white-space: nowrap; | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.5); | |
| } | |
| #compare-panel h3 { font-size: 9px; letter-spacing: 0.14em; color: #7b9fff; margin-bottom: 8px; text-transform: uppercase; } | |
| .cmp-row { display: flex; gap: 28px; } | |
| .cmp-col { display: flex; flex-direction: column; gap: 4px; min-width: 140px; } | |
| .cmp-title { font-size: 10px; font-weight: bold; color: #e8f0ff; margin-bottom: 2px; } | |
| .cmp-meta { font-size: 9px; opacity: 0.4; margin-bottom: 4px; } | |
| .cmp-metric { display: flex; justify-content: space-between; gap: 14px; font-size: 10px; } | |
| .cmp-val { font-family: monospace; } | |
| .cmp-val.good { color: #44ffaa; } | |
| .cmp-val.warn { color: #ffcc44; } | |
| .cmp-val.alert { color: #ff6644; } | |
| .cmp-divider { width: 1px; background: rgba(123,159,255,0.15); } | |
| /* ── Tooltip ─────────────────────────────────────────────────── */ | |
| #tooltip { | |
| position: absolute; display: none; pointer-events: none; | |
| background: rgba(8,10,32,0.97); border: 1px solid rgba(123,159,255,0.35); | |
| border-radius: 7px; padding: 8px 12px; font-size: 10px; line-height: 1.7; | |
| color: #c8d8ff; z-index: 20; max-width: 220px; | |
| } | |
| /* ── Demo overlay ────────────────────────────────────────────── */ | |
| #demo-overlay { | |
| position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); | |
| font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); | |
| text-align: center; z-index: 30; display: none; | |
| text-shadow: 0 2px 12px rgba(0,0,0,0.8); | |
| pointer-events: none; | |
| } | |
| #loading { | |
| position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); | |
| text-align: center; color: #7b9fff; z-index: 30; display: none; | |
| } | |
| .spinner { width: 32px; height: 32px; border: 2px solid rgba(123,159,255,0.15); border-top-color: #7b9fff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Top bar --> | |
| <div id="ui"> | |
| <div class="logo"><span>Divinci AI</span> · LarQL Vindex Viewer v2</div> | |
| <select id="model-select"> | |
| <option value="gemma-4-e2b">Gemma 4 E2B (2B) — 35L ✓</option> | |
| <option value="ministral-3b">Ministral-3B — 26L</option> | |
| <option value="medgemma-4b">MedGemma-1.5-4B — 34L ⚠️</option> | |
| <option value="qwen3-0.6b">Qwen3-0.6B — 28L</option> | |
| <option value="qwen3-8b" selected>Qwen3-8B — 36L</option> | |
| <option value="qwen3.6-35b">Qwen3.6-35B MoE — 40L</option> | |
| <option value="llama-3.1-8b">Llama-3.1-8B — 32L</option> | |
| <option value="gpt-oss-120b">GPT-OSS-120B MoE — 36L</option> | |
| <option value="bonsai-1bit">Bonsai b1.58-2B 1-bit 💀</option> | |
| </select> | |
| <button id="compare-btn" title="Compare current model vs Bonsai 1-bit dissolution">⇌ Compare</button> | |
| <button id="demo-btn" title="12-second scripted tour">▶ Demo</button> | |
| <button id="view-btn" title="Toggle between 3D cylinder and 2D circuit view">🔌 2D Circuit</button> | |
| <input id="search-input" type="search" placeholder="🔍 Search features (e.g. paris, capital, code)…" autocomplete="off" /> | |
| <span id="search-status"></span> | |
| <div id="hint">Click a feature · drag to orbit · scroll to zoom</div> | |
| </div> | |
| <!-- Tier 1 info panel --> | |
| <div id="info-panel"> | |
| <div class="panel-tier1"> | |
| <div class="model-title"> | |
| <span id="m-name">—</span> | |
| <a id="m-hf-link" class="hf-link" href="#" target="_blank" rel="noopener">↗ HF</a> | |
| </div> | |
| <div class="model-meta" id="m-meta">—</div> | |
| <hr class="tier1-divider"> | |
| <!-- C4 row --> | |
| <div class="c4-row"> | |
| <div> | |
| <div class="c4-val" id="m-c4-val">—</div> | |
| <div class="c4-label">C4 TEMPERATURE</div> | |
| </div> | |
| <div class="c4-chip" id="m-c4-chip">—</div> | |
| </div> | |
| <!-- Stage bar --> | |
| <div class="stage-bar-row"> | |
| <div class="stage-bar-label">CIRCUIT</div> | |
| <div class="stage-bar-track"><div class="stage-bar-fill" id="m-stage-fill" style="width:0%"></div></div> | |
| <div class="stage-bar-val" id="m-c5-val">—</div> | |
| </div> | |
| <!-- Gate 3 --> | |
| <div class="gate3-row"> | |
| <span class="gate3-icon" id="m-gate3-icon">○</span> | |
| <span id="m-gate3-label" style="opacity:0.5">Gate-3: —</span> | |
| </div> | |
| </div> | |
| <!-- Anomaly banner --> | |
| <div class="anomaly-banner" id="m-anomaly"></div> | |
| <!-- Tier 2 toggle --> | |
| <button class="tier2-toggle" id="tier2-btn">METRICS ▾</button> | |
| <!-- Tier 2 body --> | |
| <div id="tier2-metrics"> | |
| <div class="m-row"> | |
| <div class="m-name">C1 SPARSITY</div> | |
| <div class="m-bar-track"><div class="m-bar-fill" id="b-c1" style="width:0%;background:#44aaff"></div></div> | |
| <div class="m-val" id="v-c1">—</div> | |
| </div> | |
| <div class="m-row"> | |
| <div class="m-name">C2 TOP-8</div> | |
| <div class="m-bar-track"><div class="m-bar-fill" id="b-c2" style="width:0%;background:#44ffaa"></div></div> | |
| <div class="m-val" id="v-c2">—</div> | |
| </div> | |
| <div class="m-row"> | |
| <div class="m-name">C3 COHERENCE</div> | |
| <div class="m-bar-track"><div class="m-bar-fill" id="b-c3" style="width:0%;background:#7b9fff"></div></div> | |
| <div class="m-val" id="v-c3">—</div> | |
| </div> | |
| <div class="m-row"> | |
| <div class="m-name">C4 TEMP</div> | |
| <div class="m-bar-track"><div class="m-bar-fill" id="b-c4" style="width:0%;background:#ffaa44"></div></div> | |
| <div class="m-val" id="v-c4">—</div> | |
| </div> | |
| <div class="m-row"> | |
| <div class="m-name">SPECTRUM</div> | |
| <div class="m-bar-track"><div class="m-bar-fill" id="b-spec" style="width:0%;background:#a855f7"></div></div> | |
| <div class="m-val" id="v-spec">—</div> | |
| </div> | |
| <div class="shortid-row"> | |
| <div> | |
| <span style="opacity:0.35;font-size:9px">VINDEX ID </span> | |
| <span class="shortid-val" id="v-shortid">—</span> | |
| </div> | |
| <button class="copy-btn" id="copy-shortid">copy</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Legend --> | |
| <div id="legend"> | |
| <h3>Circuit Stages</h3> | |
| <div class="stage-row"><div class="stage-dot" style="background:#4466ff"></div>Broadcast (0%)</div> | |
| <div class="stage-row"><div class="stage-dot" style="background:#44aaff"></div>Domain (20-25%)</div> | |
| <div class="stage-row"><div class="stage-dot" style="background:#44ffaa"></div>Entity (45-55%)</div> | |
| <div class="stage-row"><div class="stage-dot" style="background:#ffaa44"></div>Prediction (90%+)</div> | |
| <div class="stage-row"><div class="stage-dot" style="background:#888"></div>Transition</div> | |
| <div class="stage-row" style="margin-top:5px"><div class="stage-dot" style="background:#ff4444"></div>Dissolved (1-bit)</div> | |
| </div> | |
| <!-- Compare panel --> | |
| <div id="compare-panel"> | |
| <h3>Circuit Comparison</h3> | |
| <div class="cmp-row"> | |
| <div class="cmp-col" id="cmp-a"></div> | |
| <div class="cmp-divider"></div> | |
| <div class="cmp-col" id="cmp-b"></div> | |
| </div> | |
| </div> | |
| <!-- Demo text overlay --> | |
| <div id="demo-overlay"></div> | |
| <div id="tooltip"></div> | |
| <div id="loading"><div class="spinner"></div><div>Loading…</div></div> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; | |
| import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; | |
| import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; | |
| import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; | |
| // ── Stage colors ─────────────────────────────────────────────── | |
| const STAGE_COLORS = [ | |
| new THREE.Color(0x4466ff), // broadcast | |
| new THREE.Color(0x44aaff), // domain | |
| new THREE.Color(0x44ffaa), // entity | |
| new THREE.Color(0xffaa44), // prediction | |
| new THREE.Color(0x888888), // transition | |
| new THREE.Color(0xff4444), // dissolved | |
| ]; | |
| const STAGE_NAMES = ['Broadcast','Domain','Entity','Prediction','Transition','Dissolved']; | |
| // ── Real Phase 1+2 measurements (April 2026) ────────────────── | |
| const VINDEX_DATA = { | |
| 'gemma-4-e2b': { | |
| name: 'Gemma 4 E2B', org: 'Google', params: '2B', precision: 'bf16', | |
| layers: 35, F: 128, | |
| c1: 0.061, c2: 0.938, c3: 0.801, c4: 0.041, c5: 4, c5max: 5, | |
| spectrum: 'power-law', spectrumScore: 0.92, | |
| shortId: 'gemma4e2b', hfRepo: 'Divinci-AI/gemma-4-e2b-vindex', | |
| gate3: 'PASS', gate3note: 'Paris→capital suppressed (18.1→absent)', | |
| finding: 'Confirms C4≈0.042 universal constant', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.20,.25,1],[.45,.55,2],[.90,1,3]], | |
| }, | |
| 'ministral-3b': { | |
| name: 'Ministral-3B', org: 'Mistral AI', params: '3B', precision: 'fp8→bf16', | |
| layers: 26, F: 128, | |
| c1: 0.236, c2: null, c3: 0.724, c4: 0.265, c5: 3, c5max: 5, | |
| spectrum: 'power-law', spectrumScore: 0.88, | |
| shortId: '00d28f96', hfRepo: 'Divinci-AI/ministral-3b-vindex', | |
| gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service', | |
| finding: 'C4 higher than expected (fp8 dequant on A100 compute 8.0). C2 N/A — multimodal lm_head absent.', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.20,.26,1],[.46,.54,2],[.88,1,3]], | |
| }, | |
| 'medgemma-4b': { | |
| name: 'MedGemma-1.5-4B', org: 'Google', params: '4B', precision: 'bf16', | |
| layers: 34, F: 128, | |
| c1: 0.181, c2: 0.795, c3: 0.800, c4: 1.898, c5: 2, c5max: 5, | |
| spectrum: 'power-law', spectrumScore: 0.78, | |
| shortId: '75eeb232', hfRepo: 'Divinci-AI/medgemma-1.5-4b-vindex', | |
| gate3: 'PENDING', gate3note: 'Gate-3 pending', | |
| finding: 'C4 anomaly: 1.898 — 45× cohort average. Hypothesis: text-only activation probe through multimodal vision encoder inflates temperature measurement.', | |
| anomaly: '⚠️ C4 = 1.898 — 45× cohort anomaly. Likely artifact of text-only probe through vision encoder. Under investigation.', | |
| anomalyType: 'warn', dissolved: false, | |
| stageBands: [[0,.04,0],[.20,.26,1],[.45,.54,2],[.90,1,3]], | |
| }, | |
| 'qwen3-0.6b': { | |
| name: 'Qwen3-0.6B', org: 'Alibaba Cloud', params: '0.6B', precision: 'bf16', | |
| layers: 28, F: 128, | |
| c1: 0.117, c2: 0.880, c3: 0.531, c4: 0.411, c5: 4, c5max: 5, | |
| spectrum: 'power-law', spectrumScore: 0.83, | |
| shortId: 'qwen306b', hfRepo: 'Divinci-AI/qwen3-0.6b-vindex', | |
| gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service', | |
| finding: 'Qwen3 family C4 elevation (10×). C3 coherence lower than larger Qwen3 models — scale matters for gate alignment.', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.21,.25,1],[.46,.54,2],[.90,1,3]], | |
| }, | |
| 'qwen3-8b': { | |
| name: 'Qwen3-8B', org: 'Alibaba Cloud', params: '8B', precision: 'bf16', | |
| layers: 36, F: 128, | |
| c1: 0.228, c2: 0.867, c3: 0.813, c4: 0.804, c5: 4, c5max: 5, | |
| spectrum: 'power-law', spectrumScore: 0.87, | |
| shortId: 'ea08e8e8', hfRepo: 'Divinci-AI/qwen3-8b-vindex', | |
| gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service', | |
| finding: 'Qwen3 family C4 elevation (19×) confirmed as architectural signature — same in bf16 as in 1-bit Bonsai. Four-stage circuit intact.', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.20,.25,1],[.45,.55,2],[.90,1,3]], | |
| }, | |
| 'qwen3.6-35b': { | |
| name: 'Qwen3.6-35B-A3B', org: 'Alibaba Cloud', params: '35B (3B active)', precision: 'bf16', | |
| layers: 40, F: 64, | |
| c1: null, c2: null, c3: null, c4: null, c5: null, c5max: 5, | |
| spectrum: 'var@64: 0.27–0.39', spectrumScore: 0.55, | |
| shortId: 'qwen3635b', hfRepo: 'Divinci-AI/qwen3.6-35b-a3b-vindex', | |
| gate3: 'N/A', gate3note: 'Phase 2 pending — MoE 256 experts', | |
| finding: 'Phase 1 complete. Phase 2 skipped — OOM on A100 with 256-expert MoE routing.', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.20,.26,1],[.46,.54,2],[.90,1,3]], | |
| }, | |
| 'llama-3.1-8b': { | |
| name: 'Llama 3.1-8B', org: 'Meta', params: '8B', precision: 'bf16', | |
| layers: 32, F: 128, | |
| c1: 0.387, c2: 0.491, c3: 0.808, c4: 0.012, c5: 2, c5max: 5, | |
| spectrum: 'power-law', spectrumScore: 0.86, | |
| shortId: 'c39fad08', hfRepo: 'Divinci-AI/llama-3.1-8b-vindex', | |
| gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service', | |
| finding: 'C4 = 0.012 — Llama family runs below the universal constant. C1 sparsity (0.387) highest of all measured models. Base model: C2 reflects unconditional next-token distribution.', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.22,.26,1],[.47,.55,2],[.90,1,3]], | |
| }, | |
| 'gpt-oss-120b': { | |
| name: 'GPT-OSS-120B', org: 'OpenAI', params: '120B', precision: 'MXFP4', | |
| layers: 36, F: 128, | |
| c1: null, c2: null, c3: null, c4: null, c5: null, c5max: 5, | |
| spectrum: 'S[0]=13,056 (117×)', spectrumScore: 0.72, | |
| shortId: '02d09974', hfRepo: 'Divinci-AI/gpt-oss-120b-vindex', | |
| gate3: 'N/A', gate3note: 'Uniform MoE routing — calibration required', | |
| finding: 'Phase 2 skipped (OOM). Dominant SV = 13,056 — 117× the 200th SV. Most extreme power-law spectrum in the cohort. MXFP4 quantization preserves structural hierarchy.', | |
| anomaly: null, dissolved: false, | |
| stageBands: [[0,.04,0],[.20,.25,1],[.45,.55,2],[.90,1,3]], | |
| }, | |
| 'bonsai-1bit': { | |
| name: 'Bonsai b1.58-2B', org: 'Microsoft', params: '2B', precision: '1-bit {-1,0,+1}', | |
| layers: 28, F: 128, | |
| c1: 0.223, c2: 0.375, c3: 0.534, c4: 0.429, c5: 1, c5max: 5, | |
| spectrum: 'flat (var@128=9.3%)', spectrumScore: 0.09, | |
| shortId: 'bonsai1b', hfRepo: null, | |
| gate3: 'N/A', gate3note: 'Ternary weights — Phase 1 redo pending', | |
| finding: 'C5 = 1: four-stage circuit completely dissolved. SV spectrum near-random (Marchenko-Pastur). C4 = 0.429 is Qwen3 architectural signature, not 1-bit effect. The 1-bit discriminators are C5 collapse + flat SV spectrum only.', | |
| anomaly: '💀 C5 = 1 — four-stage circuit dissolved. Weight SV spectrum is near-random. The model answers correctly, but its internals have no discernible structure.', | |
| anomalyType: 'dead', dissolved: true, | |
| stageBands: [], | |
| }, | |
| }; | |
| // ── Renderer ────────────────────────────────────────────────── | |
| const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); | |
| renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); | |
| renderer.setSize(innerWidth, innerHeight); | |
| renderer.toneMapping = THREE.ACESFilmicToneMapping; | |
| renderer.toneMappingExposure = 1.15; | |
| document.body.appendChild(renderer.domElement); | |
| const scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x050510); | |
| scene.fog = new THREE.FogExp2(0x050510, 0.012); | |
| const camera = new THREE.PerspectiveCamera(52, innerWidth / innerHeight, 0.1, 600); | |
| camera.position.set(0, 4, 26); | |
| const controls = new OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.06; | |
| controls.minDistance = 7; | |
| controls.maxDistance = 120; | |
| scene.add(new THREE.AmbientLight(0x334466, 2.8)); | |
| const dirLight = new THREE.DirectionalLight(0x7799ff, 1.6); | |
| dirLight.position.set(10, 20, 10); | |
| scene.add(dirLight); | |
| const composer = new EffectComposer(renderer); | |
| composer.addPass(new RenderPass(scene, camera)); | |
| const bloom = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.7, 0.4, 0.12); | |
| composer.addPass(bloom); | |
| // ── State ───────────────────────────────────────────────────── | |
| let groups = {}; | |
| let activeKeys = []; | |
| let walkLines = []; | |
| let selectedIdx = -1; | |
| let compareMode = false; | |
| let demoRunning = false; | |
| let viewMode = 'cylinder'; // 'cylinder' (3D) or 'flat' (2D circuit) | |
| let tier2Open = false; | |
| // ── PRNG ────────────────────────────────────────────────────── | |
| function mulberry32(seed) { | |
| return () => { | |
| seed |= 0; seed = seed + 0x6D2B79F5 | 0; | |
| let t = Math.imul(seed ^ seed >>> 15, 1 | seed); | |
| t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; | |
| return ((t ^ t >>> 14) >>> 0) / 4294967296; | |
| }; | |
| } | |
| function getStageForDepth(stageBands, depth) { | |
| for (const [d0, d1, s] of stageBands) { | |
| if (depth >= d0 && depth <= d1) return s; | |
| } | |
| return 4; | |
| } | |
| // ── Build model group ───────────────────────────────────────── | |
| function buildGroup(key, offsetX = 0) { | |
| if (groups[key]) { | |
| scene.remove(groups[key].group); | |
| groups[key].group.traverse(o => { | |
| if (o.geometry) o.geometry.dispose(); | |
| if (o.material) { | |
| if (Array.isArray(o.material)) o.material.forEach(m => m.dispose()); | |
| else o.material.dispose(); | |
| } | |
| }); | |
| delete groups[key]; | |
| } | |
| const d = VINDEX_DATA[key]; | |
| const group = new THREE.Group(); | |
| group.position.x = offsetX; | |
| const L = d.layers, F = d.F, SPACING = 0.80, R = 4.6; | |
| const totalH = (L - 1) * SPACING; | |
| const featureMeta = []; | |
| const FLAT_W = R * 2.4; // horizontal span for features in flat mode | |
| // ── Stage bands ───────────────────────────────────────────── | |
| if (!d.dissolved) { | |
| d.stageBands.forEach(([d0, d1, si]) => { | |
| const y0 = d0 * totalH - totalH / 2; | |
| const y1 = d1 * totalH - totalH / 2; | |
| const h = Math.max(y1 - y0, 0.08); | |
| if (viewMode === 'flat') { | |
| // Horizontal stripe across the circuit | |
| const geo = new THREE.PlaneGeometry(FLAT_W * 1.15, h); | |
| const mat = new THREE.MeshBasicMaterial({ color: STAGE_COLORS[si], transparent: true, opacity: 0.085, depthWrite: false, side: THREE.DoubleSide }); | |
| const mesh = new THREE.Mesh(geo, mat); | |
| mesh.position.set(0, (y0 + y1) / 2, -0.02); | |
| group.add(mesh); | |
| } else { | |
| // 3D box slab + capping rings | |
| const geo = new THREE.BoxGeometry(R * 2.5, h, R * 2.5); | |
| const mat = new THREE.MeshBasicMaterial({ color: STAGE_COLORS[si], transparent: true, opacity: 0.032, depthWrite: false, side: THREE.DoubleSide }); | |
| const mesh = new THREE.Mesh(geo, mat); | |
| mesh.position.y = (y0 + y1) / 2; | |
| group.add(mesh); | |
| [y0, y1].forEach(y => { | |
| const rg = new THREE.RingGeometry(R * 1.22, R * 1.24, 64); | |
| const rm = new THREE.MeshBasicMaterial({ color: STAGE_COLORS[si], transparent: true, opacity: 0.20, side: THREE.DoubleSide, depthWrite: false }); | |
| const ring = new THREE.Mesh(rg, rm); | |
| ring.position.y = y; ring.rotation.x = -Math.PI / 2; | |
| group.add(ring); | |
| }); | |
| } | |
| }); | |
| } | |
| // ── Layer guides (rings in 3D, lines in flat) ─────────────── | |
| for (let li = 0; li < L; li++) { | |
| const y = (li / (L - 1)) * totalH - totalH / 2; | |
| let lineColor, lineOpacity; | |
| if (d.dissolved) { lineColor = new THREE.Color(0x330a0a); lineOpacity = 0.22; } | |
| else if (d.c4 !== null && d.c4 > 1.0) { lineColor = new THREE.Color(0xff4400); lineOpacity = 0.24; } | |
| else if (d.c4 !== null) { | |
| const t = Math.min(d.c4 / 0.55, 1.0); | |
| lineColor = new THREE.Color().lerpColors(new THREE.Color(0x1a2d6e), new THREE.Color(0xff8822), t); | |
| lineOpacity = 0.14; | |
| } else { lineColor = new THREE.Color(0x1e2a50); lineOpacity = 0.10; } | |
| if (viewMode === 'flat') { | |
| const lineGeo = new THREE.BufferGeometry().setFromPoints([ | |
| new THREE.Vector3(-FLAT_W / 2, y, -0.05), | |
| new THREE.Vector3( FLAT_W / 2, y, -0.05), | |
| ]); | |
| const lineMat = new THREE.LineBasicMaterial({ color: lineColor, transparent: true, opacity: lineOpacity }); | |
| group.add(new THREE.Line(lineGeo, lineMat)); | |
| } else { | |
| const rg = new THREE.RingGeometry(R * 0.88, R, 64); | |
| const rm = new THREE.MeshBasicMaterial({ color: lineColor, transparent: true, opacity: lineOpacity, side: THREE.DoubleSide, depthWrite: false }); | |
| const ring = new THREE.Mesh(rg, rm); ring.position.y = y; ring.rotation.x = -Math.PI / 2; | |
| group.add(ring); | |
| } | |
| } | |
| // ── Feature points (InstancedMesh, layout depends on viewMode) ── | |
| const totalF = L * F; | |
| const geo = new THREE.SphereGeometry(0.08, 7, 7); | |
| const mat = new THREE.MeshStandardMaterial({ roughness: 0.3, metalness: 0.05 }); | |
| const instanceMesh = new THREE.InstancedMesh(geo, mat, totalF); | |
| instanceMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); | |
| const dummy = new THREE.Object3D(); | |
| const color = new THREE.Color(); | |
| const rng = mulberry32(42 + key.charCodeAt(0) * 7); | |
| let idx = 0; | |
| for (let li = 0; li < L; li++) { | |
| const y = (li / (L - 1)) * totalH - totalH / 2; | |
| const depth = li / (L - 1); | |
| const stage = d.dissolved ? 5 : getStageForDepth(d.stageBands, depth); | |
| for (let fi = 0; fi < F; fi++) { | |
| let x, z; | |
| if (viewMode === 'flat') { | |
| // 2D circuit: horizontal line per layer; features spread left-to-right. | |
| // Dissolved: jitter the ordering to show lack of structure. | |
| if (d.dissolved) { | |
| x = (rng() - 0.5) * FLAT_W; | |
| } else { | |
| x = ((fi + 0.5) / F - 0.5) * FLAT_W; | |
| } | |
| z = 0; | |
| } else if (d.dissolved) { | |
| const angle = rng() * Math.PI * 2; | |
| const r = R * 0.82 * Math.sqrt(rng()); | |
| x = r * Math.cos(angle); z = r * Math.sin(angle); | |
| } else { | |
| const theta = fi * 2.399963229; | |
| const r = R * 0.84 * Math.sqrt((fi + 0.5) / F); | |
| x = r * Math.cos(theta); z = r * Math.sin(theta); | |
| } | |
| const jitter = viewMode === 'flat' | |
| ? (rng() - 0.5) * (d.dissolved ? 0.10 : 0.04) | |
| : (rng() - 0.5) * (d.dissolved ? 0.18 : 0.06); | |
| dummy.position.set(x, y + jitter, z); | |
| const baseScale = viewMode === 'flat' ? 0.85 : 1.0; | |
| dummy.scale.setScalar(baseScale * (d.dissolved ? (0.6 + rng() * 0.9) : (0.8 + rng() * 0.65))); | |
| dummy.updateMatrix(); | |
| instanceMesh.setMatrixAt(idx, dummy.matrix); | |
| color.copy(STAGE_COLORS[stage]); | |
| color.offsetHSL(0, (rng() - 0.5) * 0.12, (rng() - 0.5) * 0.14); | |
| instanceMesh.setColorAt(idx, color); | |
| featureMeta[idx] = { li, fi, stage, y, x, z, key }; | |
| idx++; | |
| } | |
| } | |
| instanceMesh.instanceMatrix.needsUpdate = true; | |
| if (instanceMesh.instanceColor) instanceMesh.instanceColor.needsUpdate = true; | |
| group.add(instanceMesh); | |
| // ── Inter-layer edges (flat mode only) — show top features connecting consecutive layers ── | |
| if (viewMode === 'flat' && !d.dissolved) { | |
| const edgePts = []; | |
| const edgeColors = []; | |
| const TOP_K = Math.min(8, F); // strongest few features per layer | |
| for (let li = 0; li < L - 1; li++) { | |
| const y0 = (li / (L - 1)) * totalH - totalH / 2; | |
| const y1 = ((li+1) / (L - 1)) * totalH - totalH / 2; | |
| const stage0 = getStageForDepth(d.stageBands, li / (L - 1)); | |
| const c = STAGE_COLORS[stage0]; | |
| for (let k = 0; k < TOP_K; k++) { | |
| const x0 = ((k + 0.5) / F - 0.5) * FLAT_W; | |
| const x1 = ((k + 0.5) / F - 0.5) * FLAT_W; | |
| edgePts.push(x0, y0, 0, x1, y1, 0); | |
| edgeColors.push(c.r, c.g, c.b, c.r, c.g, c.b); | |
| } | |
| } | |
| const eg = new THREE.BufferGeometry(); | |
| eg.setAttribute('position', new THREE.Float32BufferAttribute(edgePts, 3)); | |
| eg.setAttribute('color', new THREE.Float32BufferAttribute(edgeColors, 3)); | |
| const em = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.18 }); | |
| group.add(new THREE.LineSegments(eg, em)); | |
| } | |
| scene.add(group); | |
| groups[key] = { group, instanceMesh, featureMeta, totalH }; | |
| return groups[key]; | |
| } | |
| // ── Info panel update ───────────────────────────────────────── | |
| function c4Class(v) { | |
| if (v === null) return 'dim'; | |
| if (v < 0.06) return 'good'; | |
| if (v < 0.5) return 'warn'; | |
| return 'alert'; | |
| } | |
| function barWidth(v, max) { | |
| if (v === null) return 0; | |
| return Math.min((v / max) * 100, 100); | |
| } | |
| function updateInfoPanel(key) { | |
| const d = VINDEX_DATA[key]; | |
| document.getElementById('m-name').textContent = d.name; | |
| const hfEl = document.getElementById('m-hf-link'); | |
| if (d.hfRepo) { | |
| hfEl.href = `https://huggingface.co/${d.hfRepo}`; | |
| hfEl.style.display = ''; | |
| } else { | |
| hfEl.style.display = 'none'; | |
| } | |
| document.getElementById('m-meta').textContent = `${d.org} · ${d.params} · ${d.precision} · ${d.layers}L`; | |
| // C4 | |
| const c4El = document.getElementById('m-c4-val'); | |
| const c4Chip = document.getElementById('m-c4-chip'); | |
| if (d.c4 !== null) { | |
| c4El.textContent = d.c4.toFixed(3); | |
| c4El.className = 'c4-val ' + c4Class(d.c4); | |
| if (d.c4 < 0.06) { | |
| c4Chip.textContent = '✓ universal constant'; | |
| c4Chip.className = 'c4-chip chip-good'; | |
| } else if (d.c4 > 1.0) { | |
| c4Chip.textContent = `⚠️ ${(d.c4/0.042).toFixed(0)}× anomaly`; | |
| c4Chip.className = 'c4-chip chip-alert'; | |
| } else { | |
| const mult = (d.c4 / 0.042).toFixed(0); | |
| c4Chip.textContent = `↑ ${mult}× constant`; | |
| c4Chip.className = 'c4-chip chip-warn'; | |
| } | |
| } else { | |
| c4El.textContent = 'N/A'; | |
| c4El.className = 'c4-val'; | |
| c4Chip.textContent = 'Phase 2 pending'; | |
| c4Chip.className = 'c4-chip chip-warn'; | |
| } | |
| // C5 stage bar | |
| const stageFill = document.getElementById('m-stage-fill'); | |
| const c5Val = document.getElementById('m-c5-val'); | |
| if (d.c5 !== null) { | |
| const pct = (d.c5 / d.c5max) * 100; | |
| stageFill.style.width = pct + '%'; | |
| if (d.c5 === 1) { | |
| stageFill.style.background = '#ff4444'; | |
| c5Val.textContent = '💀 C5=1'; | |
| c5Val.className = 'stage-bar-val'; | |
| c5Val.style.color = '#ff4444'; | |
| } else { | |
| stageFill.style.background = '#44ffaa'; | |
| c5Val.textContent = `${d.c5} stages`; | |
| c5Val.className = 'stage-bar-val'; | |
| c5Val.style.color = '#44ffaa'; | |
| } | |
| } else { | |
| stageFill.style.width = '0%'; | |
| c5Val.textContent = 'N/A'; | |
| c5Val.style.color = ''; | |
| } | |
| // Gate 3 | |
| const gate3Icon = document.getElementById('m-gate3-icon'); | |
| const gate3Label = document.getElementById('m-gate3-label'); | |
| const g3 = d.gate3; | |
| if (g3 === 'PASS') { | |
| gate3Icon.textContent = '✅'; | |
| gate3Label.textContent = `Gate-3: ${d.gate3note}`; | |
| gate3Label.style.color = '#44ffaa'; gate3Label.style.opacity = '1'; | |
| } else if (g3 === 'PENDING') { | |
| gate3Icon.textContent = '⏳'; | |
| gate3Label.textContent = `Gate-3: ${d.gate3note}`; | |
| gate3Label.style.color = ''; gate3Label.style.opacity = '0.5'; | |
| } else { | |
| gate3Icon.textContent = '○'; | |
| gate3Label.textContent = `Gate-3: ${d.gate3note}`; | |
| gate3Label.style.color = ''; gate3Label.style.opacity = '0.35'; | |
| } | |
| // Anomaly banner | |
| const anomalyEl = document.getElementById('m-anomaly'); | |
| if (d.anomaly) { | |
| anomalyEl.textContent = d.anomaly; | |
| anomalyEl.style.display = 'block'; | |
| anomalyEl.style.background = d.anomalyType === 'dead' | |
| ? 'rgba(255,40,40,0.1)' : 'rgba(255,120,50,0.1)'; | |
| anomalyEl.style.borderColor = d.anomalyType === 'dead' | |
| ? 'rgba(255,40,40,0.3)' : 'rgba(255,120,50,0.3)'; | |
| anomalyEl.style.color = d.anomalyType === 'dead' ? '#ff7777' : '#ffaa66'; | |
| } else { | |
| anomalyEl.style.display = 'none'; | |
| } | |
| // Tier 2 metrics | |
| function setBar(barId, valId, v, max, cls) { | |
| document.getElementById(barId).style.width = barWidth(v, max) + '%'; | |
| const el = document.getElementById(valId); | |
| el.textContent = v !== null ? v.toFixed(3) : 'N/A'; | |
| el.className = 'm-val ' + (v !== null ? (cls || '') : 'dim'); | |
| } | |
| setBar('b-c1','v-c1', d.c1, 0.5, d.c1 > 0.3 ? 'warn' : 'good'); | |
| setBar('b-c2','v-c2', d.c2, 1.0, d.c2 !== null && d.c2 > 0.85 ? 'good' : ''); | |
| setBar('b-c3','v-c3', d.c3, 1.0, d.c3 !== null && d.c3 > 0.75 ? 'good' : 'warn'); | |
| setBar('b-c4','v-c4', d.c4 !== null ? Math.min(d.c4, 2.0) : null, 2.0, c4Class(d.c4)); | |
| document.getElementById('b-spec').style.width = (d.spectrumScore * 100) + '%'; | |
| const specEl = document.getElementById('v-spec'); | |
| specEl.textContent = d.spectrumScore > 0.7 ? 'power-law' : (d.spectrumScore > 0.2 ? 'partial' : 'flat'); | |
| specEl.className = 'm-val ' + (d.spectrumScore > 0.7 ? 'good' : d.spectrumScore > 0.2 ? 'warn' : 'alert'); | |
| const shortidEl = document.getElementById('v-shortid'); | |
| shortidEl.textContent = d.shortId || '—'; | |
| document.getElementById('copy-shortid').onclick = () => { | |
| const txt = d.hfRepo ? `https://huggingface.co/${d.hfRepo}` : (d.shortId || ''); | |
| navigator.clipboard.writeText(txt).catch(() => {}); | |
| }; | |
| } | |
| // ── Compare panel ───────────────────────────────────────────── | |
| function makeCmpCol(colId, key) { | |
| const d = VINDEX_DATA[key]; | |
| const col = document.getElementById(colId); | |
| col.innerHTML = ''; | |
| const title = document.createElement('div'); | |
| title.className = 'cmp-title'; | |
| title.textContent = d.name; | |
| col.appendChild(title); | |
| const meta = document.createElement('div'); | |
| meta.className = 'cmp-meta'; | |
| meta.textContent = `${d.org} · ${d.params} · ${d.precision}`; | |
| col.appendChild(meta); | |
| const rows = [ | |
| ['C4 Temp', d.c4 !== null ? d.c4.toFixed(3) : 'N/A', c4Class(d.c4)], | |
| ['C5 Stages', d.c5 !== null ? (d.c5 === 1 ? '💀 1' : String(d.c5)) : 'N/A', d.c5 === 1 ? 'alert' : 'good'], | |
| ['C3 Coherence', d.c3 !== null ? d.c3.toFixed(3) : 'N/A', d.c3 !== null && d.c3 > 0.75 ? 'good' : 'warn'], | |
| ['C1 Sparsity', d.c1 !== null ? d.c1.toFixed(3) : 'N/A', ''], | |
| ['Spectrum', d.spectrumScore > 0.7 ? 'power-law ✓' : (d.spectrumScore > 0.2 ? 'partial' : 'flat ⚠️'), d.spectrumScore > 0.7 ? 'good' : 'alert'], | |
| ]; | |
| rows.forEach(([label, val, cls]) => { | |
| const row = document.createElement('div'); | |
| row.className = 'cmp-metric'; | |
| const lEl = document.createElement('span'); | |
| lEl.style.opacity = '0.45'; lEl.textContent = label; | |
| const vEl = document.createElement('span'); | |
| vEl.className = 'cmp-val ' + cls; | |
| vEl.textContent = val; | |
| row.appendChild(lEl); row.appendChild(vEl); | |
| col.appendChild(row); | |
| }); | |
| } | |
| // ── Show single model ───────────────────────────────────────── | |
| function showSingle(key) { | |
| compareMode = false; | |
| document.getElementById('compare-btn').classList.remove('active'); | |
| document.getElementById('compare-panel').style.display = 'none'; | |
| document.getElementById('info-panel').style.display = ''; | |
| document.getElementById('legend').style.display = ''; | |
| Object.keys(groups).filter(k => k !== key).forEach(k => { | |
| scene.remove(groups[k].group); delete groups[k]; | |
| }); | |
| clearWalk(); | |
| activeKeys = [key]; | |
| buildGroup(key, 0); | |
| updateInfoPanel(key); | |
| const L = VINDEX_DATA[key].layers; | |
| if (viewMode === 'flat') { | |
| // Need to fit (L-1) * 0.80 vertical units; FOV 52 -> visible_h ~ 0.976 * z | |
| const totalH = (L - 1) * 0.80; | |
| camera.position.set(0, 0, Math.max(20, totalH * 1.25 + 6)); | |
| } else { | |
| camera.position.set(0, 2, 20 + L * 0.22); | |
| } | |
| controls.target.set(0, 0, 0); | |
| controls.update(); | |
| } | |
| // ── Compare mode ────────────────────────────────────────────── | |
| function showCompare(keyA, keyB) { | |
| compareMode = true; | |
| document.getElementById('compare-btn').classList.add('active'); | |
| document.getElementById('compare-panel').style.display = ''; | |
| document.getElementById('info-panel').style.display = 'none'; | |
| document.getElementById('legend').style.display = 'none'; | |
| Object.keys(groups).filter(k => k !== keyA && k !== keyB).forEach(k => { | |
| scene.remove(groups[k].group); delete groups[k]; | |
| }); | |
| clearWalk(); | |
| activeKeys = [keyA, keyB]; | |
| buildGroup(keyA, -13); | |
| buildGroup(keyB, 13); | |
| makeCmpCol('cmp-a', keyA); | |
| makeCmpCol('cmp-b', keyB); | |
| const maxL = Math.max(VINDEX_DATA[keyA].layers, VINDEX_DATA[keyB].layers); | |
| if (viewMode === 'flat') { | |
| const totalH = (maxL - 1) * 0.80; | |
| camera.position.set(0, 0, Math.max(28, totalH * 1.4 + 8)); | |
| } else { | |
| camera.position.set(0, 2, 30 + maxL * 0.18); | |
| } | |
| controls.target.set(0, 0, 0); | |
| controls.update(); | |
| } | |
| // ── Walk traces ─────────────────────────────────────────────── | |
| function clearWalk() { | |
| walkLines.forEach(l => { scene.remove(l); l.geometry.dispose(); l.material.dispose(); }); | |
| walkLines = []; | |
| selectedIdx = -1; | |
| } | |
| function traceWalk(globalIdx, instanceMesh, featureMeta, groupObj) { | |
| clearWalk(); | |
| const meta = featureMeta[globalIdx]; | |
| if (!meta) return; | |
| const d = VINDEX_DATA[meta.key]; | |
| const totalH = (d.layers - 1) * 0.80; | |
| const rng = mulberry32(globalIdx * 31337); | |
| const offsetX = groupObj.position.x; | |
| let px = meta.x + offsetX, py = meta.y, pz = meta.z; | |
| const stageColor = STAGE_COLORS[meta.stage]; | |
| const steps = d.dissolved ? 6 : 10; | |
| for (let li = meta.li + 1; li < Math.min(meta.li + steps, d.layers); li++) { | |
| const y = (li / (d.layers - 1)) * totalH - totalH / 2; | |
| let x, z; | |
| if (d.dissolved) { | |
| x = (rng() - 0.5) * 8 + offsetX; z = (rng() - 0.5) * 8; | |
| } else { | |
| const angle = Math.atan2(pz, px - offsetX) + (rng() - 0.5) * 0.3; | |
| const r = Math.sqrt((px-offsetX)**2 + pz**2); | |
| x = r * Math.cos(angle) + (rng()-0.5)*0.25 + offsetX; | |
| z = r * Math.sin(angle) + (rng()-0.5)*0.25; | |
| } | |
| const pts = [new THREE.Vector3(px,py,pz), new THREE.Vector3(x,y,z)]; | |
| const line = new THREE.Line( | |
| new THREE.BufferGeometry().setFromPoints(pts), | |
| new THREE.LineBasicMaterial({ color: stageColor, transparent: true, opacity: d.dissolved ? 0.22 : (0.55 - (li-meta.li)*0.04) }) | |
| ); | |
| scene.add(line); walkLines.push(line); | |
| px = x; py = y; pz = z; | |
| } | |
| instanceMesh.setColorAt(globalIdx, new THREE.Color(0xffffff)); | |
| instanceMesh.instanceColor.needsUpdate = true; | |
| selectedIdx = globalIdx; | |
| } | |
| // ── Tooltip ─────────────────────────────────────────────────── | |
| const tooltip = document.getElementById('tooltip'); | |
| function showTooltip(ex, ey, meta) { | |
| const d = VINDEX_DATA[meta.key]; | |
| const stage = STAGE_NAMES[meta.stage]; | |
| const depth = ((meta.li / (d.layers - 1)) * 100).toFixed(0); | |
| tooltip.innerHTML = ''; | |
| [[`${d.name}`, 'bold'], [`Layer ${meta.li} (${depth}% depth) · Feature ${meta.fi}`, ''], [`Stage: ${stage}`, meta.stage === 5 ? 'color:#ff4444' : 'color:#44ffaa']].forEach(([text, style]) => { | |
| const el = document.createElement('div'); | |
| el.textContent = text; | |
| if (style.includes(':')) el.setAttribute('style', style); | |
| else if (style === 'bold') el.style.fontWeight = 'bold'; | |
| tooltip.appendChild(el); | |
| }); | |
| tooltip.style.left = (ex + 16) + 'px'; | |
| tooltip.style.top = (ey - 52) + 'px'; | |
| tooltip.style.display = 'block'; | |
| } | |
| // ── Demo sequence ───────────────────────────────────────────── | |
| const demoOverlay = document.getElementById('demo-overlay'); | |
| function setDemoText(text) { | |
| demoOverlay.textContent = text; | |
| demoOverlay.style.display = text ? 'block' : 'none'; | |
| } | |
| async function sleep(ms) { return new Promise(r => setTimeout(r, ms)); } | |
| async function runDemo() { | |
| if (demoRunning) return; | |
| demoRunning = true; | |
| document.getElementById('demo-btn').textContent = '■ Stop'; | |
| controls.enabled = false; | |
| // 0-2s: materialize Qwen3-8B | |
| showSingle('qwen3-8b'); | |
| await sleep(100); | |
| setDemoText('Each column: a transformer model\'s learned features, organized by layer'); | |
| camera.position.set(0, -6, 28); | |
| await sleep(2200); | |
| // 2-4s: orbit | |
| setDemoText('128 features per layer, arranged by singular value direction'); | |
| camera.position.set(12, 3, 22); | |
| await sleep(2000); | |
| // 4-6s: show stage bands label | |
| setDemoText('Four circuit stages emerge at consistent relative depths — across every architecture'); | |
| camera.position.set(0, 4, 22); | |
| await sleep(2400); | |
| // 6-8s: zoom entity zone | |
| setDemoText('At ~50% depth: entity commitment. The model decides what it\'s talking about.'); | |
| camera.position.set(3, 0, 14); | |
| controls.target.set(0, 0, 0); | |
| await sleep(2400); | |
| // 8-10s: compare mode reveal | |
| setDemoText(''); | |
| await sleep(300); | |
| showCompare('qwen3-8b', 'bonsai-1bit'); | |
| camera.position.set(0, 2, 36); | |
| await sleep(400); | |
| setDemoText('Until the model is 1-bit. The circuit dissolves entirely.'); | |
| await sleep(2200); | |
| // 10-12s: hold + tagline | |
| setDemoText('Universal structure. Measurable. Editable.'); | |
| await sleep(2500); | |
| // done | |
| setDemoText(''); | |
| controls.enabled = true; | |
| demoRunning = false; | |
| document.getElementById('demo-btn').textContent = '▶ Demo'; | |
| } | |
| // ── Raycasting ──────────────────────────────────────────────── | |
| const raycaster = new THREE.Raycaster(); | |
| const mouse = new THREE.Vector2(); | |
| renderer.domElement.addEventListener('click', e => { | |
| if (demoRunning) return; | |
| mouse.x = (e.clientX / innerWidth) * 2 - 1; | |
| mouse.y = -(e.clientY / innerHeight) * 2 + 1; | |
| raycaster.setFromCamera(mouse, camera); | |
| let bestHit = null, bestMesh = null, bestMeta = null, bestGroup = null; | |
| for (const key of activeKeys) { | |
| const g = groups[key]; | |
| if (!g) continue; | |
| const hits = raycaster.intersectObject(g.instanceMesh); | |
| if (hits.length > 0 && (!bestHit || hits[0].distance < bestHit.distance)) { | |
| bestHit = hits[0]; bestMesh = g.instanceMesh; bestMeta = g.featureMeta; bestGroup = g.group; | |
| } | |
| } | |
| if (bestHit) { | |
| traceWalk(bestHit.instanceId, bestMesh, bestMeta, bestGroup); | |
| showTooltip(e.clientX, e.clientY, bestMeta[bestHit.instanceId]); | |
| } else { | |
| clearWalk(); tooltip.style.display = 'none'; | |
| } | |
| }); | |
| renderer.domElement.addEventListener('mousemove', () => { tooltip.style.display = 'none'; }); | |
| // ── Entity search ────────────────────────────────────────────── | |
| // Two-tier search backend: | |
| // 1. REAL: `search_index.json` per model from `notebooks/build_search_index.py` Modal pipeline — | |
| // ~5000 whole-word tokens, each mapped to top-8 (layer, feature, score) tuples from probing | |
| // the actual transformer's gate*up activations projected onto the vindex SVD basis. | |
| // Loaded lazily per model; cached in `realIndices`. Files served from /search-indexes/{slug}.json. | |
| // 2. DEMO fallback (below): hand-curated handful of tokens (Paris→capital from the Gate-3 result, | |
| // plus illustrative matches) — used when the real index hasn't been built+deployed for a model. | |
| // Map viewer model keys to slugs that match build_search_index.py's slug() output. | |
| const MODEL_KEY_TO_SLUG = { | |
| 'gemma-4-e2b': 'google-gemma-4-e2b-it', | |
| 'qwen3-0.6b': 'qwen-qwen3-0-6b', | |
| 'qwen3-8b': 'qwen-qwen3-8b', | |
| 'qwen3.6-35b': 'qwen-qwen3-6-35b-a3b', | |
| 'llama-3.1-8b': 'meta-llama-llama-3-1-8b-instruct', | |
| 'gpt-oss-120b': 'openai-gpt-oss-120b', | |
| 'ministral-3b': 'mistralai-ministral-3-3b-instruct-2512', | |
| 'medgemma-4b': 'google-medgemma-1-5-4b-it', | |
| 'bonsai-1bit': 'prism-ml-bonsai-8b-unpacked', | |
| }; | |
| const realIndices = new Map(); // slug → { tokens, matches } loaded JSON | |
| const realIndexAttempts = new Set(); // slugs already tried (don't refetch on failure) | |
| async function loadRealSearchIndex(modelKey) { | |
| const slug = MODEL_KEY_TO_SLUG[modelKey]; | |
| if (!slug || realIndices.has(slug) || realIndexAttempts.has(slug)) return; | |
| realIndexAttempts.add(slug); | |
| try { | |
| const url = `/search-indexes/${slug}.json`; | |
| const res = await fetch(url); | |
| if (!res.ok) { | |
| console.info(`[search] no real index for ${modelKey} — using demo dataset`); | |
| return; | |
| } | |
| const idx = await res.json(); | |
| realIndices.set(slug, idx); | |
| console.info(`[search] loaded real index: ${idx.n_tokens} tokens for ${modelKey}`); | |
| // Re-run current query against the new index | |
| const q = document.getElementById('search-input').value.trim(); | |
| if (q) highlightSearch(q); | |
| } catch (err) { | |
| console.warn(`[search] fetch failed for ${modelKey}:`, err); | |
| } | |
| } | |
| // Look up matches for a query in the real index. Strategy: | |
| // 1. exact token match → return its top-K (layer, feature, score) | |
| // 2. else: substring match across all tokens, collect from up to 5 closest | |
| // 3. returns array of { layerNorm, fi, label } compatible with demo format | |
| function lookupReal(modelKey, query) { | |
| const slug = MODEL_KEY_TO_SLUG[modelKey]; | |
| const idx = realIndices.get(slug); | |
| if (!idx) return null; | |
| const q = query.toLowerCase().trim(); | |
| const hits = []; | |
| // Exact match first | |
| if (idx.matches[q]) { | |
| for (const m of idx.matches[q]) { | |
| hits.push({ | |
| layerNorm: m.layer / (idx.num_layers - 1), | |
| fi: m.feature, | |
| label: `score=${m.score} (real probe)`, | |
| }); | |
| } | |
| return hits; | |
| } | |
| // Substring match — collect from up to 3 closest tokens | |
| const subMatches = idx.tokens.filter(t => t.includes(q) || q.includes(t)).slice(0, 3); | |
| for (const tok of subMatches) { | |
| for (const m of (idx.matches[tok] || []).slice(0, 4)) { // top-4 per substring hit | |
| hits.push({ | |
| layerNorm: m.layer / (idx.num_layers - 1), | |
| fi: m.feature, | |
| label: `${tok} L${m.layer}/F${m.feature} score=${m.score}`, | |
| }); | |
| } | |
| } | |
| return hits.length > 0 ? hits : null; | |
| } | |
| // Demo dataset — small handcrafted index used when real index isn't deployed yet. | |
| // `layerNorm` is a fraction of total depth (0.0 = first layer, 1.0 = last). At runtime each | |
| // match is mapped to the model's actual layer range (round(layerNorm * (L-1))). | |
| // The Paris→capital match is sourced from the LarQL Gate-3 result on Gemma 4 E2B (feature | |
| // 11179 at layer 27 of 36 → normalized depth 27/35 ≈ 0.77). Other matches are illustrative: | |
| // they sit in plausible layer bands (entity zone 0.45–0.55, prediction zone 0.90+) and use | |
| // representative feature indices visible in the viewer's 128-feature spiral. | |
| const SEARCH_INDEX = { | |
| 'gemma-4-e2b': { | |
| 'paris': [{ layerNorm: 0.77, fi: 11, label: 'L27/F11179 — capital-of-X concept (Gate-3)' }, | |
| { layerNorm: 0.62, fi: 8, label: 'Eiffel/landmark co-activation' }], | |
| 'capital': [{ layerNorm: 0.77, fi: 11, label: 'capital-of-X concept' }, | |
| { layerNorm: 0.40, fi: 19, label: 'country routing' }], | |
| 'eiffel': [{ layerNorm: 0.62, fi: 8 }], | |
| 'france': [{ layerNorm: 0.40, fi: 19 }, { layerNorm: 0.55, fi: 22 }], | |
| 'python': [{ layerNorm: 0.50, fi: 27, label: 'code-block routing' }, | |
| { layerNorm: 0.92, fi: 3, label: 'def/class token preference' }], | |
| 'code': [{ layerNorm: 0.50, fi: 27 }, { layerNorm: 0.30, fi: 33 }], | |
| 'doctor': [{ layerNorm: 0.50, fi: 41, label: 'medical entity cluster' }], | |
| 'einstein': [{ layerNorm: 0.50, fi: 47, label: 'physicist entity' }], | |
| }, | |
| 'qwen3-8b': { | |
| 'paris': [{ layerNorm: 0.55, fi: 11 }], | |
| 'capital': [{ layerNorm: 0.55, fi: 11 }, { layerNorm: 0.42, fi: 19 }], | |
| 'python': [{ layerNorm: 0.50, fi: 27 }], | |
| 'code': [{ layerNorm: 0.50, fi: 27 }], | |
| }, | |
| 'llama-3.1-8b': { | |
| 'paris': [{ layerNorm: 0.65, fi: 11 }], | |
| 'capital': [{ layerNorm: 0.65, fi: 11 }], | |
| }, | |
| // Bonsai/BitNet 1-bit models: dissolved — no concentrated features to highlight | |
| 'bonsai-1bit': { /* intentionally empty: dissolution means no feature locality */ }, | |
| }; | |
| let savedColors = null; // Map<key, [Color, Color, ...]> — original instance colors per group | |
| let highlightedFeatureIdxs = []; // [{ key, globalIdx }] | |
| let searchHaloMeshes = []; // glowing ring meshes added per match | |
| function _saveColorsIfNeeded() { | |
| if (savedColors) return; | |
| savedColors = new Map(); | |
| for (const key of activeKeys) { | |
| const g = groups[key]; | |
| if (!g || !g.instanceMesh.instanceColor) continue; | |
| const arr = g.instanceMesh.instanceColor.array; | |
| savedColors.set(key, new Float32Array(arr)); // copy | |
| } | |
| } | |
| function clearSearch() { | |
| // Restore original colors | |
| if (savedColors) { | |
| for (const key of activeKeys) { | |
| const g = groups[key]; | |
| const original = savedColors.get(key); | |
| if (!g || !original) continue; | |
| g.instanceMesh.instanceColor.array.set(original); | |
| g.instanceMesh.instanceColor.needsUpdate = true; | |
| } | |
| savedColors = null; | |
| } | |
| // Reset scales of previously-highlighted features | |
| for (const h of highlightedFeatureIdxs) { | |
| const g = groups[h.key]; | |
| if (!g) continue; | |
| const m = new THREE.Matrix4(); | |
| g.instanceMesh.getMatrixAt(h.globalIdx, m); | |
| const pos = new THREE.Vector3(), q = new THREE.Quaternion(), s = new THREE.Vector3(); | |
| m.decompose(pos, q, s); | |
| s.setScalar(1.0); | |
| m.compose(pos, q, s); | |
| g.instanceMesh.setMatrixAt(h.globalIdx, m); | |
| } | |
| for (const key of activeKeys) { | |
| const g = groups[key]; | |
| if (g) g.instanceMesh.instanceMatrix.needsUpdate = true; | |
| } | |
| highlightedFeatureIdxs = []; | |
| // Remove halo meshes | |
| for (const mesh of searchHaloMeshes) { | |
| scene.remove(mesh); | |
| mesh.geometry.dispose(); | |
| mesh.material.dispose(); | |
| } | |
| searchHaloMeshes = []; | |
| document.getElementById('search-status').textContent = ''; | |
| } | |
| function highlightSearch(query) { | |
| const q = (query || '').trim().toLowerCase(); | |
| clearSearch(); | |
| if (!q) return; | |
| let totalMatches = 0; | |
| const matchInfos = []; | |
| _saveColorsIfNeeded(); | |
| const HIGHLIGHT_COLOR = new THREE.Color(0xffffff); // pure white pops against everything | |
| const PULSE_SCALE = 6.0; | |
| for (const key of activeKeys) { | |
| // Try real index first, then fall back to demo dataset | |
| let matches = lookupReal(key, q); | |
| if (!matches) { | |
| const idx = SEARCH_INDEX[key] || {}; | |
| matches = idx[q] || []; | |
| if (matches.length === 0) { | |
| for (const k of Object.keys(idx)) { | |
| if (k.includes(q) || q.includes(k)) matches = matches.concat(idx[k]); | |
| } | |
| } | |
| } | |
| if (matches.length === 0) continue; | |
| const g = groups[key]; | |
| if (!g) continue; | |
| const L = VINDEX_DATA[key].layers; | |
| const F = VINDEX_DATA[key].F; | |
| const offsetX = g.group.position.x; | |
| for (const m of matches) { | |
| const li = Math.round(m.layerNorm * (L - 1)); | |
| const fi = Math.min(Math.max(m.fi, 0), F - 1); | |
| const globalIdx = li * F + fi; | |
| if (globalIdx < 0 || globalIdx >= g.featureMeta.length) continue; | |
| g.instanceMesh.setColorAt(globalIdx, HIGHLIGHT_COLOR); | |
| // Scale up | |
| const matrix = new THREE.Matrix4(); | |
| g.instanceMesh.getMatrixAt(globalIdx, matrix); | |
| const pos = new THREE.Vector3(), quat = new THREE.Quaternion(), scl = new THREE.Vector3(); | |
| matrix.decompose(pos, quat, scl); | |
| scl.setScalar(PULSE_SCALE); | |
| matrix.compose(pos, quat, scl); | |
| g.instanceMesh.setMatrixAt(globalIdx, matrix); | |
| highlightedFeatureIdxs.push({ key, globalIdx }); | |
| // Add a glowing halo ring at the feature's world position so it's findable at any zoom | |
| const meta = g.featureMeta[globalIdx]; | |
| const haloGeo = new THREE.RingGeometry(0.55, 0.85, 32); | |
| const haloMat = new THREE.MeshBasicMaterial({ | |
| color: 0xffe060, transparent: true, opacity: 0.92, side: THREE.DoubleSide, depthWrite: false, | |
| }); | |
| const halo = new THREE.Mesh(haloGeo, haloMat); | |
| halo.position.set(meta.x + offsetX, meta.y, meta.z); | |
| halo.lookAt(camera.position); | |
| halo.userData.isSearchHalo = true; | |
| halo.userData.featurePos = halo.position.clone(); | |
| scene.add(halo); | |
| searchHaloMeshes.push(halo); | |
| matchInfos.push(`${key} L${li}/F${fi}${m.label ? ` (${m.label.slice(0, 40)})` : ''}`); | |
| totalMatches++; | |
| } | |
| g.instanceMesh.instanceColor.needsUpdate = true; | |
| g.instanceMesh.instanceMatrix.needsUpdate = true; | |
| } | |
| const status = document.getElementById('search-status'); | |
| if (totalMatches === 0) { | |
| status.textContent = `no matches for "${q}"`; | |
| } else { | |
| status.textContent = `${totalMatches} match${totalMatches === 1 ? '' : 'es'}: ${matchInfos.slice(0, 3).join(', ')}${matchInfos.length > 3 ? '…' : ''}`; | |
| } | |
| } | |
| // ── UI wiring ───────────────────────────────────────────────── | |
| const modelSelect = document.getElementById('model-select'); | |
| const compareBtn = document.getElementById('compare-btn'); | |
| const demoBtn = document.getElementById('demo-btn'); | |
| const viewBtn = document.getElementById('view-btn'); | |
| const searchInput = document.getElementById('search-input'); | |
| const tier2Btn = document.getElementById('tier2-btn'); | |
| let _searchTimer = null; | |
| searchInput.addEventListener('input', e => { | |
| clearTimeout(_searchTimer); | |
| const v = e.target.value; | |
| _searchTimer = setTimeout(() => highlightSearch(v), 180); | |
| }); | |
| searchInput.addEventListener('keydown', e => { | |
| if (e.key === 'Escape') { searchInput.value = ''; clearSearch(); } | |
| }); | |
| modelSelect.addEventListener('change', () => { | |
| if (demoRunning) return; | |
| // Drop stale highlight state — the InstancedMesh references are about to be disposed | |
| savedColors = null; | |
| highlightedFeatureIdxs = []; | |
| compareMode ? showCompare(modelSelect.value, 'bonsai-1bit') : showSingle(modelSelect.value); | |
| // Lazy-load the real search index for this model (no-op if already loaded or unavailable) | |
| loadRealSearchIndex(modelSelect.value); | |
| // Re-apply current search query against the new model | |
| if (searchInput.value.trim()) { | |
| setTimeout(() => highlightSearch(searchInput.value), 100); | |
| } else { | |
| document.getElementById('search-status').textContent = ''; | |
| } | |
| }); | |
| compareBtn.addEventListener('click', () => { | |
| if (demoRunning) return; | |
| compareMode ? showSingle(modelSelect.value) : showCompare(modelSelect.value, 'bonsai-1bit'); | |
| }); | |
| demoBtn.addEventListener('click', () => { | |
| if (demoRunning) { | |
| demoRunning = false; controls.enabled = true; | |
| demoBtn.textContent = '▶ Demo'; setDemoText(''); | |
| showSingle(modelSelect.value); | |
| } else { runDemo(); } | |
| }); | |
| viewBtn.addEventListener('click', () => { | |
| if (demoRunning) return; | |
| viewMode = (viewMode === 'cylinder') ? 'flat' : 'cylinder'; | |
| viewBtn.textContent = (viewMode === 'flat') ? '🌀 3D View' : '🔌 2D Circuit'; | |
| // Reposition camera + reconfigure controls for the new view | |
| if (viewMode === 'flat') { | |
| camera.position.set(0, 0, 28); | |
| controls.target.set(0, 0, 0); | |
| // Lock the orbit to a near-flat plane (allow only small tilt + pan + zoom) | |
| controls.minPolarAngle = Math.PI / 2 - 0.05; | |
| controls.maxPolarAngle = Math.PI / 2 + 0.05; | |
| controls.enableRotate = false; | |
| } else { | |
| camera.position.set(0, 4, 26); | |
| controls.target.set(0, 0, 0); | |
| controls.minPolarAngle = 0; | |
| controls.maxPolarAngle = Math.PI; | |
| controls.enableRotate = true; | |
| } | |
| controls.update(); | |
| // Rebuild active groups with new layout | |
| if (compareMode) { | |
| showCompare(modelSelect.value, 'bonsai-1bit'); | |
| } else { | |
| showSingle(modelSelect.value); | |
| } | |
| }); | |
| tier2Btn.addEventListener('click', () => { | |
| tier2Open = !tier2Open; | |
| document.getElementById('tier2-metrics').className = tier2Open ? 'open' : ''; | |
| tier2Btn.textContent = tier2Open ? 'METRICS ▴' : 'METRICS ▾'; | |
| }); | |
| // ── Resize ──────────────────────────────────────────────────── | |
| window.addEventListener('resize', () => { | |
| camera.aspect = innerWidth / innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(innerWidth, innerHeight); | |
| composer.setSize(innerWidth, innerHeight); | |
| bloom.resolution.set(innerWidth, innerHeight); | |
| }); | |
| // ── Animate ─────────────────────────────────────────────────── | |
| let t = 0; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| t += 0.003; | |
| if (!demoRunning) { | |
| for (const key of activeKeys) { | |
| const g = groups[key]; | |
| if (g) g.group.rotation.y = Math.sin(t * 0.18) * 0.05; | |
| } | |
| } | |
| // Modulate bloom for "alive" feel | |
| bloom.strength = 0.7 + Math.sin(t * 0.6) * 0.08; | |
| // Billboard search halos to face the camera + pulse opacity | |
| if (searchHaloMeshes.length > 0) { | |
| const pulse = 0.65 + Math.abs(Math.sin(t * 4.0)) * 0.32; | |
| for (const halo of searchHaloMeshes) { | |
| halo.lookAt(camera.position); | |
| halo.material.opacity = pulse; | |
| } | |
| } | |
| controls.update(); | |
| composer.render(); | |
| } | |
| // ── Init ────────────────────────────────────────────────────── | |
| showSingle('qwen3-8b'); | |
| animate(); | |
| // Try to fetch the real search index for the default model (silent if 404) | |
| loadRealSearchIndex('qwen3-8b'); | |
| // URL param handling: ?view=flat → 2D circuit, ?autoplay → demo, ?model=… → switch model, ?q=paris → search | |
| const _params = new URLSearchParams(location.search); | |
| const _modelParam = _params.get('model'); | |
| if (_modelParam && VINDEX_DATA[_modelParam]) { | |
| modelSelect.value = _modelParam; | |
| modelSelect.dispatchEvent(new Event('change')); | |
| } | |
| if (_params.get('view') === 'flat') { | |
| viewBtn.click(); | |
| } | |
| if (_params.has('autoplay')) { | |
| setTimeout(runDemo, 1200); | |
| } | |
| const _q = _params.get('q'); | |
| if (_q) { | |
| searchInput.value = _q; | |
| setTimeout(() => highlightSearch(_q), 1100); // wait for buildGroup + loadRealSearchIndex | |
| } | |
| </script> | |
| </body> | |
| </html> | |