How to Build Machine Learning Apps Directly in the Browser with JavaScript

Atwood's law states that any application that can be implemented in JavaScript will eventually be rewritten in JavaScript. While Python dominates server‑side machine learning, the client side—especially browsers, mobile mini‑programs, and offline scenarios—relies on JavaScript frameworks.

Choosing a machine‑learning tool follows a four‑level hierarchy.

Level 1: Domain‑specific frameworks

These directly address tasks such as computer vision, NLP, or recommendation. For example,

nlp.js

can be used as follows:

<code>const { NlpManager } = require('node-nlp');
const manager = new NlpManager({ languages: ['en'], forceNER: true });
manager.addDocument('en', 'goodbye for now', 'greetings.bye');
manager.addDocument('en', 'bye bye take care', 'greetings.bye');
manager.addAnswer('en', 'greetings.bye', 'Till next time');
(async () => {
    await manager.train();
    manager.save();
    const response = await manager.process('en', 'I should go now');
    console.log(response);
})();
</code>

Install with:

<code>npm install node-nlp</code>

Training converges quickly, e.g.:

<code>Epoch 1 loss 0.4629 time 1ms
Epoch 2 loss 0.2819 time 0ms
... 
Epoch 31 loss 0.000046 time 0ms</code>

The resulting JSON includes intent, confidence, and entity extraction.

Level 2: Deep‑learning frameworks

TensorFlow.js remains the dominant deep‑learning library for the browser. A simple example loads the library and creates a tensor:

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="tf-display"&gt;&lt;/div&gt;
    &lt;script&gt;
      let a = tf.tensor1d([1.0]);
      document.getElementById('tf-display').innerText = a;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

Other examples include reinforcement‑learning demos that store intermediate results in

localStorage

or

IndexedDB

, and Microsoft’s WebGL/Wasm‑based models.

Level 3: Traditional machine‑learning libraries

For tasks where classic algorithms suffice, libraries such as

mljs

provide k‑means clustering:

<code>const kmeans = require('ml-kmeans');
let data = [[1,1,1],[1,2,1],[-1,-1,-1],[-1,-1,-1.5]];
let centers = [[1,2,1],[-1,-1,-1]];
let ans = kmeans(data, 2, { initialization: centers });
console.log(ans);
</code>

Install with:

<code>npm i ml-kmeans</code>

Result shows cluster assignments and centroids.

k‑Nearest‑Neighbors can be demonstrated in the browser using

ml

:

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://www.lactame.com/lib/ml/4.0.0/ml.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="ml-display"&gt;&lt;/div&gt;
    &lt;script&gt;
      const train_dataset = [[0,0,0],[0,1,1],[1,1,0],[2,2,2],[1,2,2],[2,1,2]];
      const train_labels = [0,0,0,1,1,1];
      let knn = new ML.KNN(train_dataset, train_labels, {k:2});
      const test_dataset = [[0.9,0.9,0.9],[1.1,1.1,1.1],[1.1,1.1,1.2],[1.2,1.2,1.2]];
      let ans = knn.predict(test_dataset);
      document.getElementById('ml-display').innerText = ans;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

A decision‑tree example uses

ml-cart

with the Iris dataset.

<code>const irisDataset = require('ml-dataset-iris');
const DecisionTreeClassifier = require('ml-cart');
const trainingSet = irisDataset.getNumbers();
const predictions = irisDataset.getClasses().map(c => irisDataset.getDistinctClasses().indexOf(c));
const options = { gainFunction: 'gini', maxDepth: 10, minNumSamples: 3 };
const classifier = new DecisionTreeClassifier.DecisionTreeClassifier(options);
classifier.train(trainingSet, predictions);
const result = classifier.predict(trainingSet);
console.log(result);
</code>

Level 4: Mathematics and statistics libraries

Statistical computing is essential for data‑driven insight. The

@stdlib

library offers over 150 math functions and 35 distributions. Install with:

<code>npm install @stdlib/stdlib</code>

Example of a normal distribution:

<code>const Normal = require('@stdlib/stats/base/dists/normal').Normal;
let dist1 = new Normal(0, 1);
console.log(dist1);
console.log(dist1.mean);
console.log(dist1.variance);
</code>

It also provides datasets such as US state capitals:

<code>const capitals = require('@stdlib/datasets/us-states-capitals');
console.log(capitals());
</code>

Overall, for a project from zero to one, prioritize Level 1 tools for rapid deployment; for incremental or complex growth, Levels 3 and 4 give deeper data understanding.