TensorFlow.js Crash Course – Machine Learning For The Web – Getting Started

TensorFlow.js Crash Course – Machine Learning For The Web – Getting Started

TensorFlow.js Crash Course – Machine Learning For The Web - Welcome to the first episode of the TensorFlow.js Crash Course for absolute beginners...

TensorFlow.js Crash Course – Machine Learning For The Web - Welcome to the first episode of the TensorFlow.js Crash Course for absolute beginners...

In this first part of the series you’ll learn:

  • What TensorFlow.js is
  • How TensorFlow.js is added to your web application
  • How TensorFlow.js can be used to add machine learning capabilities to your web application
What is TensorFlow.js

TensorFlow.js is a JavaScript library which makes it possible to add machine learning capabilities to any web application. With TensorFlow.js you can develop machine learning scenarios from scratch. You can use the APIs to build and train models right in the browser or in your Node.js server application. Furthermore you can use TensorFlow.js to run existing models in your JavaScript environment.

You can even use TensorFlow.js to retrain pre-existing machine learning models with data which is available client-side in the browser. E.g. you can use image data from your web cam.

The project’s website can be found at https://js.tensorflow.org/:

TensorFlow.js Fundamentals

Before getting started with practical example let’s take a look at the main building blocks in TensorFlow.


Tensors are the central unit of data in TensorFlow. A tensor contains a set of numeric values and can be of any shape: one or more dimensional. When you’re creating a new Tensor you need to define the shape as well. You can do that by using the tensor function and defining the shape by passing in a second argument like you can see in the following:

const t1 = tf.tensor([1,2,3,4,2,4,6,8]), [2,4]);

This is defining a tensor of a shape with two rows and four columns. The resulting tensor looks like the following:



It’s also possible to let TensorFlow infer the shape of the tensor:

const t2 = tf.tensor([[1,2,3,4],[2,4,6,8]]);

The result would be the same as before.

Furthermore you can use the following functions to enhance code readability:

  • tf.scalar: Tensor with just one value
  • tf.tensor1d: Tensor with one dimensions
  • tf.tensor2d: Tensor with two dimensions
  • tf.tensor3d: Tensor with three dimensions
  • tf.tensor4d: Tensor with four dimensions

If you would like to create a tensor with all values set to 0 you can use the tf.zeros function, as you can see in the following:

const t_zeros = tf.zeros([2,3]);

This line of code is creating the following tensor:



In TensorFlow.js all tensors are immutable. That means that a tensor once created, cannot be changed afterwards. If you perform an operation which is changing values of a tensor, always a new tensor with the resulting value is created and returned.


By using TensorFlow operations you can manipulate data of a tensor. Because of the immutability of tensor operations are always returning a new tensor with the resulting values.

TensorFlow.js offers many useful operations like square, add, sub and mul. Applying an operation is straight forward as you can see in the following:

const t3 = tf.tensor2d([1,2], [3, 4]);

const t3_squared = t3.square();

After having executed this code the new tensor contains the following values:

[[1, 4 ],

[9, 16]]

Models And Layers

Models and Layers are the two most important building blocks when it comes to deep learning. Each model is build up of one or more layers. TensorFlow is supporting different types of layers. For different machine learning tasks you need to use and combine different types of layers. For the moment it’s sufficient to understand that layers are used to build up neural networks (models) which can be trained with data and then used to predict further values based on the trained information.

Setting Up The Project

Let’s start by taking a look at a real world example. In the first step we need to set up the project. Create a new empty directory:

$ mkdir tfjs01

Change into that newly created project folder:

$ cd tfjs01

Inside the folder we’re now ready to create a package.json file, so that we’re able to manage dependencies by using the Node.js Package Manager:

$ npm init -y

Because we’ll be installing the dependencies (e.g. the Tensorflow.js library) locally in our project folder we need to use a module bundler for our web application. To keep things as easy as possible we’re going to use the Parcel web application bundler because Parcel is working with zero configuration. Let’s install the Parcel bundler by executing the following command in the project directory:

$ npm install -g parcel-bundler

Next, let’s create two new empty files for our implementation:

$ touch index.html index.js

Finally let’s add the Bootstrap library as a dependency because we will be using some Bootstrap CSS classes for our user interface elements:

$ npm install bootstrap

In index.html let’s insert the following code of a basic HTML page:

    <div class="container">
        <h1>Welcome to TensorFlow.js</h1>
        <div id="output"></div>

    <script src="./index.js"></script>

In addition add the following code to index.js:

