mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-24 05:43:58 +00:00
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:
parent
1caaa1b2fa
commit
10b03c75c6
2 changed files with 1072 additions and 0 deletions
44
docs/adr/ADR-089-cnn-browser-demo.md
Normal file
44
docs/adr/ADR-089-cnn-browser-demo.md
Normal 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
1028
docs/demo/cnn/index.html
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue