Enable WebNN GPU backend (#181)

common/component/component.js

@@ -590,13 +590,6 @@ $(document).ready(async () => {
           "title",
           "WebNN is supported, disable WebNN Polyfill."
         );
-        $('label:contains("WebNN (GPU)")').addClass("disabled");
-        $('label:contains("WebNN (GPU)")').addClass("btn-outline-secondary");
-        $('label:contains("WebNN (GPU)")').removeClass("btn-outline-info");
-        $('label:contains("WebNN (GPU)")').attr(
-          "title",
-          "WebNN GPU backend is not supported."
-        );
       }
     }
     $("#webnnstatus").html("supported").addClass("webnn-status-true");

face_recognition/main.js

@@ -310,7 +310,7 @@ async function main() {
       // UI shows model loading progress
       await ui.showProgressComponent('current', 'pending', 'pending');
       console.log('- Loading weights... ');
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }

facial_landmark_detection/main.js

@@ -245,7 +245,7 @@ async function main() {
       // UI shows model loading progress
       await ui.showProgressComponent('current', 'pending', 'pending');
       console.log('- Loading weights... ');
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }

facial_landmark_detection/ssd_mobilenetv2_face_nchw.js

@@ -6,6 +6,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class SsdMobilenetV2FaceNchw {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.builder_ = null;
     this.graph_ = null;
     this.weightsUrl_ = '../test-data/models/ssd_mobilenetv2_face_nchw/weights/';
@@ -74,8 +75,16 @@ ${nameArray[1]}`;
     }
     options.bias = bias;
     if (clip) {
-      // implement `clip` by `clamp` of  WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
@@ -110,6 +119,7 @@ ${nameArray[1]}`;
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const input = this.builder_.input('input',
         {type: 'float32', dimensions: this.inputOptions.inputDimensions});

facial_landmark_detection/ssd_mobilenetv2_face_nhwc.js

@@ -6,6 +6,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class SsdMobilenetV2FaceNhwc {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.builder_ = null;
     this.graph_ = null;
     this.weightsUrl_ = '../test-data/models/ssd_mobilenetv2_face_nhwc/weights/';
@@ -81,8 +82,16 @@ ${nameArray[1]}`;
     }
     options.bias = bias;
     if (relu6) {
-      // implement `relu6` by `clamp` of  WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
@@ -117,6 +126,7 @@ ${nameArray[1]}`;
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const input = this.builder_.input('input',
         {type: 'float32', dimensions: this.inputOptions.inputDimensions});

image_classification/main.js

@@ -231,7 +231,7 @@ async function main() {
       // UI shows model loading progress
       await ui.showProgressComponent('current', 'pending', 'pending');
       console.log('- Loading weights... ');
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }

image_classification/mobilenet_nchw.js

@@ -6,6 +6,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class MobileNetV2Nchw {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.builder_ = null;
     this.graph_ = null;
     this.weightsUrl_ = '../test-data/models/mobilenetv2_nchw/weights/';
@@ -30,10 +31,16 @@ export class MobileNetV2Nchw {
         await buildConstantByNpy(this.builder_, biasName);
     options.bias = bias;
     if (relu6) {
-      // implement `relu6` by `clamp` of  WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
-    } else {
-      options.activation = undefined;
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
@@ -69,6 +76,7 @@ export class MobileNetV2Nchw {
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const data = this.builder_.input('input',
         {type: 'float32', dimensions: this.inputOptions.inputDimensions});

image_classification/mobilenet_nhwc.js

@@ -8,6 +8,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class MobileNetV2Nhwc {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.builder_ = null;
     this.graph_ = null;
     this.weightsUrl_ = '../test-data/models/mobilenetv2_nhwc/weights/';
@@ -29,10 +30,16 @@ export class MobileNetV2Nhwc {
     options.inputLayout = 'nhwc';
     options.bias = bias;
     if (relu6) {
-      // `relu6` in TFLite equals to `clamp` in WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
-    } else {
-      options.activation = undefined;
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
@@ -60,6 +67,7 @@ export class MobileNetV2Nhwc {
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const strides = [2, 2];
     const autoPad = 'same-upper';

lenet/main.js

@@ -68,7 +68,7 @@ async function main() {
   const lenet = new LeNet(weightUrl);
   const [numRuns, powerPreference, numThreads] = utils.getUrlParams();
   try {
-    const contextOptions = {deviceType};
+    const contextOptions = {'devicePreference': deviceType};
     if (powerPreference) {
       contextOptions['powerPreference'] = powerPreference;
     }

nsnet2/denoiser.js

@@ -31,7 +31,7 @@ export class Denoiser {
       const start = performance.now();
       const weightsUrl = '../test-data/models/nsnet2/weights/';
       const powerPreference = getUrlParams()[1];
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }

object_detection/main.js

@@ -219,7 +219,7 @@ async function main() {
       // UI shows model loading progress
       await ui.showProgressComponent('current', 'pending', 'pending');
       console.log('- Loading weights... ');
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }

object_detection/ssd_mobilenetv1_nchw.js

@@ -6,6 +6,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class SsdMobilenetV1Nchw {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.model_ = null;
     this.builder_ = null;
     this.graph_ = null;
@@ -60,14 +61,23 @@ ${nameArray[1]}_BatchNorm_batchnorm`;
     options.autoPad = 'same-upper';
     options.bias = bias;
     if (relu6) {
-      // implement `relu6` by `clamp` of  WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const input = this.builder_.input('input',
         {type: 'float32', dimensions: this.inputOptions.inputDimensions});

object_detection/ssd_mobilenetv1_nhwc.js

@@ -6,6 +6,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class SsdMobilenetV1Nhwc {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.model_ = null;
     this.builder_ = null;
     this.graph_ = null;
@@ -71,14 +72,23 @@ ${nameArray[1]}_BatchNorm_batchnorm`;
     }
     options.bias = bias;
     if (relu6) {
-      // implement `relu6` by `clamp` of  WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const input = this.builder_.input('input',
         {type: 'float32', dimensions: this.inputOptions.inputDimensions});

rnnoise/main.js

@@ -220,7 +220,7 @@ export async function main() {
       `[${batchSize} (batch_size) x 100 (frames) x 42].`, true);
     await log(modelInfo, '- Loading model...');
     const powerPreference = utils.getUrlParams()[1];
-    const contextOptions = {deviceType};
+    const contextOptions = {'devicePreference': deviceType};
     if (powerPreference) {
       contextOptions['powerPreference'] = powerPreference;
     }

semantic_segmentation/deeplabv3_mnv2_nchw.js

@@ -8,6 +8,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class DeepLabV3MNV2Nchw {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.builder_ = null;
     this.graph_ = null;
     this.weightsUrl_ = '../test-data/models/deeplabv3_mnv2_nchw/weights/';
@@ -43,8 +44,16 @@ export class DeepLabV3MNV2Nchw {
 
     options.bias = bias;
     if (activation === 'relu6') {
-      // implement `relu6` by `clamp` of  WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     } else if (activation === 'relu') {
       options.activation = this.builder_.relu();
     } else {
@@ -82,6 +91,7 @@ export class DeepLabV3MNV2Nchw {
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const strides = [2, 2];
 

semantic_segmentation/deeplabv3_mnv2_nhwc.js

@@ -6,6 +6,7 @@ import {buildConstantByNpy} from '../common/utils.js';
 export class DeepLabV3MNV2Nhwc {
   constructor() {
     this.context_ = null;
+    this.devicePreference_ = null;
     this.builder_ = null;
     this.graph_ = null;
     this.weightsUrl_ = '../test-data/models/deeplabv3_mnv2_nhwc/weights/';
@@ -43,10 +44,16 @@ export class DeepLabV3MNV2Nhwc {
     }
     options.bias = bias;
     if (relu6) {
-      // `relu6` in TFLite equals to `clamp` in WebNN API
-      options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
-    } else {
-      options.activation = undefined;
+      // TODO: Set clamp activation to options once it's supported in
+      // WebNN DML backend.
+      // Implement `clip` by `clamp` of  WebNN API
+      if (this.devicePreference_ == 'gpu') {
+        return this.builder_.clamp(
+            this.builder_.conv2d(input, weights, options),
+            {minValue: 0, maxValue: 6});
+      } else {
+        options.activation = this.builder_.clamp({minValue: 0, maxValue: 6});
+      }
     }
     return this.builder_.conv2d(input, weights, options);
   }
@@ -73,6 +80,7 @@ export class DeepLabV3MNV2Nhwc {
 
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
+    this.devicePreference_ = contextOptions.devicePreference;
     this.builder_ = new MLGraphBuilder(this.context_);
     const strides = [2, 2];
     const input = this.builder_.input('input',

semantic_segmentation/main.js

@@ -324,7 +324,7 @@ export async function main() {
       // UI shows model loading progress
       await ui.showProgressComponent('current', 'pending', 'pending');
       console.log('- Loading weights... ');
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }

style_transfer/main.js

@@ -217,7 +217,7 @@ export async function main() {
       // UI shows model loading progress
       await ui.showProgressComponent('current', 'pending', 'pending');
       console.log('- Loading weights... ');
-      const contextOptions = {deviceType};
+      const contextOptions = {'devicePreference': deviceType};
       if (powerPreference) {
         contextOptions['powerPreference'] = powerPreference;
       }