Upload index.html with huggingface_hub

index.html

@@ -26,7 +26,7 @@ html,body{background:#161719;overflow:hidden}
     US({activeNotes:[...activeNotes]}); applyVol(); setStyle(lastData||[{text:'instrumental music',weight:1}]); }
   function initMidi(a){ midiDevs=[]; let ep=1; for(const i of a.inputs.values()){ i.onmidimessage=onMidi; midiDevs.push({name:i.name||("MIDI "+ep),endpoint:ep,port:i}); ep++; } pushMidi(); }
   if(navigator.requestMIDIAccess){ navigator.requestMIDIAccess().then(a=>{ initMidi(a); a.onstatechange=()=>initMidi(a); }).catch(()=>{}); }
-  let playing=false, ctx=null, analyser=null, gain=null, vol=1, muted=false, midigate=false, bypassed=false, nextTime=0, client=null, freq=null;
+  let playing=false, ctx=null, analyser=null, gain=null, vol=1, muted=false, midigate=false, bypassed=false, nextTime=0, client=null, freq=null, ws=null;
   let sessionLen=120, budget=120, lastBT=0, mtick=0, settingsOpen=false, resetSeq=0, seedVal=0, bankVer=0, bankOp=null, prefillVer=0, prefillOp=null;
   const US=s=>{ if(window.updateState) window.updateState(s); };
 
@@ -108,14 +108,19 @@ html,body{background:#161719;overflow:hidden}
         temperature:params.temperature,top_k:params.topk|0,cfg:params.cfg,cfg_notes:params.cfgnotes,cfg_drums:params.cfgdrums,buffer:params.buffer|0,
         notes:[...activeNotes],unmaskwidth:params.unmaskwidth|0,drumless:!!params.drumless,onsetmode:!!params.onsetmode,reset:resetSeq,seed:seedVal,bank_op:bankOp,prefill_op:prefillOp,model:currentModel})}); }catch(e){}
   }
-  function playChunk(b64){
-    const bin=atob(b64),by=new Uint8Array(bin.length); for(let i=0;i<bin.length;i++)by[i]=bin.charCodeAt(i);
-    const i16=new Int16Array(by.buffer),n=i16.length>>1; if(n<1)return;
+  function playPCM(i16){ const n=i16.length>>1; if(n<1||!ctx)return;
     const buf=ctx.createBuffer(2,n,SR),L=buf.getChannelData(0),R=buf.getChannelData(1);
     for(let i=0;i<n;i++){L[i]=i16[2*i]/32768;R[i]=i16[2*i+1]/32768;}
     const s=ctx.createBufferSource(); s.buffer=buf; s.connect(analyser);
     if(nextTime<ctx.currentTime+0.03)nextTime=ctx.currentTime+0.1; s.start(nextTime); nextTime+=n/SR;
+    fetch("/buffer",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({session_id:SID,lead:((nextTime-ctx.currentTime)*1000)|0})}).catch(()=>{});
   }
+  function playChunk(b64){ const bin=atob(b64),by=new Uint8Array(bin.length); for(let i=0;i<bin.length;i++)by[i]=bin.charCodeAt(i); playPCM(new Int16Array(by.buffer)); }
+  function startWS(){ if(ws){ try{ws.close();}catch(e){} } 
+    ws=new WebSocket(window.location.origin.replace(/^http/,"ws")+"/ws?session_id="+encodeURIComponent(SID)); ws.binaryType="arraybuffer";
+    ws.onmessage=(e)=>{ if(!playing||budget<=0)return; const b=e.data; if(!b||b.byteLength<4)return; const fm=new DataView(b).getFloat32(0,true); const i16=new Int16Array(b,4);
+      US({metrics:{frameMs:fm,droppedFrames:0,buffersize:(ctx?Math.max(0,(nextTime-ctx.currentTime)*1000)|0:0)}}); playPCM(i16); };
+    ws.onclose=()=>{ if(playing&&budget>0) setTimeout(startWS,400); }; }
   function applyVol(){ if(gain) gain.gain.value = (muted||bypassed||(midigate&&!activeNotes.size))?0:vol; }
   function meter(){
     if(analyser){ analyser.getByteFrequencyData(freq); let m=0; for(let i=0;i<20;i++)m+=freq[i]; const lv=Math.min(1,m/20/150);
@@ -134,11 +139,13 @@ html,body{background:#161719;overflow:hidden}
     }
   }
   async function toggle(depleted){
-    if(playing||depleted){ playing=false; US({isPlaying:false}); if(ctx)ctx.suspend(); emitGpu(); return; }
+    if(playing||depleted){ playing=false; US({isPlaying:false}); if(ctx)ctx.suspend(); if(ws){try{ws.close();}catch(e){}ws=null;} emitGpu(); return; }
     if(!ctx){ ctx=new AudioContext({sampleRate:SR}); analyser=ctx.createAnalyser(); analyser.fftSize=64; gain=ctx.createGain(); analyser.connect(gain); gain.connect(ctx.destination); freq=new Uint8Array(analyser.frequencyBinCount); applyVol(); meter(); }
     await ctx.resume(); nextTime=ctx.currentTime+0.15; budget=sessionLen; lastBT=performance.now();
     playing=true; US({isPlaying:true}); emitGpu(); await setStyle(lastData);
-    if(!client) client=await Client.connect(window.location.origin); loop();
+    if(!client) client=await Client.connect(window.location.origin);
+    try{ const j=client.submit("/start",{session_id:SID}); for await(const _ of j){} }catch(e){}
+    startWS();
   }
   // ── discreet ZeroGPU-session slider by the play button ──
   function fmt(s){ s=Math.max(0,s|0); return Math.floor(s/60)+":"+String(s%60).padStart(2,"0"); }