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

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:

[[1,2,3,4],

[2,4,6,8]]

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:

[[0,0,0],

[0,0,0]]

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.

Operations

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:

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

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

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.

Prediction

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:

<html>
<body>
    <div class="container" style="padding-top: 20px">
        <div class="card">
            <div class="card-header">
                <strong>TensorFlow.js Demo - Linear Regression</strong>
            </div>
            <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>
            </div>
        </div>
    </div>

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

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.

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.


TensorFlow Extended (TFX): Machine Learning Pipelines

TensorFlow Extended (TFX): Machine Learning Pipelines

TensorFlow Extended (TFX): Machine Learning Pipelines

TensorFlow Extended (TFX): Machine Learning Pipelines

Speaker: Martin Andrews

Event: Google I/O Recap 2019 Singapore AI - From Model to Device by BigDataX

Thanks for watching

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

Follow us on Facebook | Twitter

Further reading about TensorFlow and Machine Learning

Machine Learning In Node.js With TensorFlow.js

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

TensorFlow is dead, long live TensorFlow!

A Complete Machine Learning Project Walk-Through in Python

Top 18 Machine Learning Platforms For Developers