Test samples by WebGPU bakcend for Arraybuffer.

common/utils.js

@@ -165,7 +165,7 @@ export async function setPolyfillBackend(device) {
   // Use 'webgl' by default for better performance.
   // Note: 'wasm' backend may run failed on some samples since
   // some ops aren't supported on 'wasm' backend at present
-  const backend = device === 'cpu' ? 'wasm' : 'webgl';
+  const backend = device === 'cpu' ? 'wasm' : 'webgpu';
   const tf = navigator.ml.createContext().tf;
   if (tf) {
     if (!(await tf.setBackend(backend))) {

image_classification/index.html

@@ -226,7 +226,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
-  <script src="https://webmachinelearning.github.io/webnn-polyfill/dist/webnn-polyfill.js"
+  <script src="../dist/webnn-polyfill.js"
     crossorigin="anonymous"></script>
   <script>
     // To restore module after loading 3rd-party libraries.

image_classification/main.js

@@ -268,7 +268,7 @@ async function main() {
       await ui.showProgressComponent('done', 'current', 'pending');
       console.log('- Building... ');
       start = performance.now();
-      netInstance.build(outputOperand);
+      await netInstance.build(outputOperand);
       buildTime = (performance.now() - start).toFixed(2);
       console.log(`  done in ${buildTime} ms.`);
     }
@@ -281,11 +281,11 @@ async function main() {
       let medianComputeTime;
       if (numRuns > 1) {
         // Do warm up
-        netInstance.compute(inputBuffer, outputBuffer);
+        await netInstance.compute(inputBuffer, outputBuffer);
       }
       for (let i = 0; i < numRuns; i++) {
         start = performance.now();
-        netInstance.compute(inputBuffer, outputBuffer);
+        await netInstance.compute(inputBuffer, outputBuffer);
         computeTime = (performance.now() - start).toFixed(2);
         console.log(`  compute time ${i+1}: ${computeTime} ms`);
         computeTimeArray.push(Number(computeTime));

image_classification/mobilenet_nchw.js

@@ -116,8 +116,8 @@ export class MobileNetV2Nchw {
     return this.builder_.softmax(gemm);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -128,9 +128,9 @@ export class MobileNetV2Nchw {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

image_classification/mobilenet_nhwc.js

@@ -114,8 +114,8 @@ export class MobileNetV2Nhwc {
     return this.builder_.softmax(reshape);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -126,9 +126,9 @@ export class MobileNetV2Nhwc {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

image_classification/resnet101v2_nhwc.js

@@ -162,8 +162,8 @@ export class ResNet101V2Nhwc {
     return this.builder_.softmax(reshape);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -174,9 +174,9 @@ export class ResNet101V2Nhwc {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

image_classification/resnet50v2_nchw.js

@@ -148,8 +148,8 @@ export class ResNet50V2Nchw {
     return this.builder_.softmax(gemm);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -160,9 +160,9 @@ export class ResNet50V2Nchw {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

image_classification/resnet50v2_nhwc.js

@@ -162,8 +162,8 @@ export class ResNet50V2Nhwc {
     return this.builder_.softmax(reshape);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -174,9 +174,9 @@ export class ResNet50V2Nhwc {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

image_classification/squeezenet_nchw.js

@@ -65,8 +65,8 @@ export class SqueezeNetNchw {
     return this.builder_.softmax(reshape0);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -77,9 +77,9 @@ export class SqueezeNetNchw {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

image_classification/squeezenet_nhwc.js

@@ -69,8 +69,8 @@ export class SqueezeNetNhwc {
     return this.builder_.softmax(reshape);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
   // Release the constant tensors of a model
@@ -81,9 +81,9 @@ export class SqueezeNetNhwc {
     }
   }
 
-  compute(inputBuffer, outputBuffer) {
+  async compute(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

lenet/index.html

@@ -130,7 +130,7 @@ <h5>Prediction Result:</h5>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
-    <script src="https://webmachinelearning.github.io/webnn-polyfill/dist/webnn-polyfill.js" crossorigin="anonymous"></script>
+    <script src="../dist/webnn-polyfill.js" crossorigin="anonymous"></script>
     <script src="libs/mnist.js"></script>
     <script>
       // To restore module after loading 3rd-party libraries.

lenet/lenet.js

@@ -113,13 +113,13 @@ export class LeNet {
     return this.builder_.softmax(add4);
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build({'output': outputOperand});
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  predict(inputBuffer, outputBuffer) {
+  async predict(inputBuffer, outputBuffer) {
     const inputs = {'input': inputBuffer};
     const outputs = {'output': outputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }

lenet/main.js

@@ -78,7 +78,7 @@ export async function main() {
         `loading elapsed time: ${(performance.now() - start).toFixed(2)} ms`);
 
     start = performance.now();
-    lenet.build(outputOperand);
+    await lenet.build(outputOperand);
     const buildTime = performance.now() - start;
     console.log(`build elapsed time: ${buildTime.toFixed(2)} ms`);
     buildTimeElement.innerHTML = 'Build Time: ' +
@@ -99,11 +99,11 @@ export async function main() {
 
       if (numRuns > 1) {
         // Do warm up
-        lenet.predict(input, outputBuffer);
+        await lenet.predict(input, outputBuffer);
       }
       for (let i = 0; i < numRuns; i++) {
         start = performance.now();
-        lenet.predict(input, outputBuffer);
+        await lenet.predict(input, outputBuffer);
         inferenceTime = performance.now() - start;
         console.log(`execution elapsed time: ${inferenceTime.toFixed(2)} ms`);
         console.log(`execution result: ${outputBuffer}`);

nsnet2/denoiser.js

@@ -44,7 +44,7 @@ export class Denoiser {
         setTimeout(async () => {
           try {
             const start = performance.now();
-            this.nsnet.build(outputOperand);
+            await this.nsnet.build(outputOperand);
             const modelBuildTime = performance.now() - start;
             this.log(`done in <span class='text-primary'>` +
                 `${modelBuildTime.toFixed(2)}</span> ms.`, true);
@@ -115,11 +115,17 @@ export class Denoiser {
       const inputFeature = tf.tidy(() => {
         return featurelib.calcFeat(inputSpec, this.cfg).expandDims(0);
       });
-      const inputData = await inputFeature.data();
+
+      let inputData = await inputFeature.data();
+
+      if (this.cfg['feattype'] == 'LogPow') {
+        inputData = inputData.map(x => Math.log10(x));
+      }
+
       inputFeature.dispose();
       const calcFeatTime = (performance.now() - start).toFixed(2);
       start = performance.now();
-      const outputs = this.nsnet.compute(
+      const outputs = await this.nsnet.compute(
           inputData, initialHiddenState92Buffer, initialHiddenState155Buffer,
           outputBuffer, gru94Buffer, gru157Buffer);
       const computeTime = (performance.now() - start).toFixed(2);

nsnet2/featurelib.js

@@ -11,11 +11,6 @@ export function calcFeat(Spec, cfg) {
       const pmin = tf.scalar(10**(-12));
       const powSpec = tf.pow(tf.abs(Spec), 2);
       inpFeat = tf.maximum(powSpec, pmin);
-      const data = inpFeat.dataSync();
-      for (let i = 0; i < data.length; ++i) {
-        data[i] = Math.log10(data[i]);
-      }
-      inpFeat = tf.tensor(data, Spec.shape);
     } else {
       throw new Error('Feature not implemented.');
     }

nsnet2/index.html

@@ -120,7 +120,7 @@
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
-    <script src="https://webmachinelearning.github.io/webnn-polyfill/dist/webnn-polyfill.js" crossorigin="anonymous"></script>
+    <script src="../dist/webnn-polyfill.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js" integrity="sha256-28ZvjeNGrGNEIj9/2D8YAPE6Vm5JSvvDs+LI4ED31x8=" crossorigin="anonymous"></script>
     <script>
       // To restore module after loading 3rd-party libraries.

nsnet2/nsnet2.js

@@ -55,11 +55,11 @@ export class NSNet2 {
     return {output, gru94, gru157};
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build(outputOperand);
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build(outputOperand);
   }
 
-  compute(inputBuffer, initialState92Buffer, initialState155Buffer, outputBuffer, gru94Buffer, gru157Buffer) {
+  async compute(inputBuffer, initialState92Buffer, initialState155Buffer, outputBuffer, gru94Buffer, gru157Buffer) {
     const inputs = {
       'input': inputBuffer,
       'initialState92': initialState92Buffer,
@@ -70,7 +70,7 @@ export class NSNet2 {
       'gru94': gru94Buffer,
       'gru157': gru157Buffer,
     };
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
     return outputs;
   }
 }

object_detection/index.html

@@ -195,7 +195,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
-  <script src="https://webmachinelearning.github.io/webnn-polyfill/dist/webnn-polyfill.js"
+  <script src="../dist/webnn-polyfill.js"
     crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"
     integrity="sha256-28ZvjeNGrGNEIj9/2D8YAPE6Vm5JSvvDs+LI4ED31x8="

object_detection/main.js

@@ -144,12 +144,12 @@ async function drawOutput(inputElement, outputs, labels) {
     // Transpose 'nchw' output to 'nhwc' for postprocessing
     let outputBuffer = outputs.output;
     if (layout === 'nchw') {
-      outputBuffer = tf.tidy(() => {
+      const transposeTensor = tf.tidy(() => {
         const a =
             tf.tensor(outputBuffer, netInstance.outputDimensions, 'float32');
-        const b = tf.transpose(a, [0, 2, 3, 1]);
-        return b.dataSync();
+        return tf.transpose(a, [0, 2, 3, 1]);
       });
+      outputBuffer = await transposeTensor.data();
     }
     const decodeOut = Yolo2Decoder.decodeYOLOv2({numClasses: 20},
         outputBuffer, inputOptions.anchors);
@@ -234,7 +234,7 @@ async function main() {
       await ui.showProgressComponent('done', 'current', 'pending');
       console.log('- Building... ');
       start = performance.now();
-      netInstance.build(outputOperand);
+      await netInstance.build(outputOperand);
       buildTime = (performance.now() - start).toFixed(2);
       console.log(`  done in ${buildTime} ms.`);
     }
@@ -247,11 +247,11 @@ async function main() {
       let medianComputeTime;
       if (numRuns > 1) {
         // Do warm up
-        netInstance.compute(inputBuffer, outputs);
+        await netInstance.compute(inputBuffer, outputs);
       }
       for (let i = 0; i < numRuns; i++) {
         start = performance.now();
-        netInstance.compute(inputBuffer, outputs);
+        await netInstance.compute(inputBuffer, outputs);
         computeTime = (performance.now() - start).toFixed(2);
         console.log(`  compute time ${i+1}: ${computeTime} ms`);
         computeTimeArray.push(Number(computeTime));

object_detection/ssd_mobilenetv1_nchw.js

@@ -233,8 +233,8 @@ ${nameArray[1]}_BatchNorm_batchnorm`;
     return {'boxes': concat0, 'scores': concat1};
   }
 
-  build(outputOperand) {
-    this.graph_ = this.builder_.build(outputOperand);
+  async build(outputOperand) {
+    this.graph_ = await this.builder_.build(outputOperand);
   }
 
   // Release the constant tensors of a model
@@ -245,8 +245,8 @@ ${nameArray[1]}_BatchNorm_batchnorm`;
     }
   }
 
-  compute(inputBuffer, outputs) {
+  async compute(inputBuffer, outputs) {
     const inputs = {'input': inputBuffer};
-    this.graph_.compute(inputs, outputs);
+    await this.graph_.compute(inputs, outputs);
   }
 }