Machine Learning in a Browser with TensorFlow & ML5

Introduction to TensorFlow

TensorFlow is an open-source library for building, training and deploying machine learning and deep learning models. The library was built using C++ which allows it to perform low-level computations at a very high speed. TensorFlow has bindings for all major programming languages like Python, Java, and R.

TensorFlow with JavaScript

JavaScript is the language of the web. If you want to run anything in a browser, you cannot do that without JavaScript. Traditionally, this is how you would use an ML model in the browser:

  • You train your ML model using TensorFlow in Python
  • Deploy the model as a web service.
  • The web service is consumed through REST APIs in our browser using JavaScript.

TensorFlow.js eliminates this hassle by allowing you to build, train, and use your models directly within the browser using JavaScript. That makes it easy for JavaScript developers to use the same tool for machine learning.

Features of TensorFlow.js

  • Build and train models directly in the browser
  • Import pre-trained models from Python in the browser and use them for inferencing
  • Re-train the imported models with new data in the browser

TensorFlowJS has two API’s:

  • Layers API
  • Core API

TensorFlowJS Layers API

The layers API is a high-level API of TensorFlowJS that lets you quickly build and train a machine learning model. The API has a set of models that comprises of different layers of neurons. If you are familiar with Keras, this API is a Keras equivalent in TensorFlowJS.

The workflow of the API is as follows:

  • Initialize a model
  • Define the number of layers and neurons in each layer of the model
  • Specify the activation function to use for different layers of neurons
  • Select a loss function, performance metrics for the model and number of Epochs
  • Train the model
  • Use the model for inferencing

TensorFlow.JS Core API

The core API is a low-level API that gives you the granular level control. You can make a completely new custom model from scratch using this API. The API lets you create tensors, perform different operations, and chain them together to form a new layer of neurons.

The building block OR central unit of data in the TensorFlow world is an object called a tensor. The understanding of a tensor and its related operations is very important to work with the core API.


In simple words, a tensor is a mathematical structure to store numbers.

  • A single number such as 3 is called a scalar
  • A list of numbers such as [1,3,5,9,12] is known as a vector
  • A 2-dimensional list such as the following is called a matrix.

A tensor is a data structure that can store any n-dimensional structure of numbers and the operations associated with each of them.

There are three concepts associated with a tensor:

  • RANK: Defines the number of dimensions the tensor contains
    • A matrix will have a rank of 2, whereas a vector will have a rank of 1.
  • SHAPE: Define the size of each dimension of the data
    • The shape of the matrix will be the number of rows and columns in the matrix
    • The shape of a vector will be determined by the number of values in that vector
  • DTYPE: Define the type of tensor
    • The data type property returns the type of values stored in the tensor
    • Different data types include bool, int32, float32, string

The concept of rank and shape can be a little confusing in the beginning. I would highly recommend going through the official documentation and trying a few code examples of creating tensors to understand the notion of rank and shape.


Tensor is a mathematical entity; hence there are many operations associated with each tensor. Basic arithmetic operations such as addition, subtraction, multiplication, and division are supported on every tensor.

There are tensor specific operations too. For example, a rank-2 matrix tensor will have specific matrix operations such as matrix multiplication, transpose, and dot operation.

The important thing to note here is that any operation on tensors doesn’t alter the existing tensor but return a new one.

Benefits of ML within the browser

  • No drivers/No installations
    • Anything you build in the browser won’t need any installations and can be shared with a simple URL
  • Interactive
    • The browser can be highly interactive, and hence the user can be engaged with what’s being done
    • TensorFlowJS playground is a prime example of browser interactivity combined with machine learning capabilities (
  • Sensors
    • The browser has standardized API based sensors like microphone and camera that can be used for model training
  • Data privacy
    • User don’t need to upload data to the server since everything will be done inside the browser



The concept of machine learning within a browser opens many opportunities for developers as well as for businesses. TensorFlowJS provides a comprehensive set of tools to build, train, and use your model for prediction right within the browser. I hope you now feel empowered enough to go and start experimenting with the tool.

Our team at AlphaBOLD works with the latest cutting-edge technologies to build intelligent machine learning solutions that help businesses streamline and automate their processes. If you have any questions about the blog, please leave a comment below!

If you have any question or queries, do not hesitate to reach out to us

Happy Learning!