import 'bootstrap/dist/css/bootstrap.css'; 
document.getElementById('output').innerText = "Hello World";

Ee’re writing the text Hello World to the element with ID output to see a first result on the screen and get the confirmation that the JS code is being processed correctly.

Finally let’s start the build process and the development web server by using the parcelcommand in the following way:

$ parcel index.html

You now should be able to open the website via URL http://localhost:1234 in your browser. The result should correspond to what you can see in the following screenshot:

Adding TensorFlow.js

To add Tensorflow.js to our project we again make use of NPM and execute the following command in the project directory:

$ npm install @tensorflow/tfjs

This is downloading the library and installing it into the node_modules folder. Having executed this command successfully we’re now ready to import the Tensorflow.js libraray in index.js by adding the following import statement on top of the file:

import * as tf from '@tensorflow/tfjs';

As we’re importing TensorFlow.js as tf we now have access to the TensorFlow.js API by using the tf object within our code.

Defining The Model

Now that TensorFlow.js is available let’s start with a first simple machine learning exercise. The machine learning szenario the following sample application should cover is based on the formula Y=2X-1, a linear regression.

This function is returning the value Y for a given X. If you plot the points (X,Y) you will get a straight line like you can see in the following:

The machine learning exercise we’d like to implement in the following will use input data (X,Y) from this function and train a model with these value pairs. The model will not know the function itself and we’ll use the trained model to predict Y values based on X value inputs. The expectation is that the Y-results which are returned from the model are close to the exact values which would be returned by the function.

Let’s create a very simple neural network to perform the interference. This model needs to deal with just one input value and one output value:

// Define a machine learning model for linear regression 
const model = tf.sequential(); 
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

First we’re creating a new model instance by calling tf.sequential method. We’re getting returned a new sequential model. A sequential model is any model where the outputs of one layer are the inputs to the next layer, i.e. the model topology is a simple ‘stack’ of layers, with no branching or skipping.

Having created that model we’re ready to add a first layer by calling model.add. A new layer is passed into the add method by calling tf.layers.dense. This is creating a dense layer. In a dense layer, every node in the layer is connected to every node in the preceding layer. For our simple example it’s sufficient to only add one dense layer with an input and output shape of one to the neural network.

In the next step we need to specify the loss and the optimizer function for the model.

// Specify loss and optimizer for model 
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

This is done by passing a configuration object to the call of the compile method of the model instance. The configuration object contains two properties:

  • loss: Here we’re using the meanSquaredError loss function. In general a loss function is used to map values of one or more variables onto a real number that represents some “costs” associated with the value. If the model is trained it tries to minimize the result of the loss function. The mean squared error of an estimator measures the average of the squares of the errors — that is, the average squared difference between the estimated values and what is estimated.
  • optimizer: The optimizer function to use. For our linear regression machine learning task we’re using the sgd function. Sgd stands for* Stochastic Gradient Descent* and it an optimizer function which is suitable for linear regression tasks like in our case.

Now that model is configured and the next task to perform is the training of the model with values.

Training The Model

To train the model with value pairs from the function Y=2X-1 we’re defining two tensors with shape 6,1. The first tensor xs is containing the x values and the second tensor ys is containing the corresponding y values:

// Prepare training data 
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); 
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

Now let’s train the model by passing the two tensors to the call of the model.fit method.

