•   LabAI
  • 16 Dec, 2019
  • Tags JavaScript

A Beginners Introduction for TensorFlow JS

Learn to build and train your first neural network using TensorFlow JS

*Note: This article assumes that you have knowledge of Javascript.

In this article, I’ll show you how to create your first neural network using Tensorflow JS. This will be our equivalent of a “Hello World” in ANN.

Brief Introduction to Artificial Neural Networks (ANN or NN)

Neural Networks are a part of what we consider Machine Learning. So let’s start with “what is Machine Learning?”( I am not going to get into too many details about the theory of Machine Learning or Neural Networks since there is a lot of information and might be overwhelming).

Machine Learning is a branch of AI that provides a system or model the ability to learn and improve from examples (data) without the need to program the explicit rules. If we think of programming or traditional development, we code some rules and these rules are then executed providing a result. Machine learning or Neural Networks (NN) work differently than the usual programming in a way that we want the model to recognize the patterns. We give our model the examples of what we are looking for and the model will figure out the rules and make predictions from what it has learned from our examples. As you might already notice, the examples or data are very important for the learning process of the algorithm or model.

Now let’s take a quick look at Neural Networks.

When first introduced, Neural Networks were modeled after the human brain (loosely). They are used to recognize patterns within a set of labeled data (examples). So, like the human brain, in Neural Networks we have the units called “neurons”. These neurons are interconnected with weighted values. With the examples provides, the calculations are saved at each neuron and the synapse is adjusted through backpropagation.


A set of neurons are called “Layers”. We have the Input Layer: which is the examples that we provide to the Neural Network. Then, the Hidden Layers: where all the calculation is performed. Finally, the Output Layer is where the computations are finished. This layer must be the size of the data that we fed the neural network.

Enough theory: Now let’s start coding!

For this example, we will construct a simple neural network to predict the value of Y. The formula for this example is Y= 2X -4. But we won’t apply that formula:  we will let our neural network figure that out.

Our set of examples will be:

For X :-4.0,-3.0,-2.0,-1.0, 0.0, 1.0, 2.0, 3.0, 4.0

For Y: -12.0,-10.0,-8.0,-6.0,-4.0,-2.0,0.0,2.0,4.0

As an array this is read: when x=-4 then y=-12 and so on.

To start using TensorFlow JS, we need to add the library

<script src=”https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script> into our HTML code.

Now, we need to define the model. The model will be sequential.



The code model.add(tf.layers.dense({units: 1, inputShape: [1]})); will tell our network to use 1 layer. This is a very simple neural network so we will only use 1 neuron.

We then need to compile our model and assign a loss function and optimizer.

So what does “loss” means? The way NN learns is by “trial and error”. The neural network makes a guess and then later uses the data he knows about (our examples) and will measure how “bad “ or good the guess was, and learn from that. Since the system already knows the answer it can measure how good or bad the guess is. Then it gives this data to the optimizer which is in charge to figure out the next guess. Each guess should be better than the one before.

For this example, we will use the loss function Mean Squared error and the SGD (Stochastic Gradient Descent) as an optimizer.

If you want to know more about the loss function and  optimizer available in Tensorflow, you can the official documentation for more information.

We want to print a summary of the activities for the neural network.


For that, we just need the line model.summary();

We then pass the data that the network will use to learn. Every information passed to the model should be in tensors. A tensor is a generalization of vectors and matrices to potentially higher dimensions. Internally, TensorFlow represents tensors as n-dimensional arrays of base datatypes.


The tensor2d function receives an array with the data and the second array ([9, 1]) indicates the length of the array and the dimension. We will give it 9 elements in the array in a 1-dimensional array.

If you are used to coding NN on Python, you probably don’t care much about the time consumed training, however since we are using JS over browser, is important that we make our communication asynchronous, that way the page won’t wait for the code to be executed, but it will let us know after it was executed.

Neural Networks are heavy and we don’t want to overload the browser.

So let’s create an asynchronous function for the training.


We will create a neural network with 500 epochs and print on the console the information after each epoch followed by the loss. Since the epochs equal 500 this will mean that it will go to the “guessing loop” 500 times. You can edit this amount.

As in Python, we can specify a process to run after each Epoch execution. For that inline, we add the code for “callbacks”. The function onEpochEnd will help us with that. We want to keep track of the training for each epoch so we will output the result into the console.

After we finished training, we want to make a prediction. Let’s say we want to know how much Y is when X=20.



For predictions, we will use our trained model and then alert the result model.predict(tf.tensor2d([20], [1,1]) . Remember that the data should be passed as a tensor using the function tf.tensor2d, first we pass the data (the number we want to predict) and the dimensions (1 data in a 1-dimensional array).

Here is the final code. I made the code as simple as possible so it can be easily understood.



You can check the code here: https://codepen.io/labaiwact/pen/dyPOJxO

Now let’s look at the results:

Since we are printing into the console the results and summary, if you are using Chrome, right-click ->Inspect and then go to “Console” at the “Info” messages.

You will notice that upon loading the page it will start with the training and outputting the summary and then the loss and epochs results.



Let’s take a look at the Epochs and loss. Notice that as the Epochs go closer to 500 the loss decreases.



Now, when the training finishes it will alert us of the result of the prediction for Y=20. The result will be outputted as a datatype Tensor. Our result is 36.00015. Since NN work with probability, it will input an estimated value with decimals. Later we will need to round or treat these results.


But as you can see 36=(20*2 )- 4 .

Our neural network successfully predicted the right result!


Hope you find this useful. If you have any questions let me know in the comments.

Additional Images


Add Your Comments

Contact Us
Let us find the perfect source code for your app.

Become a PieceX Insider!