Getting Started with TensorFlow.js | by Venelin Valkov | Towards Data Science

TL;DR Learn about the basics of Machine Learning with TensorFlow.js — Tensors, basic visualizations and train a simple model that converts kilograms to pounds
So what is this thing TensorFlow.js?
TensorFlow.js is a library for developing and training ML models in JavaScript, and deploying in browser or on Node.js
For our purposes, TensorFlow.js will allow you to build Machine Learning models (especially Deep Neural Networks) that you can easily integrate with existing or new web apps. Think of your ReactJs, Vue, or Angular app enhanced with the power of Machine Learning models.
Run the complete source code for this tutorial right in your browser:
codesandbox.io
Tensors are the main building blocks of TensorFlow. They are n-dimensional data containers. You can think of them as multidimensional arrays in languages like PHP, JavaScript, and others. What that means is that you can use tensors as a scalar, vector, and matrix values, since they are a generalization of those.
Each Tensor contains the following properties
rank - number of dimensions
shape - size of each dimension
dtype - data type of the values
Let’s start by creating your first Tensor:
Check it’s rank:
1
That confirms that your Tensor is 1-dimensional. Let’s check the shape:
[3]
1-dimensional with 3 values. But how can you see the contents of this thing?
Tensor {kept: false, isDisposedInternal: false ...}
Not what you’ve expected, right? Tensors are custom objects and have a print()method that output their values:
Tensor    [1, 2, 3]
Of course, the values don’t have to be just numeric. You can create tensors of strings:
You can use tensor2d() to create matrices (or 2-dimensional tensors):
[2, 3]
There are some utility methods that will be handy when we start developing models. Let’s start with ones():
Tensor    [[1, 1, 1],     [1, 1, 1],     [1, 1, 1]]
You can use reshape() to change the dimensionality of a Tensor:
Tensor    [[1, 2, 3],     [4, 5, 6]]
You can use add() to do element-wise addition:
Tensor    [5, 7, 9]
and dot() to compute the dot product of two tensors:
Tensor    [[9, 12],     [9, 12]]
Finally, let’s have a look at transpose():
Tensor    [[1, 3],     [2, 4]]
You can think of the transpose as a flipped-axis version of the input Tensor.
Have a look at all arithmetic operations
tfjs-vis is a small library for in browser visualization intended for use with TensorFlow.js.
Let’s start by creating a simple bar chart. Here’s what our data looks like:
Now, let’s render the data using barchart():
Note that we provide a DOM element to the renderer as a container for our chart, which might be handy when you want to embed the charts in your apps.
Let’s have a look at histogram() and create a sample chart:
The API is pretty consistent for those 2 charts. Let’s do a scatter plot:
Have a look at the complete tfjs-vis API
Time to put what you’ve learned into practice and build your first model. To make it somewhat realistic, we’ll try to approximate the conversion of kgs to lbs, which is described by this function:
Let’s use it to prepare our data and create 2000 training examples:
We’re going to use a style of Machine Learning known as Supervised Learning. In a nutshell, we need to provide 2 arrays to our model — X is the training features (kilograms), and y is the training labels (corresponding pounds).
TensorFlow.js allows you to build layered models using sequential(). We’re going to go extremely simple: 1 layer, input size of 1, and 1 learning parameter:
and teach it to convert kilograms to pounds:
Your model needs a metric to know how well is doing. In our case that is Mean Squared Error (MSE). Once you know how to measure the error, you need something to know how to minimize it using the data. In our case, that is the Adam optimizer.
Finally, we use the data to train our model for 100 epochs (number of times our model sees the data) and request to shuffle it. Why shuffle? We don’t want our model to learn the ordering of the data, just the relationship between different examples.
After the training is complete (might take some time) you can use your model to predict what amount of pounds correspond to 10 kg:
10 kg to lbs: 22.481597900390625
Seems to be doing good, right?
Congratulation on finishing the first part of your journey to Machine Learning understanding. You learned about:
Tensors: n-dimensional data containers
tfjs-vis: visualization library integrated with TensorFlow.js
predict pounds from kilograms using a simple model
Run the complete source code for this tutorial right in your browser:
codesandbox.io
I hope that this tutorial just made you thirsty for knowledge about what is possible with Machine Learning and JavaScript. Ready for the next one?
Originally published at https://www.curiousily.com.
Build Machine Learning models (especially Deep Neural Networks) that you can easily integrate with existing or new web apps. Think of your ReactJs, Vue, or Angular app enhanced with the power of Machine Learning models:
leanpub.com
Develop a deeper understanding of Machine Learning models, tools and concepts by building them from scratch with Python