feat(cnn_v3/tools): click vignette to show enlarged channel below grid

1 files changed, 15 insertions, 0 deletions

diff --git a/cnn_v3/tools/tester.js b/cnn_v3/tools/tester.js
index d58b87e..ac65766 100644
--- a/cnn_v3/tools/tester.js
+++ b/cnn_v3/tools/tester.js
@@ -457,10 +457,14 @@ class CNNv3Tester {
     document.getElementById(`vb_${id}`)?.classList.add('act');
     const def=this.vizDefs.find(d=>d.id===id); if(!def)return;
     const grid=document.getElementById('chgrid'); grid.innerHTML='';
+    const chName = (c) => `${def.lbl} → ${def.ch[c]||'c'+c}`;
     for(let c=0;c<def.nch;c++){
       const cell=document.createElement('div'); cell.className='chcell';
       const lbl=document.createElement('div'); lbl.className='chcell-lbl'; lbl.textContent=def.ch[c]||`c${c}`;
       const cvs=document.createElement('canvas');
+      const name=chName(c);
+      cvs.title=name;
+      cvs.onclick=()=>tester.zoomChannel(cvs,name);
       cell.appendChild(lbl); cell.appendChild(cvs); grid.appendChild(cell);
     }
     const pl=def.t==='f32'?this.getVizF32():this.getVizU32();
@@ -482,6 +486,17 @@ class CNNv3Tester {
     await this.device.queue.onSubmittedWorkDone();
   }
 
+  zoomChannel(srcCvs, label) {
+    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;
+    wrap.style.display = 'flex';
+  }
+
   // ── Save PNG ─────────────────────────────────────────────────────────────
 
   async savePNG() {