Browser ML Training Guide

Train machine learning models directly in your browser — no Python, no cloud, no setup.

What's possible

Technique	Library	Example	Data Size
Transfer learning	TensorFlow.js	Fine-tune MobileNet on your images	100-1000 images
Small neural nets	TensorFlow.js, Brain.js	Train a classifier from CSV data	Up to ~50K rows
KNN / KMeans	ml5.js	Classify, cluster	Up to ~100K rows
Decision trees	Pyodide (scikit-learn)	Tabular classification	Up to ~1M rows
RL agents	TensorFlow.js	Train agents in browser games	N/A
Federated learning	TensorFlow.js	Train locally, aggregate	Device-local

Transfer Learning with TensorFlow.js

The most practical browser training. Take a pre-trained model, replace the last layer, train on your data.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"></script>
<script>
  const classifier = knnClassifier.create();
  const mobilenet = await mobilenetModule.load();

  // Add training examples
  const img = document.getElementById('myImage');
  const activation = mobilenet.infer(img, true); // get embeddings
  classifier.addExample(activation, 'cat');       // label it

  // Predict
  const result = await classifier.predictClass(mobilenet.infer(newImg, true));
  console.log(result.label, result.confidences);
</script>

Training a Neural Net from CSV

import * as tf from '@tensorflow/tfjs';
import { loadFile, query } from '@freedatastore/sdk';

// Load your data
const { table } = await loadFile(csvFile);
const data = await query(`SELECT feature1, feature2, label FROM "${table}"`);

// Prepare tensors
const xs = tf.tensor2d(data.map(r => [r.feature1, r.feature2]));
const ys = tf.tensor2d(data.map(r => [r.label === 'positive' ? 1 : 0]));

// Build model
const model = tf.sequential();
model.add(tf.layers.dense({ units: 16, activation: 'relu', inputShape: [2] }));
model.add(tf.layers.dense({ units: 1, activation: 'sigmoid' }));
model.compile({ optimizer: 'adam', loss: 'binaryCrossentropy', metrics: ['accuracy'] });

// Train
await model.fit(xs, ys, { epochs: 50, batchSize: 32 });

// Save (to browser storage or download)
await model.save('localstorage://my-model');
// or: await model.save('downloads://my-model');

WebGPU Acceleration

WebGPU makes browser training 10-50x faster than WebGL. Check support:

const hasWebGPU = !!navigator.gpu;
if (hasWebGPU) {
  await tf.setBackend('webgpu');
} else {
  await tf.setBackend('webgl');
}

Supported in Chrome 113+, Edge 113+. Firefox behind flag.

Limitations

Constraint	Limit	Workaround
Tab memory	~4 GB	Use smaller batches, stream data
No persistent training	Tab close = state lost	Save checkpoints to IndexedDB
CPU/GPU only	No TPU	WebGPU helps significantly
Large datasets	Slow to load	Pre-process with our Data Cleaner
Complex architectures	May OOM	Stick to small models (~1M params)

When to graduate to server-side

If you need:

• Training on datasets > 500 MB
• Models with > 10M parameters
• Multi-GPU training
• Training that runs for hours

Consider ProDataStore (coming soon) or use Colab / cloud GPUs.