In-Browser Machine Learning using Tensorflow.js

CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 82

Here is an article for the JavaScript/Python Programmers and Mathematicians who like to do programming and want to start AI/ML Journey. This is a transcript of a talk session by the author during Open Source India 2019 at NIMHANS Convention centre, Bengaluru.

Machine Learning and How is it different?

Earlier developers mostly spent their time learning data structures and algorithms. Algorithms are nothing but a sequential flow of how you want to search, how you want to analyse the data and a lot of conditional statements. In traditional programming, developers program a model with the inputs like data and rules which provides some results based on those rules, data and program that the developer builds. But in the machine learning model, it takes answers and data as an input and provides rules as an output. So here this model actually generates the rules through the machine learning algorithm or model.

Traditional Programming vs Machine Learning

Activity recognition

if (speed < 4){

if (speed <4){

if(speed <4){
}else if(speed<12){

In traditional programming, there are a set of parameters and using those parameters the algorithm provides results. But Nowadays these parameters are increasing, for example, consider an above snippets of codes as to recognise the activity of a human, In the first snippet, it shows if speed in less than 4 the machine knows that person is walking and in the second snippet if speed is 4 it detects a person is walking if speed is greater than 4 then person is running. In the same way if speed is less than 4 then the status is walking, if speed is less than 12 then the status is running and else status is biking. Here observe one thing the parameters count has been increasing for only to detect one activity if there are numerous activities then the code will be more complex and complexity of code may lead to a lot of errors. Now in these cases, Machine Learning comes into the picture, a lot of companies are trying to implement machine learning on their products which helps to improve productivity. For example, if amazon recommends a product to you then there are a lot of factors that tell that advertising products are related to that individual. These are instances where machine learning comes in handy where a machine is continuously trying to understand and building the logic of what is best suited for you.

Figure 1: Equation with value of X and Y

The machine learning models are just trying to understand the patterns of data and using those patterns of data it gives results. For example, as seen in the figure 1, if there is data of x and y, As per the data the human can easily identify a pattern or a relation between x and y variables like y=mx+1, In the same way, the machine learning model tries to relate the input with outputs and builds an algorithm.


It is a core library to help develop and train machine learning models. It’s an open-source library from google. This library has been already implemented in many products of Google like Gmail smart suggestion and smart compose etc. It is an end to end platform from edge devices, browsers to on-prem production environments and cloud.

History of TensorFlow

2011: Developed at Google; Built using C++
2015: Open-sourced in November under Apache License 2.0 (This license states that you can use this library for personal and commercial use but there is no need to make your developed code to the public but you need to give credits like my product uses Tensorflow, no legal implications)
Languages Binding with Python, R, Java, Swift(Beta)
2017: Deeplearn.js
2019: Deeplearn.js to TensorFlow team

Variants of Tensorflow

Core library: Where we used to build the machine learning logic from root.
Tensorflow for JavaScript(Browser, Node.js): Which can be used in browsers as well as with Node.js in the backend. Typically in a browser, we use already trained models to get the results from real-world data.
TensorFlow Lite: It is mainly for end devices which are very low in terms of resources like CPU and memory. Examples could be devices like raspberry pi, android phones.
TensorFlow Extended: It is for the production environment Like google has some pre-build TensorFlow models in their cloud which provides services to users.


TensorFlow.js is a WebGL (Web Graphics Library) accelerated, Where there is heavy demand for resources for browsers and applications like AutoCAD, games use Graphic card to provide the smoothness to user experiences. In the same way, this WebGL has been implemented to use GPU in-browser application to perform some complex calculations related to TensorFlow model. WebGL is mostly used to perform multi-dimensional calculations like transformations. This TensorFlow.js is based on JavaScript for training and deploying ML models.

Why TensorFlow.js (JavaScripts)
● No installation or setup required
<script src: “[email protected]”></script>
● Visualization and Interaction is easy
● Just one language for an entire software stack
● Model training in Node.js or python and using in browser
● Use power of WebGL(chrome:// flags)
● The increasing number of libraries and high-level APIs
● Use sensors of edge devices

TensorFlow.js Architecture

Figure 2: TensorFlow.js Architecture

There is a high-level APIs equivalent of Keras and then Ops API(Eager) which do low-level tensor arithmetic operations. At lowest level i.e runtime it supports three runtimes those are browser, WebGL and Node.js(TF CPU, TF GPU and TF TPU).

Figure 3: Tensorflow.js models

Figure 3 shows different models of Tensorflow.js and more details can be found at These models supports most of your needs

What is a Tensor?

In simple explanation, Tensor is a multi dimensional matrix as shown in figure 4. If you want to represent speech, encode mood, encode happiness index and other similar things, computer does not understand such things. So, you encode every such thing into a numerical matrix and computation numbers. That is what tensor is all about. 1 in the matrix could be meaning you’re happy, 2 could be your emotions so that everything is represented in numbers and computations become easy.

Figure 4: What is Tensor?

Smallest ML program

Below is a smallest ML program that you can think of. The beauty of the program is that it has all the 4 steps of machine learning program

Step-1: Setup of Variables
const tf = require("@tensorflow/tfjs.node");
const m= tf.variable(tf.tensor(10,0));

Step-2: Build a model
Function f(x){
return tf.mul(m,x); // y=m*x

Step-3: Train the model to learn good values for the coefficients
function loss(){
return f(S).sub(S).square(); //Mean square error

Step-4: Training loop to run optimizer to minimize loss
const optimizer =tf.train.sgd(0.01);
for(let i=0; i<20; i++){
cosole.log(m.dataSync(), f(S).dataSync()):

Optimiser function decides how much change is required for each parameter in the model, given current model prediction. Loss function minimizes the deviation.

The program shows a graph that ensures that the points are there and co-ordinates are coming closer to the real values and are not deviating from them.

For a demo of in use example of Tensorflow.js you can visit and login to your account and see the complete video.

Note: The talk session has been transcribed by Surya Teja of EFY editorial team.


Please enter your comment!
Please enter your name here