WebNN API Samples

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.

Repository Structure

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:

• 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.
• 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.

Requirements

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.

Getting Started

To get started, follow these steps:

1. 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

2. Navigate to the desired sample directory that you want to explore.
3. Read the accompanying README.md file for the sample to understand its purpose, requirements, and implementation details.
4. Follow the instructions provided in the README to set up the necessary dependencies and run the sample.
5. 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.
6. Experiment with the code and explore how WebNN can enhance machine learning tasks in the browser, navigating to http://localhost:8080.

WebNN Installation Guides

WebNN requires a compatible browser to run, and Windows 11 v21H2 (DML 1.6.0) or higher for GPU. Try the latest Google Chrome* Canary or Microsoft Edge Canary, which requires enabling WebNN functionality in the settings.

1. Download the latest Google Chrome Canary or Microsoft Edge Canary browser.
2. To enable WebNN, in your browser address bar, enter chrome://flags, and then press Enter. An Experiments page opens.
3. In the Search flags box, enter webnn. Enables WebNN API appears.
4. In the drop-down menu, select Enabled.
5. Relaunch your browser.

Support and Feedback

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.

Contributing

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.

Resources

WebNN Resources

To learn more about Web Neural Network API (WebNN) and its capabilities, check out the following resources:

• Web Neural Network API Specification
• WebNN Polyfill
• WebNN Community Group

WebNN API Samples

• WebNN code editor
• Handwritten digits classification
• Noise suppression:
  • NSNet2
  • RNNoise
• Fast style transfer
• Semantic segmentation
• Facial Landmark Detection
• Image classification
• Object detection

Acknowledgements

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!