WebNN The WebNN API is a JavaScript API that enables web applications to perform machine learning inference with high efficiency It allows developers to leverage hardware acceleration for neural network computations directly within web browsers WebNN has been in development since 2021 with the First Public Working Draft published on June 22 2021 The current version is now almost stable with very few changes The official documentation and details for the API are online free and open source https www w3 org TR webnn What if you don t have WebNN You can still run Machine Learning projects in your browser but you ll have to depend on external libraries load them on the fly ome popular web libraries for machine learning that you can use in a browser TensorFlow js ml5 js Brain js Synaptic js ConvNetJS The following will take you through getting started with WebNN See https xbdev net internet webnn for more tutorials news projects and books Start simple do we have the WebNN API on this browser console log WebNN API navigator ml if navigator ml console log YAHHHH You have WebNN else console log Oh no NO NO NO You do not have WebNN it must be disabled go into your browser flags e g chrome flags firefox flags and enable it Let s do some reconneson see what API methods are avilable within the navigator ml handle for let f in navigator ml console log f f Not much available navigator ml the only method is createContext we can t get access to anything until we have created a context Get the WebNN context const context await navigator ml createContext console log context context Important createContext returns a promse so it does not happen imediately it has to do some setup so we add the await to make sure nothing continues until it s done Print out what we have now for let c in context console log c A really juicy thing to note about the createContext is it takes arguments so later on it means you can link it to other features API The default if you don t pass anything is to that manages the resources and facilitates the compilation and execution of the neural network graph using internal settings However you can specify the context use webgpu this means you can have the WebNN work seamlessly with the WebGPU API which is great so you can use shared GPU memory for both graphics simulations and machine learning WebGPU offsets compute shaders so you can perform complex operations computations on the data without any graphics purely GPU compute power which you can interface with the WebNN API WebNN minimal working example for XOR document body style minHeight 600px Check if WebNN API is available if navigator ml console error WebNN API is not available in this browser return console log Yes YES We have WebNN starting XOR demo note dataType used to be called type note shape used to be called dimensions note context dispatch used to be context compute Define the context and graph builder const context await navigator ml createContext const builder new MLGraphBuilder context Define input tensors A and B and the output tensor C const inputShape 2 2 2x2 matrix const inputType float32 Create input placeholders const A builder input A dataType inputType shape inputShape const B builder input B dataType inputType shape inputShape Perform addition const C builder add A B Build the graph const graph await builder build C Create reusable tensors for inputs and output const inputTensorA inputTensorB outputTensorC await Promise all context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape readable true const inputA new Float32Array 1 0 2 0 3 0 4 0 A 1 2 3 4 const inputB new Float32Array 0 5 1 5 2 5 3 5 B 0 5 1 5 2 5 3 5 Initialize inputs context writeTensor inputTensorA inputA A 1 2 3 4 context writeTensor inputTensorB inputB B 0 5 1 5 2 5 3 5 Execute the graph const inputs A inputTensorA B inputTensorB const outputs C outputTensorC context dispatch graph inputs outputs Read and print the result const result await context readTensor outputTensorC console log Output Tensor C new Float32Array result Expected 1 5 3 5 5 5 7 5 We have the data but append a visualization on to the end to draw the input vs output const plotData async inputA inputB output let ps await fetch https cdn plot ly plotly 2 1 0 min js let pt await ps text var script document createElement script script src https cdn plot ly plotly 2 1 0 min js script innerHTML pt document head appendChild script let div document createElement div document body appendChild div div style width 400px div style height 400px div id plot Prepare data for visualization const indices A 0 A 1 A 2 A 3 Plotly data const traceA x indices y Array from inputA type bar name Input A const traceB x indices y Array from inputB type bar name Input B const traceC x indices y Array from output type bar name Output A B const layout title Inputs and Output of WebNN Computation xaxis title Element Index yaxis title Value barmode group Plot using Plotly Plotly newPlot plot traceA traceB traceC layout plotData inputA inputB result WebNN minimal working example for XOR document body style minHeight 600px Check if WebNN API is available if navigator ml console error WebNN API is not available in this browser return console log Yes YES We have WebNN starting XOR demo note dataType used to be called type note shape used to be called dimensions note context dispatch used to be context compute Define the context and graph builder const context await navigator ml createContext const builder new MLGraphBuilder context Define input tensors A and B and the output tensor C const inputShape 2 2 2x2 matrix const inputType float32 Create input placeholders const A builder input A dataType inputType shape inputShape const B builder input B dataType inputType shape inputShape Perform addition const C builder add A B Build the graph const graph await builder build C Create reusable tensors for inputs and output const inputTensorA inputTensorB outputTensorC await Promise all context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape readable true const inputA new Float32Array 1 0 2 0 3 0 4 0 A 1 2 3 4 const inputB new Float32Array 0 5 1 5 2 5 3 5 B 0 5 1 5 2 5 3 5 Initialize inputs context writeTensor inputTensorA inputA A 1 2 3 4 context writeTensor inputTensorB inputB B 0 5 1 5 2 5 3 5 Execute the graph const inputs A inputTensorA B inputTensorB const outputs C outputTensorC context dispatch graph inputs outputs Read and print the result const result await context readTensor outputTensorC const result0 new Float32Array result console log Output Tensor C result0 Expected 1 5 3 5 5 5 7 5 We have the data but append a visualization on to the end to draw the input vs output as a table let div document createElement div document body appendChild div div innerHTML style table border collapse collapse width 50 margin 20px auto font family Arial sans serif th td border 1px solid ddd text align center padding 8px th background color f4f4f4 caption font weight bold margin bottom 10px style table id resultTable caption WebNN Computation Inputs and Output caption thead tr th Index th th Input A th th Input B th th Output A B th tr thead tbody tbody table const populateTable inputA inputB output const tbody document createElement table document body appendChild tbody const tbody document querySelector resultTable tbody Clear existing rows tbody innerHTML Populate the table rows for let i 0 i inputA length i const row document createElement tr Index cell const indexCell document createElement td indexCell textContent i row appendChild indexCell Input A cell const inputACell document createElement td inputACell textContent inputA i row appendChild inputACell Input B cell const inputBCell document createElement td inputBCell textContent inputB i row appendChild inputBCell Output cell const outputCell document createElement td outputCell textContent output i row appendChild outputCell tbody appendChild row populateTable inputA inputB result0 Memory and Arrays A useful note about memory and arrays with WebNN In JS you ve got numbers and numbers are numbers no way of differentiating the different types with the number type So JS has the additional Float32Array and Int32Array types so we can work with real numbers When we move over to WebNN we need to use tensor arrays which are created with context createTensor This is similar to working with WebGPU you need to create memory buffers on the GPU and you ll have WebGPU buffers which you create with device createBuffer Once you ve created the tensor array you can copy data into and out of it However you have to remember the training and operations are done using the tensor arrays html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title xbdev net Neural Network Sine Wave Example title script src https cdn jsdelivr net npm chart js script style canvas max width 90 margin 20px auto display block style head body h2 style text align center Neural Network Sine Wave Example h2 canvas id sineWaveChart canvas script async function neuralNetworkSineWave if navigator ml console error WebNN API is not available in this browser return const context await navigator ml createContext const builder new MLGraphBuilder context 1 Generate Sine Wave Input const numPoints 100 const x Array from length numPoints _ i i 10 const sineInput new Float32Array x map v Math sin v 2 Define Neural Network Layers const inputShape numPoints 1 const input builder input input dataType float32 shape inputShape const weights builder constant dataType float32 shape 1 1 new Float32Array 0 8 Weight for scaling const bias builder constant dataType float32 shape 1 new Float32Array 0 2 Bias Linear transformation y x weight bias const output builder add builder matmul input weights bias 3 Build and Initialize Graph const graph await builder build output const inputTensor await context createTensor dataType float32 shape inputShape writable true const outputTensor await context createTensor dataType float32 shape inputShape readable true 4 Write Input and Execute the Graph context writeTensor inputTensor sineInput const inputs input inputTensor const outputs output outputTensor context dispatch graph inputs outputs 5 Read the Output const outputBuffer await context readTensor outputTensor const outputArray new Float32Array outputBuffer 6 Plot the Input vs Output plotSineWave x sineInput outputArray function plotSineWave x input output const ctx document getElementById sineWaveChart getContext 2d new Chart ctx type line data labels x datasets label Sine Wave Input data Array from input borderColor blue fill false tension 0 1 label Neural Network Output data Array from output borderColor red fill false tension 0 1 options responsive true plugins legend position top scales x title display true text X Time y title display true text Y Value Run the example neuralNetworkSineWave script body html
ensorC await Promise all context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape readable true const inputA new Float32Array 1 0 2 0 3 0 4 0 A 1 2 3 4 const inputB new Float32Array 0 5 1 5 2 5 3 5 B 0 5 1 5 2 5 3 5 Initialize inputs context writeTensor inputTensorA inputA A 1 2 3 4 context writeTensor inputTensorB inputB B 0 5 1 5 2 5 3 5 Execute the graph const inputs A inputTensorA B inputTensorB const outputs C outputTensorC context dispatch graph inputs outputs Read and print the result const result await context readTensor outputTensorC const result0 new Float32Array result console log Output Tensor C result0 Expected 1 5 3 5 5 5 7 5 We have the data but append a visualization on to the end to draw the input vs output as a table let div document createElement div document body appendChild div div innerHTML style table border collapse collapse width 50 margin 20px auto font family Arial sans serif th td border 1px solid ddd text align center padding 8px th background color f4f4f4 caption font weight bold margin bottom 10px style table id resultTable caption WebNN Computation Inputs and Output caption thead tr th Index th th Input A th th Input B th th Output A B th tr thead tbody tbody table const populateTable inputA inputB output const tbody document createElement table document body appendChild tbody const tbody document querySelector resultTable tbody Clear existing rows tbody innerHTML Populate the table rows for let i 0 i inputA length i const row document createElement tr Index cell const indexCell document createElement td indexCell textContent i row appendChild indexCell Input A cell const inputACell document createElement td inputACell textContent inputA i row appendChild inputACell Input B cell const inputBCell document createElement td inputBCell textContent inputB i row appendChild inputBCell Output cell const outputCell document createElement td outputCell textContent output i row appendChild outputCell tbody appendChild row populateTable inputA inputB result0 Memory and Arrays A useful note about memory and arrays with WebNN In JS you ve got numbers and numbers are numbers no way of differentiating the different types with the number type So JS has the additional Float32Array and Int32Array types so we can work with real numbers When we move over to WebNN we need to use tensor arrays which are created with context createTensor This is similar to working with WebGPU you need to create memory buffers on the GPU and you ll have WebGPU buffers which you create with device createBuffer Once you ve created the tensor array you can copy data into and out of it However you have to remember the training and operations are done using the tensor arrays html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title xbdev net Neural Network Sine Wave Example title script src https cdn jsdelivr net npm chart js script style canvas max width 90 margin 20px auto display block style head body h2 style text align center Neural Network Sine Wave Example h2 canvas id sineWaveChart canvas script async function neuralNetworkSineWave if navigator ml console error WebNN API is not available in this browser return const context await navigator ml createContext const builder new MLGraphBuilder context 1 Generate Sine Wave Input const numPoints 100 const x Array from length numPoints _ i i 10 const sineInput new Float32Array x map v Math sin v 2 Define Neural Network Layers const inputShape numPoints 1 const input builder input input dataType float32 shape inputShape const weights builder constant dataType float32 shape 1 1 new Float32Array 0 8 Weight for scaling const bias builder constant dataType float32 shape 1 new Float32Array 0 2 Bias Linear transformation y x weight bias const output builder add builder matmul input weights bias 3 Build and Initialize Graph const graph await builder build output const inputTensor await context createTensor dataType float32 shape inputShape writable true const outputTensor await context createTensor dataType float32 shape inputShape readable true 4 Write Input and Execute the Graph context writeTensor inputTensor sineInput const inputs input inputTensor const outputs output outputTensor context dispatch graph inputs outputs 5 Read the Output const outputBuffer await context readTensor outputTensor const outputArray new Float32Array outputBuffer 6 Plot the Input vs Output plotSineWave x sineInput outputArray function plotSineWave x input output const ctx document getElementById sineWaveChart getContext 2d new Chart ctx type line data labels x datasets label Sine Wave Input data Array from input borderColor blue fill false tension 0 1 label Neural Network Output data Array from output borderColor red fill false tension 0 1 options responsive true plugins legend position top scales x title display true text X Time y title display true text Y Value Run the example neuralNetworkSineWave script body html