This repository contains a collection of samples and examples demonstrating Web Neural Network API (WebNN) usage in web applications. Web Neural Network API (WebNN) is a JavaScript API that provides a high-level interface for performing machine learning computations on neural networks in web applications. With WebNN, developers can leverage hardware acceleration to efficiently run inference tasks on various devices, including CPUs, GPUs, and dedicated AI accelerators. 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.
This repository hosts a wide range of samples and examples that showcase different use cases and functionalities of WebNN. Here's an overview of the directory structure:
- Code Editor: This is a Code Editor used for evaluating, reviewing and modifying WebNN sample codes interactively in web browser.
- Face recognition: This directory contains examples of SSD MobileNet V2 Face and Face Landmark (SimpleCNN) model implementation.
- Facial landmark detection: This directory contains examples of SSD MobileNet V2 Face and Face Landmark (SimpleCNN) model implementation.
- Image classification: This directory contains examples demonstrating image classification using pre-trained models with WebNN.
- LeNet: This example showcases the LeNet-based handwritten digits classification by WebNN API.
- NNotepad: This is a browser-based playground for experimenting with WebNN expressions without boilerplate code.
- NSNet2: This example shows how to implement the NSNet2 baseline implementation of a deep learning-based noise suppression model.
- Object detection: Samples showcasing object detection tasks using WebNN with pre-trained models.
- RNNoise: This example shows the RNNoise baseline implementation of a deep learning-based noise suppression model.
- Selfie segmentation: This example demonstrates the MediaPipe Selfie Segmentation using the TFLite Web XNNPACK delegate and WebNN delegate, built by tflite-support.
- Semantic segmentation: This directory contains examples of implementing the DeepLab V3 MobileNet V2, from TFLite models.
- Style transfer: Explore examples highlighting the artistic possibilities of WebNN by applying style-transfer techniques to images.
You will require a compatible browser that supports Web Neural Network API (WebNN) to run the samples in this repository. Currently, Chrome and Edge browsers provide support for WebNN.
To get started, follow these steps:
- Clone the repository to your local machine and navigate to it:
> git clone --recurse-submodules https://github.com/webmachinelearning/webnn-samples
> cd webnn-samples
> npm install
> npm run start
- Navigate to the desired sample directory that you want to explore.
- Read the accompanying README.md file for the sample to understand its purpose, requirements, and implementation details.
- Follow the instructions provided in the README to set up the necessary dependencies and run the sample.
- Keep in mind that WebNN currently supports the CPU backend only on Chrome or Edge browsers, and it requires enabling the experimental web platform features flag (see below). Ensure you have this flag enabled in your browser to fully experience WebNN functionality.
- Experiment with the code and explore how WebNN can enhance machine learning tasks in the browser, navigating to http://localhost:8080.
WebNN Samples is currently hosted on GitHub Pages, with model files stored on Amazon S3 and distributed via CloudFront. If you host WebNN Samples on your own GitHub Pages, you may encounter a 'failed to fetch' error due to CORS policy restrictions. To resolve this issue, please update the weightsOrigin() configuration as described in the issue 285.
To get started with WebNN on Intel AI PCs you will need:
- Window 11, version 21H2 or newer
- It's recommended to install the latest Intel® Arc™ & Iris® Xe Graphics on Windows for improved WebNN compatibility and performance
- Download and install the latest Chrome Canary or Edge Canary
- Navigate to
about://flags
in browser address bar - Search for
Enables WebNN API
and change it to "Enabled" - Exit browser
- Launch Chrome Canary or Edge Canary
At present, the image classification and object detection samples support NPU.
-
Window 11, version 24H2 or newer
-
It's recommended to install the latest Intel® Core™ Ultra NPU Driver on Windows for improved WebNN compatibility and performance
-
Google Chrome Canary:
- Download the latest redistributable Microsoft.AI.DirectML, rename the "microsoft.ai.directml.<version>.nupkg" to "microsoft.ai.directml.<version>.nupkg.zip" and extract it
- Copy
\bin\x64-win\DirectML.dll
to%LOCALAPPDATA%\Google\Chrome SxS\Application\<version>\
%LOCALAPPDATA%
meansC:\Users\<username>\AppData\Local\
- Note that Chrome Canary frequently updates automatically. When this occurs, you'll need to recopy the DirectML.dll to the new version's directory
- Launch Chrome Canary in Windows Command Line:
"%LOCALAPPDATA%\Google\Chrome SxS\Application\chrome.exe" --use-redist-dml --disable_webnn_for_npu=0
-
Microsoft Edge Canary:
- Ensure the DirectML.dll was downloaded automatically (may take several minutes):
- Launch Edge Canary
- Go to
%LOCALAPPDATA%\Microsoft\Edge SxS\User Data
, check theEdgeOnnxRuntimeDirectML\<version>\DirectML.dll
exists %LOCALAPPDATA%
meansC:\Users\<username>\AppData\Local\
- Exit Edge Canary
- Launch Edge Canary in Windows Command Line:
"%LOCALAPPDATA%\Microsoft\Edge SxS\Application\msedge.exe" --disable_webnn_for_npu=0
- Ensure the DirectML.dll was downloaded automatically (may take several minutes):
-
Notes:
- There is an intermittent issue with the Intel NPU driver that causes failure of NPU adapter creation. The
WebNN(NPU)
backend button in the samples will be disabled with message "Unable to find a capable adapter". If you encounter this issue, please relaunch your browser and try again. - The flag
disable_webnn_for_npu
is set to true by default to disable WebNN on NPU due to the aforementioned issue. To bypass this, use--disable_webnn_for_npu=0
. This flag will be removed once the issue is resolved. - Running WebNN on NPU requires a higher version of DirectML.dll than the one in the Windows system. Using the
--use-redist-dml
flag will allow Google Chrome Canary to load the downloaded DirectML.dll with a sufficiently high version.
If you encounter any issues or have feedback on the WebNN Samples, please open an issue on the repository. We appreciate your input and will strive to address any problems as quickly as possible.
You can also join our community forum for general questions and discussions about WebNN.
We welcome contributions from the community to make webnn-samples even better! If you have an idea for a new sample, an improvement to an existing one, or any other enhancement, please feel free to submit a pull request.
To learn more about Web Neural Network API (WebNN) and its capabilities, check out the following resources:
- WebNN code editor
- NNotepad
- Handwritten digits classification
- Noise suppression:
- Fast style transfer
- Semantic segmentation
- Facial Landmark Detection
- Image classification
- Object detection
We thank the entire WebNN community for their valuable contributions and feedback. Your support and enthusiasm have been instrumental in making WebNN a robust and accessible tool for machine learning in the web ecosystem.
We also want to thank the developers and researchers behind the underlying technologies that power WebNN, including the Web Neural Network API and related frameworks. Their efforts have paved the way for seamless machine-learning experiences in web browsers.
We appreciate your interest in WebNN Samples! We hope you find these examples inspiring and educational. Happy coding with Web Neural Networks!