sahirp commited on Mar 8

Commit

5bcc422

verified ·

1 Parent(s): 4f7a5ba

Add v15 ONNX + WebGPU viewer bundle

Browse files

Files changed (17) hide show

.gitattributes +5 -0
koi/v15_scare/onnx/ae_decode.onnx +3 -0
koi/v15_scare/onnx/ae_decode.onnx.data +3 -0
koi/v15_scare/onnx/ae_decode_fp16.onnx +3 -0
koi/v15_scare/onnx/ae_decode_fp16.onnx.data +3 -0
koi/v15_scare/onnx/ae_encode.onnx +3 -0
koi/v15_scare/onnx/ae_encode.onnx.data +3 -0
koi/v15_scare/onnx/ae_weights_only.pt +3 -0
koi/v15_scare/onnx/edm_denoise.onnx +3 -0
koi/v15_scare/onnx/edm_denoise.onnx.data +3 -0
koi/v15_scare/onnx/edm_denoise_fp16.onnx +3 -0
koi/v15_scare/onnx/edm_denoise_fp16.onnx.data +3 -0
koi/v15_scare/onnx/edm_weights_only.pt +3 -0
koi/v15_scare/onnx/index.html +1194 -0
koi/v15_scare/onnx/init_frames.bin +3 -0
koi/v15_scare/onnx/init_frames_meta.json +8 -0
koi/v15_scare/onnx/model_meta.json +8 -0

.gitattributes CHANGED Viewed

@@ -43,3 +43,8 @@ koi/v14_scare/onnx/ae_decode_fp16.onnx.data filter=lfs diff=lfs merge=lfs -text
 koi/v14_scare/onnx/ae_encode.onnx.data filter=lfs diff=lfs merge=lfs -text
 koi/v14_scare/onnx/edm_denoise.onnx.data filter=lfs diff=lfs merge=lfs -text
 koi/v14_scare/onnx/edm_denoise_fp16.onnx.data filter=lfs diff=lfs merge=lfs -text

 koi/v14_scare/onnx/ae_encode.onnx.data filter=lfs diff=lfs merge=lfs -text
 koi/v14_scare/onnx/edm_denoise.onnx.data filter=lfs diff=lfs merge=lfs -text
 koi/v14_scare/onnx/edm_denoise_fp16.onnx.data filter=lfs diff=lfs merge=lfs -text
+koi/v15_scare/onnx/ae_decode.onnx.data filter=lfs diff=lfs merge=lfs -text
+koi/v15_scare/onnx/ae_decode_fp16.onnx.data filter=lfs diff=lfs merge=lfs -text
+koi/v15_scare/onnx/ae_encode.onnx.data filter=lfs diff=lfs merge=lfs -text
+koi/v15_scare/onnx/edm_denoise.onnx.data filter=lfs diff=lfs merge=lfs -text
+koi/v15_scare/onnx/edm_denoise_fp16.onnx.data filter=lfs diff=lfs merge=lfs -text

koi/v15_scare/onnx/ae_decode.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:1eece1505ae09c2cce4f4237793691d59b4875e30a7352a536688397e263872f
+size 255916

koi/v15_scare/onnx/ae_decode.onnx.data ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:ecff1f0217e2a280b226a88003ab4ed0f30a55cb6fe71b11140391e565a48f82
+size 25755648

koi/v15_scare/onnx/ae_decode_fp16.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:786edf9be7de763efb72453983e5dcc8a745df6c6306cdebce76aa5b1f957676
+size 271865

koi/v15_scare/onnx/ae_decode_fp16.onnx.data ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:1f3f932c4167400121f69ff82e4f6276b199964b794c61174fc65638a37d414f
+size 12836224

koi/v15_scare/onnx/ae_encode.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:44de0def6223faa4d0c529547a6da9e13b3aa55309fa9a466a86a1dccbc7866a
+size 251463

koi/v15_scare/onnx/ae_encode.onnx.data ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:3229b442f69daaa1d46ed49ebcd446601b9321b396dffdb781f6ce8d5610daff
+size 28704768

koi/v15_scare/onnx/ae_weights_only.pt ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:bfda8641f269b32936a3933c9ba5422db8f008997242d29a94ab62fe46f916ca
+size 54450037

koi/v15_scare/onnx/edm_denoise.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:8572fb58f0c6041d43ee2bc17dded739797d9bc538cb114bd863c8fc842b218e
+size 568476

koi/v15_scare/onnx/edm_denoise.onnx.data ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:3dbd8ce53b951b109e1e4229d28fb4a776e775f3dfdd3bcbccacb97c04be9108
+size 190906368

koi/v15_scare/onnx/edm_denoise_fp16.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:65a021050912128fd6eacfbb5f5f5044bc8f558cfd7177d33cd40186010e36df
+size 594378

koi/v15_scare/onnx/edm_denoise_fp16.onnx.data ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:6dd037798567c40f972c34f67b51d1a8448d486820fcfc43de24aa72ef8a201f
+size 95421952

koi/v15_scare/onnx/edm_weights_only.pt ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:5fc4599b69c78e3a44584d3020e90da1606d929216a3123474b8a9b0aede34e0
+size 190953835

koi/v15_scare/onnx/index.html ADDED Viewed

	@@ -0,0 +1,1194 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <title>Koi Pond - ONNX WebGPU Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; padding: 10px;
