feat: add interactive CNN browser demo for GitHub Pages (#253)

- Single-file HTML demo with modern dark theme UI
- Drag & drop image upload + camera capture
- Real-time embedding extraction and visualization
- Similarity matrix comparing multiple images
- Performance metrics display (~5ms per image)
- Falls back to demo mode if WASM fails to load
- ADR-089 documenting the approach

Deploy to: https://ruvnet.github.io/ruvector/demo/cnn/

Co-authored-by: Reuven <cohen@ruv-mac-mini.local>
This commit is contained in:
rUv 2026-03-11 17:50:42 -04:00 committed by GitHub
parent 1caaa1b2fa
commit 10b03c75c6
2 changed files with 1072 additions and 0 deletions

View file

@ -0,0 +1,44 @@
# ADR-089: CNN Browser Demo for GitHub Pages
## Status
Accepted
## Context
The `@ruvector/cnn` npm package provides WASM-based CNN feature extraction for browsers. To showcase its capabilities and provide a hands-on experience, we need an interactive demo deployable to GitHub Pages.
## Decision
Create an interactive browser demo with:
### Features
1. **Image Upload** - Drag & drop or file picker
2. **Camera Capture** - Real-time webcam integration
3. **Feature Extraction** - Visual display of embedding vectors
4. **Similarity Search** - Compare images and show similarity scores
5. **Live Heatmap** - Feature activation visualization
6. **Performance Metrics** - Real-time latency display
### Technical Approach
- Single HTML file with embedded CSS/JS for easy deployment
- ES modules loading WASM directly from npm CDN (unpkg/jsdelivr)
- Canvas-based visualizations
- No build step required
### Deployment
- GitHub Pages via `docs/demo/cnn/` directory
- Direct URL: `https://ruvnet.github.io/ruvector/demo/cnn/`
## Consequences
### Positive
- Zero-install demo experience
- Showcases real WASM performance (~5ms/image)
- Educational tool for understanding embeddings
- Marketing asset for the package
### Negative
- CDN dependency for WASM module
- Browser compatibility limited to WASM-supporting browsers
## Implementation
- `docs/demo/cnn/index.html` - Main demo page
- Uses `@ruvector/cnn` from unpkg CDN

1028
docs/demo/cnn/index.html Normal file

File diff suppressed because it is too large Load diff