DEV Community

Cover image for TensorFlow.js tutorial: Get started with the ML library
Ryan Thelin for Educative

Posted on • Originally published at

TensorFlow.js tutorial: Get started with the ML library

TensorFlow is one of the most popular tools for machine learning and deep learning. It's used by many big tech companies such as Twitter, Uber, and Google. TensorFlow.js is a JavaScript library used for training and deploying machine learning models in the browser. TensorFlow.js was designed to provide the same features and functionalities as traditional TensorFlow, but for the JavaScript ecosystem.

Today, we're going to dive deeper into TensorFlow and discuss its benefits, features, models, and more. We'll finish the article with a walkthrough of the Layers API, which is one of the two ways to create a machine learning model with TensorFlow.js. Let's get started!

We’ll cover:

Get hands-on with machine learning

This learning path will help you master important ML skills and techniques.

Become a Machine Learning Engineer

What is TensorFlow?

TensorFlow is an open-source machine learning platform. It was created in 2015 by the deep learning artificial intelligence research team at Google. TensorFlow has an extensive environment that includes many different tools, libraries, and user resources.

TensorFlow uses machine learning and deep learning algorithms. It uses Python for an accessible front-end API for building apps within the framework and then executes those apps in C++. With TensorFlow, we can train and run deep neural networks for many different purposes, such as image classification, natural language processing, and more.

TensorFlow is known to have an intuitive and easy-to-learn set of APIs. Their goal is to make it easy for you to learn and implement machine learning, deep learning, and scientific computing. In 2019, they released TensorFlow 2.0, which enhanced the platform and made it easier to work with and more efficient. One of their big changes was using the Keras API for model training.

With TensorFlow, we can create dataflow graphs. Each node we see in the graph represents a mathematical operation, and each edge between the nodes is called a tensor. A tensor is a multi-dimensional array.

TensorFlow has many benefits, such as:

  • Portability: TensorFlow allows us to train and deploy our models easily, no matter what language or platform we use.

  • Powerful: With TensorFlow, we can create complex topologies using features like the Keras Functional API and the Model Subclassing API.

  • Debugging: We can use eager execution for quick and intuitive debugging.

  • Community: TensorFlow has a large and active community.

  • Abstraction: TensorFlow has multiple levels of abstraction so we can pick the right one for our needs.

What is TensorFlow.js?

TensorFlow.js (TFJS) is an open-source machine learning library that we can run anywhere that we run JavaScript. It supports WebGL, which is the browser interface to OpenGL. OpenGL is an API used for rendering 2D and 3D vector graphics. The goal of TensorFlow.js was to recreate the experience of traditional TensorFlow, but for the JavaScript ecosystem.

TFJS allows JavaScript code to be executed on a GPU. It allows us to build deep neural networks that we can easily integrate into new or existing web applications and is heavily based on the Keras API.

We can use TensorFlow.js in the following platforms:

  • Client-side in the web browser using JavaScript

  • Server-side and with IoT tools using Node.js

  • Desktop and web apps using Electron

  • Native mobile apps using React Native

TensorFlow.js models

TensorFlow.js provides pre-trained, out-of-the-box machine learning models that we can use in our projects. Some of these trained models and use cases include:

  • Image classification

  • Object detection

  • Body segmentation

  • Speech command recognition

  • Simple face detection

  • Transfer learning

  • And much more

With these models, JavaScript developers have built a lot of really cool demos, such as:

  • LipSync by YouTube: This demo uses the Facemesh model to score your lip-syncing accuracy.

  • Emoji Scavenger Hunt: In this demo, you use your phone's camera to find emojis in the real world.

  • Webcam Controller: In this demo, you play Pac-Man using images trained in your browser.

If you want to check out the code for any of these existing models, you can visit the tensorflow/tfjs-models GitHub repository to dive deeper! To check out the code for the demos, you can visit tensorflow/tfjs-examples on GitHub.

Keep the learning going.

Learn fundamental machine learning techniques without scrubbing through videos or documentation. Educative’s text-based learning paths are easy to skim and feature live coding environments, making learning quick and efficient.

Become a Machine Learning Engineer

Installing TensorFlow.js

The two most common ways to install TensorFlow.js in your browser include:

  • Installation with npm

  • Installation with script tags

If we want to install using npm, we can use npm cli or yarn.

npm cli installation:

npm install @tensorflow/tfjs
Enter fullscreen mode Exit fullscreen mode

yarn installation:

yarn add @tensorflow/tfjs
Enter fullscreen mode Exit fullscreen mode

If we want to install using script tags, we can add the following tag to our main HTML file:

<script src=""></script>
Enter fullscreen mode Exit fullscreen mode

Creating a ML model with the Layers API

In TensorFlow.js, there are two ways to create a machine learning model. We can either use the higher-level Layers API to build a model using layers, or we can use the Core API with lower-level operations. Today, we're going to take a closer look at the Layers API.

With the Layers API, we can either create a sequential model or a functional model. The sequential model is the most common type of model. We can create one by passing a list of layers to the sequential() function using const. Let's take a look:

const model = tf.sequential({

indent layers: [

double indent tf.layers.dense({inputShape: [692], units: 35, activation: 'relu'}),

double indent tf.layers.dense({units: 15, activation: 'softmax'}),

indent ]

Enter fullscreen mode Exit fullscreen mode

Note: When providing the inputShape, leave out the batch size. As an example, let's say we plan to give our model tensors of shape [X, 692], where X is any batch size. We would specify our inputShape as [692] when making our model.

Wrapping up and next steps

Congrats on taking your first steps with TensorFlow.js! It's a great tool to add to your machine learning workflow. With TensorFlow, it's easy to train and deploy machine learning and [deep learning models in the browser. Machine learning is a vast field, and there's still so much more to learn. Some recommended concepts to cover next include:

  • Image processing with datasets

  • Building advanced data pipelines with TensorFlow

  • Analyzing and manipulating data in Pandas and Numpy

To get started learning these concepts and much more, check out Educative's learning path Become a Machine Learning Engineer. In this hands-on path, you'll learn the essential ML techniques to stand out from the competition. By the end, you'll have job-ready skills in data pipeline creation, model deployment, and interference. The path even has a chapter dedicated to deep learning with TensorFlow.

Happy learning!

Continue reading about machine learning

Top comments (0)