Getting Started With TensorFlow - Js - TensorFlow - Medium

19/3/2019 Getting Started with TensorFlow.
js – TensorFlow – Medium
Getting Started with TensorFlow.js

Laurence Moroney Follow
Jun 7, 2018 · 4 min read
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 sca olding 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 rst thing you’ll need to do is add a reference to
TensorFlow.js, so that you can use the TensorFlow APIs. The JS le is
available on a CDN for your convenience:
<html>
<head>


<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.
2"> </script>
https://medium.com/tensorflow/getting-started-with-tensorflow-js-50f6783489b2 1/6
19/3/2019 Getting Started with TensorFlow.js – TensorFlow – Medium
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, rst 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 de nition 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 nish de ning 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
de ne 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, de ned 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 t 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 gure 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>


<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!

Getting Started With TensorFlow - Js - TensorFlow - Medium

Uploaded by

Getting Started With TensorFlow - Js - TensorFlow - Medium

Uploaded by

19/3/2019 Getting Started with TensorFlow.

Getting Started with TensorFlow.js

With TensorFlow.js, you can not only run machine-learned models in

Let’s start with the simplest Web Page imaginable:

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

So how would this work?

Well, rst of all, we can create a super-simple neural network to do the

const model = tf.sequential();

To nish de ning my model, I compile it, specifying my loss type and

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

So, my Xs are the values -1,0,1,2,3 and 4, de ned as a 6x1 tensor. My Ys

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

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

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

Have fun with it!

You might also like