From 10b03c75c6c4a879cef2ea20cbdcfecdd4ff97db Mon Sep 17 00:00:00 2001 From: rUv Date: Wed, 11 Mar 2026 17:50:42 -0400 Subject: [PATCH] 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 --- docs/adr/ADR-089-cnn-browser-demo.md | 44 ++ docs/demo/cnn/index.html | 1028 ++++++++++++++++++++++++++ 2 files changed, 1072 insertions(+) create mode 100644 docs/adr/ADR-089-cnn-browser-demo.md create mode 100644 docs/demo/cnn/index.html diff --git a/docs/adr/ADR-089-cnn-browser-demo.md b/docs/adr/ADR-089-cnn-browser-demo.md new file mode 100644 index 00000000..541df50a --- /dev/null +++ b/docs/adr/ADR-089-cnn-browser-demo.md @@ -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 diff --git a/docs/demo/cnn/index.html b/docs/demo/cnn/index.html new file mode 100644 index 00000000..64a7277a --- /dev/null +++ b/docs/demo/cnn/index.html @@ -0,0 +1,1028 @@ + + + + + + RuVector CNN - Image Embeddings Demo + + + +
+ +
+
+

RuVector CNN

+

Turn images into searchable vectors — runs in your browser

+
+ ~5ms per image + 512-dim embeddings + WASM SIMD + No backend needed +
+
+ +
+ + Loading WASM module... +
+ + + +
+

+ Powered by RuVector | + npm | + crates.io +

+

+ Built with Rust + WebAssembly • SIMD-optimized • Zero dependencies +

+
+
+ + + +