Learn and Play with TensorFlow.js [Part 0: Introduction and Installation]
On April 28, 2019, we, from the Artificial Intelligence Laboratory, Telkom University, held TensorFlow.js training for students. After that, we decided to share this tutorial so that anyone can try it.
To see the continuation of this tutorial, please visit:
Part 1: Linear Regression
Part 2: Simple Binary Classification
Part 3: MNIST Classification
Part 4: Application Examples:
- Simple Hand Signs Classification,
- Object Detection using Tiny YOLOv3
- Toxic Sentence Classification
- Neural Style Transfer
- Pose Estimation using Posenet
Let’s start by knowing what is TensorFlow.js
TensorFlow.js is a JavaScript library that allows you to add machine learning capabilities to any web application. With TensorFlow.js we can develop machine learning systems from low to high levels. The API can be used to build lightweight models that can be directly trained in the browser or on our Node.js server application. After that, we can use TensorFlow.js to run the trained models in JavaScript environment.
We can even use TensorFlow.js to retrain the existing machine learning model with any available client-side data from the browser. For example, we can use image data from a webcam camera on our computer.
Why JavaScript?
It is well known that to build a powerful Machine Learning implementation, one need a rather powerful computer to perform heavy computations. To train a Deep Learning application, sometimes we need a supercomputer with stacks of GPU on it. But does that mean we can not use machine learning applications if we do not have a highly capable computer? Of course we can.
The heavy computation in machine learning implementation usually only occurs in the training process, and rarely happened at the testing stage. And even if the testing itself is heavy, we can just perform the testing in a server application and deploy an API to send input to and receive the result from server. And the easiest way to build that?
Web application is the answer.
The birth of TensorFlow.js
TensorFlow.js was developed in 2011 on Google as a supporting library for developing machine learning applications / Deep Learning on Google. This library is open source in 2015 under the Apache License. In 2017, a project called DeepLearn.js appeared, which aims to enable ML / DL in JavaScript, with an easy-to-use API.
But then, there is a question arise about the speed. It is well known that JavaScript code cannot run on GPU, and training or just testing a Machine Learning model can be heavy. To overcome this problem, WebGL was introduced. WebGL is a browser interface for OpenGL that allows to execute JavaScript code on the GPU.
In March 2018, the DeepLearn.js team joined the TensorFlow Team on Google and was renamed to TensorFlow.js. And finally, on March 7, 2019, TensorFlow officially released version 1.0 of TensorFlow.js in the TF Dev Summit event.
JavaScript Environment
Even though it already contains a JavaScript name, TensorFlow.js still has to run above the Python Interpreter. And unfortunately, unlike the standard TensorFlow that has to run on Python version 3 and above, TensorFlow.js until now can only be run on top of Python 2.7. For this reason, it is strongly recommended that the Python installation be done using the Anaconda Distribution Package.
Anaconda installation can be downloaded from here
For your convenience, it is recommended to install Anaconda version 3.x, then create and download a new Python 2.7 environment in it
Creating Python Environment
After installing Anaconda, open Anaconda Prompt and create a new environment based on python version 2.7. The general syntax for creating a new environment is as follows. In this example, we will create an environment called tfjs.
(base) > conda create -name tfjs python=2.7after python 2.7 is downloaded, activate the environment
(base) > activate tfjsNode.js Installation
Node.js is a server-side software platform and network application that executes JavaScript code outside the browser. Node.js allows developers to use JavaScript to build web page content dynamically before the page is sent to the user’s web browser. To use Node.js, we must install npm as the default package manager for the run-time environment Node.js.
Download the Node.js installation at https://nodejs.org/en/
Check the installation by executing in command prompt
> node -v
> npm -vStarting a Project
Let’s start by creating a project directory called ai_tfjs. Open command prompt and execute the commands
> mkdir ai_tfjs
> cd ai_tfjsProject Initialization
Inside the directory, we now ready to initialize the package.json for the Node.js by executing
\ai_tfjs> npm init -ySince we’re going to simply try and deploy our application locally, we will use a web application bundler package called Parcel that offers fast performance with zero configuration. Install the package using npm like so
\ai_tfjs> npm install -g parcel-bundlerNext we will use Twitter Bootstrap CSS and jQuery to simplify the development. So install those as well
\ai_tfjs> npm install bootstrap
\ai_tfjs> npm install jqueryFinally, to add Tensorflow.js to our project, run the following command
\ai_tfjs> npm install @tensorflow/tfjsData Visualization Library
Sometimes, when we play with Machine Learning, data visualization is a very important tool in understanding both data and model that we’re going to build. And using JavaScript, we can choose various kinds of libraries to display data visualization, for example using Chart.js.
TensorFlow itself has a JavaScript library for visualizing data called tfjs-vis, but unfortunately this library is still under development and currently not as powerful as other libraries. Even so, the developer TensorFlow.js hopes that later this library can develop further and become increasingly easier to use along with TensorFlow.js. To find out more, let’s install the two libraries using npm
\ai_tfjs > npm install @tensorflow/tfjs-vis
\ai_tfjs > npm install chart.jsAfter all libraries are ready, we can start building web applications using TensorFlow.js. But before that, let’s get to know the basics of TensorFlow.js
TensorFlow.js: 101
Straight from its name, TensorFlow.js is part of the TensorFlow library, a Machine Learning library that is very popular and used throughout the world. Therefore, the terms and naming functions and APIs used are also derived from the main library. And ever since TensorFlow has adopted the API wrapper from the Keras library, the use of TensorFlow and TensorFlow.js has become much easier to use.
Tensor
Tensor is a main data unit in TensorFlow. Tensors contain a set of numerical values and can be in any form: one dimension or more. When we make a new Tensor, we also need to determine the shape.
An example of tensor creation is as follow
const t1 = tf.tensor([1,2,3,4,2,4,6,8]), [2,4]);the code will create a two-dimensional tensor as shown below
[[1,2,3,4],
[2,4,6,8]]The same tensor can be achieved by
const t2 = tf.tensor([[1,2,3,4],[2,4,6,8]]);All tensors in TensorFlow.js are immutable, means they cannot be change after being initialized, and therefore can only be deleted. If we do an operation that changes the tensor’s value, TensorFlow.js will always make a new tensor with the resulting value created and returned. That’s why it is very important to remember and maintain every tensor that have been created. If a tensor is no longer used, we can delete the tensor using .dispose() function
Model and Layer
Models and Layers are the two most important building blocks in Machine Learning and Deep Learning. Each model is built from one or more layers. TensorFlow.js supports various types of layers that are popularly used in the latest Deep Learning Learning. For the use of different Machine Learning cases, we need to use and combine various types of layers.
For now it’s enough to understand that the layer is used to build neural networks (models) that can be trained using a set of training data and then used further to predict new values based on the information being trained.
There is a couple way to build an Artificial Neural Networks at TensorFlow.js. But here we are only focusing on the easiest and most common way. The construction of the model begins with creating a Sequential() object. Then we can add several layers of layers according to our needs in them. We’ll see that later
For now, let’s stat building our first web application.
