What is TensorFlow.js?
TensorFlow.js is a JavaScript library developed by Google for training and using machine learning (ML) models in the browser. It’s a companion library to TensorFlow, a popular ML library for Python. Read on to learn about its features, its future, and how it can help you.
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.
If you would like to learn more about machine learning or artificial intelligence, read this article or the machine learning Wikipedia entry.
The cool stuff about TensorFlow.js
Here’s a quick analysis of TensorFlow.js:
Speed
TensorFlow.js is hardware-accelerated because it uses WebGL (a JavaScript graphics API), so it has surprisingly good performance.
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.
Use cases
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.
The creation of TensorFlow.js means that you can create and run AI models in a static HTML document. Yes, you heard that right: you can use AI without setting up a server or even a database. As long as the user’s browser supports JavaScript (and preferably WebGL) you can train and use ML models, all client-side.
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:
Tutorials
- 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.
Resources
- 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.
TensorFlow.js development
With the use of machine learning constantly increasing — and with JavaScript development becoming ever more popular — TensorFlow.js seems like it will only increase in popularity in the near future, so it will probably get new features and updates often.
According to TensorFlow, a Web Assembly backend is in development as well, which should further improve performance.
Conclusion
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.
Happy creating!
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool 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.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Top comments (1)
Thanks. Great starting point for learning tensorflow.js