<p>In this article, you’ll learn TensorFlow.js and how to build a web-based machine learning model using TensorFlow.js.</p>
<p>To get started, you should:</p>
<ul>
<li>Have an idea of what machine learning is, or learn it by reading <a target="_blank" href="/@Koikibabatunde1/introduction-to-machine-learning-7697477a5e40">Introduction To Machine Learning.</a></li>
<li>Have basic knowledge of HTML</li>
<li>Have basic knowledge of Javascript data types, functions, objects, and event handling.</li>
</ul>
<p>TensorFlow.js is an open-source Javascript library for training and deploying machine learning models on the browser. TensorFlow.js is owned by Google and is written in C++.</p>
<p>TensorFlow.js is the browser-based version of <a target="_blank" href="https://www.tensorflow.org">TensorFlow</a> which is a free and open-source software library for dataflow and differentiable programming across a range of tasks. It is a symbolic math library and is also used for machine learning applications such as neural networks.</p>
<h1 id="getting-started">Getting Started</h1>
<p>Installing TensorFlow.js</p>
<ul>
<li>Create your HTML page</li>
</ul>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>My TensorFlow Page<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre><p>Since TensorFlow.js is a Javascript library, there are two ways of installing it:</p>
<ul>
<li>Using the </li></ul>

In this article, you’ll learn TensorFlow.js and how to build a web-based machine learning model using TensorFlow.js.

To get started, you should:

*   Have an idea of what machine learning is, or learn it by reading [Introduction To Machine Learning.](/@Koikibabatunde1/introduction-to-machine-learning-7697477a5e40)
*   Have basic knowledge of HTML
*   Have basic knowledge of Javascript data types, functions, objects, and event handling.



TensorFlow.js is an open-source Javascript library for training and deploying machine learning models on the browser. TensorFlow.js is owned by Google and is written in C++.

