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 models.
- 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. That CloudFront distribution only answers requests referred from webmachinelearning.github.io, which is what used to make a forked deployment fail to fetch its weights (issue 285).
weightsOrigin() now handles this: a deployment on any other github.io host reads the weights from https://webmachinelearning.github.io/webnn-samples/test-data/, which the canonical deployment publishes with Access-Control-Allow-Origin: *. Forking, enabling GitHub Pages, and pushing is enough — there is nothing to configure, and the fork does not publish the ~1 GB test-data submodule itself. If you would rather serve the weights yourself, check out the submodule, let the deploy workflow publish it, and change weightsOrigin() to return '..'.
Every sample loads its weights through buildConstantByNpy() in
common/utils.js, which now transparently caches them in
Cross-Origin Storage (COS) when
the browser supports it. COS is a hash-addressed store that browsers share
between origins, so a model downloaded by one site can be reused by another
instead of being fetched again.
This is a progressive enhancement, and it is invisible when it doesn't apply. A browser without COS, a model that isn't in the manifest, a manifest that has drifted from the weights being served, an exhausted quota, or a user who declines the storage prompt all fall back to exactly the network fetches the samples did before.
COS is keyed by the hash of a single file, but a model here is a directory of
per-tensor .npy files — face_landmark_nhwc/weights/ alone is 20 of them and
resnet50v2_nchw/weights/ is 259. So the unit that gets content-addressed is
the directory, not the tensor: common/cos_bundle.js
packs a directory into one deterministic bundle, and
common/weight_bundles.js records the hash of each.
On a cache miss the browser fetches the individual files as usual, packs them,
checks the result against that hash, and stores it. Every later load — including
from a different origin — gets the whole model back in a single read.
The manifest is generated from the test-data submodule, and has to be
regenerated whenever that submodule moves:
git submodule update --init test-data
npm run generate-weight-bundlesStoring a bundle under a hash that other origins share is only safe if the bytes really are what the manifest claims, so a mismatch is never stored: the sample logs a warning telling you to re-run the command above, and carries on with the weights it fetched.
Please visit WebNN Installation Guides to get started with WebNN on Intel AI PCs.
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!