Upload app.py

app.py

@@ -2,206 +2,375 @@ import gradio as gr
 import spaces
 
 PAGE = r"""
-<div id="sam-webgpu-test" style="font-family:system-ui,sans-serif;max-width:1000px;margin:auto">
-  <style>
-    #sam-webgpu-test .card{border:1px solid var(--border-color-primary);border-radius:12px;padding:16px;margin:14px 0}
-    #sam-webgpu-test .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-    #sam-webgpu-test .log{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--background-fill-secondary);padding:12px;border-radius:8px;font:13px/1.5 ui-monospace,monospace;min-height:28px}
-    #sam-webgpu-test .muted{opacity:.75;font-size:.9rem}
-    #sam-webgpu-test .status{font-weight:700}
-    #sam-webgpu-test .ok{color:#20a464} #sam-webgpu-test .warn{color:#c58a00} #sam-webgpu-test .bad{color:#dc4545}
-    #sam-webgpu-test button{border:0;border-radius:8px;padding:9px 13px;cursor:pointer;background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}
-    #sam-webgpu-test button:disabled{opacity:.55;cursor:wait}
-    #sam-webgpu-test .model{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border-color-primary)}
-    #sam-webgpu-test .model:first-of-type{border-top:0}
-    #sam-webgpu-test .model-name{font-weight:700}
-    #sam-webgpu-test .small{display:block;opacity:.72;font-size:.85rem}
-    #sam-webgpu-test .pill{display:inline-block;border:1px solid var(--border-color-primary);border-radius:99px;padding:2px 8px;font-size:.8rem;margin-top:5px}
-    @media(max-width:600px){#sam-webgpu-test .model{grid-template-columns:1fr}#sam-webgpu-test .model button{justify-self:start}}
-  </style>
-  <h1>SAM Audio Small ONNX — Browser WebGPU diagnostic</h1>
-  <p>Model loading and session tests run in your browser. The Space server does not process audio or run model inference.</p>
-  <section class="card">
-    <h2>1. Browser and WebGPU</h2>
-    <div class="row"><button id="sam-check-browser">Run browser checks</button><span id="sam-browser-status" class="status muted">Checking…</span></div>
-    <div id="sam-browser-log" class="log" style="margin-top:10px">Waiting for browser check…</div>
-  </section>
-  <section class="card">
-    <h2>2. ONNX Runtime WebGPU runtime check</h2>
-    <div class="row"><button id="sam-smoke">Run runtime check</button><span id="sam-smoke-status" class="status muted">Not tested</span></div>
-    <div id="sam-smoke-log" class="log" style="margin-top:10px">No test run yet.</div>
-  </section>
-  <section class="card">
-    <h2>3. Model and external-weight download diagnostics</h2>
-    <p>The ONNX graph references a separate weights file. This version explicitly passes that external data URL to ONNX Runtime Web and checks both URLs first. Test one model at a time; leave DiT until last.</p>
-    <label style="display:flex;gap:8px;align-items:center;margin:10px 0"><input id="sam-strict" type="checkbox" checked> Require WebGPU only (no WASM fallback)</label>
-    <div id="sam-model-list"></div>
-    <div id="sam-model-log" class="log" style="margin-top:10px">No model test run yet.</div>
-  </section>
-  <section class="card">
-    <h2>How to report a failure</h2>
-    <p>Copy the entire text from the result box, including the error name, message, stack, URL checks and HTTP status. A numeric code alone is not enough to identify the cause.</p>
-    <p class="muted">Model: <a href="https://huggingface.co/matbee/sam-audio-small-onnx/tree/main" target="_blank" rel="noreferrer">matbee/sam-audio-small-onnx</a> · <a href="https://onnxruntime.ai/docs/tutorials/web/large-models.html" target="_blank" rel="noreferrer">ONNX external data documentation</a></p>
-  </section>
+<div id="sam-browser-app" style="font-family:system-ui,sans-serif;max-width:1050px;margin:auto">
+<style>
+#sam-browser-app .panel{border:1px solid var(--border-color-primary);border-radius:12px;padding:16px;margin:14px 0}
+#sam-browser-app .muted{opacity:.75;font-size:.9rem}
+#sam-browser-app .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
+#sam-browser-app label{display:block;margin:8px 0 4px;font-weight:600}
+#sam-browser-app input[type=file],#sam-browser-app input[type=text],#sam-browser-app input[type=number]{box-sizing:border-box;max-width:100%;width:100%;padding:10px;border-radius:8px;border:1px solid var(--border-color-primary);background:var(--input-background-fill);color:var(--body-text-color)}
+#sam-browser-app button{padding:10px 14px;border:0;border-radius:8px;background:var(--button-primary-background-fill);color:var(--button-primary-text-color);cursor:pointer}
+#sam-browser-app button:disabled{opacity:.5;cursor:wait}
+#sam-browser-app .log{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--background-fill-secondary);padding:12px;border-radius:8px;font:13px/1.5 ui-monospace,monospace;min-height:30px}
+#sam-browser-app audio{width:100%;margin-top:8px}
+#sam-browser-app .outputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+#sam-browser-app .out{min-width:0}
+@media(max-width:650px){#sam-browser-app .outputs{grid-template-columns:1fr}}
+</style>
+<h1>SAM Audio Small — Browser WebGPU inference prototype</h1>
+<p>This is a browser-side prototype. Audio processing runs on your local machine through WebGPU; the Space server only hosts this interface. No audio is uploaded to the Space.</p>
+<div class="panel">
+  <h2>1. Input</h2>
+  <label for="sam-audio-file">Audio file</label>
+  <input id="sam-audio-file" type="file" accept="audio/*,.wav,.mp3,.flac,.ogg,.m4a">
+  <label for="sam-prompt">Describe the sound to isolate (English prompt recommended)</label>
+  <input id="sam-prompt" type="text" value="a person speaking" placeholder="a person speaking">
+  <div class="row">
+    <div style="flex:1;min-width:180px"><label for="sam-steps">ODE steps</label><input id="sam-steps" type="number" min="1" max="16" value="2"></div>
+    <div style="flex:2;min-width:220px"><p class="muted">Start with 1–2 steps to validate inference. The reference configuration uses 16 steps and is much slower.</p></div>
+  </div>
+  <div class="row" style="margin-top:12px"><button id="sam-run">Load models and separate</button><span id="sam-status" class="muted">Ready</span></div>
+  <div id="sam-log" class="log" style="margin-top:12px">Choose a short audio file to begin. First run downloads several GB of model files.</div>
+</div>
+<div class="panel">
+  <h2>2. Results</h2>
+  <div class="outputs">
+    <div class="out"><b>Target</b><audio id="sam-target-player" controls></audio><a id="sam-target-download" download="target.wav" hidden>Download target.wav</a></div>
+    <div class="out"><b>Residual</b><audio id="sam-residual-player" controls></audio><a id="sam-residual-download" download="residual.wav" hidden>Download residual.wav</a></div>
+  </div>
+</div>
+<div class="panel">
+  <h2>Important limitations</h2>
+  <ul>
+    <li>This is an experimental browser port of the repository's reference ONNX pipeline, not yet validated against its Python output.</li>
+    <li>It uses a small number of ODE steps by default for a first end-to-end test. Quality may be poor at 1–2 steps.</li>
+    <li>The reference implementation in the repository documents a 48 kHz audio model, T5-base text embeddings, a midpoint ODE solver, and the first/second 128 latent channels as target/residual.</li>
+    <li>WebGPU supports only a subset of ONNX operators. A session may load successfully but fail when the first inference runs.</li>
+    <li>First run may download several GB and use substantial browser RAM/VRAM. Use a short audio clip first.</li>
+  </ul>
+</div>
 </div>
 """
 
 CLIENT_JS = r"""
 async () => {
-  const root = document.getElementById("sam-webgpu-test");
+  const root = document.getElementById("sam-browser-app");
   if (!root || root.dataset.initialized === "yes") return;
   root.dataset.initialized = "yes";
   const $ = (id) => root.querySelector("#" + id);
-  const REPO = "https://huggingface.co/matbee/sam-audio-small-onnx/resolve/main";
-  const MODELS = [
-    {id:"dacvae_encoder", name:"DACVAE Encoder", file:"dacvae_encoder.onnx", size:"~110 MB"},
-    {id:"t5_encoder", name:"T5 Text Encoder", file:"t5_encoder.onnx", size:"~440 MB"},
-    {id:"dacvae_decoder", name:"DACVAE Decoder", file:"dacvae_decoder.onnx", size:"~320 MB"},
-    {id:"dit_single_step", name:"DiT Denoiser", file:"dit_single_step.onnx", size:"~2 GB"}
-  ];
-  let ortModule = null;
-  const modelPills = new Map();
-  function status(el, message, kind="muted") { el.textContent=message; el.className="status "+kind; }
-  function errorText(error) {
-    if (error === null || error === undefined) return String(error);
-    const fields = [];
+  const MODEL_BASE = "https://huggingface.co/matbee/sam-audio-small-onnx/resolve/main";
+  const MODEL_FILES = {
+    encoder: "dacvae_encoder.onnx",
+    decoder: "dacvae_decoder.onnx",
+    t5: "t5_encoder.onnx",
+    dit: "dit_single_step.onnx"
+  };
+  let ort = null;
+  let tokenizer = null;
+  let sessions = null;
+  let previousUrls = [];
+
+  function setLog(message) { $("sam-log").textContent = message; }
+  function setStatus(message) { $("sam-status").textContent = message; }
+  function errorDetails(error) {
+    const values = [];
     for (const key of ["name", "message", "code", "stack"]) {
-      try { if (error[key] !== undefined) fields.push(key + ": " + String(error[key])); } catch (_) {}
-    }
-    try { fields.push("JSON: " + JSON.stringify(error, Object.getOwnPropertyNames(error))); } catch (_) {}
-    return fields.length ? fields.join("\n") : String(error);
-  }
-  function log(el, message) { el.textContent=message; }
-  function renderModels() {
-    const list = $("sam-model-list");
-    for (const model of MODELS) {
-      const row=document.createElement("div"); row.className="model";
-      const info=document.createElement("div");
-      const name=document.createElement("div"); name.className="model-name"; name.textContent=model.name;
-      const file=document.createElement("span"); file.className="small"; file.textContent=model.file+" · "+model.size;
-      const pill=document.createElement("span"); pill.className="pill"; pill.textContent="Not tested";
-      modelPills.set(model.id,pill);
-      info.append(name,file,pill);
-      const button=document.createElement("button"); button.textContent="Test download + session";
-      button.addEventListener("click",()=>testModel(model,button));
-      row.append(info,button); list.append(row);
+      try { if (error?.[key] !== undefined) values.push(key + ": " + String(error[key])); } catch (_) {}
     }
+    try { values.push("JSON: " + JSON.stringify(error, Object.getOwnPropertyNames(error))); } catch (_) {}
+    return values.join("\n") || String(error);
   }
-  async function getOrt() {
-    if (!ortModule) {
-      ortModule = await import("https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/+esm");
-      if (ortModule.env?.wasm) ortModule.env.wasm.numThreads = 1;
-      if (ortModule.env) ortModule.env.logLevel = "verbose";
+  async function loadOrt() {
+    if (!ort) {
+      ort = await import("https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/+esm");
+      if (ort.env?.wasm) ort.env.wasm.numThreads = 1;
+      if (ort.env) ort.env.logLevel = "warning";
     }
-    return ortModule;
-  }
-  async function checkBrowser() {
-    const lines=["Secure context: "+(window.isSecureContext?"yes":"no"),
-      "navigator.gpu: "+("gpu" in navigator?"available":"missing"),
-      "User agent: "+navigator.userAgent];
-    if (!("gpu" in navigator)) {
-      status($("sam-browser-status"),"WebGPU unavailable","bad");
-      log($("sam-browser-log"),lines.join("\n")); return;
+    return ort;
+  }
+  async function loadTokenizer() {
+    if (!tokenizer) {
+      const transformers = await import("https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.2");
+      tokenizer = await transformers.AutoTokenizer.from_pretrained("google-t5/t5-base");
     }
+    return tokenizer;
+  }
+  async function createSession(filename) {
+    const url = MODEL_BASE + "/" + filename;
+    const dataUrl = url + ".data";
+    const runtime = await loadOrt();
+    return runtime.InferenceSession.create(url, {
+      executionProviders: ["webgpu"],
+      graphOptimizationLevel: "all",
+      externalData: [{ path: filename + ".data", data: dataUrl }]
+    });
+  }
+  async function loadModels() {
+    if (sessions) return sessions;
+    const loaded = {};
+    const order = [
+      ["encoder", "dacvae_encoder.onnx"],
+      ["t5", "t5_encoder.onnx"],
+      ["dit", "dit_single_step.onnx"],
+      ["decoder", "dacvae_decoder.onnx"]
+    ];
     try {
-      const adapter=await navigator.gpu.requestAdapter();
-      if (!adapter) throw new Error("requestAdapter() returned null.");
-      const info=adapter.info||{};
-      lines.push("Adapter: "+(info.description||info.device||info.architecture||"details unavailable"));
-      lines.push("Vendor: "+(info.vendor||"unknown"));
-      lines.push("Architecture: "+(info.architecture||"unknown"));
-      lines.push("Max buffer size: "+adapter.limits.maxBufferSize);
-      lines.push("Max storage buffer binding size: "+adapter.limits.maxStorageBufferBindingSize);
-      status($("sam-browser-status"),"WebGPU adapter available","ok");
-    } catch(error) { status($("sam-browser-status"),"WebGPU check failed","bad"); lines.push(errorText(error)); }
-    log($("sam-browser-log"),lines.join("\n"));
-  }
-  async function smokeTest() {
-    const button=$("sam-smoke"); button.disabled=true;
-    status($("sam-smoke-status"),"Running…","warn");
-    log($("sam-smoke-log"),"Loading ONNX Runtime Web and checking WebGPU adapter…");
-    try {
-      const ort=await getOrt();
-      const adapter=await navigator.gpu?.requestAdapter();
-      if (!adapter) throw new Error("No WebGPU adapter available.");
-      status($("sam-smoke-status"),"Runtime loaded; adapter available","ok");
-      log($("sam-smoke-log"),"PASS\nONNX Runtime Web version: "+(ort.env?.versions?.web||"unknown")+
-        "\nWebGPU adapter: available\nThis check does not execute a model graph.");
-    } catch(error) { status($("sam-smoke-status"),"FAIL","bad"); log($("sam-smoke-log"),errorText(error)); }
-    finally { button.disabled=false; }
-  }
-  async function checkUrl(url) {
-    // GET a tiny byte range rather than HEAD; some CDN/Xet routes handle HEAD differently.
-    try {
-      const response = await fetch(url, {method:"GET", headers:{Range:"bytes=0-0"}});
-      const contentRange=response.headers.get("content-range");
-      const contentLength=response.headers.get("content-length");
-      await response.body?.cancel();
-      return {ok:response.ok,status:response.status,url:response.url,
-        contentType:response.headers.get("content-type"),contentLength,contentRange};
-    } catch(error) { return {ok:false,error:errorText(error),url}; }
-  }
-  async function testModel(model,button) {
-    if (button.disabled) return;
-    button.disabled=true;
-    const pill=modelPills.get(model.id);
-    pill.textContent="Checking URLs…"; pill.className="pill";
-    const modelUrl=REPO+"/"+model.file;
-    const dataFile=model.file+".data";
-    const dataUrl=REPO+"/"+dataFile;
-    log($("sam-model-log"),"Checking model graph and external weights URLs...\n"+modelUrl+"\n"+dataUrl);
-    let session=null; const start=performance.now();
+      for (const [key, filename] of order) {
+        setStatus("Loading " + filename + "…");
+        setLog("Loading model component: " + filename + "\nThe browser may download a large external .onnx.data file. Keep this tab open.");
+        loaded[key] = await createSession(filename);
+        setLog("Loaded " + filename + "\nInputs: " + loaded[key].inputNames.join(", ") + "\nOutputs: " + loaded[key].outputNames.join(", "));
+      }
+      await loadTokenizer();
+      sessions = loaded;
+      return sessions;
+    } catch (error) {
+      for (const session of Object.values(loaded)) {
+        try { await session.release(); } catch (_) {}
+      }
+      throw error;
+    }
+  }
+  function getTensorMetadata(session, name) {
+    try { return session.inputMetadata?.[name] || {}; } catch (_) { return {}; }
+  }
+  function floatTensor(data, dims) {
+    return new ort.Tensor("float32", data instanceof Float32Array ? data : new Float32Array(data), dims);
+  }
+  function int64Tensor(data, dims) {
+    const values = Array.from(data, value => BigInt(value));
+    return new ort.Tensor("int64", BigInt64Array.from(values), dims);
+  }
+  function boolTensor(data, dims) {
+    return new ort.Tensor("bool", Uint8Array.from(data, value => value ? 1 : 0), dims);
+  }
+  async function decodeAudio(file) {
+    const bytes = await file.arrayBuffer();
+    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+    const context = new AudioContextClass();
     try {
-      const [graphCheck,dataCheck]=await Promise.all([checkUrl(modelUrl),checkUrl(dataUrl)]);
-      log($("sam-model-log"),"URL checks:\nGraph:\n"+JSON.stringify(graphCheck,null,2)+
-        "\n\nExternal weights:\n"+JSON.stringify(dataCheck,null,2)+
-        "\n\nLoading ONNX Runtime Web...");
-      if (!graphCheck.ok) throw new Error("Graph URL request failed: "+JSON.stringify(graphCheck));
-      if (!dataCheck.ok) throw new Error("External weights URL request failed: "+JSON.stringify(dataCheck));
-      const ort=await getOrt();
-      const strict=$("sam-strict").checked;
-      const providers=strict?["webgpu"]:["webgpu","wasm"];
-      session=await ort.InferenceSession.create(modelUrl,{
-        executionProviders:providers,
-        graphOptimizationLevel:"all",
-        externalData:[{path:dataFile,data:dataUrl}]
-      });
-      const seconds=((performance.now()-start)/1000).toFixed(1);
-      pill.textContent="PASS · "+seconds+" s"; pill.className="pill ok";
-      const inputs=(session.inputNames||[]).map(n=>n+": "+JSON.stringify(session.inputMetadata?.[n]||{}));
-      const outputs=(session.outputNames||[]).map(n=>n+": "+JSON.stringify(session.outputMetadata?.[n]||{}));
-      log($("sam-model-log"),"PASS — session created for "+model.file+
-        "\nElapsed: "+seconds+" s\nInputs: "+(session.inputNames||[]).join(", ")+
-        "\nOutputs: "+(session.outputNames||[]).join(", ")+
-        "\n\nInput metadata:\n"+inputs.join("\n")+"\n\nOutput metadata:\n"+outputs.join("\n")+
-        "\n\nSession released. This is not full inference.");
-    } catch(error) {
-      pill.textContent="FAIL"; pill.className="pill bad";
-      log($("sam-model-log"),"FAIL — "+model.file+
-        "\nElapsed: "+((performance.now()-start)/1000).toFixed(1)+" s\n\n"+
-        errorText(error)+"\n\nIf URL checks failed, investigate CORS, HTTP status, or the external-data URL. "+
-        "If URL checks passed, the error may be an ONNX/WebGPU operator, model format, or memory issue.");
+      const decoded = await context.decodeAudioData(bytes.slice(0));
+      const offline = new OfflineAudioContext(1, Math.ceil(decoded.duration * 48000), 48000);
+      const source = offline.createBufferSource();
+      const mono = offline.createBuffer(1, decoded.length, decoded.sampleRate);
+      const channels = [];
+      for (let i = 0; i < decoded.numberOfChannels; i++) channels.push(decoded.getChannelData(i));
+      const monoData = mono.getChannelData(0);
+      for (let i = 0; i < monoData.length; i++) {
+        let sum = 0;
+        for (const channel of channels) sum += channel[i];
+        monoData[i] = sum / channels.length;
+      }
+      source.buffer = mono;
+      source.connect(offline.destination);
+      source.start();
+      const resampled = await offline.startRendering();
+      return {samples: new Float32Array(resampled.getChannelData(0)), sampleRate: 48000};
     } finally {
-      if(session) await session.release().catch(()=>{});
-      button.disabled=false;
+      await context.close().catch(() => {});
+    }
+  }
+  async function runSession(session, outputName, feeds) {
+    const outputs = await session.run(feeds);
+    const tensor = outputs[outputName] || outputs[session.outputNames[0]];
+    if (!tensor) throw new Error("Expected output not found: " + outputName);
+    return tensor.data;
+  }
+  async function encodeAudio(samples) {
+    const session = sessions.encoder;
+    const input = new ort.Tensor("float32", samples, [1, 1, samples.length]);
+    const out = await session.run({audio: input});
+    const tensor = out.latent_features || out[session.outputNames[0]];
+    return {data: new Float32Array(tensor.data), dims: tensor.dims};
+  }
+  async function encodeText(text) {
+    const tok = await loadTokenizer();
+    const encoded = await tok(text, {
+      padding: "max_length",
+      truncation: true,
+      max_length: 77
+    });
+    const idsRaw = encoded.input_ids?.data ?? encoded.input_ids;
+    const maskRaw = encoded.attention_mask?.data ?? encoded.attention_mask;
+    const ids = Array.from(idsRaw);
+    const mask = Array.from(maskRaw);
+    const idsTensor = int64Tensor(ids, [1, ids.length]);
+    const maskTensor = int64Tensor(mask, [1, mask.length]);
+    const out = await sessions.t5.run({input_ids: idsTensor, attention_mask: maskTensor});
+    const tensor = out.hidden_states || out[sessions.t5.outputNames[0]];
+    return {
+      features: new Float32Array(tensor.data),
+      featureDims: tensor.dims,
+      mask: Uint8Array.from(mask, value => value ? 1 : 0),
+      maskDims: [1, mask.length]
+    };
+  }
+  async function runDit(noisy, timeValue, audioFeatures, text, sequenceLength) {
+    const batch = 1;
+    const zerosInt = new BigInt64Array(sequenceLength);
+    const mask = new Uint8Array(sequenceLength).fill(1);
+    const video = new Float32Array(1024 * sequenceLength);
+    const feeds = {
+      noisy_audio: floatTensor(noisy, [batch, sequenceLength, 256]),
+      time: floatTensor(new Float32Array([timeValue]), [1]),
+      audio_features: floatTensor(audioFeatures, [batch, sequenceLength, 256]),
+      text_features: floatTensor(text.features, text.featureDims),
+      text_mask: boolTensor(text.mask, text.maskDims),
+      masked_video_features: floatTensor(video, [batch, 1024, sequenceLength]),
+      anchor_ids: new ort.Tensor("int64", zerosInt, [batch, sequenceLength]),
+      anchor_alignment: new ort.Tensor("int64", new BigInt64Array(sequenceLength), [batch, sequenceLength]),
+      audio_pad_mask: boolTensor(mask, [batch, sequenceLength])
+    };
+    const outputs = await sessions.dit.run(feeds);
+    const tensor = outputs.velocity || outputs[sessions.dit.outputNames[0]];
+    return new Float32Array(tensor.data);
+  }
+  async function runOde(initial, audioFeatures, text, steps, sequenceLength) {
+    let x = new Float32Array(initial);
+    const dt = 1 / steps;
+    for (let i = 0; i < steps; i++) {
+      setStatus("Denoising step " + (i + 1) + "/" + steps + " (1/2)…");
+      const t = i * dt;
+      const k1 = await runDit(x, t, audioFeatures, text, sequenceLength);
+      const midpoint = new Float32Array(x.length);
+      for (let j = 0; j < x.length; j++) midpoint[j] = x[j] + (dt / 2) * k1[j];
+      setStatus("Denoising step " + (i + 1) + "/" + steps + " (2/2)…");
+      const k2 = await runDit(midpoint, t + dt / 2, audioFeatures, text, sequenceLength);
+      for (let j = 0; j < x.length; j++) x[j] += dt * k2[j];
+      setLog("ODE midpoint solver\nStep " + (i + 1) + "/" + steps + " complete\nLatent tensor: [1, " + sequenceLength + ", 256]");
+    }
+    return x;
+  }
+  async function decodeLatent(latent, latentChannels, timeSteps) {
+    const session = sessions.decoder;
+    const chunkSize = 25;
+    const hopLength = 1920;
+    const chunks = [];
+    for (let start = 0; start < timeSteps; start += chunkSize) {
+      const actual = Math.min(chunkSize, timeSteps - start);
+      const chunk = new Float32Array(latentChannels * chunkSize);
+      for (let c = 0; c < latentChannels; c++) {
+        for (let t = 0; t < actual; t++) {
+          chunk[c * chunkSize + t] = latent[c * timeSteps + start + t];
+        }
+      }
+      const out = await session.run({
+        latent_features: floatTensor(chunk, [1, latentChannels, chunkSize])
+      });
+      const tensor = out.waveform || out[session.outputNames[0]];
+      const data = tensor.data;
+      const count = actual * hopLength;
+      chunks.push(new Float32Array(data.slice(0, count)));
+      setStatus("Decoding audio " + Math.min(start + chunkSize, timeSteps) + "/" + timeSteps + " latent frames…");
+    }
+    const totalLength = chunks.reduce((sum, part) => sum + part.length, 0);
+    const output = new Float32Array(totalLength);
+    let offset = 0;
+    for (const chunk of chunks) { output.set(chunk, offset); offset += chunk.length; }
+    return output;
+  }
+  function wavBlob(samples, sampleRate) {
+    const buffer = new ArrayBuffer(44 + samples.length * 2);
+    const view = new DataView(buffer);
+    function writeString(offset, value) { for (let i = 0; i < value.length; i++) view.setUint8(offset + i, value.charCodeAt(i)); }
+    writeString(0, "RIFF"); view.setUint32(4, 36 + samples.length * 2, true);
+    writeString(8, "WAVE"); writeString(12, "fmt "); view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true); view.setUint16(22, 1, true); view.setUint32(24, sampleRate, true);
+    view.setUint32(28, sampleRate * 2, true); view.setUint16(32, 2, true); view.setUint16(34, 16, true);
+    writeString(36, "data"); view.setUint32(40, samples.length * 2, true);
+    for (let i = 0; i < samples.length; i++) {
+      const sample = Math.max(-1, Math.min(1, samples[i]));
+      view.setInt16(44 + i * 2, sample < 0 ? sample * 32768 : sample * 32767, true);
+    }
+    return new Blob([buffer], {type:"audio/wav"});
+  }
+  function showOutput(playerId, linkId, samples, sampleRate, filename) {
+    const url = URL.createObjectURL(wavBlob(samples, sampleRate));
+    previousUrls.push(url);
+    $(playerId).src = url;
+    const link = $(linkId); link.href = url; link.download = filename; link.hidden = false; link.textContent = "Download " + filename;
+  }
+  async function separate() {
+    const file = $("sam-audio-file").files?.[0];
+    const prompt = $("sam-prompt").value.trim();
+    const steps = Number.parseInt($("sam-steps").value, 10);
+    if (!file) throw new Error("Choose an audio file first.");
+    if (!prompt) throw new Error("Enter a text prompt.");
+    if (!Number.isInteger(steps) || steps < 1 || steps > 16) throw new Error("ODE steps must be between 1 and 16.");
+    const audio = await decodeAudio(file);
+    if (audio.samples.length > 48000 * 20) throw new Error("For this first prototype, use audio no longer than 20 seconds.");
+    await loadModels();
+    setStatus("Encoding audio…");
+    const encoded = await encodeAudio(audio.samples);
+    if (encoded.dims.length !== 3) throw new Error("Unexpected encoder output dimensions: " + JSON.stringify(encoded.dims));
+    const [batch, latentChannels, timeSteps] = encoded.dims;
+    if (batch !== 1 || latentChannels !== 128) {
+      throw new Error("Unexpected audio latent shape " + JSON.stringify(encoded.dims) + "; expected [1, 128, time].");
+    }
+    setStatus("Encoding text…");
+    const text = await encodeText(prompt);
+    const mixture = new Float32Array(timeSteps * 256);
+    for (let t = 0; t < timeSteps; t++) {
+      for (let c = 0; c < latentChannels; c++) {
+        const value = encoded.data[c * timeSteps + t];
+        mixture[t * 256 + c] = value;
+        mixture[t * 256 + latentChannels + c] = value;
+      }
+    }
+    const initial = new Float32Array(timeSteps * 256);
+    // Standard normal noise, matching the reference implementation's randn initialization.
+    for (let i = 0; i < initial.length; i += 2) {
+      const u1 = Math.max(Number.EPSILON, Math.random());
+      const u2 = Math.random();
+      const radius = Math.sqrt(-2 * Math.log(u1));
+      initial[i] = radius * Math.cos(2 * Math.PI * u2);
+      if (i + 1 < initial.length) initial[i + 1] = radius * Math.sin(2 * Math.PI * u2);
+    }
+    const result = await runOde(initial, mixture, text, steps, timeSteps);
+    const targetLatent = new Float32Array(latentChannels * timeSteps);
+    const residualLatent = new Float32Array(latentChannels * timeSteps);
+    for (let t = 0; t < timeSteps; t++) {
+      for (let c = 0; c < latentChannels; c++) {
+        targetLatent[c * timeSteps + t] = result[t * 256 + c];
+        residualLatent[c * timeSteps + t] = result[t * 256 + latentChannels + c];
+      }
     }
+    setStatus("Decoding target…");
+    const target = await decodeLatent(targetLatent, latentChannels, timeSteps);
+    setStatus("Decoding residual…");
+    const residual = await decodeLatent(residualLatent, latentChannels, timeSteps);
+    const expectedSamples = audio.samples.length;
+    showOutput("sam-target-player", "sam-target-download", target.slice(0, expectedSamples), 48000, "target.wav");
+    showOutput("sam-residual-player", "sam-residual-download", residual.slice(0, expectedSamples), 48000, "residual.wav");
+    setStatus("Finished");
+    setLog("Finished browser inference.\nInput: " + file.name + "\nPrompt: " + prompt +
+      "\nODE steps: " + steps + "\nInput samples: " + expectedSamples +
+      "\nLatent shape: " + JSON.stringify(encoded.dims) +
+      "\nTarget samples: " + Math.min(target.length, expectedSamples) +
+      "\nResidual samples: " + Math.min(residual.length, expectedSamples) +
+      "\n\nThis is an experimental port. Compare quality and tensor shapes against the Python reference before relying on results.");
   }
-  $("sam-check-browser").addEventListener("click",checkBrowser);
-  $("sam-smoke").addEventListener("click",smokeTest);
-  renderModels();
-  await checkBrowser();
+  $("sam-run").addEventListener("click", async () => {
+    const button = $("sam-run");
+    button.disabled = true;
+    try { await separate(); }
+    catch (error) {
+      setStatus("Failed");
+      setLog("INFERENCE FAILED\n" + errorDetails(error));
+    } finally { button.disabled = false; }
+  });
 }
 """
 
 @spaces.GPU
 def zerogpu_startup_marker():
-    return "Browser-side WebGPU test only; no server inference."
+    return "No server inference; browser WebGPU prototype."
 
-with gr.Blocks(title="SAM Audio WebGPU Compatibility Diagnostic") as demo:
+with gr.Blocks(title="SAM Audio Browser WebGPU Inference Prototype") as demo:
     gr.Markdown(
-        "## SAM Audio Small ONNX — browser WebGPU diagnostic\n"
-        "ZeroGPU is present only to satisfy the Space's selected hosting hardware. "
-        "The marker function is never called; model checks run locally in your browser."
+        "## SAM Audio Small — browser WebGPU inference prototype\n"
+        "ZeroGPU is selected only because of the Space's hosting configuration. "
+        "The marker function is never called. All model inference is attempted locally in the browser."
     )
     gr.HTML(PAGE)
     demo.load(fn=None, inputs=None, outputs=None, js=CLIENT_JS)