Skip to content

Thesis Scope & Prototype Baseline

2026-05-06 — Research framework & initial architecture


Thesis title & overview

Vergleich von Web-Frameworks zur Ausführung von ML-Modellen im Browser

The thesis investigates and compares different approaches to running ML models directly in the browser — no server-side inference required. Historically, browser ML meant API calls to backend servers. Frameworks like TensorFlow.js, keras.js, ONNX.js, and MediaPipe now make client-side inference viable.


Comparison criteria

Criterion What we measure
Framework support Which ML frameworks and model formats are supported? (PyTorch, ONNX, TF SavedModel, TFLite)
Functionality GPU acceleration, parallel execution, backend diversity, preprocessing APIs
Performance Inference latency (cold & warm), model load time, memory consumption — across browsers
Community / Reach GitHub stars, npm downloads, maintenance activity, documentation quality
Integration (optional) Ease of use, API design, pipeline abstraction vs low-level tensor ops

Required frameworks

From the thesis specification:

  • TensorFlow.js — Google's production-grade browser ML framework
  • ONNX Runtime Web — Microsoft's cross-platform ONNX inference engine
  • MediaPipe — Google's task-optimized vision/audio pipeline library

The thesis also mentions Transformers.js indirectly via HuggingFace as a model source. We include it as a framework wrapper alongside ml5.js (wrapping TF.js) and MediaPipe Tasks (wrapping LiteRT), giving 3 runtimes + 3 frameworks for symmetric overhead measurement.

keras.js status

The proposal text mentions keras.js, but it is evaluated and rejected, not tested: last commit ~2018, Keras 1.x era, superseded by TensorFlow.js (see 02-runtime-selection.md → "Runtimes dropped" and thesis Chapter 1, Scope).


Prototype architecture

The prototype implements a layers architecture as a zero-build, CDN-only SPA:

Layer Color Responsibility
Shell / Router Blue Hash-based SPA routing, role/theme management, mobile nav
Tutorial Engine Green 7-step guided walkthrough for learners
Playground Engine Yellow Free-form layer-based pipeline configuration
Block Runtime Purple BlockRegistry, DataFlowGraph, BlockCanvas — compatibility matrix
ML Execution Red AdapterFactory, per-runtime adapters, inference orchestration
Benchmarking Pink MetricsCollector, RunRecorder, DiffComparator

Key code review findings

Severity Issue Status
Medium ONNX model URL was null — adapter always failed. COMPAT matrix still showed ONNX as valid. Re-enabled — CDN URL set to HuggingFace /resolve/main/ path
Low Misleading tooltip when disabled task selected in playground Fixed
Low Orphaned _refreshBackendCards() dead code Removed
Low Redundant double ternary in TransformersAdapter Simplified
Info performance.memory is Chromium-only — memDelta returns null on Firefox/Safari Known limitation
Info MediaPipe + ONNX require SharedArrayBuffer (COOP/COEP headers) Documented, runtime check pending

Research-Question Mapping

The original proposal posed three exploratory ecosystem questions; the thesis reframed them into three in-browser comparison RQs. Both sets are answered — the mapping:

Proposal question Where answered (thesis) Where answered (benchy)
Which frameworks are used to create ML models? (PyTorch, OpenVINO, Caffe) Background → "Conversion Paths and Tooling" (taxonomy: creation frameworks / interchange / deployment runtimes; conversion toolchain) Model registry + vendor-models.mjs (converted artifacts)
Which datasets are established? (COCO, ImageNet, MNIST) Methodology → "Datasets in the Field and Benchmark Input Design" Canonical input + BatchRunner (top-1/top-5 vs ImageNet labels)
Which pretrained models are common? (MobileNet, SAM, BERT, YOLO) Background → model formats + ecosystem availability; Conclusion → "Relation to the Original Proposal" MobileNet v2 benchmarked end-to-end across 6 engines
RQ1 Framework/runtime capabilities Ch. 3 + Ch. 6 Capability probe, compat matrix, Detect & Report
RQ2 Performance & resource behavior Ch. 4 + Ch. 6 Frozen 30-combo suite, latency/load/memory/backend verification
RQ3 Developer experience & integration Ch. 6/7 Adapter API surface, pipeline vs direct measurement