Spaces:
Running
Running
| /* alphaBell: deterministic sonification of measured capture data. */ | |
| (function (root) { | |
| 'use strict'; | |
| const PENTATONIC = [0, 2, 4, 7, 9]; | |
| const SAMPLE_RATE = 22050; | |
| function frequency(id, model) { | |
| const note = id % 15; | |
| const midi = (model === 'qwen' ? 60 : 48) + Math.floor(note / 5) * 12 + PENTATONIC[note % 5]; | |
| return 440 * 2 ** ((midi - 69) / 12); | |
| } | |
| function buildScore(trace, layer, seconds = .35) { | |
| if (!trace || !Array.isArray(trace.frames) || !trace.frames.length || trace.frames.length > 256) throw new Error('A complete capture is required.'); | |
| const model = trace.model?.id || (trace.schema === 'flint.trace.v1' ? 'flint' : null); | |
| if (!['flint', 'qwen'].includes(model) || !Number.isInteger(layer) || layer < 0 || !Number.isFinite(seconds) || seconds < .15 || seconds > 1 || trace.frames.length * seconds > 90) throw new Error('Unsupported score settings.'); | |
| const frames = trace.frames.map(frame => { | |
| const block = frame.layers?.[layer]; | |
| if (!block) throw new Error('The chosen block is missing.'); | |
| if (model === 'flint') { | |
| if (!Array.isArray(block.experts) || block.experts.length !== 6 || !Array.isArray(block.weights) || block.weights.length !== 6 || new Set(block.experts).size !== 6 || !block.experts.every(id => Number.isInteger(id) && id >= 0 && id < 256) || !block.weights.every(v => Number.isFinite(v) && v >= 0 && v <= 1)) throw new Error('Choose a Flint block with six measured routed experts.'); | |
| } else if (!Array.isArray(block.retention) || !Array.isArray(block.heads) || block.heads.length !== 48 || !block.heads.every(v => Number.isFinite(v) && v >= 0)) throw new Error('Choose a Qwen recurrent block with 48 measured value heads.'); | |
| return block; | |
| }); | |
| let maximum = 0; | |
| if (model === 'qwen') for (const block of frames) for (const value of block.heads) maximum = Math.max(maximum, value); | |
| const events = frames.map((block, index) => { | |
| let voices; | |
| if (model === 'flint') voices = block.experts.map((id, rank) => ({ id, value: block.weights[rank], normalized: block.weights[rank], amplitude: .11 * Math.sqrt(block.weights[rank]), frequency: frequency(id, model), waveform: 'sine' })); | |
| else voices = block.heads.map((value, id) => ({ id, value, normalized: maximum ? value / maximum : 0 })).sort((a, b) => b.value - a.value || a.id - b.id).slice(0, 6).map(voice => ({ ...voice, amplitude: .08 * voice.normalized, frequency: frequency(voice.id, model), waveform: 'triangle' })); | |
| return { index, text: trace.frames[index].text, start: index * seconds, duration: seconds, voices }; | |
| }); | |
| return { model, layer, seconds, maximum, duration: events.length * seconds, sampleRate: SAMPLE_RATE, events }; | |
| } | |
| function renderPCM(score) { | |
| if (!score || !Number.isFinite(score.duration) || score.duration <= 0 || score.duration > 90 || score.sampleRate !== SAMPLE_RATE || !Array.isArray(score.events)) throw new Error('Unsupported audio duration or sample rate.'); | |
| const pcm = new Float32Array(Math.ceil(score.duration * SAMPLE_RATE)); | |
| for (const event of score.events) { | |
| const start = Math.round(event.start * SAMPLE_RATE), end = Math.min(pcm.length, Math.round((event.start + event.duration) * SAMPLE_RATE)); | |
| const length = end - start, attack = Math.max(1, Math.min(Math.round(.012 * SAMPLE_RATE), length / 4)), release = Math.max(1, Math.min(Math.round(.05 * SAMPLE_RATE), length / 3)); | |
| for (let i = 0; i < length; i++) { | |
| const envelope = Math.min(1, i / attack, (length - 1 - i) / release); | |
| let value = 0; | |
| for (const voice of event.voices) { | |
| const phase = 2 * Math.PI * voice.frequency * i / SAMPLE_RATE; | |
| const wave = voice.waveform === 'triangle' ? 2 / Math.PI * Math.asin(Math.sin(phase)) : Math.sin(phase); | |
| value += wave * voice.amplitude; | |
| } | |
| pcm[start + i] = Math.max(-1, Math.min(1, value * envelope)); | |
| } | |
| } | |
| return pcm; | |
| } | |
| function encodeWAV(pcm, volume = .35) { | |
| if (!(pcm instanceof Float32Array) || pcm.length > SAMPLE_RATE * 90 || !Number.isFinite(volume) || volume < 0 || volume > 1) throw new Error('Unsupported WAV samples or volume.'); | |
| const buffer = new ArrayBuffer(44 + pcm.length * 2), view = new DataView(buffer); | |
| const str = (at, value) => { for (let i = 0; i < value.length; i++) view.setUint8(at + i, value.charCodeAt(i)); }; | |
| str(0, 'RIFF'); view.setUint32(4, buffer.byteLength - 8, true); str(8, 'WAVE'); str(12, 'fmt '); view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true); view.setUint32(24, SAMPLE_RATE, true); view.setUint32(28, SAMPLE_RATE * 2, true); view.setUint16(32, 2, true); view.setUint16(34, 16, true); str(36, 'data'); view.setUint32(40, pcm.length * 2, true); | |
| for (let i = 0; i < pcm.length; i++) { const value = Math.max(-1, Math.min(1, pcm[i] * volume)); view.setInt16(44 + i * 2, Math.round(value * (value < 0 ? 32768 : 32767)), true); } | |
| return buffer; | |
| } | |
| const API = { frequency, buildScore, renderPCM, encodeWAV, SAMPLE_RATE }; | |
| if (typeof module !== 'undefined' && module.exports) module.exports = API; | |
| root.ObservatorySound = API; | |
| if (typeof document === 'undefined') return; | |
| const $ = id => document.getElementById(id); | |
| const state = { trace: null, score: null, pcm: null, buffer: null, context: null, gain: null, source: null, playing: false, starting: false, animation: 0, offset: 0, started: 0, frame: 0, request: 0, cache: new Map(), models: null, manifest: null }; | |
| const formatTime = seconds => `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, '0')}`; | |
| function status(text, error = false) { $('soundStatus').textContent = text; $('soundStatus').classList.toggle('error', error); } | |
| function buttons(ready) { for (const id of ['soundPlay', 'soundStop', 'soundDownload', 'soundScrubber', 'soundLayer']) $(id).disabled = !ready; } | |
| function position() { return state.playing ? Math.min(state.score.duration, state.offset + state.context.currentTime - state.started) : state.offset; } | |
| function pause(reset = false) { | |
| state.animation++; | |
| if (state.playing) state.offset = position(); | |
| state.playing = false; | |
| if (state.source) { state.source.onended = null; state.source.stop(); state.source.disconnect(); state.source = null; } | |
| if (reset) { state.offset = 0; state.frame = 0; } | |
| $('soundPlay').textContent = '▶ Play capture'; | |
| if (state.score) paint(); | |
| } | |
| function remake() { | |
| pause(true); | |
| if (!state.trace) return; | |
| state.score = buildScore(state.trace, Number($('soundLayer').value), Number($('soundSpeed').value)); | |
| state.pcm = renderPCM(state.score); state.buffer = null; | |
| $('soundScrubber').max = state.score.events.length - 1; | |
| buttons(true); | |
| status(`Verified Q8_0 capture · ${state.score.events.length} measured output tokens · ${state.score.duration.toFixed(1)} seconds of mapped audio. Press Play to enable sound.`); | |
| paint(); | |
| } | |
| async function play() { | |
| if (!state.score || state.starting) return; | |
| if (state.playing) { pause(); return; } | |
| state.starting = true; | |
| const score = state.score; | |
| try { | |
| const Audio = root.AudioContext || root.webkitAudioContext; | |
| if (!Audio) throw new Error('Audio playback is unavailable in this browser. You can still download the WAV.'); | |
| if (!state.context) { state.context = new Audio(); state.gain = state.context.createGain(); state.gain.connect(state.context.destination); } | |
| await state.context.resume(); | |
| if (state.score !== score || document.hidden) return; | |
| if (state.offset >= state.score.duration) state.offset = 0; | |
| if (!state.buffer) { state.buffer = state.context.createBuffer(1, state.pcm.length, SAMPLE_RATE); state.buffer.copyToChannel(state.pcm, 0); } | |
| state.gain.gain.setValueAtTime(Number($('soundVolume').value) / 100, state.context.currentTime); | |
| const source = state.context.createBufferSource(); source.buffer = state.buffer; source.connect(state.gain); state.source = source; | |
| state.started = state.context.currentTime; state.playing = true; | |
| source.onended = () => { if (state.source === source) { state.offset = state.score.duration; state.playing = false; state.source = null; source.disconnect(); $('soundPlay').textContent = '▶ Replay capture'; paint(); } }; | |
| source.start(0, state.offset); $('soundPlay').textContent = 'Ⅱ Pause capture'; | |
| const animation = ++state.animation; | |
| const tick = () => { if (!state.playing || state.animation !== animation) return; paint(); requestAnimationFrame(tick); }; requestAnimationFrame(tick); | |
| } catch (error) { pause(); status(error.message, true); } finally { state.starting = false; } | |
| } | |
| function paint() { | |
| if (!state.score) return; | |
| const time = position(), index = Math.min(state.score.events.length - 1, Math.floor(time / state.score.seconds)); state.frame = index; | |
| const event = state.score.events[index], block = state.trace.frames[index].layers[state.score.layer], flint = state.score.model === 'flint'; | |
| $('frameCount').textContent = `Token ${index + 1} / ${state.score.events.length}`; | |
| $('playTime').textContent = `${formatTime(time)} / ${formatTime(state.score.duration)}`; | |
| $('soundScrubber').value = index; | |
| $('currentToken').textContent = event.text.replace(/\n/g, '↵') || '∅'; | |
| $('activityTitle').textContent = `${flint ? 'EXPERT ROUTING' : 'RECURRENT HEAD OUTPUT'} · BLOCK ${state.score.layer}`; | |
| $('gridLegend').textContent = flint ? '256 experts · 6 selected' : '48 heads · top 6 audible'; | |
| const canvas = $('soundCanvas'), width = canvas.clientWidth, height = canvas.clientHeight, ratio = Math.min(2, root.devicePixelRatio || 1); | |
| if (canvas.width !== Math.round(width * ratio) || canvas.height !== Math.round(height * ratio)) { canvas.width = Math.round(width * ratio); canvas.height = Math.round(height * ratio); } | |
| const context = canvas.getContext('2d'); context.setTransform(ratio, 0, 0, ratio, 0, 0); context.clearRect(0, 0, width, height); | |
| const columns = flint ? 16 : 8, rows = flint ? 16 : 6, gap = flint ? 3 : 6, cw = (width - gap * (columns - 1)) / columns, ch = (height - gap * (rows - 1)) / rows; | |
| for (let id = 0; id < columns * rows; id++) { | |
| const rank = flint ? block.experts.indexOf(id) : -1; | |
| const value = flint ? (rank < 0 ? 0 : block.weights[rank]) : (state.score.maximum ? block.heads[id] / state.score.maximum : 0); | |
| const shade = Math.pow(Math.min(1, value * (flint ? 3 : 1)), .6); | |
| const a = [220,230,208], b = [36,102,68]; context.fillStyle = `rgb(${a.map((v, i) => Math.round(v + (b[i] - v) * shade)).join(',')})`; | |
| const x = (id % columns) * (cw + gap), y = Math.floor(id / columns) * (ch + gap); context.fillRect(x, y, cw, ch); | |
| if (!flint) { context.fillStyle = shade > .5 ? '#fffef8' : '#526849'; context.font = '10px ui-monospace,monospace'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(String(id), x + cw / 2, y + ch / 2); } | |
| if (event.voices.some(voice => voice.id === id)) { context.strokeStyle = '#1d4e35'; context.lineWidth = 1.5; context.strokeRect(x + .7, y + .7, cw - 1.4, ch - 1.4); } | |
| } | |
| if ($('voiceReadings').dataset.frame !== `${state.score.model}:${state.score.layer}:${index}`) { | |
| $('voiceReadings').dataset.frame = `${state.score.model}:${state.score.layer}:${index}`; | |
| $('voiceReadings').replaceChildren(...event.voices.map(voice => { const div = document.createElement('div'); div.className = 'reading'; const label = document.createElement('strong'); label.textContent = `${flint ? 'Expert' : 'Head'} ${voice.id} · ${voice.frequency.toFixed(0)} Hz`; div.append(label, document.createTextNode(flint ? `${(100 * voice.value).toFixed(2)}% weight` : `${voice.value.toPrecision(4)} RMS`)); return div; })); | |
| } | |
| } | |
| async function sha256(bytes) { return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', bytes)), b => b.toString(16).padStart(2, '0')).join(''); } | |
| async function load() { | |
| const request = ++state.request, model = $('soundModel').value; | |
| pause(true); buttons(false); state.score = null; state.trace = null; state.pcm = null; state.buffer = null; $('soundRetry').hidden = true; | |
| $('currentToken').textContent = '…'; $('voiceReadings').replaceChildren(); $('voiceReadings').dataset.frame = ''; | |
| status(`Loading ${model === 'flint' ? 'Flint' : 'Qwen'} measured capture and verifying both SHA-256 checksums…`); | |
| try { | |
| if (!state.models || !state.manifest) { | |
| const [modelsResponse, manifestResponse] = await Promise.all([fetch('../models.json'), fetch('../traces/index.json')]); | |
| if (!modelsResponse.ok || !manifestResponse.ok) throw new Error('The capture registry could not be loaded.'); | |
| [state.models, state.manifest] = await Promise.all([modelsResponse.json(), manifestResponse.json()]); | |
| } | |
| let trace = state.cache.get(model); | |
| if (!trace) { | |
| const row = state.manifest.find(item => item.model === model); | |
| if (!row) throw new Error('No capture is available for this model.'); | |
| const response = await fetch('../' + row.file); if (!response.ok) throw new Error('The capture download failed.'); | |
| const compressed = await response.arrayBuffer(); if (await sha256(compressed) !== row.gzip_sha256) throw new Error('Compressed capture checksum did not match. Retry the download.'); | |
| if (typeof DecompressionStream === 'undefined') throw new Error('This browser needs gzip stream support. Open in a current Chrome, Firefox or Safari.'); | |
| const plain = await new Response(new Blob([compressed]).stream().pipeThrough(new DecompressionStream('gzip'))).arrayBuffer(); | |
| if (await sha256(plain) !== row.sha256) throw new Error('Decoded capture checksum did not match. Retry the download.'); | |
| trace = JSON.parse(new TextDecoder().decode(plain)); | |
| root.validateObservatoryTrace(trace, state.models); | |
| state.cache.set(model, trace); | |
| } | |
| if (request !== state.request) return; | |
| state.trace = trace; | |
| const config = state.models.find(item => item.id === model).architecture; | |
| const eligible = config.layer_types.map((type, index) => ({ type, index })).filter(({ type, index }) => model === 'flint' ? index >= (config.first_k_dense_replace || 0) && !(config.mlp_only_layers || []).includes(index) : type === 'linear_attention'); | |
| $('soundLayer').replaceChildren(...eligible.map(({ index }) => { const option = document.createElement('option'); option.value = index; option.textContent = `Block ${index} · ${model === 'flint' ? 'MoE' : 'recurrent'}`; return option; })); | |
| $('soundLayer').value = model === 'flint' ? '12' : '0'; remake(); | |
| } catch (error) { if (request === state.request) { status(error.message + ' Your browser has not started audio.', true); $('soundRetry').hidden = false; } } | |
| } | |
| $('soundModel').addEventListener('change', load); | |
| $('soundRetry').addEventListener('click', load); | |
| $('soundLayer').addEventListener('change', remake); | |
| $('soundSpeed').addEventListener('change', remake); | |
| $('soundPlay').addEventListener('click', play); | |
| $('soundStop').addEventListener('click', () => pause(true)); | |
| $('soundVolume').addEventListener('input', () => { const volume = Number($('soundVolume').value) / 100; $('volumeLabel').textContent = Math.round(volume * 100) + '%'; if (state.gain) state.gain.gain.setTargetAtTime(volume, state.context.currentTime, .02); }); | |
| $('soundScrubber').addEventListener('input', () => { const wasPlaying = state.playing, frame = Number($('soundScrubber').value); pause(); state.offset = frame * state.score.seconds; paint(); if (wasPlaying) play(); }); | |
| $('soundDownload').addEventListener('click', () => { if (!state.pcm) return; const blob = new Blob([encodeWAV(state.pcm, Number($('soundVolume').value) / 100)], { type: 'audio/wav' }); const url = URL.createObjectURL(blob), anchor = document.createElement('a'); anchor.href = url; anchor.download = `alphabell-${state.score.model}-block-${state.score.layer}-${Math.round(state.score.seconds * 1000)}ms.wav`; anchor.click(); setTimeout(() => URL.revokeObjectURL(url), 30000); }); | |
| root.addEventListener('resize', paint); | |
| document.addEventListener('visibilitychange', () => { if (document.hidden) pause(); }); | |
| root.addEventListener('pagehide', () => { pause(); if (state.context) state.context.close(); }); | |
| load(); | |
| })(typeof globalThis !== 'undefined' ? globalThis : this); | |