DEV Community

Cover image for Introduction to Tensorflow.js
Youdiowei Eteimorde
Youdiowei Eteimorde

Posted on

Introduction to Tensorflow.js

#webdev #machinelearning #javascript #ai

Tensorflow.js is a library that enables machine learning in web applications. It is a part of the Tensorflow ecosystem, which is a deep learning framework written in C++ and provides a Python API.

Tensorflow.js was written from scratch to take advantage of web technologies. It runs on WebGL and has an API that is similar to that of the actual Tensorflow library. It can also run on the server via Node.js. Additionally, Tensorflow has bindings for other languages such as Java, C++, and Rust.

Why tensorflow.js?

Tensorflow.js has the unique advantage of running directly on the web among all the ML libraries. Traditionally, ML models are trained and run directly on the server, and the client makes a request to the server when it is time to use the model. However, with Tensorflow.js, machine learning models can be run directly in the user's browser, eliminating the need for server requests and enabling real-time, interactive applications.

Tensorflow.js is not designed to train large models, but rather it is built for inference. Machine learning models trained in Python can be loaded into Tensorflow.js and used for inference in the user's browser.

Training machine learning models can require a large amount of computational resources. However, once a model has been trained, it can be reused multiple times for inference without requiring as much computation.

Setting up Tensorflow.js

To use Tensorflow.js we can either use it via the script tag:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

or via npm:

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

or via yarn:

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

The packages above were designed to be used in the web browser. To use Tensorflow.js on nodejs check out this package.

The Tensor class

The main class in Tensorflow.js is the Tensor. It represents the tensor data structure. The tensor data structure is immutable. Tensorflow.js contains various methods to work with and manipulate this data structure.

Creating Tensors in tensorflow.js

Tensorflow.js provides several functions to help create tensors.

tf.tensor

The tf.tensor function is a general function for creating tensors. It can create tensors of any shape and data type.

tf.tensor(1); // creating a scalar 
tf.tensor([1,2,3,4]); // creating a vector
tf.tensor([[1,2],[3,4]]); // creating a matrix
Enter fullscreen mode Exit fullscreen mode

tf.scalar

The tf.scalar is a more specialized function. Its job is to create scalars(rank 0 tensors) and they can be of any type.

tf.scalar(2)
Enter fullscreen mode Exit fullscreen mode

It's encouraged to use this rather than tf.tensor when creating scalars. It helps with code readability.

tf.tensor1d

The tf.tensor1d is used to create vectors(rank 1 tensors). Like tf.scalar it is more specialized but helps with code readability.

tf.tensor1d([1,2,3,4]); // creating a vector
Enter fullscreen mode Exit fullscreen mode

tf.tensor2d

The tf.tensor2d is used to create matrices(rank 2 tensors).

tf.tensor2d([[1,2],[3,4]]); // creating a matrix
Enter fullscreen mode Exit fullscreen mode

tf.tensor3d

The tf.tensor3d is used to create rank 3 tensors.

tf.tensor3d([[[1], [2]], [[3], [4]]]); // creating a rank 3 tensor
Enter fullscreen mode Exit fullscreen mode

Tensorflow.js has tensor creation functions up to rank 6. Check out their documentation page.

tf.Variable

The Tensor data structure is immutable but mutability is essential to solve common problems. Tensorflow.js provides the tf.Variable class which is a mutable tensor.

The tf.variable function is used to create tf.Variable objects.

const x = tf.variable(tf.tensor([1, 2, 3]));
Enter fullscreen mode Exit fullscreen mode

In other to mutate them we use the assign method of the tf.Variable class.

x.assign(tf.tensor([4, 5, 6]));
Enter fullscreen mode Exit fullscreen mode

Math operations

Basic mathematical operations like addition, subtraction, multiplication, and division can be performed on tensors.
Operators like +, -, /, and * don't work with tensors rather methods are used.

const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([5, 6, 7, 8]);

a.add(b) // tf.tensor1d([6, 8, 10, 12]) ✅
tf.add(a, b); // This also works: tf.tensor1d([6, 8, 10, 12]) ✅

a + b // This doesn't work ❌
Enter fullscreen mode Exit fullscreen mode

To perform element-wise addition between tensors, they typically need to have the same shape. However, broadcasting can be used to add together tensors of different shapes.

broadcasting

Broadcasting involves when a smaller tensor stretches to make its shape the same as the bigger tensor.

const s = tf.scalar(2);
const a = tf.tensor1d([1, 2, 3]);

s.add(a); // tf.tensor1d([3, 4, 5]);
Enter fullscreen mode Exit fullscreen mode

In the code above s has smaller shape and it stretches to fit the shape of a. The result ends up having a shape equivalent to a.

