Coding / Programming Videos

Post your favorite coding videos and share them with others!

Machine Learning in the Browser using TensorFlow.js

Source link

I have been using Python for creating and training my Machine Learning Models which requires setting up quiet a few things(I mostly use Google Colab though). Currently, I am learning Machine Learning and web development along side Android App development.

If you are also into Deep Learning then you must have done Basic Linear regression and the MNIST classification challenge which is the basic problem in Computer Vision. So when I learned about TensorFlow Lite it inspired me to make an app which can utilize the features of Android Smartphone, so I created this basic MNIST handwritten digits classification App.

Then I thought It would be great to do such things in something which is widely available, which requires Less/ no setup from user side. For this, What can be better than a browser which is available on all modern PC’s, Smartphones, Tablets, and it also allows JavaScript in which we can Back-propagate. The ML/ DL things were done by utilizing APIs which means an API was developed in a framework which sits at a server. The server response to the request in JavaScript made by the client.

In 2017 deeplearn.js started which aimed for Deep Learning in the browser using JavaScript, but the main concern was Speed. As you know how GPUs can increase the speed in Deep Learning. For that WebGL came to rescue. It enabled running JavaScript Code to run on GPU. Later deeplearn.js merged into TensorFlow which became TensorFlow.js in 2018.

TensorFlow.js is a library for developing and training ML models in JavaScript, and deploying in browser or on Node.js

Check this Neural Network Playground made in JavaScript.

Importing The module:

  1. Using the <script> tag
importing tensorflow.js using <script>

2. There are basically two ways to get it into your project

install tensorflow js into your system
add this line to your main.js file

ML in Browser

So How good is that?!

It allows to Run Machine Learning Models entirely in the browser. You can train them using live examples, load the pre-trained models and run Inference on them. On user’s side, There is no need to install any drivers or libraries, just open the browser and you are good to go.


TensorFlow.js Runtime

One more advantage is that TensorFlow.js can utilize WebGL to run on an underlying GPU whenever it’s available. So we can use GPU of a mobile device or a gaming PC just in the browser. In mobile phones, through browser your model can take advantage of various sensors’ data.


One more Thing, All the data stays in the user’s device, no need to send data to servers for low-latency inference. Which means It is useful for applications here privacy matters!

TensorFlow.js has a very good list of API s.

Lets Code

Let’s start with a simple web page

loading TensorFlow.js using script

‘tf’ is available on the index-page because of the script tag above. we can reference tensorflow as tf.

We need to define our model, which tf.sequential() returns, you may find this similar to Keras API which is standardized in TF 2.0. Keras is like a wrapper on top of TensorFlow which makes it easy to define, train, infer, and training of simple models(Sequential as well as Functional APIs).

Now let’s add some layers in the model. Here we will try to do a simple linear regression using a neural net consisting of one hidden layer.

Adding layers, compilng


Here, we have added a Dense layer(Fully connected) with only single neuron. Which takes only single number(like Scaler) for prediction and perform inference on it outputting a number which should be close to 3*(input)-1.


The layers API supports all of the Keras layers (including Dense, CNN, LSTM, and so on). Then we have to say the model to use which Optimization technique and a Loss function. We can give metric as a parameter is we want.


Tensor is the basic term used for multi-dimensional arrays. Here we have 10×1, 1-D Tensor(Array) as xs(input) and a 10×1, 1-D Tensor as their respective outputs. we have to learn mapping between these two using our model. (Neural nets can be seen as ‘Universal Function Estimators’!). An image can be represented as 2-D Tensor(Matrix) in gray scale, and 3-D in case of RGB channels(Height*Width*Channels). ConvNets will be explained in future.

Now, Lets Learn Mapping

We can train the model using, y), which try to learn mapping between x and y. Epoch is the parameter which says how many times to train over entire data set. It defines the total number of Forward propagate + Backward Propagate.

Predict for Future

model.predict(Tensor) do a forward pass and predicts using the given input as a Tensor of same dimension of X at the time of training. the print function prints the output on the console.

await keyword makes browser wait until the process finishes. You need to put await in an async function. just put the code inside an await function and run. It will be shown later in the article.

Full Code

Full code. You may need internet connection for script in the <head> tags

Save this as a .html file and open it in the browser.

What can you do with TensorFlow.js?

If you’re developing with TensorFlow.js, here are three workflows you can consider.

  • You can import an existing, pre-trained model for inference. If you have an existing TensorFlow or Keras model you’ve previously trained offline, you can convert into TensorFlow.js format, and load it into the browser for inference.
  • You can re-train an imported model. As in the Pac-Man demo above, you can use transfer learning to augment an existing model trained offline using a small amount of data collected in the browser using a technique called Image Retraining. This is one way to train an accurate model quickly, using only a small amount of data.
  • Author models directly in browser. You can also use TensorFlow.js to define, train, and run models entirely in the browser using Javascript and a high-level layers API. If you’re familiar with Keras, the high-level layers API should feel familiar.

I have tried to implement something like this but with more flexibility.

Here are some Resources:

Source link


Leave a Reply

Please Login to comment
Notify of
Translate »