From a7a7d6b7664224fb7ac938d75c2fa530cdc2bc62 Mon Sep 17 00:00:00 2001
From: Belem Zhang <belem.zhang@intel.com>
Date: Fri, 11 Oct 2024 09:33:28 +0800
Subject: [PATCH] Remove Wasm and WebGL backends (WebNN-Polyfill) (#281)

* Remove Wasm and WebGL backends (WebNN-Polyfill)

* update README

* Remove css class which does not exist in page
---
 README.md                                     |   3 +-
 code/index.html                               |   2 +-
 code/main.js                                  |   8 +-
 common/component/component.js                 |   7 --
 common/utils.js                               | 103 ++----------------
 face_recognition/facenet_nchw.js              |   8 --
 face_recognition/facenet_nhwc.js              |   8 --
 face_recognition/index.html                   |   6 -
 face_recognition/main.js                      |  12 +-
 .../face_landmark_nchw.js                     |   8 --
 .../face_landmark_nhwc.js                     |   8 --
 facial_landmark_detection/index.html          |   6 -
 facial_landmark_detection/main.js             |  12 +-
 .../ssd_mobilenetv2_face_nchw.js              |   8 --
 .../ssd_mobilenetv2_face_nhwc.js              |   8 --
 .../efficientnet_fp16_nchw.js                 |   8 --
 image_classification/index.html               |   6 -
 image_classification/main.js                  |   8 +-
 image_classification/mobilenet_nchw.js        |   8 --
 image_classification/mobilenet_nhwc.js        |   8 --
 image_classification/resnet50v1_fp16_nchw.js  |   8 --
 image_classification/resnet50v2_nchw.js       |   8 --
 image_classification/resnet50v2_nhwc.js       |   8 --
 image_classification/squeezenet_nchw.js       |   8 --
 image_classification/squeezenet_nhwc.js       |   8 --
 lenet/index.html                              |   6 -
 lenet/main.js                                 |  10 +-
 nnotepad/TODO.md                              |   1 -
 nsnet2/index.html                             |   6 -
 nsnet2/main.js                                |  13 ++-
 object_detection/index.html                   |   6 -
 object_detection/main.js                      |   8 +-
 object_detection/ssd_mobilenetv1_nchw.js      |   8 --
 object_detection/ssd_mobilenetv1_nhwc.js      |   8 --
 object_detection/tiny_yolov2_nchw.js          |   8 --
 object_detection/tiny_yolov2_nhwc.js          |   8 --
 rnnoise/index.html                            |   6 -
 rnnoise/main.js                               |   9 +-
 semantic_segmentation/deeplabv3_mnv2_nchw.js  |   8 --
 semantic_segmentation/deeplabv3_mnv2_nhwc.js  |   8 --
 semantic_segmentation/index.html              |   6 -
 semantic_segmentation/main.js                 |   8 +-
 style_transfer/fast_style_transfer_net.js     |   8 --
 style_transfer/index.html                     |   6 -
 style_transfer/main.js                        |  13 ++-
 45 files changed, 59 insertions(+), 380 deletions(-)

diff --git a/README.md b/README.md
index edadedd1..f90486ff 100644
--- a/README.md
+++ b/README.md
@@ -95,8 +95,7 @@ We welcome contributions from the community to make webnn-samples even better! I
 ### WebNN Resources
 To learn more about Web Neural Network API (WebNN) and its capabilities, check out the following resources:
 * [Web Neural Network API Specification](https://webmachinelearning.github.io/webnn/)
-* [WebNN Polyfill](https://github.com/webmachinelearning/webnn-polyfill)
-* [WebNN Community Group](https://webmachinelearning.github.io/)
+* [W3C WebML Working Group and Community Group](https://webmachinelearning.github.io/)
 
 ### WebNN API Samples
 * [WebNN code editor](https://webmachinelearning.github.io/webnn-samples/code/)
diff --git a/code/index.html b/code/index.html
index 23acfc2e..0d1c908f 100644
--- a/code/index.html
+++ b/code/index.html
@@ -70,7 +70,7 @@
     <script src="./libs/codemirror/codemirror.js"></script>
     <script src="./libs/codemirror/javascript.js"></script>
     <script src="./libs/codemirror/sublime.js"></script>
-    <script src="https://webmachinelearning.github.io/webnn-polyfill/dist/webnn-polyfill.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
     <script type="module">
       import {main} from './main.js';
       window.onload = async () => {
diff --git a/code/main.js b/code/main.js
index 22502889..70c8f61d 100644
--- a/code/main.js
+++ b/code/main.js
@@ -1,14 +1,14 @@
 import {samplesRepo} from './samples_repo.js';
 import * as utils from '../common/utils.js';
+import {addAlert} from '../common/ui.js';
 
 window.sizeOfShape = utils.sizeOfShape;
 
 export async function main() {
   // Set backend
-  if (await utils.isWebNN()) {
-    await utils.setBackend('webnn', 'cpu');
-  } else {
-    await utils.setBackend('polyfill', 'cpu');
+  if (!await utils.isWebNN()) {
+    console.log(utils.webNNNotSupportMessage());
+    addAlert(utils.webNNNotSupportMessageHTML());
   }
   const selectElement = document.getElementById('example-select');
   for (const name of samplesRepo.names()) {
diff --git a/common/component/component.js b/common/component/component.js
index e1d8ae6d..f04ff4c9 100644
--- a/common/component/component.js
+++ b/common/component/component.js
@@ -599,13 +599,6 @@ $(document).ready(async () => {
   $("#footer").html(footer());
   if (await isWebNN()) {
     if ($("#backendBtns")) {
-      $('label[name="polyfill"]').addClass("disabled");
-      $('label[name="polyfill"]').addClass("btn-outline-secondary");
-      $('label[name="polyfill"]').removeClass("btn-outline-info");
-      $('label[name="polyfill"]').attr(
-        "title",
-        "WebNN is supported, disable WebNN Polyfill."
-      );
       // Disable WebNN NPU backend if failed to find a capable NPU adapter.
       try {
         await navigator.ml.createContext({deviceType: 'npu'});
diff --git a/common/utils.js b/common/utils.js
index fb2f212b..a9c089e2 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -269,48 +269,6 @@ export function getMedianValue(array) {
       (array[array.length / 2 - 1] + array[array.length / 2]) / 2;
 }
 
-// Set tf.js backend based WebNN's 'MLDeviceType' option
-export async function setPolyfillBackend(device) {
-  // Simulate WebNN's device selection using various tf.js backends.
-  // MLDeviceType: ['default', 'gpu', 'cpu']
-  // 'default' or 'gpu': tfjs-backend-webgl, 'cpu': tfjs-backend-wasm
-  if (!device) device = 'gpu';
-  // 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 context = await navigator.ml.createContext();
-  const tf = context.tf;
-  if (tf) {
-    if (backend == 'wasm') {
-      const wasm = context.wasm;
-      // Force to use Wasm SIMD only
-      wasm.setWasmPath(`https://unpkg.com/@tensorflow/tfjs-backend-wasm@${tf.version_core}/dist/tfjs-backend-wasm-simd.wasm`);
-    }
-    if (!(await tf.setBackend(backend))) {
-      throw new Error(`Failed to set tf.js backend ${backend}.`);
-    }
-    await tf.ready();
-    let backendInfo = backend == 'wasm' ? 'WASM' : 'WebGL';
-    if (backendInfo == 'WASM') {
-      const hasSimd = tf.env().features['WASM_HAS_SIMD_SUPPORT'];
-      const hasThreads = tf.env().features['WASM_HAS_MULTITHREAD_SUPPORT'];
-      if (hasThreads && hasSimd) {
-        backendInfo += ' (SIMD + threads)';
-      } else if (hasThreads && !hasSimd) {
-        backendInfo += ' (threads)';
-      } else if (!hasThreads && hasSimd) {
-        backendInfo += ' (SIMD)';
-      }
-    }
-    addAlert(
-        `This sample is running on ` +
-        `<a href='https://github.com/webmachinelearning/webnn-polyfill'>` +
-        `WebNN-polyfill</a> with tf.js ${tf.version_core} ` +
-        `<b>${backendInfo}</b> backend.`, 'info');
-  }
-}
-
 // Get url params
 export function getUrlParams() {
   const params = new URLSearchParams(location.search);
@@ -346,59 +304,6 @@ export function getUrlParams() {
   return [numRuns, powerPreference, numThreads];
 }
 
-// Set backend for using WebNN-polyfill or WebNN
-export async function setBackend(backend, device) {
-  const webnnPolyfillId = 'webnn_polyfill';
-  const webnnNodeId = 'webnn_node';
-  const webnnPolyfillElem = document.getElementById(webnnPolyfillId);
-  const webnnNodeElem = document.getElementById(webnnNodeId);
-
-  if (backend === 'polyfill') {
-    if (webnnNodeElem) {
-      document.body.removeChild(webnnNodeElem);
-      // Unset global objects defined in node_setup.js
-      global.navigator.ml = undefined;
-      global.MLContext = undefined;
-      global.MLGraphBuilder = undefined;
-      global.MLGraph = undefined;
-      global.MLOperand = undefined;
-    }
-    if (!webnnPolyfillElem) {
-      const webnnPolyfillUrl =
-          'https://webmachinelearning.github.io/webnn-polyfill/dist/webnn-polyfill.js';
-      if (typeof(tf) != 'undefined') {
-        // Reset tf.ENV to avoid environments from tf.min.js
-        // affect webnn-polyfill.js
-        tf.engine().reset();
-      }
-      // Create WebNN-polyfill script
-      await loadScript(webnnPolyfillUrl, webnnPolyfillId);
-    }
-    await setPolyfillBackend(device);
-  } else if (backend === 'webnn') {
-    if (!await isWebNN()) {
-      addAlert(`WebNN is not supported!`, 'warning');
-    }
-  } else {
-    addAlert(`Unknow backend: ${backend}`, 'warning');
-  }
-}
-
-// Promise to load script with url and id
-async function loadScript(url, id) {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script');
-    script.onload = resolve;
-    script.onerror = reject;
-    script.src = url;
-    script.id = id;
-    if (url.startsWith('http')) {
-      script.crossOrigin = 'anonymous';
-    }
-    document.body.appendChild(script);
-  });
-}
-
 export async function isWebNN() {
   if (typeof MLGraphBuilder !== 'undefined') {
     const context = await navigator.ml.createContext();
@@ -408,6 +313,14 @@ export async function isWebNN() {
   }
 }
 
+export function webNNNotSupportMessage() {
+  return 'Your browser does not support WebNN.';
+}
+
+export function webNNNotSupportMessageHTML() {
+  return 'Your browser does not support WebNN. Please refer to <a href="https://github.com/webmachinelearning/webnn-samples/#webnn-installation-guides">WebNN Installation Guides</a> for more details.';
+}
+
 // Derive from
 // https://github.com/webmachinelearning/webnn-baseline/blob/main/src/lib/compute-padding.js
 /**
diff --git a/face_recognition/facenet_nchw.js b/face_recognition/facenet_nchw.js
index 2b0a9057..251c03bd 100644
--- a/face_recognition/facenet_nchw.js
+++ b/face_recognition/facenet_nchw.js
@@ -276,14 +276,6 @@ export class FaceNetNchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/face_recognition/facenet_nhwc.js b/face_recognition/facenet_nhwc.js
index d0d6753b..15190f44 100644
--- a/face_recognition/facenet_nhwc.js
+++ b/face_recognition/facenet_nhwc.js
@@ -245,14 +245,6 @@ export class FaceNetNhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/face_recognition/index.html b/face_recognition/index.html
index f3862f55..16126548 100644
--- a/face_recognition/index.html
+++ b/face_recognition/index.html
@@ -31,12 +31,6 @@
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-              </label>
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-              </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
               </label>
diff --git a/face_recognition/main.js b/face_recognition/main.js
index 103e99ad..73e8c0e4 100644
--- a/face_recognition/main.js
+++ b/face_recognition/main.js
@@ -45,7 +45,8 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    console.log(utils.webNNNotSupportMessage());
+    ui.addAlert(utils.webNNNotSupportMessageHTML());
   }
 });
 
@@ -307,19 +308,10 @@ async function main() {
         lastdeviceType != deviceType || lastBackend != backend) {
       if (lastdeviceType != deviceType || lastBackend != backend) {
         // Set backend and device
-        await utils.setBackend(backend, deviceType);
         lastdeviceType = lastdeviceType != deviceType ?
                                deviceType : lastdeviceType;
         lastBackend = lastBackend != backend ? backend : lastBackend;
       }
-      if (frInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        frInstance.dispose();
-      }
-      if (fdInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        fdInstance.dispose();
-      }
       fdInstanceType = fdModelName + layout;
       frInstanceType = frModelName + layout;
       fdInstance = constructNetObject(fdInstanceType);
diff --git a/facial_landmark_detection/face_landmark_nchw.js b/facial_landmark_detection/face_landmark_nchw.js
index 9cce7ea2..88051821 100644
--- a/facial_landmark_detection/face_landmark_nchw.js
+++ b/facial_landmark_detection/face_landmark_nchw.js
@@ -116,14 +116,6 @@ export class FaceLandmarkNchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/facial_landmark_detection/face_landmark_nhwc.js b/facial_landmark_detection/face_landmark_nhwc.js
index b539ecb4..262b0efc 100644
--- a/facial_landmark_detection/face_landmark_nhwc.js
+++ b/facial_landmark_detection/face_landmark_nhwc.js
@@ -119,14 +119,6 @@ export class FaceLandmarkNhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
index ef4911e4..4bc3680c 100644
--- a/facial_landmark_detection/index.html
+++ b/facial_landmark_detection/index.html
@@ -31,12 +31,6 @@
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-              </label>
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-              </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
               </label>
diff --git a/facial_landmark_detection/main.js b/facial_landmark_detection/main.js
index f88aa643..9d26547a 100644
--- a/facial_landmark_detection/main.js
+++ b/facial_landmark_detection/main.js
@@ -41,7 +41,8 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    console.log(utils.webNNNotSupportMessage());
+    ui.addAlert(utils.webNNNotSupportMessageHTML());
   }
 });
 
@@ -243,19 +244,10 @@ async function main() {
         lastdeviceType != deviceType || lastBackend != backend) {
       if (lastdeviceType != deviceType || lastBackend != backend) {
         // Set backend and device
-        await utils.setBackend(backend, deviceType);
         lastdeviceType = lastdeviceType != deviceType ?
                                deviceType : lastdeviceType;
         lastBackend = lastBackend != backend ? backend : lastBackend;
       }
-      if (fldInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        fldInstance.dispose();
-      }
-      if (fdInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        fdInstance.dispose();
-      }
       fdInstanceType = fdModelName + layout;
       fldInstanceType = fldModelName + layout;
       fdInstance = constructNetObject(fdInstanceType);
diff --git a/facial_landmark_detection/ssd_mobilenetv2_face_nchw.js b/facial_landmark_detection/ssd_mobilenetv2_face_nchw.js
index 121090aa..5f8610b8 100644
--- a/facial_landmark_detection/ssd_mobilenetv2_face_nchw.js
+++ b/facial_landmark_detection/ssd_mobilenetv2_face_nchw.js
@@ -243,14 +243,6 @@ ${nameArray[1]}`;
     this.graph_ = await this.builder_.build(outputOperand);
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/facial_landmark_detection/ssd_mobilenetv2_face_nhwc.js b/facial_landmark_detection/ssd_mobilenetv2_face_nhwc.js
index 437ec1ac..8b4482a7 100644
--- a/facial_landmark_detection/ssd_mobilenetv2_face_nhwc.js
+++ b/facial_landmark_detection/ssd_mobilenetv2_face_nhwc.js
@@ -255,14 +255,6 @@ ${nameArray[1]}`;
     this.graph_ = await this.builder_.build(outputOperand);
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/image_classification/efficientnet_fp16_nchw.js b/image_classification/efficientnet_fp16_nchw.js
index 5450f0f6..17eed31e 100644
--- a/image_classification/efficientnet_fp16_nchw.js
+++ b/image_classification/efficientnet_fp16_nchw.js
@@ -168,14 +168,6 @@ export class EfficientNetFP16Nchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/image_classification/index.html b/image_classification/index.html
index 8e72248b..f12c734c 100644
--- a/image_classification/index.html
+++ b/image_classification/index.html
@@ -31,12 +31,6 @@
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-              </label>
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-              </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
               </label>
diff --git a/image_classification/main.js b/image_classification/main.js
index 8fad561e..294b7742 100644
--- a/image_classification/main.js
+++ b/image_classification/main.js
@@ -85,7 +85,8 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    console.log(utils.webNNNotSupportMessage());
+    ui.addAlert(utils.webNNNotSupportMessageHTML());
   }
 });
 
@@ -319,15 +320,10 @@ async function main() {
         lastdeviceType != deviceType || lastBackend != backend) {
       if (lastdeviceType != deviceType || lastBackend != backend) {
         // Set backend and device
-        await utils.setBackend(backend, deviceType);
         lastdeviceType = lastdeviceType != deviceType ?
             deviceType : lastdeviceType;
         lastBackend = lastBackend != backend ? backend : lastBackend;
       }
-      if (netInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        netInstance.dispose();
-      }
       instanceType = modelName + layout;
       netInstance = constructNetObject(instanceType);
       inputOptions = netInstance.inputOptions;
diff --git a/image_classification/mobilenet_nchw.js b/image_classification/mobilenet_nchw.js
index 45663233..afedf42a 100644
--- a/image_classification/mobilenet_nchw.js
+++ b/image_classification/mobilenet_nchw.js
@@ -166,14 +166,6 @@ export class MobileNetV2Nchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/image_classification/mobilenet_nhwc.js b/image_classification/mobilenet_nhwc.js
index 8e3cd632..122edc7d 100644
--- a/image_classification/mobilenet_nhwc.js
+++ b/image_classification/mobilenet_nhwc.js
@@ -155,14 +155,6 @@ export class MobileNetV2Nhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/image_classification/resnet50v1_fp16_nchw.js b/image_classification/resnet50v1_fp16_nchw.js
index ec1bee2c..507446e5 100644
--- a/image_classification/resnet50v1_fp16_nchw.js
+++ b/image_classification/resnet50v1_fp16_nchw.js
@@ -136,14 +136,6 @@ export class ResNet50V1FP16Nchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   // Release the constant tensors of a model
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
diff --git a/image_classification/resnet50v2_nchw.js b/image_classification/resnet50v2_nchw.js
index 3dcfa55c..52c9e1e6 100644
--- a/image_classification/resnet50v2_nchw.js
+++ b/image_classification/resnet50v2_nchw.js
@@ -172,14 +172,6 @@ export class ResNet50V2Nchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   // Release the constant tensors of a model
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
diff --git a/image_classification/resnet50v2_nhwc.js b/image_classification/resnet50v2_nhwc.js
index d1a9ab1d..de1d4aaa 100644
--- a/image_classification/resnet50v2_nhwc.js
+++ b/image_classification/resnet50v2_nhwc.js
@@ -200,14 +200,6 @@ export class ResNet50V2Nhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   // Release the constant tensors of a model
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
diff --git a/image_classification/squeezenet_nchw.js b/image_classification/squeezenet_nchw.js
index 5c6f9046..e7f13e15 100644
--- a/image_classification/squeezenet_nchw.js
+++ b/image_classification/squeezenet_nchw.js
@@ -85,14 +85,6 @@ export class SqueezeNetNchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/image_classification/squeezenet_nhwc.js b/image_classification/squeezenet_nhwc.js
index 093bc15b..d3d7e403 100644
--- a/image_classification/squeezenet_nhwc.js
+++ b/image_classification/squeezenet_nhwc.js
@@ -97,14 +97,6 @@ export class SqueezeNetNhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/lenet/index.html b/lenet/index.html
index b60b098f..4538c761 100644
--- a/lenet/index.html
+++ b/lenet/index.html
@@ -28,12 +28,6 @@
             <div class="card-body">
               <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
                 <span class='mr-3'>Backend</span>
-                <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-                </label>
-                <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-                </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
                 </label>
diff --git a/lenet/main.js b/lenet/main.js
index 13f63288..7f735b4e 100644
--- a/lenet/main.js
+++ b/lenet/main.js
@@ -1,5 +1,4 @@
 'use strict';
-
 import * as utils from '../common/utils.js';
 import {LeNet} from './lenet.js';
 import {Pen} from './pen.js';
@@ -21,6 +20,13 @@ const pen = new Pen(visualCanvas);
 let lenet;
 let numRuns;
 
+$(document).ready(async () => {
+  if (!await utils.isWebNN()) {
+    console.log(utils.webNNNotSupportMessage());
+    addAlert(utils.webNNNotSupportMessageHTML());
+  }
+});
+
 function clearInferenceResult() {
   inferenceTimeElement.innerHTML = '';
   for (let i = 0; i < 3; ++i) {
@@ -69,7 +75,7 @@ async function main() {
   clearInferenceResult();
   const [backend, deviceType] =
       $('input[name="backend"]:checked').attr('id').split('_');
-  await utils.setBackend(backend, deviceType);
+  console.log(`${backend} ${deviceType}`);
   drawNextDigitFromMnist();
   const weightUrl = utils.weightsOrigin() +
     '/test-data/models/lenet_nchw/weights/lenet.bin';
diff --git a/nnotepad/TODO.md b/nnotepad/TODO.md
index 65342215..10015caa 100644
--- a/nnotepad/TODO.md
+++ b/nnotepad/TODO.md
@@ -4,7 +4,6 @@
 
 * Style to match rest of webnn-samples.
 * Improve default text.
-* Consider incorporating [WebNN Polyfill](https://github.com/webmachinelearning/webnn-polyfill).
 * Add to `../README.md` once we're happy with it.
 
 ## WebNN Support
diff --git a/nsnet2/index.html b/nsnet2/index.html
index 97f3c518..115a3076 100644
--- a/nsnet2/index.html
+++ b/nsnet2/index.html
@@ -28,12 +28,6 @@
             <div class="card-body">
               <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
                 <span class='mr-3'>Backend</span>
-                <!-- <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-                </label> -->
-                <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-                </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
                 </label>
diff --git a/nsnet2/main.js b/nsnet2/main.js
index 5892b214..0a931362 100644
--- a/nsnet2/main.js
+++ b/nsnet2/main.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import {Denoiser} from './denoiser.js';
-import {setBackend} from '../common/utils.js';
+import {isWebNN, webNNNotSupportMessage, webNNNotSupportMessageHTML} from '../common/utils.js';
 import {addAlert} from '../common/ui.js';
 
 const sampleRate = 16000;
@@ -15,6 +15,15 @@ let denoisedAudioData = [];
 const chooseAudio = document.getElementById('choose-audio');
 const audioName = document.getElementById('audio-name');
 
+$(document).ready(async () => {
+  if (await isWebNN()) {
+    $('#webnn_cpu').click();
+  } else {
+    console.log(webNNNotSupportMessage());
+    addAlert(webNNNotSupportMessageHTML());
+  }
+});
+
 $('#backendBtns .btn').on('change', async () => {
   await main();
 });
@@ -146,7 +155,7 @@ export async function main() {
   try {
     const [backend, deviceType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    await setBackend(backend, deviceType);
+    console.log(`${backend} ${deviceType}`);
     // Handle frames parameter.
     const searchParams = new URLSearchParams(location.search);
     let frames = parseInt(searchParams.get('frames'));
diff --git a/object_detection/index.html b/object_detection/index.html
index c9fd010a..90aa8985 100644
--- a/object_detection/index.html
+++ b/object_detection/index.html
@@ -31,12 +31,6 @@
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-              </label>
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-              </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
               </label>
diff --git a/object_detection/main.js b/object_detection/main.js
index 4ab1b424..cc5ad76a 100644
--- a/object_detection/main.js
+++ b/object_detection/main.js
@@ -59,7 +59,8 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    console.log(utils.webNNNotSupportMessage());
+    ui.addAlert(utils.webNNNotSupportMessageHTML());
   }
 });
 
@@ -256,15 +257,10 @@ async function main() {
         lastdeviceType != deviceType || lastBackend != backend) {
       if (lastdeviceType != deviceType || lastBackend != backend) {
         // Set backend and device
-        await utils.setBackend(backend, deviceType);
         lastdeviceType = lastdeviceType != deviceType ?
                                deviceType : lastdeviceType;
         lastBackend = lastBackend != backend ? backend : lastBackend;
       }
-      if (netInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        netInstance.dispose();
-      }
       instanceType = modelName + layout;
       netInstance = constructNetObject(instanceType);
       inputOptions = netInstance.inputOptions;
diff --git a/object_detection/ssd_mobilenetv1_nchw.js b/object_detection/ssd_mobilenetv1_nchw.js
index 1b1760ee..b8f00e97 100644
--- a/object_detection/ssd_mobilenetv1_nchw.js
+++ b/object_detection/ssd_mobilenetv1_nchw.js
@@ -282,14 +282,6 @@ ${nameArray[1]}_BatchNorm_batchnorm`;
     this.graph_ = await this.builder_.build(outputOperand);
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/object_detection/ssd_mobilenetv1_nhwc.js b/object_detection/ssd_mobilenetv1_nhwc.js
index ea4a81b2..dd98e1de 100644
--- a/object_detection/ssd_mobilenetv1_nhwc.js
+++ b/object_detection/ssd_mobilenetv1_nhwc.js
@@ -259,14 +259,6 @@ ${nameArray[1]}_BatchNorm_batchnorm`;
     this.graph_ = await this.builder_.build(outputOperand);
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/object_detection/tiny_yolov2_nchw.js b/object_detection/tiny_yolov2_nchw.js
index e1b6da18..1e90d374 100644
--- a/object_detection/tiny_yolov2_nchw.js
+++ b/object_detection/tiny_yolov2_nchw.js
@@ -119,14 +119,6 @@ export class TinyYoloV2Nchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/object_detection/tiny_yolov2_nhwc.js b/object_detection/tiny_yolov2_nhwc.js
index af0da7f6..94db9e0b 100644
--- a/object_detection/tiny_yolov2_nhwc.js
+++ b/object_detection/tiny_yolov2_nhwc.js
@@ -99,14 +99,6 @@ export class TinyYoloV2Nhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/rnnoise/index.html b/rnnoise/index.html
index 85af6c18..4a331b61 100644
--- a/rnnoise/index.html
+++ b/rnnoise/index.html
@@ -28,12 +28,6 @@
             <div class="card-body">
               <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
                 <span class='mr-3'>Backend</span>
-                <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-                </label>
-                <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-                </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
                 </label>
diff --git a/rnnoise/main.js b/rnnoise/main.js
index a575a01f..03baeee3 100644
--- a/rnnoise/main.js
+++ b/rnnoise/main.js
@@ -33,6 +33,13 @@ const originalAudio = document.getElementById('original-audio');
 const denoisedAudio = document.getElementById('denoised-audio');
 const recorderWorker = new Worker('./utils/recorderWorker.js');
 
+$(document).ready(async () => {
+  if (!await utils.isWebNN()) {
+    console.log(utils.webNNNotSupportMessage());
+    addAlert(utils.webNNNotSupportMessageHTML());
+  }
+});
+
 recorderWorker.postMessage({
   command: 'init',
   config: {sampleRate: 48000, numChannels: 1},
@@ -200,7 +207,7 @@ export async function main() {
   try {
     const [backend, deviceType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    await utils.setBackend(backend, deviceType);
+    console.log(`${backend} ${deviceType}`);
     modelInfo.innerHTML = '';
     await log(modelInfo, `Creating RNNoise with input shape ` +
       `[${batchSize} (batch_size) x 100 (frames) x 42].`, true);
diff --git a/semantic_segmentation/deeplabv3_mnv2_nchw.js b/semantic_segmentation/deeplabv3_mnv2_nchw.js
index 353b347b..1f915d9a 100644
--- a/semantic_segmentation/deeplabv3_mnv2_nchw.js
+++ b/semantic_segmentation/deeplabv3_mnv2_nchw.js
@@ -165,14 +165,6 @@ export class DeepLabV3MNV2Nchw {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/semantic_segmentation/deeplabv3_mnv2_nhwc.js b/semantic_segmentation/deeplabv3_mnv2_nhwc.js
index aa2218d4..3c472048 100644
--- a/semantic_segmentation/deeplabv3_mnv2_nhwc.js
+++ b/semantic_segmentation/deeplabv3_mnv2_nhwc.js
@@ -157,14 +157,6 @@ export class DeepLabV3MNV2Nhwc {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
index 10f8bdf1..bd72fb61 100644
--- a/semantic_segmentation/index.html
+++ b/semantic_segmentation/index.html
@@ -31,12 +31,6 @@
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-              </label>
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-              </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
               </label>
diff --git a/semantic_segmentation/main.js b/semantic_segmentation/main.js
index 87b05cbf..a56ef149 100644
--- a/semantic_segmentation/main.js
+++ b/semantic_segmentation/main.js
@@ -38,7 +38,8 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    console.log(utils.webNNNotSupportMessage());
+    ui.addAlert(utils.webNNNotSupportMessageHTML());
   }
 });
 
@@ -338,15 +339,10 @@ export async function main() {
         lastdeviceType != deviceType || lastBackend != backend) {
       if (lastdeviceType != deviceType || lastBackend != backend) {
         // Set backend and device
-        await utils.setBackend(backend, deviceType);
         lastdeviceType = lastdeviceType != deviceType ?
                               deviceType : lastdeviceType;
         lastBackend = lastBackend != backend ? backend : lastBackend;
       }
-      if (netInstance !== null) {
-        // Call dispose() to and avoid memory leak
-        netInstance.dispose();
-      }
       instanceType = modelName + layout;
       netInstance = constructNetObject(instanceType);
       inputOptions = netInstance.inputOptions;
diff --git a/style_transfer/fast_style_transfer_net.js b/style_transfer/fast_style_transfer_net.js
index 026a1cd4..394943a3 100644
--- a/style_transfer/fast_style_transfer_net.js
+++ b/style_transfer/fast_style_transfer_net.js
@@ -203,14 +203,6 @@ export class FastStyleTransferNet {
     this.graph_ = await this.builder_.build({'output': outputOperand});
   }
 
-  // Release the constant tensors of a model
-  dispose() {
-    // dispose() is only available in webnn-polyfill
-    if (this.graph_ !== null && 'dispose' in this.graph_) {
-      this.graph_.dispose();
-    }
-  }
-
   async compute(inputBuffer) {
     this.context_.writeTensor(this.inputTensor_, inputBuffer);
     const inputs = {'input': this.inputTensor_};
diff --git a/style_transfer/index.html b/style_transfer/index.html
index 4fb0374f..3f9b8d25 100644
--- a/style_transfer/index.html
+++ b/style_transfer/index.html
@@ -31,12 +31,6 @@
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
-              </label>
-              <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_gpu" autocomplete="off">WebGL (GPU)
-              </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
               </label>
diff --git a/style_transfer/main.js b/style_transfer/main.js
index 73c80e2f..be078907 100644
--- a/style_transfer/main.js
+++ b/style_transfer/main.js
@@ -30,6 +30,14 @@ const disabledSelectors = [
   '.btn',
 ];
 
+$(document).ready(async () => {
+  $('.icdisplay').hide();
+  if (!await utils.isWebNN()) {
+    console.log(utils.webNNNotSupportMessage());
+    ui.addAlert(utils.webNNNotSupportMessageHTML());
+  }
+});
+
 $(document).ready(() => {
   $('.icdisplay').hide();
   $('.badge').html(modelId);
@@ -197,15 +205,10 @@ export async function main() {
       lastdeviceType != deviceType || lastBackend != backend) {
       if (lastdeviceType != deviceType || lastBackend != backend) {
         // Set backend and device
-        await utils.setBackend(backend, deviceType);
         lastdeviceType = lastdeviceType != deviceType ?
                                 deviceType : lastdeviceType;
         lastBackend = lastBackend != backend ? backend : lastBackend;
       }
-      if (fastStyleTransferNet !== undefined) {
-        // Call dispose() to and avoid memory leak
-        fastStyleTransferNet.dispose();
-      }
       fastStyleTransferNet = new FastStyleTransferNet();
       isFirstTimeLoad = false;
       isModelChanged = false;