TensorFlow.js is the browser-based version of [TensorFlow](https://www.tensorflow.org) which is a free and open-source software library for dataflow and differentiable programming across a range of tasks. It is a symbolic math library and is also used for machine learning applications such as neural networks.

# Getting Started

Installing TensorFlow.js

*   Create your HTML page


```
<html>
  <head>
    <title>My TensorFlow Page</title>
  </head>
  <body>
    <div id="content">

    </div>
  </body>
</html>
```


Since TensorFlow.js is a Javascript library, there are two ways of installing it:

*   Using the <script> tag: This lets you reference the script from your HTML file for use. This method is easier and lighter, as it requires no other dependencies.


```
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
```


Now your HTML page should look like this


```
<html>
  <head>
    <title>My TensorFlow Page</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
  </head>
  <body>
    <div id="content">

    </div>
  </body>
</html>
```


*   Installing through npm: I would only recommend this to people familiar with Javascript, and probably use npm often.


```
npm install @tensorflow/tfjs
```


Just one more thing, create a new **_tensor.js_** file, where we will write all of our codes, just to keep the code clean. Then reference the **_tensor.js_** file just below your installation link, so it has access to the contents of the installed library.

Your final page would look like this


```
<html>
  <head>
    <title>My TensorFlow Page</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
    <script src="tensor.js"><script>
  </head>
  <body>
    <div id="content">

    </div>
  </body>
</html>
```


Now you have TensorFlow.js installed and I guess you’re ready.

# What Next?

Getting Familiar With TensorFlow.js

## Tensors and Operations

> A _tensor_ is a generalization of vectors and matrices to higher dimensions.

Tensors are the central unit of data in TensorFlow.js. They store data to be used for training. They are array-like structures, though they are more complex, and would be used for all mathematical operations.

A tensor could be in different forms, depending on what type of data it stores, which include:

*   Scalar: Integer, 55
*   Vector: A basic 2 x 1 matrix, [2, 3]
*   Matrix: Any other matrix other than the vector-matrix(2 x 1)

A tensor is created by using tf.tensor(rank, shape?, datatype?)


```
tf.tensor(rank, shape?, dtype?);
```


TensorFlow.js automatically infers shapes during graph construction.

The tensor has some properties:

*   Rank: This is the dimension of the tensor, Matrix, 2D Vector
*   Shape: This tells the size of each dimension of the data, Row * Column, [2, 3]
*   Dtype: Tells the data type of the data.


```
//Creates a Vector Matrix(2 x 1).
const a = tf.tensor([3, 2]);
```


A Tensor such as


```
const a = tf.tensor([[1, 55, -4],[22, 0, 7]])
```


has its rank as Matrix/2D-Vector, shape as [2, 3], and type as integer.

Operations can be performed on vectors such as:

*   Addition: Returns the sum of the elements of both Tensors


```
//Create a Tensor named x
const x = tf.tensor([1, 3, 98, 23]);

//Create another Tensor named y
const y = tf.tensor([3, 90, 3, 9]);

//Add both Tensors
a = tf.add(x, y);

//Or add using x.add(y)
b = x.add(y);

a.print()    //Returns [4, 93, 101, 32]
```


*   Subtraction: Gets the difference between the elements of both Tensors


```
//Create a Tensor named x
const x = tf.tensor([1, 3, 98, 23]);

//Create another Tensor named y
const y = tf.tensor([3, 90, 3, 9]);

//Subtract y from x
a = tf.sub(x, y);

//Or subtract using x.sub(y)
b = x.sub(y);

a.print()    //Returns [-1, -87, 95, 14]
```


*   Square: Returns the square of each element in the Tensor


```
//Create a Tensor named x
const x = tf.tensor([1, 3, 98, 23]);

//Square Tensor x
b = x.square();

//Or square using tf.square
a = tf.square(x);

a.print()    //Returns [1, 9, 9604, 569]
```


# Models

## What Is A Model?
![Machine Learning Model](https://miro.medium.com/max/700/1*f3KSypGHV-nWVxf4hI_rtw.png)

> A Machine Learning model is a set of assumptions about the underlying nature the data to be trained for.

A model is generated by the computer after it has studied the data and learned from it. The model is like a mathematical equation the computer derives by itself, with the dependent variable, usually the subject of the formula, and other independent variables. The model maps the input onto the output. A well-trained model will provide an accurate mapping from the input to the desired output.

> Y= a + bX

For example, if you give your computer a series of pictures, some of cats and some of dogs, the machine studies both and determines by itself the differentiating factors, and hence, can generate a formula or pattern, the model, which it now uses to make future predictions.

> A Model is a mathematical representation of a real-world process.

TensorFlow.js Models have layers:

*   The Input Layer deals with raw data as its responsible for receiving data from the user. Here, the data to be learned from is gotten.
*   The Hidden Layer is the layer with the computational ability and does the most of the job. It is where technical and mathematical operations are carried out. Its where the _magic_ is made.
*   The Output Layer shows the result to the user.

## Creating Your Model

In TensorFlow.js there are two ways to create models:

*   Using the Layers API (which we’ll be discussing)
*   Using the Core API(might be discussed in a later article)

## Using the Layers API

The Layers API has two ways of building models:

1.  The Sequential Model
2.  The Functional Model

* * *

## The Sequential Model

This is the most common type of TensorFlow.js model, and it is just a linear stack of layers.
![TensorFlow.js Layers](https://miro.medium.com/max/691/1*Lv5JyrfrScIEPAOIaD894g.jpeg)

Now, we’d write in our _tensor.js_ file


```
const model = tf.sequential();
```


Now with this line, we’ve created our model, but we’ve not created any layer yet. So we’ll do


```
model.add(tf.layers.dense({inputShape: [4], units: 8, activation: 'relu'}));
```


to create and add our hidden layer.

In the given function **_tf.layers.dense_**creates the layer, with the **_dense_** meaning that its a fully connected layer. **_inputShape_** _i_s the shape of the expected data, it tells the dimension of the input. **_units_** is the number (a positive integer) describing the dimensionality of the output space, since the result of the processes from the hidden layer would be transferred to the output layer to be outputted. **_activation_** or **_activation function_**is to used to add some kind of non-linear property to the function, without the **activation functions**, the model could perform only linear mappings from inputs x to the outputs y. [Read more](/the-theory-of-everything/understanding-activation-functions-in-neural-networks-9491262884e0) on activation functions.

Now we have our hidden layer, we move to the creation of our output layer.


```
model.add(tf.layers.dense({ units: 1, activation: 'softmax'}));
```


Notice how the syntax is very similar to the previous one, except that we’ve not included the _inputShape,_ basically because we’re not receiving any input as the input layer is not directly connected to the output layer.

And that’s how you create a TensorFlow.js model using the Sequential method of the Layers API.

The model could have been created alternatively by


```
const model = tf.sequential({
 layers: [
   tf.layers.dense({inputShape: [4], units: 8, activation: 'relu'}),
   tf.layers.dense({units: 1, activation: 'softmax'}),
 ]
});
```


## The Functional Model

Building the model with the Functional method is also very simple, although, with some few differences, it uses the same ideas as the Sequential model.

To get started, we’d be creating our input shape, though we could avoid this but we would not because it makes code easier to manage and more readable.


```
const input = tf.input({ shape: [4]});
```


Next, we create our hidden layer


```
const hiddenLayer = tf.layers.dense({ units: 8, activation: 'relu' }).apply(input);
```


Now we’ve successfully created our hidden layer using the _tf.layers.dense_ method we’re already familiar with, but there’s a little addition, _.apply()._ The _.apply()_ method is used to link the hidden layer to the input layer as there’s no link between them.

Now, we build our output layer


```
const outputLayer = tf.layers.dense({ units: 1, activation: 'softmax'}).apply(hiddenLayer);
```


So we’ve created the output layer and also linked it to the preceding layer, the hidden layer.

Now, we finish creating our model by adding all our layers together.


```
const modelFunctional = tf.model({ inputs: input, outputs: outputLayer});
```


And we’re done. Hurray!!

* * *

Now if you noticed, in our Sequential method, we created our model and added layers gradually, but in the Functional method, our model was created at the end as a combination of already created layers. The decision of which method to use now depends on your personal preference, but they are both simple to get started with.

So far, we’ve been able to create models in two different ways, now we train our models with sample data.

## Compilation of Models

Just before we train our models, they have to be compiled. So to compile our models, we need to understand three important concepts

*   Optimizer adjusts the parameters or weights after a prediction. This lets the model auto improve as it doesn’t wait on you for its parameters to be adjusted to get the best prediction.
*   Loss summarizes how much change is needed to be made in a single batch as a single number.
*   Metric summarizes how well our model is performing as a single number. It rates the model.

* * *

So to compile our model,


```
model.compile(
  {
    optimizer: 'sgd',
    loss: 'categoricalCrossentropy',
    metrics: ['accuracy']
  }
)
```


And we’re done compiling, we train now.

# Training Models

Training a model is quite fun and easy as all you have to do is just give the model data and sit back while it learns from it. Sounds cool, doesn’t it? Let’s get started.

Training a model requires data, no matter what the model does. You always need data, be it a image classification model, or a natural language processing model, or even an object recognition model, you need data.

Data to be used to train a model could be sourced from anywhere, as data is everywhere now. It could be gotten from the internet, from a private organization, from a questionnaire or even from our immediate environment.

In this article, I’d be using a sample data, I formed it myself though.
![Machine Learning](https://miro.medium.com/max/700/1*HA-N1TlFZm2o8NOoszxTRw.jpeg)

```
const data = tf.tensor([1, 3, 7, 5], [1, 4]);
```


Now, I’ve created my data, and specified its shape to match the inputShape we specified earlier, so the model gets what its expecting.

Next, we create labels for the data, so the model has a sample input to output mapping its learning from.


```
const labels = tf.tensor([4], [1, 1]);
```


The label is ready now, and I got my label by adding all my input and squaring them, the model will derive its own formula later on.

So we proceed to adding the data to the model, so it finally learns from it.


```
model.fit(data, labels);
```


And its just that easy, the data and the labels just have to be passed in.

So if the model has really leart from the data, it should be able to make a simple prediction. Let’s give it a quick test.

But before that, let’s be sure our **_tensor.js_** file is correctly typed.


```
//Create a sequential model
const model = tf.sequential();

//Add the hidden layer
model.add(tf.layers.dense({inputShape: [4], units: 8, activation: 'relu'}));

//Add the output layer
model.add(tf.layers.dense({ units: 1, activation: 'softmax'}));

//Compile our model
model.compile(
  {
    optimizer: 'sgd',
    loss: 'meanSquaredError',
    metrics: ['accuracy']
  }
)

//Train our model
const data = tf.tensor([1, 3, 7, 5], [1, 4]);
const labels = tf.tensor([4], [1, 1]);
model.fit(data, labels);
```


Now we can give it a test.


```
model.predict(testData);
```


If the model has really learnt, we should get 5, which is the square root of the sum of all the numbers I passed in.

So we want the output to be displayed on the browser and not on the console. To do that we’d just make some edits in our **_tensor.js_** file.


```
//Create a function
async function getPrediction() { 
  
  //Create a sequential model
  const model = tf.sequential(); 

  //Add the hidden layer
  model.add(tf.layers.dense({inputShape: [4], units: 1})); 

  //Compile our model
  model.compile(
    {
      optimizer: 'sgd',
      loss: 'meanSquaredError',
      metrics: ['accuracy']
    }
  ) 

  //Train our model
  const data = tf.tensor([1, 3, 7, 5], [1, 4]);
  const labels = tf.tensor([4], [1, 1]);
  await model.fit(data, labels, {epochs: 100}); 

  //Make prediction
  const testData = tf.tensor([2, 3, 8, 12], [1, 4]); 

  //Get the our target location on the web page
  document.getElementById('content').innerText = model.predict(testData);

}

//Call the function
getPrediction()
```


You’d observe that we’re now without the layers and activation function, it is because this is a very basic model and does not involve any complexity at all.

See the await keyword before the model.fit, it is used to make sure the page doesn’t load until the model has finished training and is ready to make prediction. Omitting it would result in a TypeError as the value to be written on the screen doesn’t exist just yet.

Notice the epochs keyword in the model.fit, its to help our model make better predictions, it allows for iterations, to compliment for our shortage of data. The model goes over the little available data as many times as we specify, knowing the data more and more with every iteration, thereby leading to better results.

Now be carefulwith the epochs you set, the higher you set, the longer it takes the model to finish the iteration and the longer it takes the page to load.

Now you should see something very close to 5 on the screen.

And we’re done.

You see how machine learning models can learn from a sample data and predict outcome for a new dataset.

# Summary

To build a web-based machine learning models using TensorFlow.js,

> Model > Layers > Compile > Get Data > Train > Predict

Have a nice time building the _next big thing._

How To Write Your First Web-Based Machine Learning Model With TensorFlow.JS

Backend Engineer | PHP | Laravel | NodeJs
