| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Kimi K2.5 Output Formation Ledger Explorer</title> |
| <style> |
| :root { |
| --bg: #0d1117; --surface: #161b22; --border: #30363d; |
| --text: #c9d1d9; --text-dim: #8b949e; --accent: #58a6ff; |
| --green: #3fb950; --orange: #d29922; --red: #f85149; |
| --measured: #3fb950; --derived: #58a6ff; |
| --mono: 'SF Mono','Cascadia Code','Fira Code',monospace; |
| } |
| * { margin:0; padding:0; box-sizing:border-box; } |
| body { font-family:var(--mono); font-size:13px; background:var(--bg); color:var(--text); line-height:1.5; } |
| .header { border-bottom:1px solid var(--border); padding:16px 24px; } |
| .header h1 { font-size:16px; font-weight:600; margin-bottom:4px; } |
| .header .meta { color:var(--text-dim); font-size:11px; } |
| .signpost-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:8px 24px; font-size:11px; color:var(--text-dim); display:flex; gap:16px; flex-wrap:wrap; } |
| .signpost-bar .tag { display:inline-flex; align-items:center; gap:4px; } |
| .dot { width:8px; height:8px; border-radius:50%; display:inline-block; } |
| .dot-m { background:var(--measured); } .dot-d { background:var(--derived); } |
| .main { display:grid; grid-template-columns:280px 1fr; height:calc(100vh - 110px); } |
| .sidebar { border-right:1px solid var(--border); overflow-y:auto; padding:16px; } |
| .sidebar h2 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:12px; margin-top:16px; } |
| .sidebar h2:first-child { margin-top:0; } |
| .token-timeline { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; } |
| .token-step { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border:1px solid var(--border); border-radius:4px; cursor:pointer; font-size:11px; } |
| .token-step:hover { background:var(--surface); } |
| .token-step.selected { background:#1c2333; border-color:var(--accent); } |
| .token-step .tok-id { color:var(--accent); font-weight:600; } |
| .token-step .tok-logit { color:var(--text-dim); } |
| .summary-box { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:16px; } |
| .summary-box .row { display:flex; justify-content:space-between; margin-bottom:4px; font-size:11px; } |
| .summary-box .label { color:var(--text-dim); } |
| .summary-box .value { color:var(--text); font-weight:600; } |
| .provenance-legend .item { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:11px; } |
| .content { overflow-y:auto; padding:16px 24px; } |
| .content h2 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:12px; margin-top:24px; } |
| .content h2:first-child { margin-top:0; } |
| .norm-chart { display:flex; align-items:flex-end; gap:2px; height:120px; padding:8px 0; border-bottom:1px solid var(--border); margin-bottom:8px; } |
| .norm-bar { flex:1; background:var(--accent); min-width:2px; border-radius:1px 1px 0 0; cursor:pointer; transition:opacity .15s; } |
| .norm-bar:hover { opacity:.8; } .norm-bar.selected { background:var(--green); } .norm-bar.dense { background:var(--orange); } |
| .norm-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); margin-bottom:16px; } |
| .layer-table { width:100%; border-collapse:collapse; font-size:11px; } |
| .layer-table th { text-align:left; padding:6px 8px; border-bottom:2px solid var(--border); color:var(--text-dim); font-weight:500; position:sticky; top:0; background:var(--bg); } |
| .layer-table td { padding:4px 8px; border-bottom:1px solid var(--border); } |
| .layer-table tr:hover { background:var(--surface); } .layer-table tr.selected { background:#1c2333; } |
| .prov { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; } |
| .routing-cell { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--text-dim); } |
| .detail-panel { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:16px; margin-top:16px; } |
| .detail-panel h3 { font-size:12px; margin-bottom:8px; color:var(--accent); } |
| .detail-row { display:flex; justify-content:space-between; padding:2px 0; font-size:11px; } |
| .detail-row .label { color:var(--text-dim); } .detail-row .value { color:var(--text); } |
| .routing-detail { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:8px; } |
| .expert-chip { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:4px 6px; font-size:10px; text-align:center; } |
| .expert-chip .id { color:var(--accent); font-weight:600; } .expert-chip .wt { color:var(--text-dim); } |
| .byte-footer { border-top:1px solid var(--border); padding:8px 24px; font-size:11px; color:var(--text-dim); display:flex; justify-content:space-between; position:fixed; bottom:0; left:0; right:0; background:var(--surface); } |
| .error-banner { background:#2d1214; border:1px solid var(--red); color:var(--red); padding:12px 24px; text-align:center; } |
| .top-k-list .entry { display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px solid var(--border); font-size:11px; } |
| .top-k-list .winner { color:var(--green); font-weight:600; } |
| </style> |
| </head> |
| <body> |
| <div id="app"><div class="error-banner" id="error" style="display:none"></div></div> |
| <script> |
| // Kimi K2.5 Output Formation Ledger Explorer v2 |
| // Multi-token timeline + per-token layer detail. |
| // All displayed values carry provenance tags (M/D). |
| // No interpretive content. |
| |
| const URLS = ['ledger_multi_5tok.json']; |
| |
| async function main() { |
| const app = document.getElementById('app'); |
| const error = document.getElementById('error'); |
| let ledger, src; |
| for (const u of URLS) { |
| try { const r = await fetch(u); if (r.ok) { ledger = await r.json(); src = u; break; } } catch(_) {} |
| } |
| if (!ledger) { error.style.display='block'; error.textContent='No ledger found. Serve with: python3 -m http.server'; return; } |
| |
| const sp = ledger.signpost; |
| let selTok = 0, selLayer = 0; |
| |
| function fmtB(b) { return b>=1e9?(b/1e9).toFixed(2)+' GB':b>=1e6?(b/1e6).toFixed(1)+' MB':b+' B'; } |
| |
| function render() { |
| const tok = ledger.generated_tokens[selTok]; |
| const maxNorm = Math.max(...tok.layers.map(l=>l.residual_norm_out)); |
| const multi = ledger.generated_tokens.length > 1; |
| |
| const timeline = multi ? ledger.generated_tokens.map((t,i) => |
| `<div class="token-step ${i===selTok?'selected':''}" data-step="${i}"> |
| <span>Step ${i} <span class="dot dot-m"></span></span> |
| <span class="tok-id">${t.output_token_id}</span> |
| <span class="tok-logit">${t.output_logit.toFixed(1)}</span> |
| </div>` |
| ).join('') : ''; |
| |
| const topK = tok.top_k_tokens.slice(0,10).map((t,i) => |
| `<div class="entry${i===0?' winner':''}"><span>tok ${t[0]}</span><span>${t[1].toFixed(3)}</span></div>` |
| ).join(''); |
| |
| const bars = tok.layers.map((l,i) => { |
| const h = (l.residual_norm_out/maxNorm)*100; |
| const cls = [l.layer_kind==='dense'?'dense':'',i===selLayer?'selected':''].filter(Boolean).join(' '); |
| return `<div class="norm-bar ${cls}" style="height:${Math.max(h,1)}%" data-idx="${i}" title="L${i}: ${l.residual_norm_out.toFixed(1)}"></div>`; |
| }).join(''); |
| |
| const rows = tok.layers.map((l,i) => { |
| const experts = l.expert_indices ? l.expert_indices.join(', ') : '\u2014'; |
| return `<tr class="${i===selLayer?'selected':''}" data-idx="${i}"> |
| <td>${l.layer_idx}</td><td>${l.layer_kind}</td> |
| <td><span class="prov dot-m"></span>${l.residual_norm_in.toFixed(2)}</td> |
| <td><span class="prov dot-m"></span>${l.residual_norm_out.toFixed(2)}</td> |
| <td class="routing-cell"><span class="prov dot-m"></span>${experts}</td> |
| <td><span class="prov dot-m"></span>${fmtB(l.bytes_streamed)}</td> |
| </tr>`; |
| }).join(''); |
| |
| const dl = tok.layers[selLayer]; |
| let detail = ''; |
| if (dl) { |
| let routing = ''; |
| if (dl.expert_indices && dl.routing_weights) { |
| const chips = dl.expert_indices.map((id,j) => |
| `<div class="expert-chip"><div class="id">${id}</div><div class="wt">${(dl.routing_weights[j]*100).toFixed(1)}%</div></div>` |
| ).join(''); |
| routing = `<h3>Expert Routing <span class="prov dot-m"></span> + <span class="prov dot-d"></span></h3><div class="routing-detail">${chips}</div>`; |
| } |
| detail = `<div class="detail-panel"> |
| <h3>Layer ${dl.layer_idx} (${dl.layer_kind})</h3> |
| <div class="detail-row"><span class="label"><span class="prov dot-m"></span> norm_in</span><span class="value">${dl.residual_norm_in.toFixed(6)}</span></div> |
| <div class="detail-row"><span class="label"><span class="prov dot-m"></span> norm_out</span><span class="value">${dl.residual_norm_out.toFixed(6)}</span></div> |
| <div class="detail-row"><span class="label"><span class="prov dot-m"></span> bytes</span><span class="value">${fmtB(dl.bytes_streamed)}</span></div> |
| ${routing} |
| </div>`; |
| } |
| |
| const provTags = sp.provenance.map(p => { |
| const c = p==='Measured'?'m':p==='Derived'?'d':'i'; |
| return `<span class="tag"><span class="dot dot-${c}"></span>${p[0]}</span>`; |
| }).join(''); |
| |
| app.innerHTML = ` |
| <div class="header"> |
| <h1>Kimi K2.5 Output Formation Ledger</h1> |
| <div class="meta">${ledger.model_id} | ${ledger.schema} | ${src} | ${ledger.generated_tokens.length} token${ledger.generated_tokens.length>1?'s':''}</div> |
| </div> |
| <div class="signpost-bar"> |
| ${provTags} |
| <span class="tag">${sp.governance}</span> |
| <span class="tag">${sp.admission}</span> |
| <span class="tag">${sp.contracts.join('+')}</span> |
| <span class="tag">${sp.synthetic_audit}</span> |
| <span class="tag">${sp.perturbation}</span> |
| <span class="tag">${sp.scope}</span> |
| </div> |
| <div class="main"> |
| <div class="sidebar"> |
| ${multi ? '<h2>Token Timeline</h2><div class="token-timeline">'+timeline+'</div>' : ''} |
| <h2>Token Step ${selTok}</h2> |
| <div class="summary-box"> |
| <div class="row"><span class="label">Output <span class="prov dot-m"></span></span><span class="value">${tok.output_token_id}</span></div> |
| <div class="row"><span class="label">Logit <span class="prov dot-m"></span></span><span class="value">${tok.output_logit.toFixed(3)}</span></div> |
| <div class="row"><span class="label">Entropy <span class="prov dot-d"></span></span><span class="value">${tok.entropy.toFixed(6)}</span></div> |
| <div class="row"><span class="label">Margin <span class="prov dot-d"></span></span><span class="value">${tok.margin.toFixed(3)}</span></div> |
| <div class="row"><span class="label">Bytes <span class="prov dot-m"></span></span><span class="value">${fmtB(tok.bytes_streamed)}</span></div> |
| <div class="row"><span class="label">Layers</span><span class="value">${tok.layers.length}</span></div> |
| </div> |
| <h2>Provenance</h2> |
| <div class="provenance-legend"> |
| <div class="item"><span class="dot dot-m"></span> Measured</div> |
| <div class="item"><span class="dot dot-d"></span> Derived</div> |
| </div> |
| <h2>Top-10 Logits <span class="prov dot-d"></span></h2> |
| <div class="top-k-list">${topK}</div> |
| <h2 style="margin-top:16px">Digests <span class="prov dot-d"></span></h2> |
| <div style="font-size:10px;word-break:break-all;color:var(--text-dim)"> |
| <div style="margin-bottom:4px"><strong>Hidden:</strong> ${tok.hidden_digest}</div> |
| <div><strong>Logits:</strong> ${tok.logits_digest}</div> |
| </div> |
| </div> |
| <div class="content"> |
| <h2>Norm Trajectory (residual_norm_out) <span class="prov dot-m"></span></h2> |
| <div class="norm-chart">${bars}</div> |
| <div class="norm-labels"><span>L0 (dense)</span><span>L30</span><span>L60</span></div> |
| <h2>Layer Detail</h2> |
| <table class="layer-table"> |
| <thead><tr><th>Layer</th><th>Kind</th><th>Norm In</th><th>Norm Out</th><th>Expert Routing</th><th>Bytes</th></tr></thead> |
| <tbody>${rows}</tbody> |
| </table> |
| ${detail} |
| </div> |
| </div> |
| <div class="byte-footer"> |
| <span>Total: ${fmtB(ledger.total_bytes_streamed)} streamed</span> |
| <span>${ledger.model_id}</span> |
| <span>${sp.scope}</span> |
| </div>`; |
| |
| document.querySelectorAll('.token-step').forEach(el => el.addEventListener('click', () => { selTok=+el.dataset.step; selLayer=0; render(); })); |
| document.querySelectorAll('.norm-bar').forEach(el => el.addEventListener('click', () => { selLayer=+el.dataset.idx; render(); })); |
| document.querySelectorAll('.layer-table tbody tr').forEach(el => el.addEventListener('click', () => { selLayer=+el.dataset.idx; render(); })); |
| } |
| render(); |
| } |
| main(); |
| </script> |
| </body> |
| </html> |
|
|
