experiments/sound.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Play real Flint expert routing and Qwen recurrent head measurements as deterministic music. An alphaBell Model Observatory experiment.">
  <meta property="og:title" content="What does a model sound like? | alphaBell"><meta property="og:description" content="Play real routing and recurrent-head measurements as deterministic music, with synchronized visuals and WAV export."><meta property="og:image" content="https://huggingface.co/spaces/alphabell/Model-Observatory/resolve/main/experiments/assets/05-music.png"><meta name="twitter:card" content="summary_large_image">
  <meta name="theme-color" content="#f1f5e8">
  <title>What does a model sound like? | alphaBell</title>
  <link rel="icon" href="../favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="sound.css">
  <script src="../trace-validation.js" defer></script>
  <script src="sound.js" defer></script>
</head>
<body>
  <header><a class="brand" href="../">α <span>alphaBell</span></a><a href="index.html">All experiments ↗</a></header>
  <main>
    <div class="intro"><p class="eyebrow">MODEL OBSERVATORY / EXPERIMENT 05</p><h1>What does a<br>model sound like?</h1><p class="lede">Turn measured expert routing and recurrent head activity into a small, strange piece of music. Same capture. Same mapping. Same notes.</p><p class="honest">This is a musical mapping of real numbers, not a recording of a model's voice or thoughts.</p></div>
    <section class="studio" aria-label="Capture sonification player">
      <div class="controls">
        <label>Capture<select id="soundModel"><option value="flint">Flint · Q8_0 · 59 tokens</option><option value="qwen">Qwen Open · Q8_0 · 44 tokens</option></select></label>
        <label>Decoder block<select id="soundLayer" disabled></select></label>
        <label>Token duration<select id="soundSpeed"><option value="0.2">200 ms · fast</option><option value="0.35" selected>350 ms · medium</option><option value="0.6">600 ms · slow</option><option value="0.9">900 ms · very slow</option></select></label>
        <label>Volume <output id="volumeLabel">35%</output><input id="soundVolume" type="range" min="0" max="100" value="35" aria-label="Volume"></label>
      </div>
      <div id="soundStatus" class="status" role="status" aria-live="polite">Loading the measured capture…</div>
      <button id="soundRetry" class="retry" hidden>Retry capture download</button>
      <div class="visual"><div class="canvas-head"><span id="activityTitle">Measured activity</span><span id="frameCount">Token 0 / 0</span></div><canvas id="soundCanvas" aria-label="Measured activity for the selected output token" role="img"></canvas><div class="canvas-foot"><span id="gridLegend">Every cell is one measured unit</span><span>low <i></i> high</span></div></div>
      <div class="transport"><button id="soundPlay" class="primary" disabled>▶ Play capture</button><button id="soundStop" disabled>Stop</button><button id="soundDownload" disabled>Download WAV ↓</button></div>
      <label class="scrubber-label" for="soundScrubber">Output token <span id="playTime">0:00 / 0:00</span></label><input id="soundScrubber" type="range" min="0" max="0" value="0" disabled aria-label="Select output token">
      <div class="token-now"><span>OUTPUT TOKEN</span><strong id="currentToken">…</strong></div>
      <p class="prompt"><strong>Recorded prompt</strong><br>Explain why the sky is blue in two sentences.</p>
      <div id="voiceReadings" class="readings" aria-label="Current sounding measurements"></div>
    </section>
    <section class="notes" aria-labelledby="mappingTitle"><div><p class="eyebrow">A COMPOSITION WITH A RECEIPT</p><h2 id="mappingTitle">The numbers choose the notes.</h2><p>These are the same real captures available in Model Observatory. No new inference runs here. Switching blocks changes which recorded measurements you hear.</p><a href="../">Inspect the original topology ↗</a></div><div class="mapping"><h3>Flint: six routed experts</h3><p>Each selected expert becomes a sine tone. Its expert ID chooses a note in a repeating, three-octave C pentatonic scale. Its routing weight sets amplitude using 0.11 × √weight. The shared expert and dense blocks are excluded.</p><h3>Qwen Open: recurrent head output</h3><p>The six recurrent value heads with the largest output RMS at each token become triangle tones. Head ID chooses a note on the same scale, one octave higher. Amplitude is 0.08 × RMS / the largest head RMS across the chosen block's capture. All 48 heads remain visible.</p><h3>How to read the comparison</h3><p>Both use a fixed token clock selected above, not the original inference timing. Pitch repeats every 15 IDs, so different IDs can share a note. Colors show routing weight for Flint and normalized head RMS for Qwen. The two mappings have different units and are not a model-quality comparison.</p><p class="fine">Mono, 22,050 Hz. Identical settings produce identical samples. A short attack and release soften note boundaries. WAV export includes the selected volume and stays on your device.</p></div></section>
  </main>
  <section class="recorded-clips" aria-label="Download recorded music clips"><h2>Take a clip with you.</h2><p>The same mapping, 350 ms per token and 35% volume.</p><a href="assets/flint-music.webm" download>Flint video ↓</a> · <a href="assets/flint-music.wav" download>Flint WAV ↓</a> · <a href="assets/qwen-open-music.webm" download>Qwen Open video ↓</a> · <a href="assets/qwen-open-music.wav" download>Qwen Open WAV ↓</a></section>
  <footer><span>Built by alphaBell</span><a href="../traces/index.json">Capture manifests and SHA-256 ↗</a><a href="../TRACE-FORMAT.md">Trace format ↗</a></footer>
</body>
</html>