Spaces:
Running
Running
| <html lang="en"> | |
| <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Flint & Qwen Model Observatory | alphaBell</title><meta name="description" content="Explore Flint expert routing and Qwen recurrent memory with real Q8 tensor captures. Replay every token, inspect every block and import your own trace."><meta property="og:title" content="Model Observatory by alphaBell"><meta property="og:description" content="Two architectures. Real tensor captures. Every token."><meta property="og:image" content="https://huggingface.co/spaces/alphabell/Model-Observatory/resolve/main/cover.png"><meta name="theme-color" content="#176b59"><link rel="icon" href="favicon.svg"><link rel="stylesheet" href="style.css"></head> | |
| <body> | |
| <header class="models-header"><div class="header-start"><a class="brand" href="./"><span class="brand-icon">α</span><span>alphaBell<span class="brand-divider">/</span><b>observatory</b></span></a><label class="model-control"><span>MODEL</span><select id="modelSelect" aria-label="Model" disabled><option>Recursive Flint</option></select></label></div><div class="header-end"><span class="engine-status" id="engineStatus"><i></i>Loading capture</span><button class="icon-button" id="aboutButton" title="How to read the model" aria-label="How to read the model">?</button></div></header> | |
| <section class="overview"><div><div class="eyebrow" id="modelEyebrow">MODEL OBSERVATORY</div><h1>Inside Flint & Qwen.</h1><a class="experiment-entry" href="experiments/index.html">Try the five experiments ↗</a></div><div class="stats" id="modelStats"></div></section> | |
| <main> | |
| <aside class="input-panel"> | |
| <section class="prompt-section"><div class="section-heading"><h2>01 <span>Measured capture</span></h2><span class="small-tag" id="quantization">Q8_0</span></div><p id="traceOrigin" class="trace-origin">Opening example capture…</p><label class="sr-only" for="prompt" id="promptLabel">Captured prompt</label><textarea id="prompt" readonly spellcheck="false">Explain why the sky is blue in two sentences.</textarea><p class="capture-settings" id="captureSettings"></p><button id="runButton" class="primary" disabled>Loading capture…</button><p id="runNote" class="run-note" role="status">Structure is ready while the capture loads.</p><details class="capture-help"><summary>Use your own capture</summary><p>Import a compatible Flint or Qwen trace JSON. It stays in your browser. This public viewer replays measured captures; new prompts need a separate capture engine.</p><a href="https://huggingface.co/spaces/alphabell/Model-Observatory/blob/main/TRACE-FORMAT.md" target="_blank" rel="noreferrer">Trace format ↗</a></details></section> | |
| <section class="terminal-section"><div class="section-heading terminal-heading"><h2>02 <span>Output</span></h2><span id="tokenCount">0 tokens</span></div><div id="terminal" tabindex="0" aria-label="Model output"><span class="terminal-welcome">model > opening measured capture<span class="cursor">▌</span></span></div><div class="terminal-footer"><span id="timing">Recorded capture</span><button id="copyButton" title="Copy output" aria-label="Copy output">Copy</button></div></section> | |
| <section class="saved-section"><div class="section-heading"><h2>Example traces</h2><button id="importButton" class="text-button">Import ↗</button><input id="importFile" type="file" accept="application/json,.json" hidden></div><div id="history" class="history"><span class="muted">Open a measured capture.</span></div></section> | |
| </aside> | |
| <section class="model-panel"> | |
| <div class="model-toolbar"><div class="section-heading"><h2>03 <span>Model structure</span></h2></div><div class="view-switch" role="group" aria-label="Model visualization"><button class="selected" id="structureButton">Structure</button><button id="historyButton">Token history</button></div></div> | |
| <div class="map-legend"><span><i class="swatch full"></i>Full attention</span><span><i class="swatch sliding" id="legendSecondarySwatch"></i><span id="legendSecondary">Sliding window</span></span><span><i class="swatch active"></i><span id="legendActivation">Selected expert</span></span></div> | |
| <div class="model-map" id="mapContainer"><canvas tabindex="0" id="modelCanvas" aria-label="Model architecture. Click a block, head or feed-forward branch to inspect it." role="button"></canvas><div class="map-tooltip" id="mapTooltip" hidden></div></div> | |
| <div class="model-footer"><span><i class="status-dot"></i><span id="captureLabel">Waiting for measured activations</span></span><span>Brightness = output RMS <button class="tiny-info" id="metricInfo" aria-label="Explain brightness">?</button></span></div> | |
| </section> | |
| <aside class="inspector-panel"> | |
| <div class="section-heading"><h2>04 <span>Inspect a layer</span></h2><div class="layer-nav"><button id="prevLayer" aria-label="Previous layer">‹</button><button id="nextLayer" aria-label="Next layer">›</button></div></div> | |
| <div class="layer-title"><button id="openBlock" class="open-block" title="Open block fullscreen">Layer <span id="layerNumber">12</span> ↗</button><span id="layerType" class="small-tag">Sliding</span></div> | |
| <div class="layer-flow"><span>RMSNorm</span><span>↓</span><button id="flowAttention">Sliding-window attention</button><span>+ residual</span><span>↓</span><button id="flowMlp">Mixture of experts</button><span>+ residual</span></div> | |
| <section class="inspector-section"><div class="inspector-heading"><h4 id="headGridTitle">Attention heads</h4><span id="headGridCount"></span></div><div class="head-grid" id="headGrid"></div><div class="scale"><span>Lower RMS</span><i></i><span>Higher RMS</span></div><div class="head-reading"><span id="headLabel">Head 00</span><strong id="headValue">Awaiting trace</strong></div></section> | |
| <section class="inspector-section expert-section"><div class="inspector-heading"><h4 id="expertTitle">Expert routing</h4><span id="expertCount">6 of 256</span></div><div id="expertGrid" class="expert-grid"></div><div id="expertList" class="expert-list"><span class="muted">Open a measured capture to see selected experts.</span></div><button class="shared-expert" id="sharedExpert" title="Open shared expert fullscreen"><i></i><span>Shared expert ↗</span><strong id="sharedValue">Always active</strong></button></section> | |
| <section class="inspector-section attention-section"><div class="inspector-heading"><h4 id="attentionTitle">Where this head attends</h4><span id="attentionCount">top 8 positions</span></div><div id="attentionList" class="attention-list"><span class="muted">Select a token to inspect its attention.</span></div></section> | |
| </aside> | |
| </main> | |
| <section class="playback"><div class="playback-bar"><div class="playback-controls"><button id="playButton" title="Play or pause trace" aria-label="Play trace">▶</button><button id="stepBack" aria-label="Previous token">‹</button><button id="stepForward" aria-label="Next token">›</button><span id="frameLabel">TOKEN 000 / 000</span></div><div class="playback-options"><select id="playSpeed" aria-label="Playback speed"><option value="8000">1 token / 8 s</option><option value="4000">1 token / 4 s</option><option value="2000">1 token / 2 s</option><option value="1000">1 token / s</option><option value="500" selected>2 tokens / s</option><option value="250">4 tokens / s</option></select><button id="liveButton" ><i></i>Jump to end</button><button id="exportButton" disabled>Export trace ↓</button></div></div><label class="sr-only" for="scrubber">Select generated token</label><input id="scrubber" type="range" min="0" max="0" value="0" disabled><div id="tokenStrip" class="token-strip"><span class="muted">Select a token to inspect its measured frame.</span></div></section> | |
| <dialog id="detailDialog" class="detail-dialog" aria-labelledby="detailTitle"> | |
| <div class="detail-header"><div><button id="detailBack" class="detail-back">↖ Model overview</button><h2 id="detailTitle">Block 12</h2><div id="detailSubtitle" class="detail-subtitle"></div></div><div class="detail-navigation"><button id="detailPrev" aria-label="Previous block">‹</button><button id="detailNext" aria-label="Next block">›</button><button id="detailClose" aria-label="Close fullscreen view">×</button></div></div> | |
| <div class="detail-tabs" role="group" aria-label="Component view"><button data-detail="block">Block</button><button data-detail="head">Attention</button><button data-detail="expert">Experts</button><span id="detailMode"></span></div> | |
| <div id="detailBody" class="detail-body"></div> | |
| <div class="detail-playback"><div class="detail-token-context"><span id="detailFrameLabel"></span><code id="detailToken"></code><span id="detailInputPosition"></span></div><div class="detail-control-row"><div class="playback-controls"><button id="detailPlay" aria-label="Play trace">▶</button><button id="detailStepBack" aria-label="Previous token">‹</button><button id="detailStepForward" aria-label="Next token">›</button></div><label class="detail-speed">Speed <select id="detailSpeed" aria-label="Fullscreen playback speed"></select></label><button id="detailLive" class="detail-live">Jump to end</button><span id="detailPlaybackNote"></span></div><label class="sr-only" for="detailScrubber">Fullscreen selected token</label><input id="detailScrubber" type="range" min="0" max="0" value="0" disabled></div> | |
| </dialog> | |
| <dialog id="aboutDialog"><button id="closeAbout" class="dialog-close" aria-label="Close explanation">×</button><div class="eyebrow">READING THE OBSERVATORY</div><h2>One token. The whole network.</h2><div id="aboutContent"></div><a id="aboutSource" target="_blank" rel="noreferrer">Model configuration ↗</a></dialog> | |
| <div class="toast" id="toast" role="status" hidden></div> | |
| <footer class="site-footer"><a href="https://alphabell.com" target="_blank" rel="noreferrer">alphaBell</a><span>Measured activations, local replay.</span><a href="https://huggingface.co/spaces/alphabell/Model-Observatory/tree/main" target="_blank" rel="noreferrer">Source ↗</a><button id="shareButton" class="text-button">Share view ↗</button></footer><noscript>Enable JavaScript to explore the model architecture and recorded traces.</noscript> | |
| <script src="trace-validation.js"></script><script src="app.js" defer></script><script src="detail.js" defer></script> | |
| </body></html> | |