-
Notifications
You must be signed in to change notification settings - Fork 8
Adding an introduction with basic overview of the API #73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
_posts/2024-05-16-introduction-to-web-neural-network-api.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| layout: post | ||
| title: 'Introduction to Web Neural Network API (WebNN)' | ||
| date: 2024-05-16 14:55:22 +0100 | ||
| author: Paul Cooper | ||
| avatar: https://avatars.githubusercontent.com/u/722868?s=200&v=4 | ||
| categories: get-started | ||
| --- | ||
|
|
||
| The Web Neural Network API (WebNN) brings accelerated machine learning capabilities directly to web applications. With WebNN, developers can harness the power of neural networks within the browser environment, enabling a wide range of AI-driven use cases without relying on external servers or plugins. | ||
|
|
||
| ### What is WebNN? | ||
|
|
||
| WebNN is a JavaScript API that provides a high-level interface for executing neural network inference tasks efficiently on various hardware accelerators, such as CPUs, GPUs, and dedicated AI chips (sometimes called NPUs or TPUs). By utilizing hardware acceleration, WebNN enables faster and more power-efficient execution of machine learning models, making it ideal for real-time applications and scenarios where latency is critical. | ||
|
|
||
| <!-- more --> | ||
|
|
||
| ### Programming Model | ||
|
|
||
| WebNN follows a simple programming model, allowing developers to perform inference tasks with minimal complexity. The API is focused on defining the operations and infrastructure necessary to execute machine learning models, rather than handling higher-level functionalities such as model loading, parsing, or management. WebNN is designed to be agnostic to model formats and leaves the responsibility of loading and parsing models to other libraries (such as ONNX.js or Tensorflow.js) or the web application itself. | ||
|
|
||
| At a high level WebNN essentially has 2 steps to run a model: | ||
|
|
||
| * Model Construction: In WebNN the first step is to construct the model using the MLGraphBuilder API. Once the model has been constructed it can be built into an executable graph. | ||
|
|
||
| * Model Execution: Once the executable graph has been constructed, data is input and the graph executes inference tasks to obtain predictions or classifications. WebNN provides methods for selecting backends (either explicitly or by characteristics) that then process the input data and return output results from the model. | ||
|
|
||
| WebNN leverages hardware accelerators to accelerate the execution of models. Since WebNN is hardware and model agnostic it can use any of the available hardware resources (whether CPU, GPU, NPU, TPU, etc), maximizing performance and minimizing latency, enabling smooth and responsive user experiences. | ||
|
|
||
| ### Sample Code | ||
|
|
||
| Let's take a look at example pseudo-code that demonstrates how to perform inference using WebNN. In this example, we will show the basic API for model construction and execution. More details of model construction are covered in other tutorials. | ||
|
|
||
| ```js | ||
| /* Create a context and MLGraphBuilder */ | ||
| const context = await navigator.ml.createContext(/* execution parameters */); | ||
| const builder = new MLGraphBuilder(context); | ||
|
|
||
| /* Construct the model */ | ||
| // WebNN supports a core set of ML operators - a full list can be found at | ||
| // https://www.w3.org/TR/webnn/#api-mlgraphbuilder | ||
|
|
||
|
|
||
| /* Build executable graph */ | ||
| const graph = await builder.build({'output': output}); | ||
|
|
||
| /* Arrange input and output buffers */ | ||
| const inputBuffer = new Float32Array(TENSOR_SIZE); | ||
| const outputBuffer = new Float32Array(TENSOR_SIZE); | ||
|
|
||
| const inputs = {'input': inputBuffer}; | ||
|
|
||
| const outputs = {'output': outputBuffer}; | ||
|
|
||
| /* Execute the compiled graph with the specified inputs. */ | ||
| const results = await context.compute(graph, inputs, outputs); | ||
|
|
||
| console.log('Output values: ' + results.outputs.output); | ||
| ``` | ||
|
|
||
| This is a basic pseudo-code example of how to use WebNN API to construct a model and execute it. In a real-world scenario, you would replace the placeholders (/* Construct the model */, /* Arrange input and output buffers */, etc.) with actual model construction, input data, and execution parameters specific to your application. | ||
|
|
||
| ### Conclusion | ||
|
|
||
| WebNN opens up exciting possibilities for integrating machine learning capabilities into web applications, enabling developers to create innovative experiences powered by AI directly in the browser. With its simple programming model and support for hardware acceleration, WebNN empowers developers to build responsive and efficient AI-driven solutions that run seamlessly on a wide range of devices. | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.