const s = tf.scalar(3);
const a = tf.tensor2d([[1, 2, 3, 4], [5, 6, 7, 8]]);

s.add(a); // tf.tensor2d([[4, 5, 6 , 7 ], [8, 9, 10, 11]]);
Enter fullscreen mode Exit fullscreen mode

The same rules of addition apply to other mathematical operations:

// substraction
const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([5, 6, 7, 8]);


b.sub(a) // tf.tensor1d([4, 4, 4, 4]) ✅
tf.sub(b, a); // This also works: tf.tensor1d([4, 4, 4, 4]) ✅

a - b // This doesn't work ❌

// substraction broadcasting
const s = tf.scalar(3);
const a = tf.tensor1d([1, 2, 3, 4]);

s.sub(a); // tf.tensor1d([2, 1, 0, -1])
Enter fullscreen mode Exit fullscreen mode 
// multiplication
const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([5, 6, 7, 8]);


b.mul(a) // tf.tensor1d([5, 12, 21, 32]) ✅
tf.mul(b, a); // This also works: tf.tensor1d([5, 12, 21, 32]) ✅

a * b // This doesn't work ❌

// multiplication broadcasting
const s = tf.scalar(3);
const a = tf.tensor1d([1, 2, 3, 4]);

s.mul(a); // tf.tensor1d([3, 6, 9, 12]);
Enter fullscreen mode Exit fullscreen mode 
// division
const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([5, 6, 7, 8]);


b.mul(a) // tf.tensor1d([5, 3, 2.3333335, 2]) ✅
tf.mul(b, a); // This also works: tf.tensor1d([5, 3, 2.3333335, 2]) ✅

a / b // This doesn't work ❌

// division broadcasting
const s = tf.scalar(3);
const a = tf.tensor1d([1, 2, 3, 4]);

s.div(a); // tf.tensor1d([3, 1.5, 1, 0.75]);
Enter fullscreen mode Exit fullscreen mode

Tensorflow.js also supports other mathematical operations like floordiv, exponent, and modulus etc.

Javascript has an in-built Math object for working with numbers. Tensorflow.js provide equivalent methods but for tensors.

Javascript Tensorflow.js
Math.abs tf.abs
Math.acos tf.acos
Math.acosh tf.acosh
Math.ceil tf.ceil
Math.cos tf.cos
Math.exp tf.exp
Math.floor tf.floor
Math.log tf.log
Math.sin tf.sin
Math.tan tf.tan

Tensorflow.js has other operations that are not present in the Math object like the relu and sigmoid.

Linear algebra

Linear algebra is a branch of mathematics that deals with the study of vectors and matrices and the transformations that can be performed on them. It is used heavily in the field of Machine Learning.Tensorflow.js has several methods for linear algebra.

The dot product

The dot product also known as the scalar product is an operation that takes two vectors and produces a scalar.
It is represented mathematically as:

a⋅b=∑i=1naibi=a1b1+a2b2+⋯+anbn\textbf{a} \cdot \textbf{b} = \sum_{i=1}^{n} {\textbf{a}_i\textbf{b}_i} = {\textbf{a}_1\textbf{b}_1} + {\textbf{a}_2\textbf{b}_2} + \cdots + {\textbf{a}_n\textbf{b}_n}

In Tensorflow.js, we have the tf.dot function for computing the dot product between two tensors.

const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([5, 6, 7, 8]);

tf.dot(a, b); // 70
Enter fullscreen mode Exit fullscreen mode

tf.Tensor objects also have a dot method to perform dot products.

a.dot(b);
Enter fullscreen mode Exit fullscreen mode

The Norm

The norm also known as the magnitude is a mathematical concept used to measure the size or length of a vector. It is expressed mathematically as:

∣x∣=x12+x22+⋯+xn2|{x}|={\sqrt {x_{1}^{2}+x_{2}^{2}+\cdots +x_{n}^{2}}}

Tensorflow.js provides the method euclideanNorm to calculate the norm of a tensor.

const x = tf.tensor1d([1, 2, 3, 4]);

x.euclideanNorm() // 5.477225303649902
Enter fullscreen mode Exit fullscreen mode

Matrix multiplication

Matrix multiplication

In linear algebra, there are several ways of performing multiplication each of them has its usage. One of them is matrix multiplication which defines how two matrices can be multiplied by each other.

In tensorflow.js, we can perform matrix multiplication using the matMul function.

const a = tf.tensor2d([[1, 2],[3, 4]]);
const b = tf.tensor2d([[2, 4, 6],[8, 10, 12]]);

a.matMul(b); // [[18, 24, 30], [38, 52, 66]]
Enter fullscreen mode Exit fullscreen mode

Transpose

