Simple Linear Regression in TensorFlow.js with Bootstrap

Introduction

In the previous tutorial, we have built a simple linear regression model that can predict the number of bike-sharing users. In this tutorial, we are going to build a web application based on that model. We are going to use TensorFlow.js library to build the linear regression. Then, we also going to style the web application with Bootstrap library.  At the end of this tutorial, you will be able to build the following web application.

HTML Layout

In this section, we are going to build the HTML page for the web application. Firstly, we are going to add several HTML elements. The following HTML code defines the HTML page for predicting the number of bike-sharing users.

This is how the code works:

  • In line 8, we add <label> element. This is a label for temperature input field.
  • In line 9, we add <input> element, and set the type attribute to text. This is the temperature input field. Then, set the id and placeholder attribute. The id attribute specifies a unique identifier for the HTML element. The placeholder attribute specifies a short hint that describes the expected value of an input field.
  • In line 10, we add <button> element, and also set the id attribute.
  • In line 11, we add <span> element for displaying the prediction result.

After that, open the this HTML file with a web browser. So, you will get a web page as shown in the following figure. Later on, we are going to style this HTML page using Bootstrap library.

TensorFlow.js

We are going to use TensorFlow.js library to build the simple linear regression. First of all, you should import the TensorFlow.js library (tf.min.js) within the <head> element, either from local file or content delivery network (CDN).

Import tf.min.js from local file:

Import tf.min.js from CDN:

Then, add the following code within the <script> tag for implementing the simple linear regression:

In line 8-9, we declare the \(\theta_{0}\) and \(\theta_{1}\) parameters. We have obtained these parameters when we built the model in the previous tutorial. These parameters are rounded.

In line 12-15, we define the hypothesis function. This function calculates the predicted number of bike-sharing users. It takes one input parameter, which is temperature. Then, it produces one output, which is the predicted number of users. We use the TensorFlow.js functions (tf.add and tf.mul).

In line 17-21, we define the onclick event of the Predict button. So, when we press the button, the hypothesis function will be executed. Within the function, in line 18, we fetch the temperature value from the input field. Then, the temperature value is converted to integer. In line 19, we call our hypothesis function, and then we round the result to nearest integer. In line 20, the dataSync function converts from tensor to JavaScript variable. Then, it displays the result.

Bootstrap

In this section, we are going to make our web UI more attractive by using Bootstrap library. First of all, you should import the Bootstrap library within the <head> element, either from local files or content delivery network (CDN).

Import Bootstrap library from local files:

Import Bootstrap libraries from CDN:

Then, we should modify the HTML code within the <body> element:

We use the Bootstrap grid system. The layout consists of one row and one column. Within the column, we use Bootstrap cards. The card has header and body. Within the body of the card, we put our main content.

Source Code

You can get the source code from this repository.

Summary

In this tutorial, you have learned how to deploy a simple linear regression model in TensorFlow.js as a web application. We use HTML to create our web content. Then, we use JavaScript and TensorFlow.js to calculate the number of bike-sharing users. Finally, we use Bootstrap in order to make the UI more attractive.