| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8" />
|
| <title>SNAC 24k — Click-free Streaming (Robust scheduler + Cache)</title>
|
| <meta name="viewport" content="width=device-width, initial-scale=1" />
|
| <style>
|
| :root { color-scheme: dark light; }
|
| body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; margin:0 }
|
| header { padding:16px 20px; background:#111827; color:#f9fafb }
|
| main { padding:16px; display:grid; gap:16px; grid-template-columns:1fr 380px }
|
| section { border:1px solid #e5e7eb20; border-radius:12px; padding:12px 14px; background:#0b1220; color:#e5e7eb }
|
| h1{ margin:0 0 6px 0; font-size:20px } h2{ margin:8px 0; font-size:16px }
|
| .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
|
| .btn{ padding:8px 12px; border-radius:10px; border:1px solid #475569; background:#1f2937; color:#e5e7eb; cursor:pointer }
|
| .btn:disabled{ opacity:.5; cursor:not-allowed }
|
| .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace }
|
| textarea{ width:100%; min-height:160px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:#e5e7eb; padding:10px }
|
| input[type="number"],input[type="text"],select{ padding:6px 8px; border-radius:8px; border:1px solid #334155; background:#0b1220; color:#e5e7eb }
|
| .grid{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr) }
|
| .log{ height:180px; overflow:auto; background:#0a0f1c; border-radius:8px; padding:8px; border:1px solid #1f2937 }
|
| .small{ font-size:12px; opacity:.9 } .muted{ opacity:.7 }
|
| .pill{ display:inline-block; padding:4px 8px; border-radius:999px; background:#0b132b; border:1px solid #334155; margin:2px }
|
| .progress{ width:100%; height:8px; background:#111827; border-radius:999px; overflow:hidden; border:1px solid #374151 }
|
| .progress>div{ height:100%; background:#22c55e; width:0% }
|
| audio{ width:100%; margin-top:8px }
|
| </style>
|
| </head>
|
| <body>
|
| <header>
|
| <h1>SNAC 24 kHz — Click-free Streaming (Robust scheduler + Cache)</h1>
|
| <div class="small muted">Streaming uses 48-frame windows, default hop 40, center-keep & equal-power crossfade. Preloads model into IndexedDB cache.</div>
|
| </header>
|
|
|
| <main>
|
| <section>
|
| <h2>1) Inputs</h2>
|
| <div class="grid">
|
| <div>
|
| <div class="small muted">Model URL (int→wav ONNX)</div>
|
| <input id="modelUrl" class="mono" type="text" style="width:100%"
|
| value="https://huggingface.co/laion/SNAC-24khz-decoder-onnx/resolve/main/snac24_int2wav_static.onnx">
|
| </div>
|
| <div>
|
| <div class="small muted">Codes URL (flattened JSON)</div>
|
| <input id="codesUrl" class="mono" type="text" style="width:100%"
|
| value="https://huggingface.co/laion/SNAC-24khz-decoder-onnx/resolve/main/snac_flattened_stream.txt">
|
| </div>
|
| </div>
|
| <div class="row" style="margin-top:8px;gap:12px;">
|
| <button id="preloadBtn" class="btn">Preload model (and cache)</button>
|
| <button id="loadCodesBtn" class="btn">Load codes into textbox</button>
|
| <button id="clearCacheBtn" class="btn">Clear cache</button>
|
| <span id="preloadStatus" class="small pill">idle</span>
|
| </div>
|
| <div class="progress" style="margin:8px 0;"><div id="dlBar"></div></div>
|
| <div class="small" id="dlText"></div>
|
| </section>
|
|
|
| <section>
|
| <h2>2) Decode options</h2>
|
| <div class="grid">
|
| <div>
|
| <div class="small muted">Execution Provider</div>
|
| <select id="providerSel">
|
| <option value="webgpu">webgpu (if available)</option>
|
| <option value="wasm">wasm</option>
|
| </select>
|
| </div>
|
| <div>
|
| <div class="small muted">Streaming mode</div>
|
| <select id="modeSel">
|
| <option value="stream">Streaming (center-keep)</option>
|
| <option value="whole">Whole file (assemble then play)</option>
|
| <option value="fixed">Fixed windows (butt-join; for comparison)</option>
|
| </select>
|
| </div>
|
| <div>
|
| <div class="small muted">Hop (L2 frames)</div>
|
| <input id="hopFrames" type="number" min="8" max="48" step="4" value="40">
|
| </div>
|
| <div>
|
| <div class="small muted">Crossfade (ms)</div>
|
| <input id="xfadeMs" type="number" min="0" max="40" step="2" value="12">
|
| </div>
|
| <div>
|
| <div class="small muted">Keep center (L2 frames)</div>
|
| <input id="keepFrames" type="number" min="8" max="48" step="4" value="40">
|
| </div>
|
| <div>
|
| <div class="small muted">Window (L2 frames)</div>
|
| <input id="winFrames" type="number" min="48" max="48" step="0" value="48" disabled>
|
| </div>
|
| </div>
|
| <div class="row" style="margin-top:8px; gap:12px;">
|
| <label class="small"><input id="sequentialChk" type="checkbox"> Sequential playback (no overlap)</label>
|
| <span class="small muted">Sample rate 24,000 Hz</span>
|
| </div>
|
| <div class="row" style="margin-top:8px; gap:12px;">
|
| <button id="generateBtn" class="btn">Generate</button>
|
| </div>
|
| </section>
|
|
|
| <section style="grid-column:1 / span 2;">
|
| <h2>3) Flattened SNAC JSON</h2>
|
| <textarea id="snacIn" class="mono" spellcheck="false"
|
| placeholder='Paste the single-line JSON (with "flattened","lengths", optional "streaming") here…'></textarea>
|
| </section>
|
|
|
| <section>
|
| <h2>4) Output</h2>
|
| <div class="small">Player</div>
|
| <audio id="player" controls></audio>
|
| <div class="small" style="margin-top:8px;">Metrics</div>
|
| <pre id="metrics" class="log mono"></pre>
|
| </section>
|
|
|
| <section>
|
| <h2>5) Logs & Info</h2>
|
| <pre id="log" class="log mono"></pre>
|
| <div class="small muted">
|
| <p><b>WebGPU</b> runs operations on your GPU (fast when supported). <b>WASM</b> runs on CPU; SIMD is automatic; multithreading needs cross-origin isolation (COOP/COEP). Without COI, WASM uses 1 thread.</p>
|
| <p>Streaming: 48-frame windows, hop 40, keep center 40. Equal-power crossfade removes seams. “Sequential” forces no overlap and starts each chunk only after the previous ended (sets crossfade to 0).</p>
|
| </div>
|
| </section>
|
| </main>
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
|
| <script>
|
| (async () => {
|
| const el = id => document.getElementById(id);
|
| const modelUrl = el('modelUrl'), codesUrl = el('codesUrl');
|
| const preloadBtn = el('preloadBtn'), loadCodesBtn = el('loadCodesBtn'), clearCacheBtn = el('clearCacheBtn');
|
| const preloadStatus = el('preloadStatus'), dlBar = el('dlBar'), dlText = el('dlText');
|
| const providerSel = el('providerSel'), modeSel = el('modeSel');
|
| const hopFrames = el('hopFrames'), keepFrames = el('keepFrames'), xfadeMs = el('xfadeMs'), winFrames = el('winFrames');
|
| const sequentialChk = el('sequentialChk');
|
| const snacIn = el('snacIn'), player = el('player'), metrics = el('metrics'), logbox = el('log');
|
| const genBtn = el('generateBtn');
|
|
|
| const log = (...a)=>{ console.log(...a); logbox.textContent += a.join(' ') + '\n'; logbox.scrollTop = logbox.scrollHeight; }
|
| const fmt = o => JSON.stringify(o, null, 2);
|
|
|
|
|
| const DB='snac-cache', STORE='files';
|
| function idb(){ return new Promise((res,rej)=>{ const r=indexedDB.open(DB,1); r.onupgradeneeded=()=>r.result.createObjectStore(STORE); r.onsuccess=()=>res(r.result); r.onerror=()=>rej(r.error); }); }
|
| async function idbGet(k){ const db=await idb(); return new Promise((res,rej)=>{ const tx=db.transaction(STORE,'readonly'); const rq=tx.objectStore(STORE).get(k); rq.onsuccess=()=>res(rq.result||null); rq.onerror=()=>rej(rq.error); }); }
|
| async function idbSet(k,v){ const db=await idb(); return new Promise((res,rej)=>{ const tx=db.transaction(STORE,'readwrite'); tx.objectStore(STORE).put(v,k); tx.oncomplete=()=>res(true); tx.onerror=()=>rej(tx.error); }); }
|
| async function idbDel(k){ const db=await idb(); return new Promise((res,rej)=>{ const tx=db.transaction(STORE,'readwrite'); tx.objectStore(STORE).delete(k); tx.oncomplete=()=>res(true); tx.onerror=()=>rej(tx.error); }); }
|
| clearCacheBtn.onclick = async () => { await idbDel(modelUrl.value.trim()); log('Cache cleared for', modelUrl.value.trim()); };
|
|
|
|
|
| async function fetchWithProgress(url, onProg){
|
| const r = await fetch(url); if(!r.ok) throw new Error(`HTTP ${r.status} for ${url}`);
|
| const len = Number(r.headers.get('Content-Length'))||0;
|
| if(!r.body || !window.ReadableStream){ const buf=await r.arrayBuffer(); onProg?.(buf.byteLength,len); return buf; }
|
| const reader=r.body.getReader(); const chunks=[]; let got=0;
|
| for(;;){ const {done,value}=await reader.read(); if(done) break; chunks.push(value); got+=value.byteLength; onProg?.(got,len); }
|
| const out=new Uint8Array(got); let off=0; for(const c of chunks){ out.set(c,off); off+=c.byteLength; } return out.buffer;
|
| }
|
|
|
|
|
| const coi = (typeof crossOriginIsolated!=='undefined') ? crossOriginIsolated : false;
|
| ort.env.wasm.simd = true;
|
| ort.env.wasm.numThreads = coi ? (navigator.hardwareConcurrency||4) : 1;
|
|
|
|
|
| let session=null, sessionEP=null;
|
| async function preloadModel(){
|
| try{
|
| const url = modelUrl.value.trim();
|
| preloadBtn.disabled = true; dlBar.style.width='0%'; dlText.textContent=''; preloadStatus.textContent='checking cache…';
|
| let buf = await idbGet(url);
|
| if(buf){ preloadStatus.textContent='cache hit'; dlBar.style.width='100%'; dlText.textContent='Loaded from IndexedDB'; }
|
| else{
|
| preloadStatus.textContent='downloading…';
|
| buf = await fetchWithProgress(url, (got,total)=>{
|
| const pct = total ? Math.round(100*got/total) : 0;
|
| dlBar.style.width = `${pct}%`;
|
| dlText.textContent = total ? `Downloading: ${pct}% (${(got/1e6).toFixed(1)} / ${(total/1e6).toFixed(1)} MB)` :
|
| `Downloading: ${(got/1e6).toFixed(1)} MB`;
|
| });
|
| await idbSet(url, buf); log('Cached model to IndexedDB');
|
| }
|
| const want = (providerSel.value==='webgpu' && 'gpu' in navigator) ? ['webgpu','wasm'] : ['wasm'];
|
| const t0=performance.now();
|
| preloadStatus.textContent='compiling…';
|
| session = await ort.InferenceSession.create(buf, { executionProviders: want, graphOptimizationLevel: 'all' });
|
| const t1=performance.now(); sessionEP = session.executionProvider ?? want[0];
|
| preloadStatus.textContent=`ready (${(t1-t0).toFixed(1)} ms) via ${sessionEP}`;
|
| log('Session ready. EP:', sessionEP, 'compile_ms:', (t1-t0).toFixed(1));
|
| }catch(e){ log('Preload error:', e); }
|
| finally{ preloadBtn.disabled=false; }
|
| }
|
| preloadBtn.onclick = preloadModel;
|
| window.addEventListener('load', ()=>preloadModel().catch(e=>log('Preload error:',e)));
|
|
|
|
|
| loadCodesBtn.onclick = async ()=>{
|
| try{ const r=await fetch(codesUrl.value.trim()); if(!r.ok) throw new Error(`HTTP ${r.status}`);
|
| const txt=await r.text(); snacIn.value = txt.trim(); log('Loaded codes text.'); }
|
| catch(e){ log('Load codes error:', e); }
|
| };
|
|
|
|
|
| const SPF = 512, SR = 24000;
|
| function unflatten(flat,L0,A=0,K=4096){
|
| const L1=2*L0, L2=4*L0;
|
| const c0=new BigInt64Array(L0), c1=new BigInt64Array(L1), c2=new BigInt64Array(L2);
|
| const bA=BigInt(A), bK=BigInt(K), mod=v=>((v%bK)+bK)%bK;
|
| for(let i=0;i<L0;i++){
|
| const v0=BigInt(flat[7*i+0])-(bA+0n*bK), v1=BigInt(flat[7*i+1])-(bA+1n*bK);
|
| const v2=BigInt(flat[7*i+2])-(bA+2n*bK), v3=BigInt(flat[7*i+3])-(bA+3n*bK);
|
| const v4=BigInt(flat[7*i+4])-(bA+4n*bK), v5=BigInt(flat[7*i+5])-(bA+5n*bK), v6=BigInt(flat[7*i+6])-(bA+6n*bK);
|
| c0[i]=mod(v0); c1[2*i]=mod(v1); c2[4*i]=mod(v2); c2[4*i+1]=mod(v3);
|
| c1[2*i+1]=mod(v4); c2[4*i+2]=mod(v5); c2[4*i+3]=mod(v6);
|
| }
|
| return {c0,c1,c2};
|
| }
|
| function sliceEdgePad(src,start,len){
|
| const T=src.length, out=new BigInt64Array(len);
|
| for(let i=0;i<len;i++){ let j=start+i; if(j<0) j=0; if(j>=T) j=T-1; out[i]=src[j]; }
|
| return out;
|
| }
|
| function concatFloat32(a,b){ const out=new Float32Array(a.length+b.length); out.set(a,0); out.set(b,a.length); return out; }
|
|
|
|
|
| async function generate(){
|
| try{
|
| genBtn.disabled=true; metrics.textContent=''; logbox.textContent='';
|
| if(!session) await preloadModel();
|
|
|
| const blob = JSON.parse(snacIn.value.trim());
|
| const A = blob.audio_tokens_start ?? 0;
|
| const K = blob.codebook_size ?? 4096;
|
| const L0 = blob.lengths?.L0 ?? Math.floor((blob.flattened.length)/7);
|
| const flat = blob.flattened; if(!Array.isArray(flat)) throw new Error("flattened missing");
|
| const {c0,c1,c2} = unflatten(flat, L0, A, K);
|
| const L2=c2.length, T_true=L2*SPF;
|
| log(`Parsed L0/L1/L2 = ${L0}/${c1.length}/${L2} -> true samples ${T_true}`);
|
|
|
|
|
| const s = blob.streaming || {};
|
| const K2 = Number(winFrames.value)||48;
|
| const H2 = Number(hopFrames.value)||Number(s.hop_frames||40);
|
| const keepF = Number(keepFrames.value)||Number(s.center_keep_frames||40);
|
| const leftCtx = Number(s.left_ctx_frames ?? ((K2-keepF)/2));
|
| const xfade = Number(xfadeMs.value ?? s.xfade_ms_default ?? 12);
|
| const sequential = !!sequentialChk.checked;
|
| const overlapSec = sequential ? 0 : (xfade/1000);
|
|
|
| const SAFETY = 0.040;
|
| const ctx = new (window.AudioContext||window.webkitAudioContext)({sampleRate: SR});
|
| let playClock = ctx.currentTime + 0.10;
|
| let scheduledEnd = null;
|
| let windows=0, samples=0; const t0=performance.now();
|
|
|
| async function runWindow(c0w,c1w,c2w, keepStart, keepEnd){
|
| const feeds = {
|
| codes0: new ort.Tensor('int64', c0w,[1,c0w.length]),
|
| codes1: new ort.Tensor('int64', c1w,[1,c1w.length]),
|
| codes2: new ort.Tensor('int64', c2w,[1,c2w.length]),
|
| };
|
| const tA=performance.now();
|
| const out = await session.run(feeds);
|
| const tB=performance.now();
|
| const audio = out.audio.data;
|
| const kept = audio.subarray(keepStart, keepEnd);
|
| const segSec = kept.length / SR;
|
| samples += kept.length;
|
|
|
|
|
| const buf = ctx.createBuffer(1, kept.length, SR);
|
| buf.copyToChannel(kept, 0, 0);
|
| const src = ctx.createBufferSource(); src.buffer = buf;
|
| const g = ctx.createGain(); g.gain.setValueAtTime(1, ctx.currentTime);
|
| src.connect(g).connect(ctx.destination);
|
|
|
|
|
| const desiredStart = (scheduledEnd==null) ? playClock : (sequential ? scheduledEnd : scheduledEnd - overlapSec);
|
| const now = ctx.currentTime;
|
| const startAt = Math.max(desiredStart, now + SAFETY);
|
| const endAt = startAt + segSec;
|
|
|
|
|
| if(!sequential && scheduledEnd!==null && overlapSec>0){
|
| const prevDropStart = startAt;
|
| const prevDropEnd = Math.min(startAt + overlapSec, scheduledEnd);
|
|
|
| const prev = lastGainNode;
|
| if(prev){
|
| prev.gain.setValueAtTime(1, prevDropStart);
|
| prev.gain.linearRampToValueAtTime(0, prevDropEnd);
|
| }
|
|
|
| g.gain.setValueAtTime(0, startAt);
|
| g.gain.linearRampToValueAtTime(1, startAt + overlapSec);
|
| }
|
|
|
| src.start(startAt);
|
| windows += 1;
|
| scheduledEnd = endAt;
|
| lastGainNode = g;
|
|
|
| const late = Math.max(0, (now + SAFETY) - desiredStart);
|
| log(`win#${windows} infer ${(tB-tA).toFixed(2)} ms now ${now.toFixed(3)} desired ${desiredStart.toFixed(3)} start ${startAt.toFixed(3)} end ${endAt.toFixed(3)} overlap ${sequential?0:(overlapSec*1000)} ms late ${ (late*1000).toFixed(1)} ms`);
|
| }
|
|
|
|
|
| function* fixedWindows(){
|
| const nWin=Math.ceil(L2/48);
|
| for(let i=0;i<nWin;i++){
|
| const s2=i*48,s1=i*24,s0=i*12;
|
| yield { c0w:sliceEdgePad(c0,s0,12), c1w:sliceEdgePad(c1,s1,24), c2w:sliceEdgePad(c2,s2,48),
|
| keepStart:0, keepEnd:48*SPF };
|
| }
|
| }
|
| function* slidingCenterWindows(){
|
| let s2=0,i=0; const keepStart = ((K2-keepF)/2)*SPF, keepEnd=((K2-keepF)/2+keepF)*SPF;
|
| while(s2 < L2 || i===0){
|
| const s1=Math.floor(s2/2), s0=Math.floor(s2/4);
|
| yield { c0w:sliceEdgePad(c0,s0,K2/4), c1w:sliceEdgePad(c1,s1,K2/2), c2w:sliceEdgePad(c2,s2,K2),
|
| keepStart, keepEnd };
|
| s2 += (modeSel.value==='fixed'?48:H2); i++; if(s2>=L2 && modeSel.value!=='fixed') break;
|
| }
|
| }
|
|
|
|
|
| const mode=modeSel.value;
|
| let gen;
|
| if(mode==='fixed') gen = fixedWindows;
|
| else gen = slidingCenterWindows;
|
|
|
|
|
| let lastGainNode = null;
|
| if(mode==='whole'){
|
|
|
| let full = new Float32Array(0);
|
| for(const {c0w,c1w,c2w,keepStart,keepEnd} of slidingCenterWindows()){
|
| const out = await session.run({
|
| codes0:new ort.Tensor('int64', c0w,[1,c0w.length]),
|
| codes1:new ort.Tensor('int64', c1w,[1,c1w.length]),
|
| codes2:new ort.Tensor('int64', c2w,[1,c2w.length]),
|
| });
|
| const a = out.audio.data.subarray(keepStart, keepEnd);
|
| full = concatFloat32(full, a);
|
| windows++; samples += a.length;
|
| }
|
| full = full.subarray(0, T_true);
|
| const wav = pcm16Wav(full, SR);
|
| player.src = URL.createObjectURL(new Blob([wav], {type:'audio/wav'}));
|
| await player.play().catch(()=>{});
|
| } else {
|
| for(const w of gen()){
|
| await runWindow(w.c0w, w.c1w, w.c2w, w.keepStart, w.keepEnd);
|
| }
|
| }
|
|
|
| const t1=performance.now();
|
| const r = {
|
| usedEP: sessionEP || providerSel.value,
|
| threads: ort.env.wasm.numThreads||1,
|
| simd: ort.env.wasm.simd===true,
|
| coi, windows, samples,
|
| audio_seconds: samples/SR,
|
| inference_ms: (t1-t0),
|
| rtf: ( (samples/SR) / ((t1-t0)/1000) ).toFixed(3)
|
| };
|
| metrics.textContent = fmt({env:{coi, hwc:navigator.hardwareConcurrency||1}, providers:['webgpu','wasm']}) + "\n" + fmt(r);
|
| log('Done.', r);
|
|
|
| function pcm16Wav(float32, sr){
|
| const clamp=v=>Math.max(-1,Math.min(1,v));
|
| const pcm=new Int16Array(float32.length); for(let i=0;i<float32.length;i++) pcm[i]=Math.round(clamp(float32[i])*32767);
|
| const bytes=44+pcm.length*2, buf=new ArrayBuffer(bytes), dv=new DataView(buf); let p=0, w=s=>{ for(let i=0;i<s.length;i++) dv.setUint8(p++, s.charCodeAt(i)); };
|
| w('RIFF'); dv.setUint32(p,bytes-8,true); p+=4; w('WAVE'); w('fmt '); dv.setUint32(p,16,true); p+=4;
|
| dv.setUint16(p,1,true); p+=2; dv.setUint16(p,1,true); p+=2; dv.setUint32(p,sr,true); p+=4;
|
| dv.setUint32(p,sr*2,true); p+=4; dv.setUint16(p,2,true); p+=2; dv.setUint16(p,16,true); p+=2;
|
| w('data'); dv.setUint32(p, pcm.length*2, true); p+=4; new Uint8Array(buf).set(new Uint8Array(pcm.buffer),44); return new Uint8Array(buf);
|
| }
|
| }catch(e){ console.error(e); log('ERROR:', e.message||e); }
|
| finally{ genBtn.disabled=false; }
|
| }
|
|
|
| genBtn.onclick = generate;
|
| })();
|
| </script>
|
| </body>
|
| </html>
|
|
|
