Running models in the browser: what building a whole lab taught me
This portfolio has over twenty ML demos running in your browser with no server: networks training live, a transformer generating text, diffusion, a GAN. This is the practical guide that would have saved me weeks: formats, sizes, traps, and which technique fits which job.
This site's lab has over twenty machine learning demos and none of them touches a server: everything runs in your browser. Along the way I learned the hard way what works, what weighs too much and what blows up. This is the cheat sheet I wish I had on day one, with this site's real numbers.
The most important decision: train here, or bring it trained. There are two families of demo. The ones that train live (a small network, word2vec, a perceptron) only need hand-written JavaScript math: float arrays, loops and discipline — no libraries, no downloads, instant start. The ones using a serious model (digit recognition, text generation, diffusion) are trained outside, in Python, and travel as a weights file. The classic trap is trying to train something too big in the browser: the practical frontier today sits at a few tens of thousands of parameters per thread.
Weights travel best in int8. A float32 model costs four bytes per parameter; rounded to one-byte integers with a per-tensor scale factor, it costs one, and for inference the loss is almost always invisible (I measured it: my digit classifier drops from 98.7% to 98.3% accuracy). My format is JSON files with base64 weights: the full character transformer fits in 1.1 MB, the GAN generator in 141 KB, the autoencoder in 168 KB. They are served statically, the CDN compresses them, and the browser decodes them in milliseconds.
Lazy-load or pay the price. None of this should download until the visitor asks for it. Every demo mounts client-side only and weights are fetched on the first click. I learned this lesson the expensive way: a 3.6 MB token library slipped into the server bundle and broke my deploys for twelve days without me noticing.
For real models, ONNX or transformers.js. When you want a serious pretrained model — sentence embeddings, classifying camera frames — do not reinvent it: transformers.js pulls the model from Hugging Face, runs it on WebAssembly or WebGPU, and caches it. This lab's embeddings map and camera demo work that way. The price is the first download (tens of MB even for small ones): say so plainly in the interface and let the user decide when.
The main thread is sacred. Scoring 300 images or training a thousand steps freezes the page if you do it in one go. The options, from simple to fancy: chunk the work with setTimeout and a progress bar (that is how the quantization and pruning demos measure their accuracy), do a little per animation frame (that is how the training demos train), or a web worker when the computation is long and opaque. And a surprise: the thing that froze my site the most was not the ML, it was the decorative 3D scenes — on machines without a GPU they starved everything else.
Be honest about what comes out. A diffusion model with half a million parameters sometimes generates a beautiful digit and sometimes a blur. You can hide that behind cherry-picked examples, or you can write in the demo itself that both outcomes are normal and why. The second costs one sentence and risks less: technical visitors notice tricks, and everyone else learns more from the limitation than from the success.
The takeaway I keep: the 2026 browser is a perfectly serious ML platform for models up to a few million parameters — free, private and operations-free. Everything this article describes can be poked at in the lab.
