diff options
| -rw-r--r-- | cnn_v3/tools/index.html | 6 | ||||
| -rw-r--r-- | cnn_v3/tools/tester.js | 49 |
2 files changed, 29 insertions, 26 deletions
diff --git a/cnn_v3/tools/index.html b/cnn_v3/tools/index.html index f22084d..26fee9b 100644 --- a/cnn_v3/tools/index.html +++ b/cnn_v3/tools/index.html @@ -142,11 +142,11 @@ video{display:none} <div class="right"> <div class="panel" style="flex:1;display:flex;flex-direction:column;min-height:0"> <div class="ph">Layer Visualization</div> - <div class="pc" id="layerViz" style="flex:1;overflow:auto"> + <div class="pc" id="layerViz" style="flex:1;min-height:0;overflow:auto"> <p style="color:#444;text-align:center">Load image + weights</p> </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> + <div id="chzoomWrap" style="display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;border-top:1px solid #333;background:#1a1a1a;flex:1;min-height:0;overflow:hidden"> + <span id="chzoomLbl" style="font-size:9px;color:#666;flex-shrink:0"></span> <canvas id="chzoom" style="image-rendering:pixelated;display:block"></canvas> </div> </div> diff --git a/cnn_v3/tools/tester.js b/cnn_v3/tools/tester.js index fd2b7bd..4286060 100644 --- a/cnn_v3/tools/tester.js +++ b/cnn_v3/tools/tester.js @@ -491,31 +491,34 @@ class CNNv3Tester { 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'); - // Size: fit canvas to available container width (height:auto doesn't work on <canvas>) - const maxW = wrap.clientWidth - 12; // subtract wrap padding - const scale = Math.min(1, maxW / tex.width); - dst.width = Math.round(tex.width * scale); - dst.height = Math.round(tex.height * scale); - dst.style.width = ''; - dst.style.height = ''; - lbl.textContent = label; + 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(); + // Wait for layout so clientWidth/clientHeight reflect the flex-distributed size + requestAnimationFrame(() => { + const dst = document.getElementById('chzoom'); + const pad = 12; + const lblH = lbl.offsetHeight + 6; + const availW = wrap.clientWidth - pad; + const availH = wrap.clientHeight - pad - lblH; + const scale = Math.min(1, availW / tex.width, availH / tex.height); + dst.width = Math.round(tex.width * scale); + dst.height = Math.round(tex.height * scale); + // 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 ───────────────────────────────────────────────────────────── |