diff options
| author | skal <pascal.massimino@gmail.com> | 2026-03-22 16:34:22 +0100 |
|---|---|---|
| committer | skal <pascal.massimino@gmail.com> | 2026-03-22 16:34:22 +0100 |
| commit | 856bcae814a69611d8619cc2f9944a0c476141fd (patch) | |
| tree | e6fbac58aa5ea3b572b223bf5346c69ab7102fb2 | |
| parent | b3c69d188943269769b7fee305f135faadcc60f2 (diff) | |
feat(cnn_v3/tools): click vignette to show enlarged channel below grid
| -rw-r--r-- | cnn_v3/tools/index.html | 4 | ||||
| -rw-r--r-- | cnn_v3/tools/tester.js | 15 |
2 files changed, 19 insertions, 0 deletions
diff --git a/cnn_v3/tools/index.html b/cnn_v3/tools/index.html index 1398ca5..ad736d9 100644 --- a/cnn_v3/tools/index.html +++ b/cnn_v3/tools/index.html @@ -145,6 +145,10 @@ video{display:none} <div class="pc" id="layerViz" style="flex:1;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> + <canvas id="chzoom" style="max-width:100%;image-rendering:pixelated"></canvas> + </div> </div> </div> </div> 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() { |