Skip to content
44 / Answers

AI that runs on the user's own device.

Browser AI means the model runs inside the web page, on the visitor's CPU or GPU, instead of on a server. ONNX Runtime Web loads a model file and executes it with WebAssembly or WebGPU; nothing is uploaded, there is no inference bill and it works offline. FaceVision, the face recognition system I built, runs detection, liveness and embeddings this way and sends only vectors to the server.

Runtime
ONNX Runtime Web, Transformers.js, TensorFlow.js
Backends
WebAssembly (CPU), WebGPU and WebGL (GPU)
Wins
Privacy, zero inference cost, offline, low latency
Limits
Model size, download time, device variance
  • 5production AI apps
  • 14engineers led
  • 200+students mentored
01

Questions students ask

The browser and edge AI questions searched most, answered from shipping vision in the browser.

What is browser AI?

Browser AI is machine learning that executes inside the web browser using JavaScript or WebAssembly and the device's own processor or graphics unit. The page downloads a model file once, caches it, and runs inference locally: detecting faces in the webcam feed, classifying an image, transcribing a short clip, running a small language model for autocomplete. The server never sees the input. It is possible because browsers now expose fast compute (WebAssembly with SIMD and threads, WebGPU) and because small, quantized models are good enough for many tasks. It is the same idea as on-device AI on phones, delivered through a URL.

What is ONNX Runtime?

ONNX Runtime is Microsoft's open-source engine for running machine learning models saved in the ONNX format, an interchange format that PyTorch, TensorFlow and other frameworks can export to. One model file runs on CPUs, GPUs and accelerators across Windows, Linux, macOS, Android, iOS and the browser, with execution providers that plug in hardware-specific backends. It is optimised for inference: graph optimisations, operator fusion, quantized execution. For a developer it means train in PyTorch, export once, and deploy the same file to a server, a phone and a web page without rewriting the model.

What is ONNX Runtime Web?

ONNX Runtime Web is the browser build of ONNX Runtime, shipped as a JavaScript package. It loads an ONNX model from a URL, creates an inference session, and runs it with one of several backends: WebAssembly on the CPU (with SIMD and multithreading where the page's headers allow), WebGPU on the graphics unit in browsers that support it, and WebGL as an older GPU fallback. You feed it tensors built from image pixels or audio samples and read back output tensors. FaceVision uses it for the detector, the liveness model and the face embedding model, so every frame is processed in the page and only an embedding is ever sent.

What is ONNX Runtime used for?

  • Serving models in production on CPU and GPU with lower latency than the training framework.
  • Running models on phones and embedded devices through the mobile builds.
  • Running models in web pages through ONNX Runtime Web, as in FaceVision.
  • Deploying one exported model across platforms without maintaining separate code paths.
  • Quantized inference for smaller, faster models.
  • As the engine inside other tools: Transformers.js uses it to run Hugging Face models in the browser.

How to install ONNX Runtime

For Python, install the onnxruntime package with pip for CPU, or onnxruntime-gpu for NVIDIA CUDA; export your PyTorch model with torch.onnx.export and load it with an InferenceSession. For the browser, add the onnxruntime-web package with npm, or load it from a CDN script tag; import it, point it at your model file, and choose the execution provider (wasm or webgpu). Host the model file and the runtime's WebAssembly binaries on your own server with correct MIME types, and send the cross-origin isolation headers if you want multithreaded WebAssembly. Check the model's opset version against the runtime version when something refuses to load.

What is WebGPU?

WebGPU is the modern browser API for using the graphics processor for both rendering and general computation, the successor to WebGL. It exposes compute shaders, so a page can run the matrix multiplications at the heart of neural networks on the GPU with far better performance than WebGL tricks allowed. For browser AI it is the difference between a small model running at a few frames per second on the CPU and running in real time, and it is what makes small language models usable in a page. Runtimes such as ONNX Runtime Web, Transformers.js and WebLLM use it when the browser supports it and fall back to WebAssembly otherwise.

Which browsers support WebGPU?

Chrome and Edge have shipped WebGPU on Windows, macOS and ChromeOS since 2023, with Android and Linux following; Safari added it in its 2025 releases on macOS, iOS and iPadOS; Firefox shipped it on Windows in 2025 with other platforms following. Support still depends on the device's graphics driver, and some older or integrated GPUs are blocked. Check the current compatibility table before relying on it, and always build a WebAssembly fallback: FaceVision runs on WebGPU where available and on WebAssembly everywhere else, with the same model files, so the feature works for every visitor and is simply faster for most.

How to enable WebGPU

In current Chrome, Edge and Safari on supported hardware it is on by default; nothing to enable. If a page reports it unavailable, update the browser, update graphics drivers, and check that hardware acceleration is turned on in the browser's settings. On platforms where it is still behind a flag, the browser's experimental features page (the flags page in Chrome and Edge, the Feature Flags menu in Safari's Develop settings, the config page in Firefox) has a WebGPU toggle. As a developer, detect support by checking for the GPU object on the navigator and requesting an adapter; if that fails, use the WebAssembly backend rather than asking users to change settings.

What is on device AI?

On-device AI is inference that runs on the user's hardware, a phone, laptop, browser, camera or car, rather than in a data centre. Phones use it for photo enhancement, face unlock, dictation and translation; laptops increasingly ship neural accelerators for it; browsers reach it through WebAssembly and WebGPU. The reasons are privacy (data never leaves the device), latency (no network round trip), cost (no servers to pay for per request) and availability (it works offline). The constraint is capacity: models must be small and efficient, which is why quantization, distillation and small architectures matter. Browser AI is on-device AI without an install.

What is edge AI and how does it work?

Edge AI is the broader term: running models close to where data is produced, on devices and local gateways rather than in the cloud, covering phones and browsers and also factory cameras, medical devices, drones and sensors. It works by training a model centrally, compressing it (quantization, pruning, distillation) to fit the target hardware, exporting it to a portable format such as ONNX or TensorFlow Lite, and running it with a runtime tuned for that device's CPU, GPU or accelerator. Results stay local or are summarised before being sent on. The design question is always the same as in FaceVision: what must leave the device, and can it be a vector or a decision instead of the raw data?

02

Ship a model in a page

The path FaceVision took.

  1. 01

    Export and shrink

    Train in PyTorch, export to ONNX, quantize to 8-bit, check accuracy held.

  2. 02

    Load with ONNX Runtime Web

    WebGPU where supported, WebAssembly fallback; cache the model file.

  3. 03

    Pre- and post-process in JS

    Resize and normalise frames into tensors; decode outputs into boxes, labels or embeddings.

  4. 04

    Send only what is needed

    Vectors or decisions to the server; never the raw frames.

03

In the room

Where these systems get explained to students.

AI features with no upload and no inference bill?

I build them in the browser with ONNX Runtime Web and WebGPU. Let's see what fits on the device.