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.
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.
Here’s a quick analysis of TensorFlow.js:
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.
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.
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:
A complete tutorial for TensorFlow.js is a little outside the scope of this article, but here are some really helpful resources:
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.
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 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.
Happy creating!
Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.
LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.
LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.
Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.
The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.
For those just getting started with deploying their first application, Deno Deploy’s simplicity might be exactly what you need; no complex configuration files to wrestle with or cloud concepts to master before getting your app live.
Learn more →
