Home

Awesome

TensorFlow.js Examples

This repository contains a set of examples implemented in TensorFlow.js.

Each example directory is standalone so the directory can be copied to another project.

Overview of Examples

<table> <tr> <th>Example name</th> <th>Demo link</th> <th>Input data type</th> <th>Task type</th> <th>Model type</th> <th>Training</th> <th>Inference</th> <th>API type</th> <th>Save-load operations</th> <tr> <td><a href="./abalone-node">abalone-node</a></td> <td></td> <td>Numeric</td> <td>Loading data from local file and training in Node.js</td> <td>Multilayer perceptron</td> <td>Node.js</td> <td>Node.js</td> <td>Layers</td> <td>Saving to filesystem and loading in Node.js</td> </tr> <tr> <td><a href="./addition-rnn">addition-rnn</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/addition-rnn/dist/index.html">🔗</a></td> <td>Text</td> <td>Sequence-to-sequence</td> <td>RNN: SimpleRNN, GRU and LSTM</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./addition-rnn-webworker">addition-rnn-webworker</a></td> <td></td> <td>Text</td> <td>Sequence-to-sequence</td> <td>RNN: SimpleRNN, GRU and LSTM</td> <td>Browser: Web Worker</td> <td>Browser: Web Worker</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./angular-predictive-prefetching">angular-predictive-prefetching</a></td> <td></td> <td>Numeric</td> <td>Multiclass predictor</td> <td>DNN</td> <td></td> <td>Browser: Service Worker</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./baseball-node">baseball-node</a></td> <td></td> <td>Numeric</td> <td>Multiclass classification</td> <td>Multilayer perceptron</td> <td>Node.js</td> <td>Node.js</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./boston-housing">boston-housing</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/boston-housing/dist/index.html">🔗</a></td> <td>Numeric</td> <td>Regression</td> <td>Multilayer perceptron</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./cart-pole">cart-pole</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/cart-pole/dist/index.html">🔗</a></td> <td></td> <td>Reinforcement learning</td> <td>Policy gradient</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td>IndexedDB</td> </tr> <tr> <td><a href="./chrome-extension">chrome-extension</a></td> <td></td> <td>Image</td> <td>(Deploying TF.js in Chrome extension)</td> <td>Convnet</td> <td></td> <td>Browser</td> <td></td> <td></td> </tr> <tr> <td><a href="./custom-layer">custom-layer</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/custom-layer/dist/index.html">🔗</a></td> <td></td> <td>(Defining a custom Layer subtype)</td> <td></td> <td></td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./data-csv">data-csv</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/data-csv/dist/index.html">🔗</a></td> <td></td> <td>Building a tf.data.Dataset from a remote CSV</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a href="./data-generator">data-generator</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/data-generator/dist/index.html">🔗</a></td> <td></td> <td>Building a tf.data.Dataset using a generator</td> <td>Regression</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./date-conversion-attention">date-conversion-attention</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/date-conversion-attention/dist/index.html">🔗</a></td> <td>Text</td> <td>Text-to-text conversion</td> <td>Attention mechanism, RNN</td> <td>Node.js</td> <td>Browser and Node.js</td> <td>Layers</td> <td>Saving to filesystem and loading in browser</td> </tr> <tr> <td><a href="./electron">electron</a></td> <td></td> <td>Image</td> <td>(Deploying TF.js in Electron-based desktop apps)</td> <td>Convnet</td> <td></td> <td>Node.js</td> <td></td> <td></td> </tr> <tr> <td><a href="./fashion-mnist-vae">fashion-mnist-vae</a></td> <td></td> <td>Image</td> <td>Generative</td> <td>Variational autoencoder (VAE)</td> <td>Node.js</td> <td>Browser</td> <td>Layers</td> <td>Export trained model from tfjs-node and load it in browser</td> </tr> <tr> <td><a href="./interactive-visualizers">interactive-visualizers</a></td> <td></td> <td>Image</td> <td>Multiclass classification, object detection, segmentation</td> <td></td> <td></td> <td>Browser</td> <td></td> <td></td> </tr> <tr> <td><a href="./iris">iris</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/iris/dist/index.html">🔗</a></td> <td>Numeric</td> <td>Multiclass classification</td> <td>Multilayer perceptron</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./iris-fitDataset">iris-fitDataset</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/iris-fitDataset/dist/index.html">🔗</a></td> <td>Numeric</td> <td>Multiclass classification</td> <td>Multilayer perceptron</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./jena-weather">jena-weather</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/jena-weather/dist/index.html">🔗</a></td> <td>Sequence</td> <td>Sequence-to-prediction</td> <td>MLP and RNNs</td> <td>Browser and Node</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./lstm-text-generation">lstm-text-generation</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/lstm-text-generation/dist/index.html">🔗</a></td> <td>Text</td> <td>Sequence prediction</td> <td>RNN: LSTM</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td>IndexedDB</td> </tr> <tr> <td><a href="./mnist">mnist</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/mnist/dist/index.html">🔗</a></td> <td>Image</td> <td>Multiclass classification</td> <td>Convolutional neural network</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./mnist-acgan">mnist-acgan</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/mnist-acgan/dist/index.html">🔗</a></td> <td>Image</td> <td>Generative Adversarial Network (GAN)</td> <td>Convolutional neural network; GAN</td> <td>Node.js</td> <td>Browser</td> <td>Layers</td> <td>Saving to filesystem from Node.js and loading it in the browser</td> </tr> <tr> <td><a href="./mnist-core">mnist-core</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/mnist-core/dist/index.html">🔗</a></td> <td>Image</td> <td>Multiclass classification</td> <td>Convolutional neural network</td> <td>Browser</td> <td>Browser</td> <td>Core (Ops)</td> <td></td> </tr> <tr> <td><a href="./mnist-node">mnist-node</a></td> <td></td> <td>Image</td> <td>Multiclass classification</td> <td>Convolutional neural network</td> <td>Node.js</td> <td>Node.js</td> <td>Layers</td> <td>Saving to filesystem</td> </tr> <tr> <td><a href="./mnist-transfer-cnn">mnist-transfer-cnn</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/mnist-transfer-cnn/dist/index.html">🔗</a></td> <td>Image</td> <td>Multiclass classification (transfer learning)</td> <td>Convolutional neural network</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td>Loading pretrained model</td> </tr> <tr> <td><a href="./mobilenet">mobilenet</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/mobilenet/dist/index.html">🔗</a></td> <td>Image</td> <td>Multiclass classification</td> <td>Convolutional neural network</td> <td></td> <td>Browser</td> <td>Layers</td> <td>Loading pretrained model</td> </tr> <tr> <td><a href="./polynomial-regression">polynomial-regression</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/polynomial-regression/dist/index.html">🔗</a></td> <td>Numeric</td> <td>Regression</td> <td>Shallow neural network</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./polynomial-regression-core">polynomial-regression-core</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/polynomial-regression-core/dist/index.html">🔗</a></td> <td>Numeric</td> <td>Regression</td> <td>Shallow neural network</td> <td>Browser</td> <td>Browser</td> <td>Core (Ops)</td> <td></td> </tr> <tr> <td><a href="./quantization">quantization</a></td> <td></td> <td>Various</td> <td>Demonstrates the effect of post-training weight quantization</td> <td>Various</td> <td>Node.js</td> <td>Node.js</td> <td>Layers</td> <td></td> </tr> <tr> <td><a href="./sentiment">sentiment</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/sentiment/dist/index.html">🔗</a></td> <td>Text</td> <td>Sequence-to-binary-prediction</td> <td>LSTM, 1D convnet</td> <td>Node.js or Python</td> <td>Browser</td> <td>Layers</td> <td>Load model from Keras and tfjs-node</td> </tr> <tr> <td><a href="./simple-object-detection">simple-object-detection</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/simple-object-detection/dist/index.html">🔗</a></td> <td>Image</td> <td>Object detection</td> <td>Convolutional neural network (transfer learning)</td> <td>Node.js</td> <td>Browser</td> <td>Layers</td> <td>Export trained model from tfjs-node and load it in browser</td> </tr> <tr> <td><a href="./snake-dqn">snake-dqn</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/snake-dqn/index.html">🔗</a></td> <td></td> <td>Reinforcement learning</td> <td>Deep Q-Network (DQN)</td> <td>Node.js</td> <td>Browser</td> <td>Layers</td> <td>Export trained model from tfjs-node and load it in browser</td> </tr> <tr> <td><a href="./translation">translation</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/translation/dist/index.html">🔗</a></td> <td>Text</td> <td>Sequence-to-sequence</td> <td>LSTM encoder and decoder</td> <td>Node.js or Python</td> <td>Browser</td> <td>Layers</td> <td>Load model converted from Keras</td> </tr> <tr> <td><a href="./tsne-mnist-canvas">tsne-mnist-canvas</a></td> <td></td> <td></td> <td>Dimension reduction and data visualization</td> <td>tSNE</td> <td>Browser</td> <td>Browser</td> <td>Core (Ops)</td> <td></td> </tr> <tr> <td><a href="./webcam-transfer-learning">webcam-transfer-learning</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/dist/index.html">🔗</a></td> <td>Image</td> <td>Multiclass classification (transfer learning)</td> <td>Convolutional neural network</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td>Loading pretrained model</td> </tr> <tr> <td><a href="./website-phishing">website-phishing</a></td> <td><a href="https://storage.googleapis.com/tfjs-examples/website-phishing/dist/index.html">🔗</a></td> <td>Numeric</td> <td>Binary classification</td> <td>Multilayer perceptron</td> <td>Browser</td> <td>Browser</td> <td>Layers</td> <td></td> </tr> </table>

Dependencies

Except for getting_started, all the examples require the following dependencies to be installed.

How to build an example

cd into the directory

If you are using yarn:

cd mnist-core
yarn
yarn watch

If you are using npm:

cd mnist-core
npm install
npm run watch

Details

The convention is that each example contains two scripts:

Contributing

If you want to contribute an example, please reach out to us on Github issues before sending us a pull request as we are trying to keep this set of examples small and highly curated.

Running Presubmit Tests

Before you send a pull request, it is a good idea to run the presubmit tests and make sure they all pass. To do that, execute the following commands in the root directory of tfjs-examples:

yarn
yarn presubmit

The yarn presubmit command executes the unit tests and lint checks of all the exapmles that contain the yarn test and/or yarn lint scripts. You may also run the tests for individual exampls by cd'ing into their respective subdirectory and executing yarn, followed by yarn test and/or yarn lint.