6月 07, 2018 —
Posted by Laurence Moroney
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></bo…
<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.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.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.<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.
6月 07, 2018
—
Posted by Laurence Moroney
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></bo…