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.
#machine-learning #tensorflow
