# TensorFlow.js demos

## Demos

See examples and live demos built with TensorFlow.js.
![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_holobooth_flutter_demo.gif) [Holobooth](https://holobooth.flutter.dev/) Transport yourself to a tropical beach, outer space, and elsewhere with the power of web ML.
[Explore demo](https://holobooth.flutter.dev/) [View code](https://github.com/flutter/holobooth) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_lip_sync_demo.jpg) [LipSync by YouTube](https://lipsync.withyoutube.com/) See how well you synchronize to the lyrics of the popular hit "Dance Monkey." This in-browser experience uses the Facemesh model for estimating key points around the lips to score lip-syncing accuracy.
[Explore demo](https://lipsync.withyoutube.com/) [View code](https://github.com/google/lipsync) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_emoji.jpg) [Emoji Scavenger Hunt](https://emojiscavengerhunt.withgoogle.com/) Use your phone's camera to identify emojis in the real world. Can you find all the emojis before time expires?
[Explore demo](https://emojiscavengerhunt.withgoogle.com/) [View code](https://github.com/google/emoji-scavenger-hunt) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_webcam.jpg) [Webcam Controller](https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/dist/index.html) Play Pac-Man using images trained in your browser.
[Explore demo](https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/dist/index.html) [View code](https://github.com/tensorflow/tfjs-examples/tree/master/webcam-transfer-learning) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_teachable.jpg) [Teachable Machine](https://teachablemachine.withgoogle.com/) No coding required! Teach a machine to recognize images and play sounds.
[Explore demo](https://teachablemachine.withgoogle.com/) [View code](https://github.com/googlecreativelab/teachable-machine) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_move_mirror_demo.jpg) [Move Mirror](https://experiments.withgoogle.com/move-mirror) Explore pictures in a fun new way, just by moving around.
[Explore demo](https://experiments.withgoogle.com/move-mirror) [View code](https://github.com/tensorflow/tfjs-models/tree/master/posenet) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_piano.jpg) [Performance RNN](https://magenta.tensorflow.org/demos/performance_rnn/index.html#2%7C2,0,1,0,1,1,0,1,0,1,0,1%7C1,1,1,1,1,1,1,1,1,1,1,1%7C1,1,1,1,1,1,1,1,1,1,1,1%7Cfalse) Enjoy a real-time piano performance by a neural network.
[Explore demo](https://magenta.tensorflow.org/demos/performance_rnn/index.html#2%7C2,0,1,0,1,1,0,1,0,1,0,1%7C1,1,1,1,1,1,1,1,1,1,1,1%7C1,1,1,1,1,1,1,1,1,1,1,1%7Cfalse) [View code](https://github.com/tensorflow/magenta-demos/tree/master/performance_rnn) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_pitch.jpg) [Node.js Pitch Prediction](https://github.com/tensorflow/tfjs-examples/tree/master/baseball-node) Train a server-side model to classify baseball pitch types using Node.js.
[View code](https://github.com/tensorflow/tfjs-examples/tree/master/baseball-node) ![](https://www.tensorflow.org/static/site-assets/images/marketing/cards/tile_visualize_model_training_demo.png) [Visualize Model Training](https://storage.googleapis.com/tfjs-vis/mnist/dist/index.html) See how to visualize in-browser training and model behaviour and training using tfjs-vis.
[Explore demo](https://storage.googleapis.com/tfjs-vis/mnist/dist/index.html) [View code](https://github.com/tensorflow/tfjs-vis/)

## Community demos

Get started with official templates and explore top picks from the community for inspiration.
[Glitch](https://glitch.com/@TensorFlowJS) Check out community Glitches and make your own TensorFlow.js-powered projects.
[Explore Glitch](https://glitch.com/@TensorFlowJS) [CodePen](https://codepen.io/topic/tensorflow/templates) Fork boilerplate templates and check out working examples from the community.
[Explore CodePen](https://codepen.io/topic/tensorflow/templates) [GitHub Community Projects](https://github.com/tensorflow/tfjs/blob/master/GALLERY.md) See what the community has created and submitted to the TensorFlow.js gallery page.
[Explore GitHub](https://github.com/tensorflow/tfjs/blob/master/GALLERY.md) [#MadewithTFJS on Twitter](https://twitter.com/hashtag/MadeWithTFJS?src=hashtag_click&f=live) Learn the latest on new projects created with TensorFlow.js and share your own by using the hashtag!
[Explore Twitter](https://twitter.com/hashtag/MadeWithTFJS?src=hashtag_click&f=live) Browser Node.js Python Browser Node.js Image Numeric Sequence Text Convolutional neural network Long short-term memory Multilayer perceptron Recurrent neural network Shallow neural network Attention mechanism Deep Q-Network Gated recurrent unit Generative adversarial network Policy gradient t-Distributed stochastic neighbor embedding Variational autoencoder Core (Ops) Layers Has demo

| Example | Input data type | Task type | Model type | Training environment | Inference environment | API type | Demo |
|---|---|---|---|---|---|---|---|
| [abalone-node](https://github.com/tensorflow/tfjs-examples/blob/master/abalone-node) | Numeric | Loading data from local file and training in Node.js | Multilayer perceptron | Node.js | Node.js | Layers | No demo |
| [addition-rnn](https://github.com/tensorflow/tfjs-examples/blob/master/addition-rnn) | Text | Sequence-to-sequence | RNN: SimpleRNN, GRU and LSTM | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/addition-rnn/dist/index.html) |
| [addition-rnn-webworker](https://github.com/tensorflow/tfjs-examples/blob/master/addition-rnn-webworker) | Text | Sequence-to-sequence | RNN: SimpleRNN, GRU and LSTM | Browser: Web Worker | Browser: Web Worker | Layers | No demo |
| [angular-predictive-prefetching](https://github.com/tensorflow/tfjs-examples/tree/master/angular-predictive-prefetching) | Numeric | Multiclass predictor | Deep Neural Network | Browser: Service Worker | Browser: Service Worker | Layers | No demo |
| [baseball-node](https://github.com/tensorflow/tfjs-examples/blob/master/baseball-node) | Numeric | Multiclass classification | Multilayer perceptron | Node.js | Node.js | Layers | No demo |
| [boston-housing](https://github.com/tensorflow/tfjs-examples/blob/master/boston-housing) | Numeric | Regression | Multilayer perceptron | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/boston-housing/dist/index.html) |
| [cart-pole](https://github.com/tensorflow/tfjs-examples/blob/master/cart-pole) |   | Reinforcement learning | Policy gradient | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/cart-pole/dist/index.html) |
| [chrome-extension](https://github.com/tensorflow/tfjs-examples/blob/master/chrome-extension) | Image | (Deploying TF.js in Chrome extension) | Convolutional neural network |   | Browser |   | No demo |
| [custom-layer](https://github.com/tensorflow/tfjs-examples/blob/master/custom-layer) |   | (Defining a custom Layer subtype) |   |   | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/custom-layer/dist/index.html) |
| [data-csv](https://github.com/tensorflow/tfjs-examples/blob/master/data-csv) |   | Building a tf.data.Dataset from a remote CSV |   |   |   |   | [View Demo](https://storage.googleapis.com/tfjs-examples/data-csv/dist/index.html) |
| [data-generator](https://github.com/tensorflow/tfjs-examples/blob/master/data-generator) |   | Building a tf.data.Dataset using a generator | Regression | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/data-generator/dist/index.html) |
| [date-conversion-attention](https://github.com/tensorflow/tfjs-examples/blob/master/date-conversion-attention) | Text | Text-to-text conversion | Attention mechanism, RNN | Node.js | Browser and Node.js | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/date-conversion-attention/dist/index.html) |
| [electron](https://github.com/tensorflow/tfjs-examples/blob/master/electron) | Image | (Deploying TF.js in Electron-based desktop apps) | Convolutional neural network |   | Node.js |   | No demo |
| [fashion-mnist-vae](https://github.com/tensorflow/tfjs-examples/blob/master/fashion-mnist-vae) | Image | Generative | Variational autoencoder | Node.js | Browser | Layers | No demo |
| [interactive-visualizers](https://github.com/tensorflow/tfjs-examples/tree/master/interactive-visualizers) | Image | Multiclass classification, object detection, segmentation |   |   | Browser |   | No demo |
| [iris](https://github.com/tensorflow/tfjs-examples/blob/master/iris) | Numeric | Multiclass classification | Multilayer perceptron | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/iris/dist/index.html) |
| [iris-fitDataset](https://github.com/tensorflow/tfjs-examples/blob/master/iris-fitDataset) | Sequence-to-sequence | Multiclass classification | Multilayer perceptron | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/iris-fitDataset/dist/index.html) |
| [jena-weather](https://github.com/tensorflow/tfjs-examples/blob/master/jena-weather) | Text | Sequence-to-prediction | MLP and RNNs | Browser and Node.js | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/jena-weather/dist/index.html) |
| [lstm-text-generation](https://github.com/tensorflow/tfjs-examples/blob/master/lstm-text-generation) | Image | Sequence-to-prediction | RNN: LSTM | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/lstm-text-generation/dist/index.html) |
| [mnist](https://github.com/tensorflow/tfjs-examples/blob/master/mnist) | Image | Multiclass classification | Convolutional neural network | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/mnist/dist/index.html) |
| [mnist-acgan](https://github.com/tensorflow/tfjs-examples/blob/master/mnist-acgan) | Image | Generative adversarial network | Convolutional neural network; GAN | Node.js | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/mnist-acgan/dist/index.html) |
| [mnist-core](https://github.com/tensorflow/tfjs-examples/blob/master/mnist-core) | Image | Multiclass classification | Convolutional neural network | Browser | Browser | Core (Ops) | [View Demo](https://storage.googleapis.com/tfjs-examples/mnist-core/dist/index.html) |
| [mnist-node](https://github.com/tensorflow/tfjs-examples/blob/master/mnist-node) | Image | Multiclass classification | Convolutional neural network | Node.js | Node.js | Layers | No demo |
| [mnist-transfer-cnn](https://github.com/tensorflow/tfjs-examples/blob/master/mnist-transfer-cnn) | Image | Multiclass classification (transfer learning) | Convolutional neural network | Browser | Browser | Layers | No demo |
| [mobilenet](https://github.com/tensorflow/tfjs-examples/blob/master/mobilenet) | Image | Multiclass classification | Convolutional neural network |   | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/mobilenet/dist/index.html) |
| [polynomial-regression](https://github.com/tensorflow/tfjs-examples/blob/master/polynomial-regression) | Numeric | Regression | Shallow neural network | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/polynomial-regression/dist/index.html) |
| [polynomial-regression-core](https://github.com/tensorflow/tfjs-examples/blob/master/polynomial-regression-core) | Numeric | Regression | Shallow neural network | Browser | Browser | Core (Ops) | [View Demo](https://storage.googleapis.com/tfjs-examples/polynomial-regression-core/dist/index.html) |
| [quantization](https://github.com/tensorflow/tfjs-examples/blob/master/quantization) | Various | Demonstrates the effect of post-training weight quantization | Various | Node.js | Node.js | Layers | No demo |
| [sentiment](https://github.com/tensorflow/tfjs-examples/blob/master/sentiment) | Text | Sequence-to-binary-prediction | LSTM, 1D ConvNet | Node.js | Node.js or Python | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/sentiment/dist/index.html) |
| [simple-object-detection](https://github.com/tensorflow/tfjs-examples/blob/master/simple-object-detection) | Image | Object detection | Convolutional neural network (transfer learning) | Node.js | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/simple-object-detection/dist/index.html) |
| [snake-dqn](https://github.com/tensorflow/tfjs-examples/blob/master/snake-dqn) |   | Object detection | Deep Q-Network | Node.js | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/snake-dqn/index.html) |
| [translation](https://github.com/tensorflow/tfjs-examples/blob/master/translation) | Text | Sequence-to-sequence | LSTM encoder and decoder | Node.js or Python | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/translation/dist/index.html) |
| [tsne-mnist-canvas](https://github.com/tensorflow/tfjs-examples/blob/master/tsne-mnist-canvas) |   | Dimension reduction and data visualization | tSNE | Browser | Browser | Core (Ops) | No demo |
| [webcam-transfer-learning](https://github.com/tensorflow/tfjs-examples/blob/master/webcam-transfer-learning) | Image | Multiclass classification (transfer learning) | Convolutional neural network | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/dist/index.html) |
| [website-phishing](https://github.com/tensorflow/tfjs-examples/blob/master/website-phishing) | Numeric | Binary classification | Multilayer perceptron | Browser | Browser | Layers | [View Demo](https://storage.googleapis.com/tfjs-examples/website-phishing/dist/index.html) |

[Learn how to use and contribute](https://github.com/tensorflow/tfjs-examples#dependencies)

## Get started with TensorFlow.js

[Explore tutorials](https://www.tensorflow.org/js/tutorials)