Prototype Overview¶
A zero-build, CDN-only single-page application that explores browser ML inference capabilities. This is an early exploration prototype, it explores the problem space and demonstrates the architecture. This does not reflect the final benchmark application.
Purpose¶
The prototype served as a proof of concept to:
- Explore the browser ML framework landscape
- Test adapter patterns for different runtimes
- Understand backend detection and fallback behavior
- Identify model sourcing and CDN challenges
- Inform the thesis methodology and implementation chapters
Quick facts¶
| Property | Value |
|---|---|
| Architecture | SPA |
| Build step | None — native ES modules |
| Dependencies | Zero — all libraries loaded via CDN |
| Runtimes | ORT Web, TF.js, LiteRT.js |
| Frameworks | Transformers.js, MediaPipe Tasks, ml5.js (+ "Direct" mode) |
| Backends | WASM, WebGPU, WebGL, CPU |
| Models | MobileNet v2, SqueezeNet 1.1, EfficientNet-Lite0 |
| Storage | localStorage (run history) |
| Themes | Light / Dark toggle |
Pages¶
| Page | Hash | Purpose |
|---|---|---|
| Home | #home |
Landing page with architecture overview and runtime cards |
| Tutorial | #tutorial |
7-step guided walkthrough for learners |
| Playground | #playground |
Free-form pipeline configuration and benchmarking |
| Results | #results |
Comparison table with per-runtime stat cards and CSV export |
| Research | #research |
Research notes and decision logs (sidebar + content area) |
Layer overview¶
Full architecture diagram and data flow
| # | Layer | Color |
|---|---|---|
| 1 | Router | Blue |
| 2 | Tutorial & Playground | Green / Yellow |
| 3 | Pipeline | Purple |
| 4 | Execution | Red |
| 5 | Benchmarking | Pink |
Known Limitations¶
Prototype Limitations
This is an early exploration prototype. The following limitations are expected and will be addressed in the planned React application.
1. Memory Measurement Limited¶
The performance.memory API is:
- Chromium-only — not available in Firefox or Safari
- Non-standard — deprecated and may be removed
- Heap-only — does not measure WebAssembly linear memory or GPU memory
Impact: Memory measurements are only available in Chrome/Edge.
Workaround: The prototype reports null for memory measurements in unsupported browsers.
2. Single Task Support¶
The prototype currently supports only image classification. Object detection, segmentation, and other tasks are planned but not implemented.
3. No Server-Side Persistence¶
Results are stored in localStorage, which is:
- Limited to ~5–10 MB per origin
- Cleared when browser data is purged
- Not accessible across devices
Planned solution: The main React app will use server-side storage for persistent benchmark history.
4. CDN Dependency¶
Framework scripts and model files are loaded from CDN. CDN availability, caching behavior, and geographic latency can affect load time measurements.
How to Run¶
Then open http://localhost:8080 in Chrome.
HTTP Required
Open via HTTP, not file://. ES modules and fetch() require HTTP. Use npx serve --cors instead of Python's http.server.
Running all frameworks¶
The prototype benchmarks 3 runtimes in 2 modes each (direct + framework wrapper), producing 6 benchmark combinations:
| # | Runtime | Framework | Backends |
|---|---|---|---|
| 1 | ORT Web | Direct | WASM, WebGPU |
| 2 | ORT Web | Transformers.js | WASM, WebGPU |
| 3 | TF.js | Direct | WebGL, WebGPU, WASM, CPU |
| 4 | TF.js | ml5.js | WebGL, WebGPU, WASM, CPU |
| 5 | LiteRT.js | Direct | WASM, WebGPU |
| 6 | LiteRT.js | MediaPipe Tasks | WASM+XNNPACK |
File structure¶
prototype/
├── index.html Shell: nav, layer bar, router outlet
├── css/main.css Design system (CSS vars, layer colours, components)
├── js/
│ ├── app.js Entry point — imports shell + router
│ ├── shell.js Role & theme management (localStorage)
│ ├── router.js Hash-based SPA router (fetch page fragments)
│ ├── utils.js DOM helpers, formatters, SAMPLE_IMAGES, loadImage
│ ├── pipeline.js LayerRegistry, PipelineState, PipelineCanvas
│ ├── ml-adapter.js AdapterFactory + 6 adapters + runBenchmark()
│ ├── bench.js MetricsCollector, RunRecorder, DiffComparator
│ ├── tutorial.js TutorialEngine (5 linear steps)
│ └── playground.js PlaygroundEngine (free-form config)
└── pages/
├── home.html Landing page fragment
├── tutorial.html Tutorial scaffold
├── playground.html Playground scaffold
└── results.html Results scaffold