Introduction

In this tutorial, we are going to build a web application that predicts number of bike-sharing users based on temperature. We are going to use TensorFlow.js calculating linear regression. In order to style the web application, we are going to use Bootstrap library. We are going to use the linear regression model that has been built in the previous tutorial. At the end of this tutorial, you will be able to build the following web application.

HTML Page

In this section, we are going to build an HTML page for the bike-sharing users prediction. Firstly, we should add several HTML components, which are input text, button, and output label. The following HTML code defines the bike-sharing users prediction page.

The text field is used for the temperature input. The output label is used for displaying the predicted number of users. The function of Predict button is for calculating the prediction using linear regression.

Later on, we will style this HTML page using Bootstrap library.

TensorFlow.js

We are going to use TensorFlow.js to do the linear regression calculation. First of all, you should import the TensorFlow.js library (tf.min.js) within the head tag, 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 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 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 library (tf.add and tf.mul) in this function.

In line 17-21, we set the onclick event of the Predict button. In other words, when we press the button, the function will be executed. Within the function, in line 18, we get the temperature value from the input text field. Then, the temperature value is converted to integer. In line 19, we call our hypothesis function, and 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 libraries within the head tag, either from local files or content delivery network (CDN).

Import Bootstrap libraries from local files:

Import Bootstrap libraries from CDN:

Then, change the HTML code within the body tag:

We use Boostrap grid system. It consists of one row and one column. Within the column, we use Boostrap cards. The card has header and body. Within the body of the card, we put our form.

Summary

In this tutorial, you have learned how to deploy a linear regression model using TensorFlow.js as a web application. We use HTML to create our web content. Then, we use JavaScript and TensorFlow.js to do the prediction. Finally, we use Boostrap to make the UI more attractive.

Next: Hosting TensorFlow.js Application in ESP32

Leave a Reply

Close Menu