# Getting Started with TensorFlow.js

With TensorFlow.js, you can not only run machine-learned models in the browser to perform inference, you can also *train* them. In this super-simple tutorial, I’ll show you a basic ‘Hello World’ example that will teach you the scaffolding to get you up and running.

Let’s start with the simplest Web Page imaginable:

<html>

<head></head>

<body></body>

</html>

Once you have that, the first thing you’ll need to do is add a reference to TensorFlow.js, so that you can use the TensorFlow APIs. The JS file is available on a CDN for your convenience:

<html>

<head>

<!-- Load TensorFlow.js -->

<!-- Get latest version at https://github.com/tensorflow/tfjs -->

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.2"> </script>

Right now I’m using version 0.11.2, but be sure to check GitHub for the most recent version.

Now that TensorFlow.js is loaded, let’s do something interesting with it.

Consider a straight line with the formula Y=2X-1. This will give you a set of points like (-1, -3), (0, -1), (1, 1), (2, 3), (3, 5) and (4, 7). While we *know *that the formula gives us the Y value for a given X, it’s a nice exercise in training a model for a computer that is not explicitly programmed with this formula, to see if it can infer values of Y for given values of X when trained on this data.

So how would this work?

Well, first of all, we can create a super-simple neural network to do the inference. As there’s only 1 input value, and 1 output value, it can be a single node. In JavaScript, I can then create a tf.sequential, and add my layer definition to it. It can’t get any more basic than this:

const model = tf.sequential();

model.add(tf.layers.dense({units: 1, inputShape: [1]}));

To finish defining my model, I compile it, specifying my loss type and optimizer. I’ll pick the most basic loss type — the meanSquaredError, and my optimizer will be a standard stochastic gradient descent (aka ‘sgd’):

model.compile({

loss: 'meanSquaredError',

optimizer: 'sgd'

});

To *train* the model, I’ll need a tensor with my *input *(i.e. ‘X’) values, and another with my *output* (i.e. ‘Y’) values. With TensorFlow, I also need to define the *shape* of that given tensor:

const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);

const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

So, my Xs are the values -1,0,1,2,3 and 4, defined as a 6x1 tensor. My Ys are -3, -1, 1, 3, 5, 7 in the same shape. Note that the nth Y entry is the value for the nth X entry when we say that Y=2X-1.

To train the model we use the *fit* method. To this we pass the set of X and Y values, along with a number of epochs (loops through the data) in which we will train it. Note that this is asynchronous, so we should *await* the return value before proceeding, so all this code needs to be in an *async* function (more on that later):

await model.fit(xs, ys, {epochs: 500});

Once that’s done, the model is trained, so we can predict a value for a new X. So, for example, if we wanted to figure out the Y for X=10 and write it on the page in a <div>, the code would look like this:

document.getElementById('output_field').innerText =

model.predict(tf.tensor2d([10], [1, 1]));

Note that the input is a tensor, where we specify that it’s a 1x1 tensor containing the value 10.

The result is written on the page in the div, and should look something like this:

Wait, you might ask — why isn’t it 19? It’s pretty close, but it’s not 19! That’s because the algorithm has never been given the formula — it simply learns based on the data it was given. With more relevant data any ML model will give greater accuracy, but this one isn’t bad considering it only had 6 pieces of data to learn from!

For your convenience, here’s the entire code for the page, including the declaraion of all this code as an async function called ‘learnLinear’:

<html>

<head>

<!-- Load TensorFlow.js -->

<!-- Get latest version at https://github.com/tensorflow/tfjs -->

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.2">

</script>

</head>

<body>

<div id="output_field"></div>

</body>

<script>

async function learnLinear(){

const model = tf.sequential();

model.add(tf.layers.dense({units: 1, inputShape: [1]}));

model.compile({

loss: 'meanSquaredError',

optimizer: 'sgd'

});

const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);

const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

await model.fit(xs, ys, {epochs: 500});

document.getElementById('output_field').innerText =

model.predict(tf.tensor2d([10], [1, 1]));

}

learnLinear();

</script>

<html>

And that’s all it takes to create a very simple Machine Learned model with TensorFlow.js that executes in your browser. From here you have the foundation to go forward with more advanced concepts.

Have fun with it!