WebNN: Unleashing AI in the Browser
What is WebNN?
Web Neural Network API (WebNN) is a JavaScript API that empowers web developers to perform machine learning computations on neural networks directly within web applications. It simplifies the integration of machine learning models into web apps, opening up new possibilities for interactive experiences and intelligent applications right in the browser.
WebNN is primarily designed for inference tasks rather than training. It provides an abstraction layer for efficient neural network inference acceleration in web applications. The Web Neural Network API (WebNN) is a web-friendly, hardware-agnostic abstraction layer for neural network inference acceleration. It allows web applications to efficiently run machine learning computations on various devices, including CPUs, GPUs, and dedicated AI accelerators1. Developers can leverage WebNN to perform inference tasks in web applications, benefiting from reduced latency, enhanced privacy, and GPU acceleration. If you’re interested in constructing and executing computational graphs of neural networks in the browser, WebNN provides a high-level interface for these tasks. As of now, WebNN is available in Edge and Chrome browsers.
With emerging ML innovations in both software and hardware ecosystem, one of the main challenges for the web is to bridge this software and hardware development and bring together a solution that scales across hardware platforms and works with any framework for web-based machine learning experiences. We propose the WebNN API as an abstraction for neural networks in the web browsers.
As illustrated in the architecture diagram of the figure above, web browsers may implement the WebNN API using native machine learning API available in the operating system. This architecture allows JavaScript frameworks to tap into cutting-edge machine learning innovations in the operating system and the hardware platform underneath it without being tied to platform-specific capabilities, bridging the gap between software and hardware through a hardware-agnostic abstraction layer.
The following code sample illustrates a simple usage of this API.
Use Cases
WebNN offers several use cases for web applications. Here are some common scenarios where WebNN can be beneficial:
Face Recognition: Face Landmark (SimpleCNN) with WebNN.
Facial Landmark Detection: Use WebNN to detect facial landmarks, which can be useful for applications like augmented reality filters or emotion analysis.
Image Classification: Leverage WebNN for image classification tasks. You can demonstrate this using pre-trained models and the WebNN API.
Object Detection: Perform object detection in web applications by utilizing WebNN with pre-trained models.
Noise Suppression: Implement noise suppression models (e.g., RNNoise) using WebNN for audio processing,
Selfie Segmentation: Explore MediaPipe Selfie Segmentation using TFLite Web XNNPACK delegate and WebNN delegate for real-time background removal in selfies.
Semantic Segmentation: Use WebNN to implement semantic segmentation tasks, such as identifying object boundaries in images.
Style Transfer: Apply artistic style-transfer techniques to images using WebNN.
Remember that WebNN simplifies neural network inference in the browser, making it more accessible for web developers.
Target hardware
Web applications and frameworks can target typical computing devices on popular operating systems that people use in their daily lives. Initial prototypes demonstrate respectable performance on:
Smartphones e.g. Google Pixel 3 or similar
Laptops e.g. 13″ MacBook Pro 2015 or similar
The WebNN API is not tied to specific platforms and is implementable by existing major platform APIs, such as:
Android Neural Networks API
Windows DirectML API
macOS/iOS ML Compute API
Depending on the underlying hardware capabilities, these platform APIs may make use of CPU parallelism, general-purpose GPU, or dedicated hardware accelerators for machine learning. The WebNN API provides performance adaptation options but remains hardware agnostic.
When running on GPUs, WebNN currently supports the following models:
Stable Diffusion Turbo
Stable Diffusion 1.5
Whisper-base
MobileNetv2
Segment Anything
ResNet
EfficientNet
SqueezeNet
WebNN also works with custom models as long as operator support is sufficient. Check status of operators here.
Advantages of WebNN:
WebNN API provides the following benefits:
Performance Optimizations – By utilizing DirectML, WebNN helps to enable web apps and frameworks to take advantage of the best available hardware and software optimizations for each platform and device, without requiring complex and platform-specific code.
Low Latency – In-browser inference helps enable novel use cases with local media sources, such as real-time video analysis, face detection, and speech recognition, without the need to send data to remote servers and wait for responses.
Privacy Preservation – User data stays on-device and preserves user-privacy, as web apps and frameworks do not need to upload sensitive or personal information to cloud services for processing.
High Availability – No reliance on the network after initial asset caching for offline case, as web apps and frameworks can run neural network models locally even when the internet connection is unavailable or unreliable.
Low Server Cost – Computing on client devices means no servers needed, which helps web apps to reduce the operational and maintenance costs of running AI/ML services in the cloud.
Opportunities and Future:
Edge AI: WebNN enables AI-powered web apps without relying on cloud services.
Interactive Experiences: Real-time interactions, AR filters, and personalized content.
Privacy-First AI: WebNN promotes privacy by keeping data local.
Standardization: Wider adoption and improved APIs.
Installation Guide
To get started with WebNN, follow these steps:
Browser Compatibility:
WebNN requires a compatible browser. Download the Microsoft Edge Dev channel version or later.
To enable WebNN, in your browser address bar, enter about://flags, and then press Enter. An Experiments page opens
In the Search flags box, enter webnn. Enables WebNN API appears
In the drop-down menu, select Enabled
Relaunch your browser
GitHub Repository:
Clone the WebNN Developer Preview repository to your local machine.
Navigate to the repository and explore the provided samples and examples.
The WebNN API is an emerging web standard that allows web apps and frameworks to accelerate deep neural networks with GPUs, CPUs, or purpose-built AI accelerators such as NPUs. As we look to the future, it’s clear that WebNN is set to play a pivotal role in shaping the next generation of web development. Its promise of seamless AI integration, exceptional performance, and broad industry support makes it an exciting development to watch. Stay tuned as we continue to follow the evolution of WebNN and its impact on the digital world.
In summary, WebNN bridges the gap between AI and the web, making intelligent applications accessible to everyone. As it evolves, we can expect even more exciting developments in the intersection of AI and web technologies.
Remember, the future of AI is right in your browser! :robot_face::globe_with_meridians:
For more details, explore the WebNN Developer Preview website.
Additional Links & references:
WebNN Developer Preview (microsoft.github.io)
WebNN tutorial | Microsoft Learn
WebNN | Web Machine Learning
What is WebNN?
Web Neural Network API (WebNN) is a JavaScript API that empowers web developers to perform machine learning computations on neural networks directly within web applications. It simplifies the integration of machine learning models into web apps, opening up new possibilities for interactive experiences and intelligent applications right in the browser.
WebNN is primarily designed for inference tasks rather than training. It provides an abstraction layer for efficient neural network inference acceleration in web applications. The Web Neural Network API (WebNN) is a web-friendly, hardware-agnostic abstraction layer for neural network inference acceleration. It allows web applications to efficiently run machine learning computations on various devices, including CPUs, GPUs, and dedicated AI accelerators1. Developers can leverage WebNN to perform inference tasks in web applications, benefiting from reduced latency, enhanced privacy, and GPU acceleration. If you’re interested in constructing and executing computational graphs of neural networks in the browser, WebNN provides a high-level interface for these tasks. As of now, WebNN is available in Edge and Chrome browsers.
With emerging ML innovations in both software and hardware ecosystem, one of the main challenges for the web is to bridge this software and hardware development and bring together a solution that scales across hardware platforms and works with any framework for web-based machine learning experiences. We propose the WebNN API as an abstraction for neural networks in the web browsers.
As illustrated in the architecture diagram of the figure above, web browsers may implement the WebNN API using native machine learning API available in the operating system. This architecture allows JavaScript frameworks to tap into cutting-edge machine learning innovations in the operating system and the hardware platform underneath it without being tied to platform-specific capabilities, bridging the gap between software and hardware through a hardware-agnostic abstraction layer.
The following code sample illustrates a simple usage of this API.
Use Cases
WebNN offers several use cases for web applications. Here are some common scenarios where WebNN can be beneficial:
Face Recognition: Face Landmark (SimpleCNN) with WebNN.
Facial Landmark Detection: Use WebNN to detect facial landmarks, which can be useful for applications like augmented reality filters or emotion analysis.
Image Classification: Leverage WebNN for image classification tasks. You can demonstrate this using pre-trained models and the WebNN API.
Object Detection: Perform object detection in web applications by utilizing WebNN with pre-trained models.
Noise Suppression: Implement noise suppression models (e.g., RNNoise) using WebNN for audio processing,
Selfie Segmentation: Explore MediaPipe Selfie Segmentation using TFLite Web XNNPACK delegate and WebNN delegate for real-time background removal in selfies.
Semantic Segmentation: Use WebNN to implement semantic segmentation tasks, such as identifying object boundaries in images.
Style Transfer: Apply artistic style-transfer techniques to images using WebNN.
Remember that WebNN simplifies neural network inference in the browser, making it more accessible for web developers.
Target hardware
Web applications and frameworks can target typical computing devices on popular operating systems that people use in their daily lives. Initial prototypes demonstrate respectable performance on:
Smartphones e.g. Google Pixel 3 or similar
Laptops e.g. 13″ MacBook Pro 2015 or similar
The WebNN API is not tied to specific platforms and is implementable by existing major platform APIs, such as:
Android Neural Networks API
Windows DirectML API
macOS/iOS ML Compute API
Depending on the underlying hardware capabilities, these platform APIs may make use of CPU parallelism, general-purpose GPU, or dedicated hardware accelerators for machine learning. The WebNN API provides performance adaptation options but remains hardware agnostic.
When running on GPUs, WebNN currently supports the following models:
Stable Diffusion Turbo
Stable Diffusion 1.5
Whisper-base
MobileNetv2
Segment Anything
ResNet
EfficientNet
SqueezeNet
WebNN also works with custom models as long as operator support is sufficient. Check status of operators here.
Advantages of WebNN:
WebNN API provides the following benefits:
Performance Optimizations – By utilizing DirectML, WebNN helps to enable web apps and frameworks to take advantage of the best available hardware and software optimizations for each platform and device, without requiring complex and platform-specific code.
Low Latency – In-browser inference helps enable novel use cases with local media sources, such as real-time video analysis, face detection, and speech recognition, without the need to send data to remote servers and wait for responses.
Privacy Preservation – User data stays on-device and preserves user-privacy, as web apps and frameworks do not need to upload sensitive or personal information to cloud services for processing.
High Availability – No reliance on the network after initial asset caching for offline case, as web apps and frameworks can run neural network models locally even when the internet connection is unavailable or unreliable.
Low Server Cost – Computing on client devices means no servers needed, which helps web apps to reduce the operational and maintenance costs of running AI/ML services in the cloud.
Opportunities and Future:
Edge AI: WebNN enables AI-powered web apps without relying on cloud services.
Interactive Experiences: Real-time interactions, AR filters, and personalized content.
Privacy-First AI: WebNN promotes privacy by keeping data local.
Standardization: Wider adoption and improved APIs.
Installation Guide
To get started with WebNN, follow these steps:
Browser Compatibility:
WebNN requires a compatible browser. Download the Microsoft Edge Dev channel version or later.
To enable WebNN, in your browser address bar, enter about://flags, and then press Enter. An Experiments page opens
In the Search flags box, enter webnn. Enables WebNN API appears
In the drop-down menu, select Enabled
Relaunch your browser
GitHub Repository:
Clone the WebNN Developer Preview repository to your local machine.
Navigate to the repository and explore the provided samples and examples.
The WebNN API is an emerging web standard that allows web apps and frameworks to accelerate deep neural networks with GPUs, CPUs, or purpose-built AI accelerators such as NPUs. As we look to the future, it’s clear that WebNN is set to play a pivotal role in shaping the next generation of web development. Its promise of seamless AI integration, exceptional performance, and broad industry support makes it an exciting development to watch. Stay tuned as we continue to follow the evolution of WebNN and its impact on the digital world.
In summary, WebNN bridges the gap between AI and the web, making intelligent applications accessible to everyone. As it evolves, we can expect even more exciting developments in the intersection of AI and web technologies.
Remember, the future of AI is right in your browser! :robot_face::globe_with_meridians:
For more details, explore the WebNN Developer Preview website.
Additional Links & references:
WebNN Developer Preview (microsoft.github.io)
WebNN tutorial | Microsoft Learn
WebNN | Web Machine Learning