Transposing a matrix is an operation that involves reshaping it by swapping its rows with its columns.

Transpose of a matrix

In tensorflow.js we have the Transpose function for performing transpose on a matrix.

const a = tf.tensor2d([[1, 2, 3], [4, 5, 6]] );
tf.transpose(a); // result: [[1, 4],[2, 5],[3, 6]]
Enter fullscreen mode Exit fullscreen mode

Statistics

Tensorflow.js has several functions that can be used to perform statistical operations. One important concept in statistics is distribution, which determines how the data in a dataset is arranged. Tensorflow.js has functions for working with different types of distributions.

Normal distribution

Normal distribution

The normal distribution is a probability distribution that models the way many natural phenomena are distributed. It is characterized by a bell-shaped curve, which indicates that the mean (average) value is more likely to occur than any other value. Tensorflow.js has the mean function for checking the mean of a tensor.

const x = tf.tensor1d([1, 2, 3, 4]);

x.mean().print();  // result: 2.5
Enter fullscreen mode Exit fullscreen mode

In addition to the mean, the concept of standard deviation is also important in statistics. It is a value that measures how spread out data points are relative to the mean.

For example, in a room full of people, the average height is more likely to occur than either very tall or very short heights. Tensorflow.js has the randomNormal function that can be used to generate random values that are normally distributed.

tf.randomNormal([2, 2]); // [[0.0635663, 1.2073363],[-1.681078, 0.1550148]]
Enter fullscreen mode Exit fullscreen mode

The code above generates a tensor with normally distributed values of shape 2 by 2.

Uniform distrubtion

In a uniform distribution, no values have a higher tendency of occurring. Rather all values are more likely to occur.
For example, flipping a coin, there's an equal chance of getting heads or tails. It is uniformly distributed, the same applies to a dice.

The randomUniform function of tensorflow.js can be used to generate random values that are uniformly distributed.

tf.randomUniform([2, 2]); // [[0.7101336, 0.6085116],[0.5631702, 0.1648723]]
Enter fullscreen mode Exit fullscreen mode

Automatic differentiation

Automatic differentiation is one of the most important features of Tensorflow.js. Differentiation is the process of finding the rate of change of a function with respect to one of its variables. The derivative of a function describes how it changes as its input variable changes over time.

Sigmoid function

For example, consider the graph above which plots two functions: the red one is the sigmoid function, while the green one is its derivative. The green function shows how the value of the sigmoid function changes over time, as its input variable changes.

Square differentiation

The graph plots the function x2x^2 in blue. We can easily calculate its derivative by using the power rule:

ddxx2=nxn−1\frac{d}{dx}x^2 = nx^n-1

Let's convert the equation above to JavaScript

// Define the function y = x^n
function powerFunction(x, n) {
  return Math.pow(x, n);
}

// Define the derivative of y = x^n using the power rule
function powerRuleDerivative(x, n) {
  return n * Math.pow(x, n-1);
}

// Test the power rule for n = 2 and x = 3
let x = 3;
let n = 2;

let y = powerFunction(x, n);
console.log(y) // 9

// calculate its derivative 
let dydx = powerRuleDerivative(x, n);
console.log(dydx) // reusult: 6
Enter fullscreen mode Exit fullscreen mode

After using the formula above we find out the derivative is 2x2x . In other to calculate the derivative we needed to use the formula above. Tensorflow.js can calculate the derivative of any function but it doesn't use formulas rather it uses automatic differentiation.

The tf.grad is used to take the derivative of any function provided it returns a tensor.


// f(x) = x ^ 2
const f = x => x.square();

// calculate the derivative of the function
const g = tf.grad(f);

const x = tf.tensor1d([3]);
g(x); // result 6
Enter fullscreen mode Exit fullscreen mode

Automatic differentiation is a key component of the backpropagation algorithm used to train neural networks. It allows for the calculation of gradients efficiently without having to manually derive them using formulas.

In this article, we got introduced to the Tensorflow.js library that brings machine learning to the web. We explored its APIs and discovered it is capable of all sorts of computations.

Tensors are great but ML practitioners rarely work with them they are a bit low level rather most ML practitioners work on a higher level. In the next article, we will build our first ML model using Tensorflow.js.

Useful resources

Top comments (0)

Read next

dhanush9952 profile image

Winter Solstice: Frontend Challenge - December Edition

Dhanush -

bugblitz98 profile image

🚀 Introducing JSON Viewer Extension 2025: The Modern Way to Visualize JSON

Bug Blitz -

kaja_uvais_a8691e947dd399 profile image

How to Become a Java Developer in 2025

Kaja Uvais -

hanzla-baig profile image

Update Front-end Dev.to Challenge

Hanzla Baig -