TensorFlow In Your Browser

If you want to explore machine learning, you can now write applications that train and deploy TensorFlow in your browser using JavaScript. We know what you are thinking. That has to be slow. Surprisingly, it isn’t, since the libraries use Graphics Processing Unit (GPU) acceleration. Of course, that assumes your browser can use your GPU. There are several demos available, include one where you train a Pac Man game to respond to gestures in your webcam to control the game. If you try it and then disable accelerated graphics in your browser options, you’ll see just what a speed up you can gain from the GPU.

Getting Started

The documentation and tutorials can help you get started. In its simplest form, though, it is pretty easy to do simple things. Just to get you started, we put together something very simple: a network that learns how to estimate what ten times some number equals. It isn’t the most amazing demo, but if you learn by reading code, it is somewhere to start.

The flow is pretty simple. First, we load the library from a content delivery server:

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

As you might guess from the name, everything in TensorFlow is a tensor. We create some training data in two tensors, each with five elements and only one dimension:

// learn 10x table
 const xs = tf.tensor2d([1,2,3,4,5], [5,1]);
 const ys = tf.tensor2d([10,20,30,40,50], [5,1]);

You can probably guess the xs tensor is the inputs and the ys tensor is the expected outputs.

There are several models and methods you can use to build the network and train it. We just picked a simple linear regression:

// linear regression model
 model.add(tf.layers.dense({units: 1, inputShape: [1]}));
 // Prep for training
 model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// train -- the higher the number the more accurate you'll get (but longer run time)
 tfinterface=model.fit(xs,ys,{epochs: nr_epochs});

Promises, Promises

Since this is JavaScript, executing things in parallel is handled through “promises.” A promise is essentially a function that should be run when the data it needs as an argument becomes available.  When the input arrives, the code inside the “then” will execute. Here’s an example:

// wrapper around model predict
function predict(n) {
  return tfinterface.then( () => { return model.predict(tf.tensor2d([n],[1,1])); });

What this means is that when fitting is complete (model.fit returns a promise) the code will run the predict method to guess the result with input n. If you want to learn more about promises, Google has a good introduction along with a related discussion of the new await keyword.

The rest is pretty stock HTML forms. You can get the whole file from GitHub. Just put it somewhere and point your browser to the file. You’ll notice the results aren’t exact since it is an estimate, but the more training you do, the better they’ll get.

What’s Next?

The site has some much juicier demos to dig into if you want to get serious. We’ve had our own introduction to TensorFlow. While it isn’t JavaScript, we did enjoy this Python TensorFlow tutorial. There’s also the very recent video from the TensorFlow Dev Summit, you can watch below.

24 thoughts on “TensorFlow In Your Browser

    1. There was a machine learning library written in only 200 lines of code posted a while back. Should be pretty easy to see everything going on there, but i doubt it uses cuda or other snazzy hardware tricks. Still highly impressive imho.

      1. Google’s only mission is to turn us, users, into commodity products for marketeers by comprimizing out security, privacy and individuality. Everything attached to google is by definition a trap. Node.js, search, youtube and especially their dev programs which may be the most disgusting of them all. Using this “AI” platform means that we, the cattle, are actually proactively helping Google fine tune this tech to use against us. We should know better.

  1. From article: “Since this is JavaScript, executing things in parallel is handled through “promises.””

    It’s not exactly like that. Promises don’t allow parallel execution. They allow executing a function after some event (for example response from HTTP call, reading from database, or even execute after some specified time), and make a chain of
    asynchronous operations, but it’s not parallel processing.

    It’s more like cooperative multitasking on a single thread processor, where you can suspend your current thread and make it wait until some event like getting reply for HTTP call. In JavaScript, parallel execution (multithreading) is available with Web Workers.

    1. A further evolution of Promises is async/await syntax, where “await” keyword marks the place where execution of a function is suspended until the promise resolves. In the meantime, between suspending and resuming a function, it’s possible to execute another function, and also suspend it. Incoming triggers are queued after previous handler finishes. Of course it has the disadvantages of cooperative multitasking – if one handler takes lots of time to execute, the thread gets blocked, and if one falls into infinite loop, browser becomes unresponsive and its process needs to be killed. Happened to me several times…

    1. I’d agree that JavaScript has the worst timeline. In early days it took 1 hour to white the JavaScript, and additional 2 days to get it to work on all browsers (except IE) and a further 2 weeks to get it to run on IE.

      That’s not the case now with modern browsers. Modern JavaScript is reasonably stable across browsers and w3schools lists all the compatibility of all of JavaScript.

      Added to that is the speed of a modern PC or smartphone and that makes JavaScript a reasonably capable engine even without using a GPU.

      Heavy weight frameworks still create a performance hit so bare bones JavaScript is the go.

    2. From what I read, initially, creators of some Web browser (was it Netscape?) wanted to use a built-in scripting language similar to Lisp, but someone ordered them to make it more similar to Java, and then they named it JavaScript.

      1. That’s pretty close.

        I don’t know about any intention for a different language but JavaScript was created by Netscape and Sun Microsysytems and released with Netscape Navigator 2.0

        Microsoft then created JScript. This was in the days of the “browser wars” and cross-browser compatibility was an absolute nightmare.

        Now everything is standardized to ECMAScript and a common Document Object Module (DOM) so coding in bare metal JavaScript is easy now.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.