// Train the model 
model.fit(xs, ys, {epochs: 500}).then(() => { 

As the third parameter we’re passing over an object which contains a property named epochs which is set to the value 500. The number which is assigned here is specifying how many times TensorFlow.js is going through your training set.

The result of the fit method is a promise so that we’re able to register a callback function which is activated when the training is concluded.


Now let’s perform the final step inside this callback function and predict a y value based on a given x value:

// Train the model 
model.fit(xs, ys, {epochs: 500}).then(() => { 
 // Use model to predict values 
 model.predict(tf.tensor2d([5], [1,1])).print(); 

The prediction is done using the model.predict method. This method is expecting to receive the input value as a parameter in the form of a tensor. In this specific case we’re creating a tensor with just one value (5) inside and pass it over to predict. By calling the print function we’re making sure that the resulting value is printed to the console as you can see in the following:

The output shows that the predicted value is 8.9962864 and that is very close to 9 which would be the Y value of function Y=2X-1 if x is set to 5.

Optimizing The User Interface

The example which has been implemented is using a fixed input value for prediction (5) and outputting the result to the browser console. Let’s introduce a more sophisticated user interface which gives the user the possibility to enter the value which should be used for prediction. In index.html add the following code:

    <div class="container" style="padding-top: 20px">
        <div class="card">
            <div class="card-header">
                <strong>TensorFlow.js Demo - Linear Regression</strong>
            <div class="card-body">
                <label>Input Value:</label> <input type="text" id="inputValue" class="form-control"><br>
                <button type="button" class="btn btn-primary" id="predictButton" disabled>Model is being trained, please wait ...</button><br><br>
                <h4>Result: </span></h4>
                <h5><span class="badge badge-secondary" id="output"></span></h5>

    <script src="./index.js"></script>

Here we’re making use of various Bootstrap CSS classes, adding input and button elements to the page and defining an area which is used for outputting the result.

We need to make a few changes in index.js too:

import * as tf from '@tensorflow/tfjs';
import 'bootstrap/dist/css/bootstrap.css';

// Define a machine learning model for linear regression
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Specify loss and optimizer for model
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Prepare training data
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6,1]);

// Train the model and set predict button to active
model.fit(xs, ys, {epochs: 500}).then(() => {
    // Use model to predict values
    document.getElementById('predictButton').disabled = false;
    document.getElementById('predictButton').innerText = "Predict";

// Register click event handler for predict button
document.getElementById('predictButton').addEventListener('click', (el, ev) => {
    let val = document.getElementById('inputValue').value;
    document.getElementById('output').innerText = model.predict(tf.tensor2d([val], [1,1]));

An event handler for the click event of the predict button is registered. Inside this function the value of the input element is read and the model.predict method is called. The result which is returned by this method is inserted in the element with id output.

The result should now look like the following:

The user is now able to input the value (x) for which is the Y value should be predicted.

The prediction is done when the Predict button is clicked:

The result is then showed directly on the website.

What’s Next

In this first episode of this series you’ve learned the basics of Tensorflow.js and by using that library we’ve implemented a first simple machine learning example based on linear regression. Now you should have a basic understanding of the main Tensorflow.js building blocks.

In the next part we’ll again focus on a practical machine learning example and dive deeper into JavaScript-based machine learning with TensorFlow.js.

Top Machine Learning Framework: 5 Machine Learning Frameworks of 2019

Top Machine Learning Framework: 5 Machine Learning Frameworks of 2019

Machine Learning (ML) is one of the fastest-growing technologies today. ML has a lot of frameworks to build a successful app, and so as a developer, you might be getting confused about using the right framework. Herein we have curated top 5...

Machine Learning (ML) is one of the fastest-growing technologies today. ML has a lot of frameworks to build a successful app, and so as a developer, you might be getting confused about using the right framework. Herein we have curated top 5 machine learning frameworks that are cutting edge technology in your hands.

Through the machine learning frameworks, mobile phones and tablets are getting powerful enough to run the software that can learn and react in real-time. It is a complex discipline. But the implementation of ML models is far less daunting and difficult than it used to be. Now, it automatically improves the performance with the pace of time, interactions, and experiences, and the most important acquisition of useful data pertaining to the tasks allocated.

As we know that ML is considered as a subset of Artificial Intelligence (AI). The scientific study of statistical models and algorithms help a computing system to accomplish designated tasks efficiently. Now, as a mobile app developer, when you are planning to choose machine learning frameworks you must keep the following things in mind.

The framework should be performance-oriented
The grasping and coding should be quick
It allows to distribute the computational process, the framework must have parallelization
It should consist of a facility to create models and provide a developer-friendly tool
Let’s learn about the top five machine learning frameworks to make the right choice for your next ML application development project. Before we dive deeper into these mentioned frameworks, know the different types of ML frameworks that are available on the web. Here are some ML frameworks:

Mathematical oriented
Neural networks-based
Linear algebra tools
Statistical tools
Now, let’s have an insight into ML frameworks that will help you in selecting the right framework for your ML application.

Don’t Miss Out on These 5 Machine Learning Frameworks of 2019
#1 TensorFlow
TensorFlow is an open-source software library for data-based programming across multiple tasks. The framework is based on computational graphs which is essentially a network of codes. Each node represents a mathematical operation that runs some function as simple or as complex as multivariate analysis. This framework is said to be best among all the ML libraries as it supports regressions, classifications, and neural networks like complicated tasks and algorithms.

machine learning frameworks
This machine learning library demands additional efforts while learning TensorFlow Python framework. Your job becomes easy in the n-dimensional array of the framework when you have grasped the Python frameworks and libraries.

The benefits of this framework are flexibility. TensorFlow allows non-automatic migration to newer versions. It runs on the GPU, CPU, servers, desktops, and mobile devices. It provides auto differentiation and performance. There are a few goliaths like Airbus, Twitter, IBM, who have innovatively used the TensorFlow frameworks.

#2 FireBase ML Kit
Firebase machine learning framework is a library that allows effortless, minimal code, with highly accurate, pre-trained deep models. We at Space-O Technologies use this machine learning technology for image classification and object detection. The Firebase framework offers models both locally and on the Google Cloud.

machine learning frameworks
This is one of our ML tutorials to make you understand the Firebase frameworks. First of all, we collected photos of empty glass, half watered glass, full watered glass, and targeted into the machine learning algorithms. This helped the machine to search and analyze according to the nature, behavior, and patterns of the object placed in front of it.

The first photo that we targeted through machine learning algorithms was to recognize an empty glass. Thus, the app did its analysis and search for the correct answer, we provided it with certain empty glass images prior to the experiment.
The other photo that we targeted was a half water glass. The core of the machine learning app is to assemble data and to manage it as per its analysis. It was able to recognize the image accurately because of the little bits and pieces of the glass given to it beforehand.
The last one is a full glass recognition image.
Note: For correct recognition, there has to be 1 label that carries at least 100 images of a particular object.

#3 CAFFE (Convolutional Architecture for Fast Feature Embedding)
CAFFE framework is the fastest way to apply deep neural networks. It is the best machine learning framework known for its model-Zoo a pre-trained ML model that is capable of performing a great variety of tasks. Image classification, machine vision, recommender system are some of the tasks performed easily through this ML library.

machine learning frameworks
This framework is majorly written in CPP. It can run on multiple hardware and can switch between CPU and GPU with the use of a single flag. It has systematically organized the structure of Mat lab and python interface.

Now, if you have to make a machine learning app development, then it is mainly used in academic research projects and to design startups prototypes. It is the aptest machine learning technology for research experiments and industry deployment. At a time this framework can manage 60 million pictures every day with a solitary Nvidia K40 GPU.

#4 Apache Spark
The Apache Spark machine learning is a cluster-computing framework written in different languages like Java, Scala, R, and Python. Spark’s machine learning library, MLlib is considered as foundational for the Spark’s success. Building MLlib on top of Spark makes it possible to tackle the distinct needs of a single tool instead of many disjointed ones.

machine learning frameworks
The advantages of such ML library lower learning curves, less complex development and production environments, which ultimately results in a shorter time to deliver high-performing models. The key benefit of MLlib is that it allows data scientists to solve multiple data problems in addition to their machine learning problems.

It can easily solve graph computations (via GraphX), streaming (real-time calculations), and real-time interactive query processing with Spark SQL and DataFrames. The data professionals can focus on solving the data problems instead of learning and maintaining a different tool for each scenario.

#5 Scikit-Learn
Scikit-learn is said to be one of the greatest feats of Python community. This machine learning framework efficiently handles data mining and supports multiple practical tasks. It is built on foundations like SciPy, Numpy, and matplotlib. This framework is known for supervised & unsupervised learning algorithms as well as cross-validation. The Scikit learn is largely written in Python with some core algorithms in Cython to achieve performance.

machine learning frameworks
The machine learning framework can work on multiple tasks without compromising on speed. There are some remarkable machine learning apps using this framework like Spotify, Evernote, AWeber, Inria.

With the help of machine learning to build iOS apps, Android apps powered by ML have become quite an easy process. With this emerging technology trend varieties of available data, computational processing has become cheaper and more powerful, and affordable data storage. So being an app developer or having an idea for machine learning apps should definitely dive into the niche.

Still have any query or confusion regarding ML frameworks, machine learning app development guide, the difference between Artificial Intelligence and machine learning, ML algorithms from scratch, how this technology is helpful for your business? Just fill our contact us form. Our sales representatives will get back to you shortly and resolve your queries. The consultation is absolutely free of cost.

Author Bio: This blog is written with the help of Jigar Mistry, who has over 13 years of experience in the web and mobile app development industry. He has guided to develop over 200 mobile apps and has special expertise in different mobile app categories like Uber like apps, Health and Fitness apps, On-Demand apps and Machine Learning apps. So, we took his help to write this complete guide on machine learning technology and machine app development areas.

Introduction to Machine Learning with TensorFlow.js

Introduction to Machine Learning with TensorFlow.js

Learn how to build and train Neural Networks using the most popular Machine Learning framework for javascript, TensorFlow.js.

Learn how to build and train Neural Networks using the most popular Machine Learning framework for javascript, TensorFlow.js.

This is a practical workshop where you'll learn "hands-on" by building several different applications from scratch using TensorFlow.js.

If you have ever been interested in Machine Learning, if you want to get a taste for what this exciting field has to offer, if you want to be able to talk to other Machine Learning/AI specialists in a language they understand, then this workshop is for you.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Machine Learning and TensorFlow.js

Machine Learning A-Z™: Hands-On Python & R In Data Science

Machine Learning In Node.js With TensorFlow.js

Machine Learning in JavaScript with TensorFlow.js

A Complete Machine Learning Project Walk-Through in Python

Top 10 Machine Learning Algorithms You Should Know to Become a Data Scientist

TensorFlow Vs PyTorch: Comparison of the Machine Learning Libraries

TensorFlow Vs PyTorch: Comparison of the Machine Learning Libraries

Libraries play an important role when developers decide to work in Machine Learning or Deep Learning researches. In this article, we list down 10 comparisons between TensorFlow and PyTorch these two Machine Learning Libraries.

According to this article, a survey based on a sample of 1,616 ML developers and data scientists, for every one developer using PyTorch, there are 3.4 developers using TensorFlow. In this article, we list down 10 comparisons between these two Machine Learning Libraries

1 - Origin

PyTorch has been developed by Facebook which is based on Torch while TensorFlow, an open sourced Machine Learning Library, developed by Google Brain is based on the idea of data flow graphs for building models.

2 - Features

TensorFlow has some attracting features such as TensorBoard which serves as a great option while visualising a Machine Learning model, it also has TensorFlow Serving which is a specific grpc server that is used during the deployment of models in production. On the other hand, PyTorch has several distinguished features too such as dynamic computation graphs, naive support for Python, support for CUDA which ensures less time for running the code and increase in performance.

3 - Community

TensorFlow is adopted by many researchers of various fields like academics, business organisations, etc. It has a much bigger community than PyTorch which implies that it is easier to find for resources or solutions in TensorFlow. There is a vast amount of tutorials, codes, as well as support in TensorFlow and PyTorch, being the newcomer into play as compared to TensorFlow, it lacks these benefits.

4 - Visualisation

Visualisation plays as a protagonist while presenting any project in an organisation. TensorFlow has TensorBoard for visualising Machine Learning models which helps during training the model and spot the errors quickly. It is a real-time representation of the graphs of a model which not only depicts the graphic representation but also shows the accuracy graphs in real-time. This eye-catching feature is lacked by PyTorch.

5 - Defining Computational Graphs

In TensorFlow, defining computational graph is a lengthy process as you have to build and run the computations within sessions. Also, you will have to use other parameters such as placeholders, variable scoping, etc. On the other hand, Python wins this point as it has the dynamic computation graphs which help id building the graphs dynamically. Here, the graph is built at every point of execution and you can manipulate the graph at run-time.

6 - Debugging

PyTorch being the dynamic computational process, the debugging process is a painless method. You can easily use Python debugging tools like pdb or ipdb, etc. for instance, you can put “pdb.set_trace()” at any line of code and then proceed for executions of further computations, pinpoint the cause of the errors, etc. While, for TensorFlow you have to use the TensorFlow debugger tool, tfdbg which lets you view the internal structure and states of running TensorFlow graphs during training and inference.

7 - Deployment

For now, deployment in TensorFlow is much more supportive as compared to PyTorch. It has the advantage of TensorFlow Serving which is a flexible, high-performance serving system for deploying Machine Learning models, designed for production environments. However, in PyTorch, you can use the Microframework for Python, Flask for deployment of models.

8 - Documentation

The documentation of both frameworks is broadly available as there are examples and tutorials in abundance for both the libraries. You can say, it is a tie between both the frameworks.

Click here for TensorFlow documentation and click here for PyTorch documentation.

9 - Serialisation

The serialisation in TensorFlow can be said as one of the advantages for this framework users. Here, you can save your entire graph as a protocol buffer and then later it can be loaded in other supported languages, however, PyTorch lacks this feature. 

10 - Device Management

By default, Tensorflow maps nearly all of the GPU memory of all GPUs visible to the process which is a comedown but here it automatically presumes that you want to run your code on the GPU because of the well-set defaults and thus result in fair management of the device. On the other hand, PyTorch keeps track of the currently selected GPU and all the CUDA tensors which will be allocated.