Everything You Need To Know About Tech

Introduction to TensorFlow.js: Machine Learning in Javascript

0 126

We are pleased to introduce TensorFlow.js, an open-source library that can be used to define, train, and run machine learning models completely in the browser using Javascript and a high-level API. 

If you are a Javascript developer and new to ML (Machine Learning), TensorFlow.js is a great way to start learning. If you are an ML developer who is new to Javascript, read on to find out more about the new ML features in the browser.

In this post, we will provide a brief overview of TensorFlow.js and the resources that you can use to try it.

ML in browser

Running machine learning programs entirely on the client-side in a browser opens up new possibilities, such as interactive machine learning! If you watch the broadcast from TensorFlow Developer Summit, then during the talk about TensorFlow.js you will find a demo version where @dsmilkov and @nsthorat teach the PAC-MAN game control model using computer vision and a webcam directly in the browser. 

You can also try to do it yourself by clicking on the link below – and find the one you need in the examples folder.

Webcam machine Learning

If you want to try another game, check out the Emoji Scavenger Hunt – this time from the browser on your mobile phone.


Running ML in a browser means that from the user’s point of view there is no need to install any libraries or drivers. Just open a web page and your program is ready to run. In addition, everything is ready to work with acceleration on the GPU. 

TensorFlow.js automatically supports WebGL and will speed up your code itself if a GPU is available. Users can also open your web page from a mobile device, in which case your model can use sensor data, such as a gyroscope or accelerometer. 

Finally, all data remains on the client, which makes TensorFlow.js suitable for low-latency output, as well as for applications that maintain confidentiality.

What can you do with TensorFlow.js?

If you are developing with TensorFlow.js, here are three workflows you can consider.

  • You can import an existing, pre-trained model for output. If you have an existing TensorFlow or Keras model that you previously trained offline, you can convert it to TensorFlow.js format and upload it to your browser for output.
  • You can retrain the imported model. As in the demo version of Pac-Man above, you can use transfer training to complement an existing offline-trained model using a small amount of data collected in a browser using a method called Image Retraining. This is one way to quickly train an accurate model using a small amount of data.
  • Create a model directly in the browser. You can also use TensorFlow.js to fully define, train, and run models in a browser using Javascript and the high-level layer API. If you are familiar with Keras, the high-level API should seem familiar to you.

Let’s go a little bit

Related Posts
1 of 26

If you like, you can start directly with examples or tutorials. They show how to export a model defined in Python for output in a browser, as well as how to define and train models completely in Javascript. 

As a quick preview is a piece of code that defines a neural network for the classification of colors, as in the manual Getting Started on Here we define the model using a stack of layers.

import * as  tf  from  ' @ tensorflow / tfjs' ;
const  model  =  tf . sequential ( ) ;
model . add ( tf . layers . dense ( { inputShape : [ 4 ] ,  units : 100 } ) ) ;
model . add ( tf . layers . dense ( { units : 4 } ) ) ;
model . compile ( { loss : 'categoricalCrossentropy' ,  optimizer : 'sgd' } ) ;

The layer API used here supports all Keras layers in the examples directory (including fully connected, convolutional, long-term short-term memory, etc.). 

Then we can train our model using the same Keras-compatible API by calling the method:

await  model . fit (
  xData ,  yData ,  {
    batchSize : batchSize ,
    epochs : epochs
} ) ;

Now the model is ready for use for forecasting:

// Get measurements for a new flower to generate a prediction
// The first argument is the data, and the second is the shape.
const  inputData  =  tf . tensor2d ( [[ [ 4.8 ,  3.0 ,  1.4 ,  0.1 ] ] ,  [ 1 ,  4 ] ) ;

// Get the highest confidence prediction from our model
const  result  =  model . predict ( inputData ) ;
const  winner  =  irisClasses [ result . argMax ( ) . dataSync ( ) [ 0 ] ] ;

// Display the winner
console . log ( winner ) ;

TensorFlow.js also includes a low-level API (formerly deeplearn.js ) and support for Eager execution . You can learn more about this by watching the talk at the TensorFlow Developer Summit.


TensorFlow.js is powered by WebGL and provides a high-level API for defining models and a low-level API for linear algebra and automatic differentiation. 

TensorFlow.js supports importing TensorFlow SavedModels and Keras models.

How does TensorFlow.js relate to deeplearn.js?

Good question! TensorFlow.js, the JavaScript ecosystem of machine learning tools, is the successor to deeplearn.js, now called TensorFlow.js Core. 

TensorFlow.js also includes the Layers API, which is a higher-level library for building machine learning models using Core, as well as tools for automatically transferring TensorFlow SavedModels and Keras hdf5 models. 

For answers to other questions like these, check out the FAQ.

Where can I find out more?

To learn more about TensorFlow.js, visit the project’s homepage, read the guides, and try examples. You can also watch a speech at the TensorFlow Developer Summit in 2018 and follow TensorFlow on Twitter.

Thank you for your interest, and it’s interesting for us to see what you create with TensorFlow.js! If you want, you can follow @dsmilkov , @nsthorat and @sqcai from the TensorFlow.js team on Twitter.


This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More