The web has transformed from the world’s most widely used document platform to its most widely used application platform. In the past few years, we have seen tremendous growth in the field of AI. Web as a platform is making great progress, allowing developers to ship some excellent experiences leveraging AI advancements. Today, we have devices with great processing power and browsers capable of leveraging them to the full extent.
Tech giants have invested heavily in making it easier for developers to ship AI features with their web apps. Today, we have many libraries to perform complex AI tasks inside the browser. In this article, we will compare three major libraries that allow us to perform image recognition inside the browser.
Before we dive in, let’s go over the basics of TensorFlow.js, ONNX.js, and WebDNN (if you’re already familiar with these libraries, feel free to scroll to the next section).
Backed by Google, TensorFlow.js allows users to develop machine learning models in JavaScript and use ML directly in the browser or Node.js. It enables developers to train and execute models in the browser and to retrain the existing model via transfer learning using their data. The recent acquisition of Keras.js has already brought some significant improvements to TensorFlow and is poised to enhance the library’s capabilities further.
The Open Neural Network Exchange (ONNX) is an open standard for representing machine learning models. ONNX is developed and supported by a community of partners that includes AWS, Facebook OpenSource, Microsoft, AMD, IBM, and Intel AI. ONNX.js uses a combination of web worker and web assembly to achieve extraordinary CPU performance.
Deep neural networks show great promise when it comes to getting accurate results. Contrary to libraries like TensorFlow, MIL WebDNN provides an efficient architecture for deep learning applications such as image recognition and language modeling using convolutional and recurrent neural networks. This framework optimizes the trained DNN model to compress the model data and accelerate its execution. It executes with novel JavaScript APIs such as WebAssembly and WebGPU to achieve zero-overhead execution.
To evaluate the performance of all three libraries, we developed a react app that uses Squeezenet model for image classification. Let’s take a look at the results.
All three libraries support multiple backends but use CPU as a fallback for older browsers. Besides having WebAssembly and WebWorker as backends, ONNX.js and WebDNN also treat native JavaScript as a different backend. We gave our red wine to all three libraries and saw their judgement.
Ahen it comes to CPU inference, as shown below, TensorFlow.js leads with a magnificent speed of 1501ms, followed by ONNX.js at 2195ms. Both WebDNN and ONNX.js have other WASM backends that can be considered CPU backends as well since they don’t use GPU.
WASM has emerged as one of the best performance boosters for web apps, and it is now available for use with all the major browsers. WASM enables developers to deliver performant experiences on devices without GPU. The image below shows how the libraries judged red wine using WASM.
ONNX.js and WebDNN both scored high here; figures such as 135ms (ONNX.js) and 328ms (WebDNN) aren’t too far from GPU performance. ONNX’s speed is due to its wise use of the web worker to offload many calculations from the main thread.
WebGL is based on OpenGL. It provides developers with a great API to perform complex calculations in an optimized way. All of these libraries use WebGL as a backend to provide boosted results.
As shown above, ONNX.js takes lead here with 48ms, compared to TensorFlow’s 69ms. WebDNN isn’t really in this race; they may be preparing for WebGL2 or perhaps focusing more on WebMetal.
Note: These results were obtained using Safari on a MacBook Pro (2018), 2.2GHz 6-Core Intel Core i7, 16GB 2400MHz DDR4, Intel UHD Graphics 630 1536MB.
There are four backends available in modern browsers:
All three libraries support both CPU and WebGL backends. WebDNN takes a lead and allows you to leverage the WebMetal experimental feature. ONNX.js, meanwhile, smartly combines WASM and WebWorker to make CPU inferencing more efficient.
| Library/Browser | CPU | WebAssembly | WebGL | WebMetal |
| TensorFlow.js | ✔ | ✔ | ||
| ONNX.js | ✔ | ✔[+ Worker] | ✔ | |
| WebDNN | ✔ | ✔ | ✔ | ✔ |
Supporting all of the major browsers across different operating systems is a major challenge when handling heavy computational tasks. The chart below compares browser support for these libraries.
| Chrome | Firefox | Safari | Edge | iE | |
| TensorFlow.js | ✔ | ✔ | ✔ | ✔ | |
| ONNX.js | ✔ | ✔ | ✔ | ✔ | .. |
| WebDNN | ✔ | ✔ | ✔ + WebGPU | ✔ | ✔ |
Popularity and adoption is also an important parameter. The chart below shows the download trend for each of the three major libraries over a six-month period.
(Source: npm trends)
As you can see, TensorFlow.js is far ahead in the race for adoption compared to other ML libraries available today. However, ONNX.js and WebDNN are ahead in performance, indicating a promising future for both.
TensorFlow, ONNX and WebDNN all have their own advantages, and any one can serve as a strong foundation for your next AI-based web app. We found that ONNX.js the most promising library when it comes to performance and TensorFlow.js has the highest adoption rate. WebDNN, meanwhile, is focusing on leveraging modern hardware and, as a result, has made significant improvements recently.
In addition to the three major libraries we compared in this post, you can also check out the following libraries to perform tasks other than image recognition in browsers:
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
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
React Hooks and SolidJS Signals solve reactivity differently. Learn how each manages state and updates, and when to choose one approach over the other.
Discover how the Chakra UI MCP server integrates AI into your editor, reducing context switching and accelerating development by fetching real-time documentation, component data, and code insights directly in-app.
fetch callSkip the LangChain.js overhead: How to build a Retrieval-Augmented Generation (RAG) AI agent from scratch using just the native `fetch()` API.
Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.
