From e57e7c2bd4bf0a8682563598d376236779a289b6 Mon Sep 17 00:00:00 2001 From: skal Date: Fri, 13 Feb 2026 16:37:09 +0100 Subject: CNN v2 test tool: Refactoring and video loop support Refactoring: - Extract FULLSCREEN_QUAD_VS shader (reused in mipmap, display, layer viz) - Add helper methods: getDimensions(), setVideoControlsEnabled() - Add section headers and improve code organization (~40 lines saved) - Move Mip Level selector to bottom of left sidebar - Remove "Features (p0-p3)" panel header Features: - Add video loop support (continuous playback) Documentation: - Update CNN_V2_WEB_TOOL.md with latest changes - Document refactoring benefits and code organization - Update UI layout section with current structure Co-Authored-By: Claude Sonnet 4.5 --- doc/CNN_V2_WEB_TOOL.md | 58 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 45 insertions(+), 13 deletions(-) (limited to 'doc/CNN_V2_WEB_TOOL.md') diff --git a/doc/CNN_V2_WEB_TOOL.md b/doc/CNN_V2_WEB_TOOL.md index a5162a6..8c661b2 100644 --- a/doc/CNN_V2_WEB_TOOL.md +++ b/doc/CNN_V2_WEB_TOOL.md @@ -6,7 +6,7 @@ Browser-based WebGPU tool for validating CNN v2 inference with layer visualizati --- -## Status (2026-02-13 evening) +## Status (2026-02-13) **Working:** - ✅ WebGPU initialization and device setup @@ -19,8 +19,18 @@ Browser-based WebGPU tool for validating CNN v2 inference with layer visualizati - ✅ Layer naming matches codebase convention (Layer 0, Layer 1, Layer 2) - ✅ Static features split visualization (Static 0-3, Static 4-7) - ✅ All layers visible including output layer (Layer 2) - -**Recent Fixes:** +- ✅ Video playback support (MP4, WebM) with frame-by-frame controls +- ✅ Video looping (automatic continuous playback) +- ✅ Mip level selection (p0-p3 features at different resolutions) + +**Recent Changes (Latest):** +- Code refactoring: Extracted FULLSCREEN_QUAD_VS shader (reused 3× across pipelines) +- Added helper methods: `getDimensions()`, `setVideoControlsEnabled()` +- Improved code organization with section headers and comments +- Moved Mip Level selector to bottom of left sidebar (removed "Features (p0-p3)" label) +- Added `loop` attribute to video element for automatic continuous playback + +**Previous Fixes:** - Fixed Layer 2 not appearing (was excluded from layerOutputs due to isOutput check) - Fixed canvas context switching (force clear before recreation) - Added Static 0-3 / Static 4-7 buttons to view all 8 static feature channels @@ -38,8 +48,25 @@ Browser-based WebGPU tool for validating CNN v2 inference with layer visualizati ### File Structure - Single-file HTML tool (~1100 lines) - Embedded shaders: STATIC_SHADER, CNN_SHADER, DISPLAY_SHADER, LAYER_VIZ_SHADER +- Shared WGSL component: FULLSCREEN_QUAD_VS (reused across render pipelines) - Pure WebGPU (no external dependencies) +### Code Organization + +**Recent Refactoring (2026-02-13):** +- Extracted `FULLSCREEN_QUAD_VS` constant: Reused fullscreen quad vertex shader (2 triangles covering NDC) +- Added helper methods to CNNTester class: + - `getDimensions()`: Returns current source dimensions (video or image) + - `setVideoControlsEnabled(enabled)`: Centralized video control enable/disable +- Consolidated duplicate vertex shader code (used in mipmap generation, display, layer visualization) +- Added section headers in JavaScript for better navigation +- Improved inline comments explaining shader architecture + +**Benefits:** +- Reduced code duplication (~40 lines saved) +- Easier maintenance (single source of truth for fullscreen quad) +- Clearer separation of concerns + ### Key Components **1. Weight Parsing** @@ -168,18 +195,23 @@ For each CNN layer i: - Drop zone for .bin weight files ### Content Area -**Left:** Main canvas (CNN output display) -**Right:** Sidebar with panels: +**Left Sidebar (300px):** +1. Drop zone for .bin weight files +2. Weights Info panel (file size, layer table with min/max) +3. Weights Visualization panel (per-layer kernel display) +4. **Mip Level selector** (bottom) - Select p0/p1/p2 for static features + +**Main Canvas (center):** +- CNN output display with video controls (Play/Pause, Frame ◄/►) +- Supports both PNG images and video files (MP4, WebM) +- Video loops automatically for continuous playback + +**Right Sidebar (panels):** 1. **Layer Visualization Panel** (top, flex: 1) - - Mode tabs: Activations / Weights - - Layer selection buttons (Static L0, Layer 1, Layer 2, ...) - - 2×2 grid of channel views - -2. **Weights Info Panel** (bottom, collapsible) - - File size, layer count - - Per-layer table: size, weight count, min/max - - Click header to collapse/expand + - Layer selection buttons (Static 0-3, Static 4-7, Layer 0, Layer 1, ...) + - 2×2 grid of channel views (grayscale activations) + - 4× zoom view at bottom ### Footer - Status line (GPU timing, dimensions, mode) -- cgit v1.2.3