From 7249a40c54e9ce3fc144a37f7c1ff8c082e62191 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Sun, 22 Mar 2026 16:36:28 +0100
Subject: fix(cnn_v3/tools): zoom channel via WebGPU re-render + fill panel
 width

---
 cnn_v3/tools/tester.js | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

(limited to 'cnn_v3/tools/tester.js')

diff --git a/cnn_v3/tools/tester.js b/cnn_v3/tools/tester.js
index ac65766..a138e12 100644
--- a/cnn_v3/tools/tester.js
+++ b/cnn_v3/tools/tester.js
@@ -464,7 +464,7 @@ class CNNv3Tester {
       const cvs=document.createElement('canvas');
       const name=chName(c);
       cvs.title=name;
-      cvs.onclick=()=>tester.zoomChannel(cvs,name);
+      cvs.onclick=()=>tester.zoomChannel(id,c,name);
       cell.appendChild(lbl); cell.appendChild(cvs); grid.appendChild(cell);
     }
     const pl=def.t==='f32'?this.getVizF32():this.getVizU32();
@@ -486,15 +486,34 @@ class CNNv3Tester {
     await this.device.queue.onSubmittedWorkDone();
   }
 
-  zoomChannel(srcCvs, label) {
+  zoomChannel(layerId, ch, label) {
+    const def = this.vizDefs?.find(d => d.id === layerId);
+    const tex = this.layerTextures[layerId];
+    if (!def || !tex || !this.device) return;
     const wrap = document.getElementById('chzoomWrap');
     const dst  = document.getElementById('chzoom');
     const lbl  = document.getElementById('chzoomLbl');
-    dst.width  = srcCvs.width;
-    dst.height = srcCvs.height;
-    dst.getContext('2d').drawImage(srcCvs, 0, 0);
-    lbl.textContent = label;
+    // Size: fill panel width, height follows aspect ratio
+    dst.width  = tex.width;
+    dst.height = tex.height;
+    dst.style.width  = '100%';
+    dst.style.height = 'auto';
+    lbl.textContent  = label;
     wrap.style.display = 'flex';
+    // Re-render via WebGPU (WebGPU canvas pixels are not readable by drawImage)
+    const pl = def.t === 'f32' ? this.getVizF32() : this.getVizU32();
+    const ctx = dst.getContext('webgpu');
+    try { ctx.configure({device: this.device, format: this.format}); } catch(_) { return; }
+    const chBuf = this.device.createBuffer({size:4, usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});
+    this.device.queue.writeBuffer(chBuf, 0, new Uint32Array([ch]));
+    const bg = this.device.createBindGroup({layout: pl.getBindGroupLayout(0),
+      entries:[{binding:0, resource:tex.createView()}, {binding:1, resource:{buffer:chBuf}}]});
+    const enc = this.device.createCommandEncoder();
+    const rp  = enc.beginRenderPass({colorAttachments:[{
+      view:ctx.getCurrentTexture().createView(), loadOp:'clear', storeOp:'store'}]});
+    rp.setPipeline(pl); rp.setBindGroup(0, bg); rp.draw(6); rp.end();
+    this.device.queue.submit([enc.finish()]);
+    chBuf.destroy();
   }
 
   // ── Save PNG ─────────────────────────────────────────────────────────────
-- 
cgit v1.2.3