What is TensorFlow.js?
What’s machine learning?
Machine learning (often abbreviated to ML) is a field of artificial intelligence loosely defined as the study of programs and algorithms that allow computers to perform tasks without specific instructions.
A fairly typical “supervised learning” ML program works by creating a “model,” similar to a mathematical model, with inputs and outputs. It then accepts a batch of training data with inputs and actual outputs, and “trains” itself by tweaking parameters of the model in order to minimize the amount of error of the model. In other words, the program will change the model to try to make its output match the desired, “actual” output.
The cool stuff about TensorFlow.js
Here’s a quick analysis of TensorFlow.js:
A Node.js version of TensorFlow, tfjs-node, also exists and offers improved performance over the browser version.
Load existing models
One of my favorite features of TensorFlow.js is that it allows you to load pretrained models. That means you can use libraries like this one and include image classification and pose detection on your website without the need to train the model yourself.
TensorFlow.js also allows you to load models you’ve trained in the Python version of TensorFlow. That means you can write a model and train it using Python, then save it to a location available on the web and load it in your JS. This technique can significantly improve performance because you don’t have to train the model in the browser.
More and more, businesses are using machine learning to improve interactions with users. AI programs handle everything from self-driving cars to matchmaking in video games, chatbots like Siri and Alexa, and suggesting content for users. In the past, however, machine learning has been handled on back-end servers.
Here are some uses of ML (not all examples use TensorFlow.js) to fill your mind with possibilities:
- Create abstract art: Though this example is less “useful” for the real world (unless you want to become an art dealer), this is one of my favorite examples. Check out this page and this page for some beautiful and mesmerizing examples.
- Generate realistic images: thispersondoesnotexist.com recently made the news for using a generative adversarial network to generate images of completely new people. This website explains how a neural network developed by Google “finds” objects in unrelated images.
- Play games: Having AI players in video games isn’t a new idea, and there are already examples in TensorFlow.js. This project uses TensorFlow.js to automate the Chrome Dinosaur game.
- Recommend content: Content recommendation through AI is fairly popular and used by most media platforms. With TensorFlow.js, content recommendation can be handled on the client side!
Get started with TensorFlow.js
A complete tutorial for TensorFlow.js is a little outside the scope of this article, but here are some really helpful resources:
- A Gentle Introduction to TensorFlow.js: Helpful article that takes you through the basics of TensorFlow.js and has great examples.
- Official TensorFlow.js Tutorials: These official tutorials on the TensorFlow.js homepage include recognizing handwritten digits and creating a model that estimates the mpg of a car based on its horsepower.
- ml5.js: ml5 is a high-level JS library that uses TensorFlow.js behind the scenes and aims to make machine learning easier for beginners. The website has tutorials, lessons, and examples including image classification, text-generation, and a drawings generator.
- Emoji Scavenger Hunt: This is an interactive, AR-like game built with TensorFlow.js where you try to find emojis using your phone’s webcam.
- Tic-Tac-Too: This is an AI tic-tac-toe game that I made with TensorFlow.js using image classification techniques.
- tfjs-vis: A self-described “set of utilities for in-browser visualization with TensorFlow.js”
The future of TensorFlow.js
TensorFlow.js with progressive web apps
As PWAs become more popular, we can expect to see more and more integrations with TensorFlow.js and on-device storage. Since TensorFlow.js allows you to save models, you could create a model that trains itself on each user to provide a personalized experience, and even works offline.
According to TensorFlow, a WebAssembly backend is in development as well, which should further improve performance.
Now that you’ve learned a little about TensorFlow.js, go make something with it! You’ll be surprised at what you can create after only a little while. If you’re stuck, look at the documentation and the many examples on GitHub.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.