How to Build Machine Learning Apps Directly in the Browser: A Four‑Layer Toolkit
This article outlines a four‑layer methodology for selecting JavaScript‑based machine‑learning tools—from domain‑specific NLP frameworks to deep‑learning libraries, traditional algorithms, and math/statistics packages—providing code examples, installation steps, and guidance on when to use each layer.
Choosing Machine Learning Tools Methodology
We need to decide which tools to use when building machine‑learning algorithms for the web.
Layer 1: Domain‑Specific Frameworks
Examples include nlp.js for natural‑language processing. The code below shows a basic setup, installation, and a quick training run.
const { NlpManager } = require('node-nlp');
const manager = new NlpManager({ languages: ['en'], forceNER: true });
// Adds the utterances and intents for the NLP
manager.addDocument('en', 'goodbye for now', 'greetings.bye');
manager.addDocument('en', 'bye bye take care', 'greetings.bye');
manager.addDocument('en', 'okay see you later', 'greetings.bye');
manager.addDocument('en', 'bye for now', 'greetings.bye');
manager.addDocument('en', 'i must go', 'greetings.bye');
manager.addDocument('en', 'hello', 'greetings.hello');
manager.addDocument('en', 'hi', 'greetings.hello');
manager.addDocument('en', 'howdy', 'greetings.hello');
manager.addAnswer('en', 'greetings.bye', 'Till next time');
manager.addAnswer('en', 'greetings.bye', 'see you soon!');
manager.addAnswer('en', 'greetings.hello', 'Hey there!');
manager.addAnswer('en', 'greetings.hello', 'Greetings!');
(async () => {
await manager.train();
manager.save();
const response = await manager.process('en', 'I should go now');
console.log(response);
})();Install with: npm install node-nlp Training output shows loss decreasing rapidly.
Epoch 1 loss 0.4629286907733636 time 1ms
Epoch 2 loss 0.2818764774939686 time 0ms
Epoch 3 loss 0.16872372018062168 time 0ms
...
Epoch 31 loss 0.00004645272306535786 time 0msLayer 2: Deep‑Learning Frameworks
TensorFlow.js dominates JavaScript deep learning. A minimal HTML page that creates a tensor and displays it is shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
</head>
<body>
<div id="tf-display"></div>
<script>
let a = tf.tensor1d([1.0]);
document.getElementById('tf-display').innerText = a;
</script>
</body>
</html>Images illustrate training visualisation and WebGL/Wasm support.
Layer 3: Traditional Machine‑Learning Libraries
Libraries such as mljs provide algorithms like k‑means, K‑Nearest Neighbours, and decision trees.
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);Install with: npm i ml-kmeans Decision‑tree example using ml-cart and the Iris dataset:
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 classifier = new DecisionTreeClassifier.DecisionTreeClassifier({
gainFunction: 'gini',
maxDepth: 10,
minNumSamples: 3
});
classifier.train(trainingSet, predictions);
console.log(classifier.predict(trainingSet));Layer 4: Mathematics and Statistics Libraries
The stdlib collection offers over 150 math functions and 35 statistical distributions. Example of creating a normal distribution:
const Normal = require('@stdlib/stats/base/dists/normal').Normal;
let dist = new Normal(0, 1);
console.log(dist.mean); // 0
console.log(dist.variance); // 1Stdlib also provides datasets such as US state capitals.
const capitals = require('@stdlib/datasets/us-states-capitals');
console.log(capitals());Conclusion
For a brand‑new product, start with domain‑specific tools (Layer 1) to accelerate development. For incremental or complex growth, deeper layers (3‑4) give better data insight and resource efficiency.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Taobao Frontend Technology
The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.