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 <noreply@anthropic.com>

1 files changed, 44 insertions, 12 deletions

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)
+- ✅ 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 Fixes:**
+**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:
 
-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
+**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
 
-2. **Weights Info Panel** (bottom, collapsible)
-   - File size, layer count
-   - Per-layer table: size, weight count, min/max
-   - Click header to collapse/expand
+**Right Sidebar (panels):**
+1. **Layer Visualization Panel** (top, flex: 1)
+   - 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)