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
// 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. voxnulla says:

Isn’t there a less Google afflicted project out there? We should not use their crap, it is poison.

1. TGT says:

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.

2. Steven Dufresne says:

There are many neural network libraries out there. We gave an overview of a bunch of them in this article about a year ago https://hackaday.com/2017/04/24/neural-networks-youve-got-it-so-easy/. A few new ones have come along but not much has changed. Caffe is now caffe2 and PyTorch is no longer beta and is one of the most popular. There’s also Deeplearning4j for Java and Scala.

3. Joel says:

Serious question for the uninitiated (i.e. me) why is it poison?

1. Voxnulla says:

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. Patito says:

2. Ostracus says:

Only concern one should have is do GPU using libraries have security in mind?

1. TGT says:

Good question. This is pretty neat, but be careful giving a browser access to so many features.

2. Internet says:

Other concern is latency.

3. SQ2KTN says:

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. SQ2KTN says:

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. Ren says:

Promises, promises, promises…

4. Of all the possible languages we could have been using on the Web, we ended up with Javascript. Worst possible timeline.

1. Someone with a time machine and a poor sense of humor is trolling us all….

2. RÖB says:

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.

3. SQ2KTN says:

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. RÖB says:

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.

5. Using tensorflow in the browser is something we have not thought about before!

6. ggddd says:

where Ruby in TFlow?
Ruby is object oriented, ewerything is object. (Python no)
And the proces of instalation is very easy

1. SQ2KTN says:

Is “everything is an object” actually an advantage compared to other programming languages?

1. Ostracus says:

As a form of complexity-management, it has it’s uses.

2. ggdtthhj says:

look a Ruby length string:
string.size()
and look in python ;-) and stop beliving in object into python

1. Hugo R. says:

“asdf”.__len__()
Looks pretty much like an object to me.

7. ejonesss says:

could this be used to mine monero on coinhive?

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