Get started with TensorFlow.js

TensorFlow.js is a JavaScript library for training and deploying machine learning models in the web browser and in Node.js. This tutorial shows you how to get started with TensorFlow.js by training a minimal model in the browser and using the model to make a prediction.

The example code is available on GitHub.

Prerequisites

To complete this tutorial, you need the following installed in your development environment:

Node.js (download)
Yarn (install)

Install the example

Get the source code and install dependencies:

Clone or download the tfjs-examples repository.
Change into the getting-started directory: cd tfjs-examples/getting-started.
Install dependencies: yarn install.

If you look at the package.json file, you might notice that TensorFlow.js is not a dependency. This is because the example loads TensorFlow.js from a CDN. Here's the complete HTML from index.html:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
  </head>
  <body>
    <h4>Tiny TFJS example<hr/></h4>
    <div id="micro-out-div">Training...</div>
    <script src="./index.js"> </script>
  </body>
</html>

The <script> element in the head loads the TensorFlow.js library, and the <script> element at the end of the body loads the machine learning script.

For other ways to take a dependency on TensorFlow.js, see the setup tutorial.

Run the example

Run the example and check out the results:

In the tfjs-examples/getting-started directory, run yarn watch.
Navigate to http://127.0.0.1:1234 in your browser.

You should see a page title and beneath that a number like 38.31612014770508. The exact number will vary, but it should be close to 39.

What just happened?

When index.js is loaded, it trains a tf.sequential model using $ x $ and $ y $ values that satisfy the equation $ y = 2x - 1 $.

// Create a simple model.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training. (y = 2x - 1)
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

// Train the model using the data.
await model.fit(xs, ys, {epochs: 250});

Then it predicts a $ y $ value for the unseen $ x $ value 20 and updates the DOM to display the prediction.

// Use the model to do inference on a data point the model hasn't seen.
// Should print approximately 39.
document.getElementById('micro-out-div').innerText =
    model.predict(tf.tensor2d([20], [1, 1])).dataSync();

The result of $ 2 * 20 - 1 $ is 39, so the predicted $ y $ value should be approximately 39.

What's next

This tutorial provided a minimal example of using TensorFlow.js to train a model in the browser. For a deeper introduction to training models with JavaScript, see the TensorFlow.js guide.

More ways to get started

Here are more ways to get started with TensorFlow.js and web ML.

Watch the TensorFlow.js web ML course

If you're a web developer looking for a practical introduction to web ML, check out the Google Developers video course Machine Learning for Web Developers. The course shows you how to use TensorFlow.js in your websites and applications.

Go to the web ML course

Code ML programs without dealing directly with tensors

If you want to get started with machine learning without managing optimizers or tensor manipulation, then check out the ml5.js library.

Built on top of TensorFlow.js, the ml5.js library provides access to machine learning algorithms and models in the web browser with a concise, approachable API.

Check Out ml5.js