Learn and Play with TensorFlow.js [Part 1: Linear Regression]
Let’s build a simple Linear Regression application, just to see if the library works.
For the installation tutorial, see the previous chapter
Main Page
Firstly, let’s create a new directory and add two files: index.html and index.js inside it.
\ai_tfjs> mkdir part_1
\ai_tfjs> cd > part_1\index.html
\ai_tfjs> cd > part_1\index.jsNow open part_1\index.html, and let’s create two scatter charts each using Chart.js and tfjs-vis just to see their differences. Chart.js need a <canvas> to display the chart, while tfjs-vis only need a <div> section. Tfjs-vis also provides a feature that will display the visualization in a new tab outside the main page called visor window. We will try them all, so add the code below to index.html file.
Next we import all necessary libraries to index.js
Now we can publish the application by executing command below,
\ai_tfjs> parcel part_1\index.htmlwhich will only display the title without any data since we haven’t create any. So now, let’s add some data to the chart
Toy Data
Add several toy data as follow. To view the data in scatter chart, usually we need to form it to point format, so we create helper function to do that.
Then to show the data to tfjs-vis chart, we use render function. While displaying data to Chart.js chart, we need a bit longer code, but all in all, it’s the same. as mentioned earlier, tfjs-vis offers another way to display data in the visor window feature. The way to use it is very similar.
Now if we run the page, it will look something like this. You can show and hide the visor by pressing [`] button
From now on, we will use Chart.js to display data visualization, while using tfjs-vis to display the visualization of the learning process
Now that we have the data, let’s start building linear regression applications
Linear Regression
Linear regression is a statistical function that forms the basis of almost all machine learning algorithms. This function aims to make a straight line that can guess / estimate the output of an input based on the data provided.
If we look at the data that we have made before, linear regression will try to make a straight line that can approach or even touch all data. Then from the line function produced, we can estimate the output (usually the y-axes value) of a new input (x-axes value).
Simple, right?
Before we define the Regression model, let’s first modify the view.
Modify index.html
Remove the section for tfjs-vis earlier leaving only the Chart.js section, then add two new sections for Training and Testing part. Put two buttons in Training section, each to initialize and train the model. While in Testing, add an input form and a button to predict the output of a new data.
Our page will now look like this
Modify index.js
Moving on to the index.js, first we need to define our model as global variable, and cast the data into a tensor. Then we’ll make that after we initialize the model, draw the line of the model to the chart. For that, add the viewPrediction() function below.
Initialize Button
Then we add action event to the Initialize button. For linear regression, we only need a single dense layer. And since both the input and output are one-dimensional, we set units and inputShape as 1. Then we compile the model using Stochastic Gradient Decent with mean squared error loss. Call viewPrediction to show the line, and activate the Train button.
Train Button
Continue and add action event to Train button. First, let’s put a message that the model is being trained. Next we call the fit() function to train the model. The fit() function in TensorFlow.js is an asynchronous function, which means the function runs in background so that the main UI thread is not locked. For this example we use then() to define a code block that will be executed once the asynchronous fit() function is complete.
In this block, let’s set the model to be trained for 20 epochs. After the training process is complete, call the evaluate() function to calculate and display both the line and the MSE error from the trained model. Don’t forget to activate the predict button.
Notice that we add a couple lines of code to show the training history to a visor window so we can track the loss during training.
Predict Button
That leaves us with the predict button. The action event in predict button is simply receive and parse input to float, cast it to tensor, and call predict() function.
And that’s it. Now we’re ready to try our simple Linear Regression.
Train and Test the Linear Regression
When you initialize the model, you can see that the line is created randomly. Then we can start the Training Process . Training basically means that the network will “rotate” and “shift” the regression line to be able to get a line that has the smallest distance to all existing training data.
After the model is trained, we can try to input new value and predict the output value.
That was easy, don’t you agree?
That conclude our first chapter of this TensorFlow.js tutorial. Next we’ll move up to the next step in machine learning application: Classification
