diff options
Diffstat (limited to 'cnn_v3/tools')
| -rw-r--r-- | cnn_v3/tools/index.html | 2 | ||||
| -rw-r--r-- | cnn_v3/tools/tester.js | 31 |
2 files changed, 26 insertions, 7 deletions
diff --git a/cnn_v3/tools/index.html b/cnn_v3/tools/index.html index ad736d9..f22084d 100644 --- a/cnn_v3/tools/index.html +++ b/cnn_v3/tools/index.html @@ -147,7 +147,7 @@ video{display:none} </div> <div id="chzoomWrap" style="display:none;flex-direction:column;align-items:center;gap:3px;padding:6px;border-top:1px solid #333;background:#1a1a1a"> <span id="chzoomLbl" style="font-size:9px;color:#666"></span> - <canvas id="chzoom" style="max-width:100%;image-rendering:pixelated"></canvas> + <canvas id="chzoom" style="image-rendering:pixelated;display:block"></canvas> </div> </div> </div> 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 ───────────────────────────────────────────────────────────── |