+      background: #000;
+      display: flex; justify-content: center; align-items: center;
+      min-height: 100vh; flex-direction: column;
+      font-family: monospace;
+    }
+    .canvas-container { width: 100%; max-width: 512px; }
+    canvas {
+      width: 100%; height: auto; aspect-ratio: 1;
+      border: 2px solid #ccc; cursor: crosshair;
+      image-rendering: pixelated; display: block;
+      background: #000;
+    }
+    .info { color: #aaa; margin-top: 10px; font-size: 12px; text-align: center; }
+    .controls { color: #ddd; margin-top: 10px; font-size: 12px; text-align: center; }
+    button { margin: 0 5px; padding: 5px 10px; }
+    .status { color: #888; margin-top: 10px; font-size: 11px; max-width: 512px; text-align: center; }
+    .diag { color: #9aa; margin-top: 8px; font-size: 11px; max-width: 700px; text-align: center; white-space: pre-wrap; }
+    .progress { width: 100%; max-width: 300px; height: 20px; margin: 10px auto; }
+    @media (max-width: 540px) {
+      body { padding: 0; }
+      .canvas-container { max-width: 100%; }
+      canvas { border-width: 0; }
+    }
+  </style>
+</head>
+<body>
+  <div class="canvas-container">
+    <canvas id="c" width="256" height="256"></canvas>
+  </div>
+  <div class="info">
+    fps: <span id="fps">0</span> |
+    frame: <span id="frame">0</span> |
+    backend: <span id="backend">?</span> |
+    precision: <span id="precision">?</span>
+    <span style="opacity:0.7">| click to tap</span>
+  </div>
+  <div class="controls">
+    <button onclick="resetWorld()">Reset</button>
+    <label>Mode:
+      <select id="mode">
+        <option value="onnx">local (onnx)</option>
+        <option value="ws">server (ws)</option>
+      </select>
+    </label>
+    <label>CFG: <input type="range" id="cfg" min="1" max="2.5" step="0.1" value="1.5"></label>
+    <span id="cfgVal">1.5</span>
+    <button onclick="togglePause()" id="pauseBtn">Pause</button>
+  </div>
+  <div class="status" id="status">Loading ONNX Runtime...</div>
+  <div class="diag" id="diag"></div>
+  <progress class="progress" id="progress" value="0" max="100" style="display:none;"></progress>
+  <!-- onnxruntime-web (WebGPU-enabled build) from CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/dist/ort.webgpu.min.js"></script>
+  <script>
+    // =====================
+    // config
+    // =====================
+    const CONFIG = {
+      imgSize: 256,
+      latentSize: 32,
+      latentCh: 8,
+      history: 4,
+      condSigmaCh: 4,  // overridden by model_meta.json
+      sigmaData: 0.125, // overridden by model_meta.json
+      eulerSteps: 4,
+      rho: 7.0, // Karras schedule rho (matches koi.train.model_latent_edm)
+      sigmaMax: 1.0, // tap frames
+      sigmaMaxNoTap: 1.0,
+      sigmaMin: 0.002,
+      noiseScale: 1.0,
+      noiseScaleNoTap: 1.0,
+      tapHoldFrames: 2,
+      tapStrength: 1.0,
+      heatmapSigmaPx: 1.25,
+      // Playback limiter for ONNX mode. The world model is "1 step = 1 frame";
+      // running faster changes perceived world speed. Set `playbackFps=0` for unlimited.
+      playbackFps: 15,
+    };
+    // =====================
+    // globals
+    // =====================
+    let aeDecode = null;
+    let edmDenoise = null;
+    let aeInputName = 'z';
+    let aeOutputName = 'img';
+    let edmInputX = 'x_noisy';
+    let edmInputSigma = 'sigma';
+    let edmInputCond = 'cond';
+    let edmOutputName = 'x_hat';
+    let edmInputMeta = null;
+    let aeInputMeta = null;
+    let zHistory = null;  // Float32Array[history * latentCh * latentSize * latentSize]
+    let tapQueue = [];
+    let lastTap = { x: -1, y: -1 };
+    let tapHoldLeft = 0;
+    let paused = true;
+    let frameCount = 0;
+    let totalFrames = 0;
+    let lastFpsTime = Date.now();
+    let running = false;
+    let lastStepStartMs = 0;
+    let ortBackend = 'unknown';
+    let ortPrecision = 'fp32';
+    let _imageData = null;
+    let GRAPH_CAPTURE = false;
+    let FORCE_FP16 = false;
+    let FORCE_SIGMA_SCALAR = false;
+    let FALLBACK_ON_ERROR = true;
+    let fallbackAttempted = false;
+    // base url for model/asset files (set by ?hf=1 to load from huggingface cdn)
+    // Tip: pin to a commit with ?hf_rev=<commit_sha> to avoid breaking changes on main.
+    const HF_BASE = 'https://huggingface.co/sahirp/tap-conditioned-world-model/resolve/main/koi/v15_scare/onnx/';
+    let MODEL_BASE_URL = null; // null = relative to current page
+    // WebSocket backend globals (for ?mode=ws)
+    let ws = null;
+    let wsServerMode = 'unknown'; // 'push' | 'pull' | 'unknown'
+    let pendingTap = null; // {x,y,t_ms}
+    const canvas = document.getElementById('c');
+    const ctx = canvas.getContext('2d');
+    const fpsEl = document.getElementById('fps');
+    const frameEl = document.getElementById('frame');
+    const cfgSlider = document.getElementById('cfg');
+    const cfgValEl = document.getElementById('cfgVal');
+    const statusEl = document.getElementById('status');
+    const progressEl = document.getElementById('progress');
+    const pauseBtn = document.getElementById('pauseBtn');
+    const backendEl = document.getElementById('backend');
+    const precisionEl = document.getElementById('precision');
+    const modeEl = document.getElementById('mode');
+    cfgSlider.oninput = () => { cfgValEl.textContent = cfgSlider.value; };
+    function setQueryParam(key, value) {
+      const u = new URL(location.href);
+      if (value === null || value === undefined) {
+        u.searchParams.delete(key);
+      } else {
+        u.searchParams.set(key, String(value));
+      }
+      return u.toString();
+    }
+    // =====================
+    // tensor helpers
+    // =====================
+    // note: fp16 models use keep_io_types=True, so inputs/outputs stay fp32.
+    // no type conversion needed - just load the different .onnx files.
+    function createTensor(data, dims) {
+      return new ort.Tensor('float32', data, dims);
+    }
+    async function getTensorData(tensor) {
+      if (tensor && tensor.data && ArrayBuffer.isView(tensor.data)) {
+        return tensor.data;
+      } else if (tensor && typeof tensor.getData === 'function') {
+        return await tensor.getData();
+      }
+      return tensor?.data;
+    }
+    function firstOutput(results, preferredName) {
+      if (preferredName && results[preferredName]) return results[preferredName];
+      const keys = Object.keys(results || {});
+      if (keys.length === 0) throw new Error('ONNX run returned no outputs');
+      return results[keys[0]];
+    }
+    function pickName(names, candidates, fallbackIndex = 0) {
+      for (const c of candidates) {
+        const found = names.find(n => n.toLowerCase().includes(c));
+        if (found) return found;
+      }
+      return names[fallbackIndex] || names[0];
+    }
+    function getMetaDims(meta) {
+      try {
+        return meta?.dimensions || meta?.dim || null;
+      } catch (e) {
+        return null;
+      }
+    }
+    function makeSigmaTensor(sigma) {
+      if (FORCE_SIGMA_SCALAR) {
+        return createTensor(new Float32Array([sigma]), []);
+      }
+      const meta = edmInputMeta && edmInputMeta[edmInputSigma];
+      const dims = getMetaDims(meta);
+      if (Array.isArray(dims) && dims.length === 0) {
+        return createTensor(new Float32Array([sigma]), []);
+      }
+      return createTensor(new Float32Array([sigma]), [1]);
+    }
+    function zeros(shape) {
+      const size = shape.reduce((a, b) => a * b, 1);
+      return new Float32Array(size);
+    }
+    function randn(shape) {
+      const size = shape.reduce((a, b) => a * b, 1);
+      const arr = new Float32Array(size);
+      for (let i = 0; i < size; i += 2) {
+        const u1 = Math.random();
+        const u2 = Math.random();
+        const r = Math.sqrt(-2 * Math.log(u1 + 1e-10));
+        arr[i] = r * Math.cos(2 * Math.PI * u2);
+        if (i + 1 < size) arr[i + 1] = r * Math.sin(2 * Math.PI * u2);
+      }
+      return arr;
+    }
+    // =====================
+    // action heatmap
+    // =====================
+    function _gaussAtPixel(px, py, cx, cy, sigmaPx) {
+      const dx = (px + 0.5) - cx;
+      const dy = (py + 0.5) - cy;
+      const distSq = dx * dx + dy * dy;
+      return Math.exp(-distSq / (2 * sigmaPx * sigmaPx));
+    }
+    function _bilinearSampleGaussian(ox, oy, cx, cy, sigmaPx, inSize, outSize) {
+      // Match torch.nn.functional.interpolate(..., mode="bilinear", align_corners=False)
+      const scale = inSize / outSize;
+      const inX = (ox + 0.5) * scale - 0.5;
+      const inY = (oy + 0.5) * scale - 0.5;
+      let x0 = Math.floor(inX);
+      let y0 = Math.floor(inY);
+      let x1 = x0 + 1;
+      let y1 = y0 + 1;
+      const wx1 = inX - x0;
+      const wy1 = inY - y0;
+      const wx0 = 1.0 - wx1;
+      const wy0 = 1.0 - wy1;
+      // clamp to valid pixels
+      x0 = Math.max(0, Math.min(inSize - 1, x0));
+      x1 = Math.max(0, Math.min(inSize - 1, x1));
+      y0 = Math.max(0, Math.min(inSize - 1, y0));
+      y1 = Math.max(0, Math.min(inSize - 1, y1));
+      const v00 = _gaussAtPixel(x0, y0, cx, cy, sigmaPx);
+      const v10 = _gaussAtPixel(x1, y0, cx, cy, sigmaPx);
+      const v01 = _gaussAtPixel(x0, y1, cx, cy, sigmaPx);
+      const v11 = _gaussAtPixel(x1, y1, cx, cy, sigmaPx);
+      return (v00 * wx0 + v10 * wx1) * wy0 + (v01 * wx0 + v11 * wx1) * wy1;
+    }
+    function makeActionMap(tapX, tapY) {
+      const { latentSize, imgSize, heatmapSigmaPx } = CONFIG;
+      const actionMap = new Float32Array(2 * latentSize * latentSize);
+      if (tapX < 0 || tapY < 0) {
+        return actionMap;  // all zeros
+      }
+      const sigmaPx = Math.max(heatmapSigmaPx, 1e-6);
+      const cx = tapX * imgSize;
+      const cy = tapY * imgSize;
+      // channel 0: heatmap, channel 1: tap_flag
+      for (let py = 0; py < latentSize; py++) {
+        for (let px = 0; px < latentSize; px++) {
+          const heat0 = _bilinearSampleGaussian(px, py, cx, cy, sigmaPx, imgSize, latentSize);
+          const heat = heat0 * CONFIG.tapStrength;
+          const idx = py * latentSize + px;
+          actionMap[idx] = Math.min(1, Math.max(0, heat));  // heatmap
+          actionMap[latentSize * latentSize + idx] = 1.0;   // tap_flag
+        }
+      }
+      return actionMap;
+    }
+    // =====================
+    // build conditioning tensor
+    // =====================
+    function buildCond(actionMap) {
+      const { latentSize, latentCh, history, condSigmaCh } = CONFIG;
+      const spatialSize = latentSize * latentSize;
+      const condCh = history * latentCh + 2 + condSigmaCh;
+      const cond = new Float32Array(condCh * spatialSize);
+      // copy history latents
+      const histSize = history * latentCh * spatialSize;
+      for (let i = 0; i < histSize; i++) {
+        cond[i] = zHistory[i];
+      }
+      // copy action map (2 channels)
+      const actionOffset = histSize;
+      for (let i = 0; i < 2 * spatialSize; i++) {
+        cond[actionOffset + i] = actionMap[i];
+      }
+      // sigma channels (zeros at inference = clean context)
+      // already zeros from initialization
+      return cond;
+    }
+    // =====================
+    // euler sampler
+    // =====================
+    function karrasSigmas(num, sigmaMin, sigmaMax, rho) {
+      if (num < 2) throw new Error('karrasSigmas: num must be >= 2');
+      const sigmas = new Array(num);
+      const minInv = Math.pow(sigmaMin, 1.0 / rho);
+      const maxInv = Math.pow(sigmaMax, 1.0 / rho);
+      for (let i = 0; i < num; i++) {
+        const t = (num === 1) ? 0.0 : (i / (num - 1));
+        const s = maxInv + t * (minInv - maxInv);
+        sigmas[i] = Math.pow(s, rho);
+      }
+      return sigmas;
+    }
+    async function eulerSample(cond, condUncond, cfgScale, isTap) {
+      const { latentCh, latentSize, eulerSteps, sigmaMax, sigmaMaxNoTap, sigmaMin, history, rho, noiseScale, noiseScaleNoTap } = CONFIG;
+      const sigmaMaxFrame = isTap ? sigmaMax : sigmaMaxNoTap;
+      const noiseScaleFrame = isTap ? noiseScale : noiseScaleNoTap;
+      const shape = [1, latentCh, latentSize, latentSize];
+      const spatialSize = latentSize * latentSize;
+      const condCh = cond.length / spatialSize;
+      const condTensor = createTensor(cond, [1, condCh, latentSize, latentSize]);
+      const condUncondTensor = (cfgScale !== 1.0) ? createTensor(condUncond, [1, condCh, latentSize, latentSize]) : null;
+      // initialize from last history frame + sigma_max noise (img2img-style)
+      const lastFrameOffset = (history - 1) * latentCh * spatialSize;
+      let x = new Float32Array(latentCh * spatialSize);
+      const noise = randn([latentCh * spatialSize]);
+      for (let i = 0; i < x.length; i++) {
+        x[i] = zHistory[lastFrameOffset + i] + sigmaMaxFrame * noise[i] * noiseScaleFrame;
+      }
+      // Karras noise schedule (matches koi.train.model_latent_edm.karras_sigmas)
+      const sigmas = karrasSigmas(eulerSteps + 1, sigmaMin, sigmaMaxFrame, rho);
+      // euler steps
+      for (let step = 0; step < eulerSteps; step++) {
+        const sigma = sigmas[step];
+        const sigmaNext = sigmas[step + 1];
+        const dt = sigmaNext - sigma;
+        // denoise
+        const xTensor = createTensor(x, shape);
+        const sigmaTensor = makeSigmaTensor(sigma);
+        let denoised;
+        if (cfgScale !== 1.0) {
+          // cfg: run both conditional and unconditional
+          const feedC = { [edmInputX]: xTensor, [edmInputSigma]: sigmaTensor, [edmInputCond]: condTensor };
+          const feedU = { [edmInputX]: xTensor, [edmInputSigma]: sigmaTensor, [edmInputCond]: condUncondTensor };
+          const outC = firstOutput(await edmDenoise.run(feedC), edmOutputName);
+          const outU = firstOutput(await edmDenoise.run(feedU), edmOutputName);
+          const denC = await getTensorData(outC);
+          const denU = await getTensorData(outU);
+          denoised = new Float32Array(x.length);
+          for (let i = 0; i < denoised.length; i++) {
+            denoised[i] = denU[i] + cfgScale * (denC[i] - denU[i]);
+          }
+        } else {
+          const feed = { [edmInputX]: xTensor, [edmInputSigma]: sigmaTensor, [edmInputCond]: condTensor };
+          const out = firstOutput(await edmDenoise.run(feed), edmOutputName);
+          const outData = await getTensorData(out);
+          denoised = new Float32Array(outData);
+        }
+        // euler step (matches koi.train.model_latent_edm.edm_sample_euler):
+        // d = (x - denoised) / sigma
+        // x = x + d * dt
+        for (let i = 0; i < x.length; i++) {
+        const d = (x[i] - denoised[i]) / sigma;
+        x[i] = x[i] + d * dt;
+      }
+      }
+      // final denoise at sigma_min
+      const xTensor = createTensor(x, shape);
+      const sigmaTensor = makeSigmaTensor(sigmaMin);
+      if (cfgScale !== 1.0) {
+        const feedC = { [edmInputX]: xTensor, [edmInputSigma]: sigmaTensor, [edmInputCond]: condTensor };
+        const feedU = { [edmInputX]: xTensor, [edmInputSigma]: sigmaTensor, [edmInputCond]: condUncondTensor };
+        const outC = firstOutput(await edmDenoise.run(feedC), edmOutputName);
+        const outU = firstOutput(await edmDenoise.run(feedU), edmOutputName);
+        const denC = await getTensorData(outC);
+        const denU = await getTensorData(outU);
+        x = new Float32Array(x.length);
+        for (let i = 0; i < x.length; i++) {
+          x[i] = denU[i] + cfgScale * (denC[i] - denU[i]);
+        }
+      } else {
+        const feed = { [edmInputX]: xTensor, [edmInputSigma]: sigmaTensor, [edmInputCond]: condTensor };
+        const out = firstOutput(await edmDenoise.run(feed), edmOutputName);
+        const outData = await getTensorData(out);
+        x = new Float32Array(outData);
+      }
+      return x;
+    }
+    // =====================
+    // decode latent to image
+    // =====================
+    async function decodeLatent(z) {
+      const { latentCh, latentSize, imgSize } = CONFIG;
+      const zTensor = createTensor(z, [1, latentCh, latentSize, latentSize]);
+      const imgTensor = firstOutput(await aeDecode.run({ [aeInputName]: zTensor }), aeOutputName);
+      const imgData = await getTensorData(imgTensor);
+      return { data: imgData, dims: imgTensor.dims };  // CHW or NHWC
+    }
+    // =====================
+    // render to canvas
+    // =====================
+    function renderImage(imgOut) {
+      const { imgSize } = CONFIG;
+      const imgData = imgOut?.data || imgOut;
+      const dims = imgOut?.dims || null;
+      if (!_imageData || _imageData.width !== imgSize || _imageData.height !== imgSize) {
+        _imageData = ctx.createImageData(imgSize, imgSize);
+      }
+      const dst = _imageData.data;
+      const spatial = imgSize * imgSize;
+      const isNHWC = dims && dims.length === 4 && dims[3] === 3;
+      for (let i = 0; i < spatial; i++) {
+        const di = i * 4;
+        let r, g, b;
+        if (isNHWC) {
+          const base = i * 3;
+          r = imgData[base + 0];
+          g = imgData[base + 1];
+          b = imgData[base + 2];
+        } else {
+          r = imgData[i];
+          g = imgData[spatial + i];
+          b = imgData[2 * spatial + i];
+        }
+        dst[di + 0] = Math.min(255, Math.max(0, (r * 255) | 0));
+        dst[di + 1] = Math.min(255, Math.max(0, (g * 255) | 0));
+        dst[di + 2] = Math.min(255, Math.max(0, (b * 255) | 0));
+        dst[di + 3] = 255;
+      }
+      ctx.putImageData(_imageData, 0, 0);
+    }
+    // =====================
+    // update history buffer
+    // =====================
+    function updateHistory(newZ) {
+      const { latentCh, latentSize, history } = CONFIG;
+      const frameSize = latentCh * latentSize * latentSize;
+      // shift left by one frame
+      for (let i = 0; i < (history - 1) * frameSize; i++) {
+        zHistory[i] = zHistory[i + frameSize];
+      }
+      // copy new frame to end
+      const offset = (history - 1) * frameSize;
+      for (let i = 0; i < frameSize; i++) {
+        zHistory[offset + i] = newZ[i];
+      }
+    }
+    // =====================
+    // main step
+    // =====================
+    async function step() {
+      if (paused || running) return;
+      running = true;
+      if (ortBackend !== 'ws' && CONFIG.playbackFps > 0) {
+        lastStepStartMs = performance.now();
+      }
+      try {
+        let tap = { x: -1, y: -1 };
+        if (tapQueue.length) {
+          tap = tapQueue.shift();
+          lastTap = tap;
+          tapHoldLeft = CONFIG.tapHoldFrames;
+        } else if (tapHoldLeft > 0) {
+          tap = lastTap;
+          tapHoldLeft -= 1;
+        }
+        const wantCfgScale = parseFloat(cfgSlider.value);
+        const hasTap = tap.x >= 0 && tap.y >= 0;
+        // CFG is only meaningful when cond != uncond. If there's no tap, action maps are all-zero anyway.
+        const cfgScale = hasTap ? wantCfgScale : 1.0;
+        // build action map and conditioning
+        const actionMap = makeActionMap(tap.x, tap.y);
+        const cond = buildCond(actionMap);
+        // unconditional cond (zero action) for CFG
+        let condUncond = cond;
+        if (cfgScale !== 1.0) {
+          const zeroAction = makeActionMap(-1, -1);
+          condUncond = buildCond(zeroAction);
+        }
+        // sample next latent
+        const zNext = await eulerSample(cond, condUncond, cfgScale, hasTap);
+        // decode to image
+        const imgOut = await decodeLatent(zNext);
+        renderImage(imgOut);
+        // update history
+        updateHistory(zNext);
+        // fps counter
+        frameCount++;
+        totalFrames++;
+        frameEl.textContent = totalFrames;
+        const now = Date.now();
+        if (now - lastFpsTime > 1000) {
+          fpsEl.textContent = frameCount;
+          frameCount = 0;
+          lastFpsTime = now;
+        }
+      } catch (e) {
+        console.error('step error:', e);
+        const msg = (e && e.message) ? e.message : String(e);
+        if (ortBackend === 'webgpu' && FALLBACK_ON_ERROR) {
+          await switchToWasmFallback(msg);
+        } else {
+          statusEl.textContent = 'Error: ' + msg;
+        }
+      }
+      running = false;
+      if (!paused && ortBackend !== 'ws') scheduleNextStep();
+    }
+    function scheduleNextStep() {
+      if (paused || ortBackend === 'ws') return;
+      if (CONFIG.playbackFps > 0) {
+        const targetDt = 1000 / CONFIG.playbackFps;
+        const delay = Math.max(0, targetDt - (performance.now() - lastStepStartMs));
+        setTimeout(() => { if (!paused) requestAnimationFrame(step); }, delay);
+      } else {
+        requestAnimationFrame(step);
+      }
+    }
+    // =====================
+    // controls
+    // =====================
+    function togglePause() {
+      paused = !paused;
+      pauseBtn.textContent = paused ? 'Play' : 'Pause';
+      if (!paused) {
+        if (ortBackend === 'ws') return;
+        scheduleNextStep();
+      }
+    }
+    async function resetWorld() {
+      if (ortBackend === 'ws') {
+        try {
+          if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ reset: true }));
+        } catch (_) {}
+        totalFrames = 0;
+        frameEl.textContent = '0';
+        return;
+      }
+      const { latentCh, latentSize, history, imgSize } = CONFIG;
+      const size = history * latentCh * latentSize * latentSize;
+      zHistory = new Float32Array(size);
+      totalFrames = 0;
+      frameEl.textContent = '0';
+      // try to load initial frames if available
+      try {
+        statusEl.textContent = 'Loading initial frames...';
+        const initUrl = resolveAssetUrl('init_frames.bin');
+        const resp = await fetch(initUrl);
+        if (resp.ok) {
+          const buffer = await resp.arrayBuffer();
+          const initData = new Float32Array(buffer);
+          if (initData.length === size) {
+            zHistory.set(initData);
+            statusEl.textContent = 'Ready! Click Play to start.';
+            // decode and show last frame (best-effort, non-blocking)
+            try {
+              const frameSize = latentCh * latentSize * latentSize;
+              const lastZ = zHistory.slice((history - 1) * frameSize);
+              decodeLatent(lastZ).then((imgOut) => {
+                const imgData = imgOut?.data || imgOut;
+                const expected = 3 * imgSize * imgSize;
+                if (!imgData || imgData.length !== expected) {
+                  console.warn(`Init preview decode bad length: ${imgData?.length} (expected ${expected})`);
+                } else {
+                  renderImage(imgOut);
+                }
+              }).catch((e) => {
+                console.warn('Init preview decode failed (continuing):', e);
+              });
+            } catch (e) {
+              console.warn('Init preview setup failed (continuing):', e);
+            }
+            return;
+          } else {
+            console.warn(`init_frames.bin length mismatch: got ${initData.length}, expected ${size}`);
+          }
+        }
+      } catch (e) {
+        console.log('No init_frames.bin, using random init', e);
+      }
+      // fallback: use small random noise (model will need to "warm up")
+      for (let i = 0; i < size; i++) {
+        zHistory[i] = (Math.random() - 0.5) * 0.1;
+      }
+      ctx.fillStyle = '#222';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#666';
+      ctx.font = '14px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('No init data - will generate from noise', canvas.width / 2, canvas.height / 2);
+      statusEl.textContent = 'Ready (no init frames). Click Play.';
+    }
+    canvas.onclick = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      if (ortBackend === 'ws') {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          pendingTap = { x, y, t_ms: Date.now() };
+          try {
+            ws.send(JSON.stringify({ tap_x: x, tap_y: y, cfg_scale: parseFloat(cfgSlider.value) }));
+          } catch (_) {}
+        }
+      } else {
+        tapQueue.push({ x, y });
+      }
+    };
+    // =====================
+    // init
+    // =====================
+    function configureOrtRuntime() {
+      // Enable WASM SIMD when available. Threads require cross-origin isolation (SharedArrayBuffer).
+      try {
+        if (ort?.env?.wasm) {
+          ort.env.wasm.simd = true;
+          // Force single-thread WASM to avoid worker issues on this server.
+          ort.env.wasm.numThreads = 1;
+          // Use CDN paths for wasm binaries to avoid path issues in workers.
+          ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/dist/';
+          // Proxy worker disabled (requires COOP/COEP and can fail in this server).
+          ort.env.wasm.proxy = false;
+        }
+      } catch (e) {
+        // best-effort
+      }
+      // Prefer high-performance adapter when using WebGPU (if available).
+      try {
+        if (ort?.env?.webgpu) {
+          ort.env.webgpu.powerPreference = 'high-performance';
+        }
+      } catch (e) {
+        // best-effort
+      }
+      // Optional debug flags via ?debug=1
+      try {
+        const params = new URLSearchParams(location.search);
+        if (params.get('debug') === '1') {
+          ort.env.debug = true;
+          ort.env.logLevel = 'verbose';
+        }
+      } catch (e) {
+        // best-effort
+      }
+    }
+    async function fetchArrayBuffer(url) {
+      const resp = await fetch(url);
+      if (!resp.ok) {
+        throw new Error(`fetch failed ${resp.status} for ${url}`);
+      }
+      return await resp.arrayBuffer();
+    }
+    function resolveModelUrl(filename) {
+      if (!MODEL_BASE_URL) return new URL(filename, location.href).toString();
+      // map filenames to hf repo layout: fp16/ or fp32/ subfolder under onnx/
+      const isFp16 = filename.includes('fp16');
+      const subdir = isFp16 ? 'onnx/fp16/' : 'onnx/fp32/';
+      return MODEL_BASE_URL + subdir + filename;
+    }
+    function resolveAssetUrl(filename) {
+      if (!MODEL_BASE_URL) return new URL(filename, location.href).toString();
+      return MODEL_BASE_URL + 'viewer/' + filename;
+    }
+    async function loadModelWithExternal(modelFile) {
+      const modelUrl = resolveModelUrl(modelFile);
+      const dataFile = modelFile + '.data';
+      const dataUrl = resolveModelUrl(dataFile);
+      const modelBuf = await fetchArrayBuffer(modelUrl);
+      let dataBuf = null;
+      try {
+        dataBuf = await fetchArrayBuffer(dataUrl);
+      } catch (e) {
+        // external data may be inlined (monolithic ONNX)
+        dataBuf = null;
+      }
+      if (dataBuf) {
+        return {
+          model: new Uint8Array(modelBuf),
+          externalData: [{ path: dataFile, data: new Uint8Array(dataBuf) }],
+        };
+      }
+      return { model: new Uint8Array(modelBuf) };
+    }
+    async function createSessionsWith(executionProviders, preferFp16) {
+      const options = { executionProviders, graphOptimizationLevel: 'all' };
+      if (executionProviders && executionProviders.includes('webgpu')) {
+        options.enableGraphCapture = false;
+      }
+      // try fp16 models if requested (keep_io_types=True means I/O stays fp32)
+      if (preferFp16) {
+        try {
+          const aeF16 = await loadModelWithExternal('ae_decode_fp16.onnx');
+          const edmF16 = await loadModelWithExternal('edm_denoise_fp16.onnx');
+          const aeOpts16 = { ...options };
+          if (aeF16.externalData) aeOpts16.externalData = aeF16.externalData;
+          const edmOpts16 = { ...options };
+          if (edmF16.externalData) edmOpts16.externalData = edmF16.externalData;
+          aeDecode = await ort.InferenceSession.create(aeF16.model, aeOpts16);
+          edmDenoise = await ort.InferenceSession.create(edmF16.model, edmOpts16);
+          ortPrecision = 'fp16';
+          console.log('fp16 models loaded successfully');
+        } catch (e) {
+          console.warn('fp16 load failed, falling back to fp32:', e);
+          aeDecode = null;
+          edmDenoise = null;
+        }
+      }
+      // fp32 fallback
+      if (!aeDecode || !edmDenoise) {
+        const aeFp32 = await loadModelWithExternal('ae_decode.onnx');
+        const edmFp32 = await loadModelWithExternal('edm_denoise.onnx');
+        const aeOpts = { ...options };
+        if (aeFp32.externalData) aeOpts.externalData = aeFp32.externalData;
+        const edmOpts = { ...options };
+        if (edmFp32.externalData) edmOpts.externalData = edmFp32.externalData;
+        aeDecode = await ort.InferenceSession.create(aeFp32.model, aeOpts);
+        edmDenoise = await ort.InferenceSession.create(edmFp32.model, edmOpts);
+        ortPrecision = 'fp32';
+      }
+      aeInputName = pickName(aeDecode.inputNames || [], ['z', 'latent'], 0);
+      aeOutputName = (aeDecode.outputNames && aeDecode.outputNames[0]) || 'img';
+      aeInputMeta = aeDecode.inputMetadata || null;
+      const edmInputs = edmDenoise.inputNames || [];
+      edmInputX = pickName(edmInputs, ['x_noisy', 'x'], 0);
+      edmInputSigma = pickName(edmInputs, ['sigma', 't'], 1);
+      edmInputCond = pickName(edmInputs, ['cond', 'c'], 2);
+      edmOutputName = (edmDenoise.outputNames && edmDenoise.outputNames[0]) || 'x_hat';
+      edmInputMeta = edmDenoise.inputMetadata || null;
+    }
+    async function switchToWasmFallback(reason) {
+      if (fallbackAttempted) return;
+      fallbackAttempted = true;
+      try {
+        statusEl.textContent = `WebGPU error, switching to WASM...`;
+        await createSessionsWith(['wasm'], false);
+        ortBackend = 'wasm';
+        backendEl.textContent = ortBackend;
+        precisionEl.textContent = ortPrecision;
+        const diagEl = document.getElementById('diag');
+        if (diagEl) diagEl.textContent += `\nfallback: wasm (${reason || 'runtime error'})`;
+        statusEl.textContent = `Ready! backend=${ortBackend}. Click Play.`;
+      } catch (e) {
+        statusEl.textContent = `Fatal: WebGPU failed and WASM fallback failed`;
+        console.error('fallback failed:', e);
+      }
+    }
+    async function loadJSON(path) {
+      try {
+        const resp = await fetch(path);
+        if (!resp.ok) return null;
+        return await resp.json();
+      } catch (e) {
+        return null;
+      }
+    }
+    async function diagFetch(url, label) {
+      try {
+        const resp = await fetch(url, { method: 'HEAD' });
+        if (!resp.ok) return `${label}: ${resp.status}`;
+        const len = resp.headers.get('content-length');
+        return `${label}: ok${len ? ` (${len} bytes)` : ''}`;
+      } catch (e) {
+        return `${label}: err ${e && e.message ? e.message : e}`;
+      }
+    }
+    async function diagFetchOptional(url, label) {
+      try {
+        const resp = await fetch(url, { method: 'HEAD' });
+        if (resp.status === 404) return `${label}: n/a (monolithic)`;
+        if (!resp.ok) return `${label}: ${resp.status}`;
+        const len = resp.headers.get('content-length');
+        return `${label}: ok${len ? ` (${len} bytes)` : ''}`;
+      } catch (e) {
+        return `${label}: err ${e && e.message ? e.message : e}`;
+      }
+    }
+    async function runDiagnostics(wantFp16) {
+      const diagEl = document.getElementById('diag');
+      if (!diagEl) return;
+      const base = ort?.env?.wasm?.wasmPaths || 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/dist/';
+      const wasm = base + 'ort-wasm-simd-threaded.wasm';
+      const jsep = base + 'ort-wasm-simd-threaded.jsep.wasm';
+      const ortJs = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/dist/ort.webgpu.min.js';
+      const aeName = wantFp16 ? 'ae_decode_fp16.onnx' : 'ae_decode.onnx';
+      const edmName = wantFp16 ? 'edm_denoise_fp16.onnx' : 'edm_denoise.onnx';
+      const lines = await Promise.all([
+        diagFetch(ortJs, 'ort.webgpu.min.js'),
+        diagFetch(wasm, 'ort-wasm-simd-threaded.wasm'),
+        diagFetch(jsep, 'ort-wasm-simd-threaded.jsep.wasm'),
+        diagFetch(resolveAssetUrl('model_meta.json'), 'model_meta.json'),
+        diagFetch(resolveAssetUrl('init_frames.bin'), 'init_frames.bin'),
+        diagFetch(resolveAssetUrl('init_frames_meta.json'), 'init_frames_meta.json'),
+        diagFetch(resolveModelUrl(aeName), aeName),
+        diagFetchOptional(resolveModelUrl(`${aeName}.data`), `${aeName}.data`),
+        diagFetch(resolveModelUrl(edmName), edmName),
+        diagFetchOptional(resolveModelUrl(`${edmName}.data`), `${edmName}.data`),
+      ]);
+      diagEl.textContent = lines.join('\n');
+    }
+    async function init() {
+      try {
+        const params0 = new URLSearchParams(location.search);
+        const wantFp16_0 = (params0.get('fp16') === '1');
+        if (params0.get('hf') === '1') {
+          const rev = params0.get('hf_rev');
+          if (rev && HF_BASE.includes('/resolve/main/')) {
+            MODEL_BASE_URL = HF_BASE.replace('/resolve/main/', `/resolve/${rev}/`);
+          } else {
+            MODEL_BASE_URL = HF_BASE;
+          }
+        }
+        const mode0 = (params0.get('mode') || 'onnx').toLowerCase();
+        if (modeEl) modeEl.value = (mode0 === 'ws') ? 'ws' : 'onnx';
+        if (modeEl) {
+          modeEl.onchange = () => {
+            const next = modeEl.value;
+            location.href = setQueryParam('mode', next === 'ws' ? 'ws' : 'onnx');
+          };
+        }
+        if (mode0 === 'ws') {
+          // WebSocket mode: use the same canvas/controls but render server frames.
+          await initWebSocketMode();
+          return;
+        }
+        configureOrtRuntime();
+        await runDiagnostics(wantFp16_0);
+        // Prefer WebGPU when available; fall back to WASM.
+        // WebGPU will typically be 10-50x faster than WASM for this size model.
+        const canWebGPU = !!navigator.gpu;
+        const params = new URLSearchParams(location.search);
+        const forceEp = (params.get('ep') || '').toLowerCase(); // 'webgpu' | 'wasm' | ''
+        const wantFp16 = (params.get('fp16') === '1');
+        const debug = (params.get('debug') === '1');
+        FORCE_FP16 = wantFp16;
+        FORCE_SIGMA_SCALAR = (params.get('sigma') === 'scalar');
+        FALLBACK_ON_ERROR = (params.get('fallback') || '1') !== '0';
+        const noFallback = (params.get('nofallback') === '1');
+        GRAPH_CAPTURE = false; // graph capture disabled
+        let provider = 'wasm';
+        let webgpuOk = false;
+        let webgpuMsg = '';
+        if (canWebGPU) {
+          try {
+            const adapter = await navigator.gpu.requestAdapter();
+            if (adapter) {
+              webgpuOk = true;
+              if (debug) {
+                const device = await adapter.requestDevice();
+                webgpuMsg = `adapter ok, device ok`;
+                if (device?.limits) {
+                  webgpuMsg += `, maxBuf=${device.limits.maxStorageBufferBindingSize || 'n/a'}`;
+                }
+              }
+            } else {
+              webgpuMsg = 'no adapter';
+            }
+          } catch (e) {
+            webgpuOk = false;
+            webgpuMsg = `adapter error: ${(e && e.message) ? e.message : e}`;
+          }
+        }
+        // Load optional model meta to override CONFIG (history/latent size/etc).
+        const modelMeta = await loadJSON(resolveAssetUrl('model_meta.json'));
+        if (modelMeta) {
+          if (typeof modelMeta.history === 'number') CONFIG.history = modelMeta.history;
+          if (typeof modelMeta.condSigmaCh === 'number') CONFIG.condSigmaCh = modelMeta.condSigmaCh;
+          if (typeof modelMeta.latentCh === 'number') CONFIG.latentCh = modelMeta.latentCh;
+          if (typeof modelMeta.latentSize === 'number') CONFIG.latentSize = modelMeta.latentSize;
+          if (typeof modelMeta.imgSize === 'number') CONFIG.imgSize = modelMeta.imgSize;
+          if (typeof modelMeta.sigmaData === 'number') CONFIG.sigmaData = modelMeta.sigmaData;
+        }
+        // Query param overrides (take precedence over model_meta defaults).
+        function _getFloat(key) {
+          const v = params.get(key);
+          if (v == null || v === '') return null;
+          const f = parseFloat(v);
+          return Number.isFinite(f) ? f : null;
+        }
+        function _getInt(key) {
+          const v = params.get(key);
+          if (v == null || v === '') return null;
+          const n = parseInt(v, 10);
+          return Number.isFinite(n) ? n : null;
+        }
+        const qsSteps = _getInt('steps');
+        if (qsSteps != null && qsSteps >= 1) CONFIG.eulerSteps = qsSteps;
+        const qsRho = _getFloat('rho');
+        if (qsRho != null && qsRho > 0) CONFIG.rho = qsRho;
+        const qsSigmaMax = _getFloat('sigmaMax');
+        if (qsSigmaMax != null && qsSigmaMax > 0) CONFIG.sigmaMax = qsSigmaMax;
+        const sigmaMaxNoTapProvided = params.has('sigmaMaxNoTap');
+        const qsSigmaMaxNoTap = _getFloat('sigmaMaxNoTap');
+        if (qsSigmaMaxNoTap != null && qsSigmaMaxNoTap > 0) CONFIG.sigmaMaxNoTap = qsSigmaMaxNoTap;
+        if (!sigmaMaxNoTapProvided) CONFIG.sigmaMaxNoTap = CONFIG.sigmaMax;
+        const qsSigmaMin = _getFloat('sigmaMin');
+        if (qsSigmaMin != null && qsSigmaMin > 0) CONFIG.sigmaMin = qsSigmaMin;
+        const qsNoiseScale = _getFloat('noiseScale');
+        if (qsNoiseScale != null && qsNoiseScale >= 0) CONFIG.noiseScale = qsNoiseScale;
+        const noiseScaleNoTapProvided = params.has('noiseScaleNoTap');
+        const qsNoiseScaleNoTap = _getFloat('noiseScaleNoTap');
+        if (qsNoiseScaleNoTap != null && qsNoiseScaleNoTap >= 0) CONFIG.noiseScaleNoTap = qsNoiseScaleNoTap;
+        if (!noiseScaleNoTapProvided) CONFIG.noiseScaleNoTap = CONFIG.noiseScale;
+        const qsTapHold = _getInt('tapHoldFrames');
+        if (qsTapHold != null && qsTapHold >= 0) CONFIG.tapHoldFrames = qsTapHold;
+        const qsPlaybackFps = _getFloat('playbackFps');
+        if (qsPlaybackFps != null && qsPlaybackFps >= 0) CONFIG.playbackFps = qsPlaybackFps;
+        const qsTapStrength = _getFloat('tapStrength');
+        if (qsTapStrength != null && qsTapStrength >= 0) CONFIG.tapStrength = qsTapStrength;
+        const qsHeatSigma = _getFloat('heatmapSigmaPx');
+        if (qsHeatSigma != null && qsHeatSigma > 0) CONFIG.heatmapSigmaPx = qsHeatSigma;
+        const qsCfg = _getFloat('cfg');
+        if (qsCfg != null && qsCfg >= parseFloat(cfgSlider.min) && qsCfg <= parseFloat(cfgSlider.max)) {
+          cfgSlider.value = String(qsCfg);
+          cfgValEl.textContent = String(qsCfg);
+        }
+        // Resize canvas to match model image size.
+        canvas.width = CONFIG.imgSize;
+        canvas.height = CONFIG.imgSize;
+        statusEl.textContent = 'Loading models...';
+        progressEl.style.display = 'block';
+        progressEl.value = 0;
+        if (forceEp === 'webgpu' && !webgpuOk) {
+          throw new Error('WebGPU not available (no adapter)');
+        }
+        if (webgpuOk && forceEp !== 'wasm') {
+          try {
+            provider = 'webgpu';
+            const fp16Label = wantFp16 ? ', fp16' : '';
+            statusEl.textContent = `Loading models (WebGPU${fp16Label})...`;
+            await createSessionsWith(['webgpu'], wantFp16);
+          } catch (e) {
+            console.warn('WebGPU init failed, falling back to WASM:', e);
+            if (!noFallback) {
+              provider = 'wasm';
+              statusEl.textContent = 'Loading models (WASM fallback)...';
+              await createSessionsWith(['wasm'], false);
+            } else {
+              throw e;
+            }
+          }
+        } else {
+          provider = 'wasm';
+          statusEl.textContent = 'Loading models (WASM)...';
+          await createSessionsWith(['wasm'], false);
+        }
+        progressEl.value = 100;
+        ortBackend = provider;
+        backendEl.textContent = ortBackend;
+        precisionEl.textContent = ortPrecision;
+        try {
+          const diagEl = document.getElementById('diag');
+          if (diagEl && aeDecode && edmDenoise) {
+            diagEl.textContent += `\nae inputs: ${JSON.stringify(aeDecode.inputNames || [])} outputs: ${JSON.stringify(aeDecode.outputNames || [])}`;
+            diagEl.textContent += `\nedm inputs: ${JSON.stringify(edmDenoise.inputNames || [])} outputs: ${JSON.stringify(edmDenoise.outputNames || [])}`;
+            if (edmInputMeta && edmInputMeta[edmInputSigma]) {
+              diagEl.textContent += `\nsigma dims: ${JSON.stringify(getMetaDims(edmInputMeta[edmInputSigma]))}`;
+            }
+            diagEl.textContent += `\nsigma override: ${FORCE_SIGMA_SCALAR ? 'scalar' : 'auto'}`;
+            diagEl.textContent += `\nconfig: history=${CONFIG.history} condSigmaCh=${CONFIG.condSigmaCh} steps=${CONFIG.eulerSteps} rho=${CONFIG.rho} ` +
+              `sigmaMax=${CONFIG.sigmaMax} sigmaMaxNoTap=${CONFIG.sigmaMaxNoTap} sigmaMin=${CONFIG.sigmaMin} ` +
+              `noiseScale=${CONFIG.noiseScale} noiseScaleNoTap=${CONFIG.noiseScaleNoTap} tapHold=${CONFIG.tapHoldFrames} tapStrength=${CONFIG.tapStrength} heatSigmaPx=${CONFIG.heatmapSigmaPx}`;
+          }
+        } catch (e) {}
+        console.log('Using backend:', ortBackend);
+        // init history buffer
+        await resetWorld();
+        progressEl.style.display = 'none';
+        const wasmThreads = (ortBackend === 'wasm') ? (ort?.env?.wasm?.numThreads || 1) : null;
+        const extra = (ortBackend === 'wasm')
+          ? ` (threads=${wasmThreads}, crossOriginIsolated=${!!self.crossOriginIsolated})`
+          : (webgpuMsg ? ` (${webgpuMsg})` : '');
+        statusEl.textContent = `Ready! backend=${ortBackend}${extra}. Click Play.`;
+        pauseBtn.textContent = paused ? 'Play' : 'Pause';
+      } catch (e) {
+        console.error('init error:', e);
+        let msg = (e && e.message) ? e.message : String(e);
+        try {
+          msg += ' | ' + JSON.stringify(e, Object.getOwnPropertyNames(e));
+        } catch (err) {}
+        statusEl.textContent = 'Failed to load: ' + msg;
+        progressEl.style.display = 'none';
+      }
+    }
+    init();
+    // =====================
+    // WebSocket backend (server streaming)
+    // =====================
+    async function initWebSocketMode() {
+      backendEl.textContent = 'ws';
+      precisionEl.textContent = 'server';
+      statusEl.textContent = 'Connecting to server...';
+      progressEl.style.display = 'none';
+      ortBackend = 'ws';
+      ortPrecision = 'server';
+      paused = false;
+      pauseBtn.textContent = 'Pause';
+      const proto = (location.protocol === 'https:') ? 'wss:' : 'ws:';
+      const wsUrl = proto + '//' + location.host + '/ws';
+      ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
+      ws.onopen = () => {
+        statusEl.textContent = `Connected (ws). Tap to interact.`;
+        try {
+          ws.send(JSON.stringify({ cfg_scale: parseFloat(cfgSlider.value) }));
+        } catch (_) {}
+      };
+      cfgSlider.oninput = () => {
+        cfgValEl.textContent = cfgSlider.value;
+        try {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ tap_x: -1, tap_y: -1, cfg_scale: parseFloat(cfgSlider.value) }));
+          }
+        } catch (_) {}
+      };
+      ws.onmessage = async (e) => {
+        if (typeof e.data === 'string') {
+          try {
+            const msg = JSON.parse(e.data);
+            if (msg && msg.mode) wsServerMode = msg.mode;
+            if (msg && msg.format) {
+              window.__WS_FMT__ = msg.format;
+            }
+            if (msg && msg.width && msg.height) {
+              canvas.width = msg.width;
+              canvas.height = msg.height;
+              window.__WS_W__ = msg.width;
+              window.__WS_H__ = msg.height;
+              window.__WS_IMD__ = new ImageData(msg.width, msg.height);
+            }
+          } catch (_) {}
+          return;
+        }
+        if (paused) return;
+        try {
+          const fmt = window.__WS_FMT__ || 'jpeg';
+          if (fmt === 'raw_rgba') {
+            const u8 = new Uint8ClampedArray(e.data);
+            let imd = window.__WS_IMD__;
+            if (!imd || imd.data.length !== u8.length) {
+              const px = Math.floor(Math.sqrt(u8.length / 4));
+              canvas.width = px; canvas.height = px;
+              imd = new ImageData(px, px);
+              window.__WS_IMD__ = imd;
+            }
+            imd.data.set(u8);
+            ctx.putImageData(imd, 0, 0);
+          } else {
+            const mimeType = (fmt === 'webp') ? 'image/webp' : 'image/jpeg';
+            const blob = new Blob([e.data], { type: mimeType });
+            if ('createImageBitmap' in window) {
+              const bmp = await createImageBitmap(blob);
+              ctx.drawImage(bmp, 0, 0, canvas.width, canvas.height);
+              if (bmp && bmp.close) bmp.close();
+            } else {
+              const url = URL.createObjectURL(blob);
+              const img = new Image();
+              await new Promise((resolve) => {
+                img.onload = resolve;
+                img.onerror = resolve;
+                img.src = url;
+              });
+              ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+              URL.revokeObjectURL(url);
+            }
+          }
+        } catch (err) {
+          console.warn('ws decode/draw failed', err);
+        }
+        // local tap echo
+        if (pendingTap && (Date.now() - pendingTap.t_ms) < 750) {
+          ctx.save();
+          ctx.strokeStyle = 'rgba(255,255,255,0.9)';
+          ctx.lineWidth = 2;
+          const x = pendingTap.x * canvas.width;
+          const y = pendingTap.y * canvas.height;
+          ctx.beginPath();
+          ctx.arc(x, y, 10, 0, Math.PI * 2);
+          ctx.stroke();
+          ctx.restore();
+        }
+        frameCount++;
+        totalFrames++;
+        frameEl.textContent = totalFrames;
+        const now = Date.now();
+        if (now - lastFpsTime > 1000) {
+          fpsEl.textContent = frameCount;
+          frameCount = 0;
+          lastFpsTime = now;
+        }
+        // In pull mode, request another frame. In push mode, frames arrive continuously.
+        if (!paused && ws && ws.readyState === WebSocket.OPEN && wsServerMode !== 'push') {
+          try {
+            ws.send(JSON.stringify({ tap_x: -1, tap_y: -1, cfg_scale: parseFloat(cfgSlider.value) }));
+          } catch (_) {}
+        }
+      };
+      ws.onclose = () => {
+        statusEl.textContent = 'WS disconnected.';
+      };
+      ws.onerror = () => {
+        statusEl.textContent = 'WS error.';
+      };
+    }
+  </script>
+</body>
+</html>

koi/v15_scare/onnx/init_frames.bin ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:47724be1af5e460b18151ab7bb7f2b92af4d2393719bce53525885954230d6e9
+size 262144

koi/v15_scare/onnx/init_frames_meta.json ADDED Viewed

	@@ -0,0 +1,8 @@

+{
+  "chunk": "v6_scare_temporal_w2_1771775365451_87059415_chunk_0186",
+  "start": 53,
+  "history": 8,
+  "img_size": 256,
+  "latent_ch": 8,
+  "latent_size": 32
+}

koi/v15_scare/onnx/model_meta.json ADDED Viewed

	@@ -0,0 +1,8 @@

+{
+  "history": 8,
+  "condSigmaCh": 8,
+  "latentCh": 8,
+  "latentSize": 32,
+  "imgSize": 256,
+  "sigmaData": 0.154
+}