Loading python TensorFlow Layers models into JavaScript

Question

The core TensorFlow libraries provide the ability to convert a model created in Python to be saved into a JSON file describing the graph and weights to be executed in a browser environment.

In the examples you are required to load the whole TensorFlow library in the browser, which is extremely heavy. Also tree shaking is not available for this library.

My question is: how would I load just the necessary elements from TensorFlow JS into the client/browser to reduce the overall size of my bundled application?

EDIT: We are trying to reduce the over size of the bundled library.

Answer 1

The Tensorflow.js API combines four packages:

• tfjs-core : Functionality like mathematical functions and backend support
• tfjs-layers : Support of layers to create models (depends on tfjs-core )
• tfjs-data : Data handling (depends on tfjs-core )
• tfjs-converter : Support for converting models to Tensorflow.js

Depending on what tasks exactly you need to perform, it might be sufficent to only use some of the packages. That said, keep in mind that tfjs-layers and tfjs-data require tfjs-core to be imported.

Code Sample

The following lines only import the Core and Layers API:

import * as tfc from '@tensorflow/tfjs-core';
import * as tfl from '@tensorflow/tfjs-layers';

// Examples how to use the APIs
const vectr = tfc.tensor(/* .. */);
const model = tfl.sequential();
const dense = tfl.layers.dense(/* .. */);

Note that functions like tf.matMul are used by calling tfc.matMul , but some functions of the layers API (like tf.layers.dense ) are used by calling tfl.layers.dense while others (like tf.sequential ) are used by calling tfl.sequential .

Optimization

To give you an idea on the potential optimization, let's look at the numbers:

--------------------------------------
|     Package    |  Size  | Relative |
|----------------|--------|----------|
| tfjs           |    856 |     100% |
| tfjs-core      |    506 |      59% |
| tfjs-layers    |    228 |      27% |
| tfjs-data      |     52 |       6% |
| tfjs-converter |     80 |       9% |
--------------------------------------

_{Version 1.2.7, Size in KB (of the minified JS file), relative values compared to tfjs}

Using tfjs-core and tfjs-layers directly, it is possible to shrink the size by 122 KB or 14%. If you need more than that you can always try to rebuild the repository on your own, removing any unneeded functionality. Of course, this approach would mean a lot of manual work.

Tree Shaking

As you already noticed yourself, tree shaking is currently not supported, but you might want to follow the discussion for support of tree-shaking in the tfjs github repository regarding that topic.