DOCTYPE html html lang en head meta charset UTF 8 title xbdev net WebNN Conv2D Example title style canvas border 1px solid black margin 10px style head body canvas id inputCanvas width 256 height 256 canvas canvas id outputCanvas width 256 height 256 canvas script async function loadImage url canvas const image new Image image src url return new Promise resolve reject image onload const ctx canvas getContext 2d ctx drawImage image 0 0 canvas width canvas height resolve ctx getImageData 0 0 canvas width canvas height image onerror reject new Error Failed to load image async function conv2d inputImageData const height inputImageData height const width inputImageData width Convert RGBA image data to grayscale and normalize to 0 1 const inputTensorData new Float32Array height width for let i 0 i inputImageData data length i 4 inputTensorData i 4 inputImageData data i 255 Use red channel for grayscale Set up WebNN context and builder const context await navigator ml createContext const builder new MLGraphBuilder context Define input and convolution filter const input builder input input dataType float32 shape 1 height width 1 const filter builder constant dataType float32 shape 3 3 1 1 new Float32Array 9 fill 1 9 Simple average filter Perform convolution const conv builder conv2d input filter padding 1 1 1 1 Add padding to maintain original size strides 1 1 dilations 1 1 groups 1 Explicitly set groups to 1 to ensure compatibility inputLayout nhwc filterLayout hwio const graph await builder build output conv const inputShape 1 height width 1 const inputType float32 Create reusable tensors for inputs and outputs const inputTensor outputTensor await Promise all context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape readable true Write input data into the tensor await context writeTensor inputTensor inputTensorData Execute the graph const inputs input inputTensor const outputs output outputTensor await context dispatch graph inputs outputs Read output data const outputTensorData new Float32Array height width await context readTensor outputTensor outputTensorData return outputTensorData async function displayOutput outputTensor canvas const width canvas width const height canvas height Prepare the output image data const outputImageData canvas getContext 2d createImageData width height for let i 0 i outputTensor length i const value Math min 255 Math max 0 outputTensor i 255 Clamp value between 0 and 255 outputImageData data i 4 value Red channel outputImageData data i 4 1 value Green channel outputImageData data i 4 2 value Blue channel outputImageData data i 4 3 255 Alpha channel Draw the output to the canvas canvas getContext 2d putImageData outputImageData 0 0 async function main try const inputCanvas document getElementById inputCanvas const outputCanvas document getElementById outputCanvas Load image and get input image data const inputImageData await loadImage https webgpulab xbdev net var images test256 png inputCanvas Perform convolution and get the output tensor const outputTensor await conv2d inputImageData Display the output tensor on the output canvas await displayOutput outputTensor outputCanvas catch error console error Error error main script body html
e reusable tensors for inputs and outputs const inputTensor outputTensor await Promise all context createTensor dataType inputType shape inputShape writable true context createTensor dataType inputType shape inputShape readable true Write input data into the tensor await context writeTensor inputTensor inputTensorData Execute the graph const inputs input inputTensor const outputs output outputTensor await context dispatch graph inputs outputs Read output data const outputTensorData new Float32Array height width await context readTensor outputTensor outputTensorData return outputTensorData async function displayOutput outputTensor canvas const width canvas width const height canvas height Prepare the output image data const outputImageData canvas getContext 2d createImageData width height for let i 0 i outputTensor length i const value Math min 255 Math max 0 outputTensor i 255 Clamp value between 0 and 255 outputImageData data i 4 value Red channel outputImageData data i 4 1 value Green channel outputImageData data i 4 2 value Blue channel outputImageData data i 4 3 255 Alpha channel Draw the output to the canvas canvas getContext 2d putImageData outputImageData 0 0 async function main try const inputCanvas document getElementById inputCanvas const outputCanvas document getElementById outputCanvas Load image and get input image data const inputImageData await loadImage https webgpulab xbdev net var images test256 png inputCanvas Perform convolution and get the output tensor const outputTensor await conv2d inputImageData Display the output tensor on the output canvas await displayOutput outputTensor outputCanvas catch error console error Error error main script body html