From 7efa458360c62e7e2958a7a4464846c9ff7f3399 Mon Sep 17 00:00:00 2001
From: Reilly Grant <reillyg@google.com>
Date: Fri, 10 Nov 2023 16:57:38 -0800
Subject: [PATCH 1/2] Add support for using the TensorFlow.js WebGPU backend

---
 common/utils.js                      | 25 +++++++++++++++++--------
 face_recognition/index.html          |  5 ++++-
 facial_landmark_detection/index.html |  5 ++++-
 image_classification/index.html      |  5 ++++-
 lenet/index.html                     |  5 ++++-
 nsnet2/index.html                    |  5 ++++-
 nsnet2/main.js                       |  4 ++--
 object_detection/index.html          |  5 ++++-
 rnnoise/index.html                   |  5 ++++-
 rnnoise/main.js                      |  5 +++--
 semantic_segmentation/index.html     |  5 ++++-
 style_transfer/index.html            |  5 ++++-
 12 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/common/utils.js b/common/utils.js
index c28185fa..89fd13f2 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -202,13 +202,14 @@ export function getMedianValue(array) {
 // 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';
+  // MLDeviceType: ['default', 'webgl', 'webgpu', 'cpu']
+  // 'default' or 'webgl': tfjs-backend-webgl, 'webgpu': tfjs-backend-webgpu,
+  // 'cpu': tfjs-backend-wasm
+  if (!device) device = 'webgpu';
   // 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' : device;
   const context = await navigator.ml.createContext();
   const tf = context.tf;
   if (tf) {
@@ -221,8 +222,8 @@ export async function setPolyfillBackend(device) {
       throw new Error(`Failed to set tf.js backend ${backend}.`);
     }
     await tf.ready();
-    let backendInfo = backend == 'wasm' ? 'WASM' : 'WebGL';
-    if (backendInfo == 'WASM') {
+    let backendInfo = tf.getBackend();
+    if (backendInfo == 'wasm') {
       const hasSimd = tf.env().features['WASM_HAS_SIMD_SUPPORT'];
       const hasThreads = tf.env().features['WASM_HAS_MULTITHREAD_SUPPORT'];
       if (hasThreads && hasSimd) {
@@ -239,6 +240,13 @@ export async function setPolyfillBackend(device) {
         `WebNN-polyfill</a> with tf.js ${tf.version_core} ` +
         `<b>${backendInfo}</b> backend.`, 'info');
   }
+  switch (device) {
+    case 'webgl':
+    case 'webgpu':
+      return 'gpu';
+    default:
+      return 'cpu';
+  }
 }
 
 // Get url params
@@ -304,7 +312,7 @@ export async function setBackend(backend, device) {
       // Create WebNN-polyfill script
       await loadScript(webnnPolyfillUrl, webnnPolyfillId);
     }
-    await setPolyfillBackend(device);
+    return await setPolyfillBackend(device);
   } else if (backend === 'webnn') {
     // For Electron
     if (isElectron()) {
@@ -326,8 +334,9 @@ export async function setBackend(backend, device) {
         addAlert(`WebNN is not supported!`, 'warning');
       }
     }
+    return device;
   } else {
-    addAlert(`Unknow backend: ${backend}`, 'warning');
+    addAlert(`Unknown backend: ${backend}`, 'warning');
   }
 }
 
diff --git a/face_recognition/index.html b/face_recognition/index.html
index dd8db030..28cd18b5 100644
--- a/face_recognition/index.html
+++ b/face_recognition/index.html
@@ -35,7 +35,10 @@
                 <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)
+                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+              </label>
+              <label class="btn btn-outline-info custom" name="polyfill">
+                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
index 7f0f8ea1..19e7424e 100644
--- a/facial_landmark_detection/index.html
+++ b/facial_landmark_detection/index.html
@@ -35,7 +35,10 @@
                 <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)
+                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+              </label>
+              <label class="btn btn-outline-info custom" name="polyfill">
+                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/image_classification/index.html b/image_classification/index.html
index 30f7e033..f4e4fd34 100644
--- a/image_classification/index.html
+++ b/image_classification/index.html
@@ -35,7 +35,10 @@
                 <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)
+                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+              </label>
+              <label class="btn btn-outline-info custom" name="polyfill">
+                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/lenet/index.html b/lenet/index.html
index 7ee1a339..52512dea 100644
--- a/lenet/index.html
+++ b/lenet/index.html
@@ -32,7 +32,10 @@
                   <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)
+                  <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                </label>
+                <label class="btn btn-outline-info custom" name="polyfill">
+                  <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
                 </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/nsnet2/index.html b/nsnet2/index.html
index 873b2f2d..85d1b359 100644
--- a/nsnet2/index.html
+++ b/nsnet2/index.html
@@ -32,7 +32,10 @@
                   <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)
+                  <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                </label>
+                <label class="btn btn-outline-info custom" name="polyfill">
+                  <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
                 </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/nsnet2/main.js b/nsnet2/main.js
index 5892b214..791966aa 100644
--- a/nsnet2/main.js
+++ b/nsnet2/main.js
@@ -144,9 +144,9 @@ browseButton.onclick = () => {
 
 export async function main() {
   try {
-    const [backend, deviceType] =
+    let [backend, deviceType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    await setBackend(backend, deviceType);
+    deviceType = await setBackend(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 e77bf819..b440a7b7 100644
--- a/object_detection/index.html
+++ b/object_detection/index.html
@@ -35,7 +35,10 @@
                 <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)
+                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+              </label>
+              <label class="btn btn-outline-info custom" name="polyfill">
+                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/rnnoise/index.html b/rnnoise/index.html
index b8c91d3a..5472adda 100644
--- a/rnnoise/index.html
+++ b/rnnoise/index.html
@@ -32,7 +32,10 @@
                   <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)
+                  <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                </label>
+                <label class="btn btn-outline-info custom" name="polyfill">
+                  <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
                 </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/rnnoise/main.js b/rnnoise/main.js
index c805fe50..3efaf85e 100644
--- a/rnnoise/main.js
+++ b/rnnoise/main.js
@@ -214,13 +214,14 @@ export async function main() {
   try {
     const [backend, deviceType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    await utils.setBackend(backend, deviceType);
+    const contextOptions = {};
+    contextOptions['deviceType'] =
+        await utils.setBackend(backend, deviceType);
     modelInfo.innerHTML = '';
     await log(modelInfo, `Creating RNNoise with input shape ` +
       `[${batchSize} (batch_size) x 100 (frames) x 42].`, true);
     await log(modelInfo, '- Loading model...');
     const powerPreference = utils.getUrlParams()[1];
-    const contextOptions = {deviceType};
     if (powerPreference) {
       contextOptions['powerPreference'] = powerPreference;
     }
diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
index b05b0c1a..3e75da91 100644
--- a/semantic_segmentation/index.html
+++ b/semantic_segmentation/index.html
@@ -35,7 +35,10 @@
                 <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)
+                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+              </label>
+              <label class="btn btn-outline-info custom" name="polyfill">
+                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/style_transfer/index.html b/style_transfer/index.html
index 4565cc3d..fa46667d 100644
--- a/style_transfer/index.html
+++ b/style_transfer/index.html
@@ -35,7 +35,10 @@
                 <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)
+                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+              </label>
+              <label class="btn btn-outline-info custom" name="polyfill">
+                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)

From 0b5d5d0e9fb23df11f2f853e2b84867627189677 Mon Sep 17 00:00:00 2001
From: Reilly Grant <reillyg@google.com>
Date: Fri, 10 Nov 2023 21:25:24 -0800
Subject: [PATCH 2/2] Finish the patch

---
 common/utils.js                      | 25 ++++++-------------------
 face_recognition/index.html          |  6 +++---
 face_recognition/main.js             | 22 ++++++++++------------
 facial_landmark_detection/index.html |  6 +++---
 facial_landmark_detection/main.js    | 22 ++++++++++------------
 image_classification/index.html      |  6 +++---
 image_classification/main.js         | 24 +++++++++++-------------
 lenet/index.html                     |  6 +++---
 lenet/main.js                        |  4 ++--
 nsnet2/index.html                    |  6 +++---
 nsnet2/main.js                       |  4 ++--
 object_detection/index.html          |  6 +++---
 object_detection/main.js             | 22 ++++++++++------------
 rnnoise/index.html                   |  6 +++---
 rnnoise/main.js                      |  4 ++--
 semantic_segmentation/index.html     |  6 +++---
 semantic_segmentation/main.js        | 22 ++++++++++------------
 style_transfer/index.html            |  6 +++---
 style_transfer/main.js               | 21 +++++++++------------
 19 files changed, 99 insertions(+), 125 deletions(-)

diff --git a/common/utils.js b/common/utils.js
index 89fd13f2..a76f3ef0 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -199,17 +199,12 @@ 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', 'webgl', 'webgpu', 'cpu']
-  // 'default' or 'webgl': tfjs-backend-webgl, 'webgpu': tfjs-backend-webgpu,
-  // 'cpu': tfjs-backend-wasm
-  if (!device) device = 'webgpu';
-  // Use 'webgl' by default for better performance.
+// Set tf.js backend
+export async function setPolyfillBackend(backend) {
+  if (!backend) backend = 'webgpu';
+  // Use 'webgpu' 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' : device;
   const context = await navigator.ml.createContext();
   const tf = context.tf;
   if (tf) {
@@ -240,13 +235,6 @@ export async function setPolyfillBackend(device) {
         `WebNN-polyfill</a> with tf.js ${tf.version_core} ` +
         `<b>${backendInfo}</b> backend.`, 'info');
   }
-  switch (device) {
-    case 'webgl':
-    case 'webgpu':
-      return 'gpu';
-    default:
-      return 'cpu';
-  }
 }
 
 // Get url params
@@ -285,7 +273,7 @@ export function getUrlParams() {
 }
 
 // Set backend for using WebNN-polyfill or WebNN
-export async function setBackend(backend, device) {
+export async function setBackend(backend, device, polyfillBackend) {
   const webnnPolyfillId = 'webnn_polyfill';
   const webnnNodeId = 'webnn_node';
   const webnnPolyfillElem = document.getElementById(webnnPolyfillId);
@@ -312,7 +300,7 @@ export async function setBackend(backend, device) {
       // Create WebNN-polyfill script
       await loadScript(webnnPolyfillUrl, webnnPolyfillId);
     }
-    return await setPolyfillBackend(device);
+    await setPolyfillBackend(polyfillBackend);
   } else if (backend === 'webnn') {
     // For Electron
     if (isElectron()) {
@@ -334,7 +322,6 @@ export async function setBackend(backend, device) {
         addAlert(`WebNN is not supported!`, 'warning');
       }
     }
-    return device;
   } else {
     addAlert(`Unknown backend: ${backend}`, 'warning');
   }
diff --git a/face_recognition/index.html b/face_recognition/index.html
index 28cd18b5..e6b1f323 100644
--- a/face_recognition/index.html
+++ b/face_recognition/index.html
@@ -32,13 +32,13 @@
           <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)
+                <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/face_recognition/main.js b/face_recognition/main.js
index 079b78a5..1fb3fae2 100644
--- a/face_recognition/main.js
+++ b/face_recognition/main.js
@@ -34,10 +34,9 @@ let buildTime = 0;
 let computeTime = 0;
 let fdOutputs;
 let frOutputs;
-let deviceType = '';
-let lastdeviceType = '';
 let backend = '';
 let lastBackend = '';
+let deviceType = '';
 const disabledSelectors = ['#tabs > li', '.btn'];
 
 $(document).ready(async () => {
@@ -45,7 +44,7 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    $('#polyfill_cpu_wasm').click();
   }
 });
 
@@ -275,8 +274,7 @@ function constructNetObject(type) {
 async function main() {
   try {
     if (fdModelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
+    backend = $('input[name="backend"]:checked').attr('id');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     const [numRuns, powerPreference, numThreads] = utils.getUrlParams();
@@ -284,13 +282,13 @@ async function main() {
     // Only do load() and build() when model first time loads,
     // there's new model choosed, backend changed or device changed
     if (isFirstTimeLoad || fdInstanceType !== fdModelName + layout ||
-        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;
+        lastBackend != backend) {
+      if (lastBackend != backend) {
+        let backendType;
+        let polyfillType;
+        [backendType, deviceType, polyfillType] = backend.split('_');
+        await utils.setBackend(backendType, deviceType, polyfillType);
+        lastBackend = backend;
       }
       if (frInstance !== null) {
         // Call dispose() to and avoid memory leak
diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
index 19e7424e..41deaebe 100644
--- a/facial_landmark_detection/index.html
+++ b/facial_landmark_detection/index.html
@@ -32,13 +32,13 @@
           <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)
+                <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/facial_landmark_detection/main.js b/facial_landmark_detection/main.js
index 003a1a9c..e777f658 100644
--- a/facial_landmark_detection/main.js
+++ b/facial_landmark_detection/main.js
@@ -30,10 +30,9 @@ let buildTime = 0;
 let computeTime = 0;
 let fdOutputs;
 let fldOutputs;
-let deviceType = '';
-let lastdeviceType = '';
 let backend = '';
 let lastBackend = '';
+let deviceType = '';
 const disabledSelectors = ['#tabs > li', '.btn'];
 
 $(document).ready(async () => {
@@ -41,7 +40,7 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    $('#polyfill_cpu_wasm').click();
   }
 });
 
@@ -210,8 +209,7 @@ function constructNetObject(type) {
 async function main() {
   try {
     if (fdModelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
+    backend = $('input[name="backend"]:checked').attr('id');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     const [numRuns, powerPreference, numThreads] = utils.getUrlParams();
@@ -219,13 +217,13 @@ async function main() {
     // Only do load() and build() when model first time loads,
     // there's new model choosed, backend changed or device changed
     if (isFirstTimeLoad || fdInstanceType !== fdModelName + layout ||
-        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;
+        lastBackend != backend) {
+      if (lastBackend != backend) {
+        let backendType;
+        let polyfillType;
+        [backendType, deviceType, polyfillType] = backend.split('_');
+        await utils.setBackend(backendType, deviceType, polyfillType);
+        lastBackend = backend;
       }
       if (fldInstance !== null) {
         // Call dispose() to and avoid memory leak
diff --git a/image_classification/index.html b/image_classification/index.html
index f4e4fd34..7af3e3e3 100644
--- a/image_classification/index.html
+++ b/image_classification/index.html
@@ -32,13 +32,13 @@
           <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)
+                <input type="radio" name="backend" id="polyfill_cpu_wasm_wasm" autocomplete="off">Wasm (CPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/image_classification/main.js b/image_classification/main.js
index b92b4a15..5368842b 100644
--- a/image_classification/main.js
+++ b/image_classification/main.js
@@ -28,10 +28,9 @@ let buildTime = 0;
 let computeTime = 0;
 let inputOptions;
 let outputBuffer;
-let deviceType = '';
-let lastdeviceType = '';
 let backend = '';
 let lastBackend = '';
+let deviceType = '';
 const disabledSelectors = ['#tabs > li', '.btn'];
 
 async function fetchLabels(url) {
@@ -45,7 +44,7 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    $('#polyfill_cpu_wasm').click();
   }
 });
 
@@ -205,23 +204,22 @@ function constructNetObject(type) {
 async function main() {
   try {
     if (modelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
+    backend = $('input[name="backend"]:checked').attr('id');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     let start;
     const [numRuns, powerPreference, numThreads] = utils.getUrlParams();
 
     // Only do load() and build() when model first time loads,
-    // there's new model choosed, backend changed or device changed
+    // there's new model choosed or backend changed
     if (isFirstTimeLoad || instanceType !== modelName + layout ||
-        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;
+        lastBackend != backend) {
+      if (lastBackend != backend) {
+        let backendType;
+        let polyfillType;
+        [backendType, deviceType, polyfillType] = backend.split('_');
+        await utils.setBackend(backendType, deviceType, polyfillType);
+        lastBackend = backend;
       }
       if (netInstance !== null) {
         // Call dispose() to and avoid memory leak
diff --git a/lenet/index.html b/lenet/index.html
index 52512dea..23b74573 100644
--- a/lenet/index.html
+++ b/lenet/index.html
@@ -29,13 +29,13 @@
               <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)
+                  <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
                 </label>
                 <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                  <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
                 </label>
                 <label class="btn btn-outline-info custom" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                  <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
                 </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/lenet/main.js b/lenet/main.js
index 8d9658de..eb7a940c 100644
--- a/lenet/main.js
+++ b/lenet/main.js
@@ -59,9 +59,9 @@ function clearResult() {
 }
 
 async function main() {
-  const [backend, deviceType] =
+  const [backend, deviceType, polyfillType] =
       $('input[name="backend"]:checked').attr('id').split('_');
-  await utils.setBackend(backend, deviceType);
+  await utils.setBackend(backend, deviceType, polyfillType);
   drawNextDigitFromMnist();
   const pen = new Pen(visualCanvas);
   const weightUrl = '../test-data/models/lenet_nchw/weights/lenet.bin';
diff --git a/nsnet2/index.html b/nsnet2/index.html
index 85d1b359..70580e61 100644
--- a/nsnet2/index.html
+++ b/nsnet2/index.html
@@ -29,13 +29,13 @@
               <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)
+                  <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
                 </label>
                 <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                  <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
                 </label>
                 <label class="btn btn-outline-info custom" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                  <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
                 </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/nsnet2/main.js b/nsnet2/main.js
index 791966aa..113e504b 100644
--- a/nsnet2/main.js
+++ b/nsnet2/main.js
@@ -144,9 +144,9 @@ browseButton.onclick = () => {
 
 export async function main() {
   try {
-    let [backend, deviceType] =
+    let [backend, deviceType, polyfillType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    deviceType = await setBackend(backend, deviceType);
+    deviceType = await setBackend(backend, deviceType, polyfillType);
     // 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 b440a7b7..1d5839b2 100644
--- a/object_detection/index.html
+++ b/object_detection/index.html
@@ -32,13 +32,13 @@
           <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)
+                <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/object_detection/main.js b/object_detection/main.js
index 2b3a466a..cc92a895 100644
--- a/object_detection/main.js
+++ b/object_detection/main.js
@@ -26,10 +26,9 @@ let buildTime = 0;
 let computeTime = 0;
 let inputOptions;
 let outputs;
-let deviceType = '';
-let lastdeviceType = '';
 let backend = '';
 let lastBackend = '';
+let deviceType = '';
 const disabledSelectors = ['#tabs > li', '.btn'];
 
 async function fetchLabels(url) {
@@ -43,7 +42,7 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    $('#polyfill_cpu_wasm').click();
   }
 });
 
@@ -177,8 +176,7 @@ function constructNetObject(type) {
 async function main() {
   try {
     if (modelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
+    backend = $('input[name="backend"]:checked').attr('id');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     let start;
@@ -187,13 +185,13 @@ async function main() {
     // Only do load() and build() when model first time loads,
     // there's new model choosed, backend changed or device changed
     if (isFirstTimeLoad || instanceType !== modelName + layout ||
-        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;
+        lastBackend != backend) {
+      if (lastBackend != backend) {
+        let backendType;
+        let polyfillType;
+        [backendType, deviceType, polyfillType] = backend.split('_');
+        await utils.setBackend(backendType, deviceType, polyfillType);
+        lastBackend = backend;
       }
       if (netInstance !== null) {
         // Call dispose() to and avoid memory leak
diff --git a/rnnoise/index.html b/rnnoise/index.html
index 5472adda..a1221344 100644
--- a/rnnoise/index.html
+++ b/rnnoise/index.html
@@ -29,13 +29,13 @@
               <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)
+                  <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
                 </label>
                 <label class="btn btn-outline-info" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                  <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
                 </label>
                 <label class="btn btn-outline-info custom" name="polyfill">
-                  <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                  <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
                 </label>
                 <label class="btn btn-outline-info" name="webnn">
                   <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/rnnoise/main.js b/rnnoise/main.js
index 3efaf85e..59a63da5 100644
--- a/rnnoise/main.js
+++ b/rnnoise/main.js
@@ -212,11 +212,11 @@ fileInput.addEventListener('input', (event) => {
 
 export async function main() {
   try {
-    const [backend, deviceType] =
+    const [backend, deviceType, polyfillType] =
         $('input[name="backend"]:checked').attr('id').split('_');
     const contextOptions = {};
     contextOptions['deviceType'] =
-        await utils.setBackend(backend, deviceType);
+        await utils.setBackend(backend, deviceType, polyfillType);
     modelInfo.innerHTML = '';
     await log(modelInfo, `Creating RNNoise with input shape ` +
       `[${batchSize} (batch_size) x 100 (frames) x 42].`, true);
diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
index 3e75da91..1a39d0e4 100644
--- a/semantic_segmentation/index.html
+++ b/semantic_segmentation/index.html
@@ -32,13 +32,13 @@
           <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)
+                <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/semantic_segmentation/main.js b/semantic_segmentation/main.js
index 69cb90f2..e444e583 100644
--- a/semantic_segmentation/main.js
+++ b/semantic_segmentation/main.js
@@ -26,10 +26,9 @@ let inputOptions;
 let outputBuffer;
 let renderer;
 let hoverPos = null;
-let deviceType = '';
-let lastdeviceType = '';
 let backend = '';
 let lastBackend = '';
+let deviceType = '';
 const disabledSelectors = ['#tabs > li', '.btn'];
 
 $(document).ready(async () => {
@@ -37,7 +36,7 @@ $(document).ready(async () => {
   if (await utils.isWebNN()) {
     $('#webnn_cpu').click();
   } else {
-    $('#polyfill_cpu').click();
+    $('#polyfill_cpu_wasm').click();
   }
 });
 
@@ -298,8 +297,7 @@ function constructNetObject(type) {
 export async function main() {
   try {
     if (modelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
+    backend = $('input[name="backend"]:checked').attr('id');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     let start;
@@ -308,13 +306,13 @@ export async function main() {
     // Only do load() and build() when model first time loads,
     // there's new model choosed, backend changed or device changed
     if (isFirstTimeLoad || instanceType !== modelName + layout ||
-        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;
+        lastBackend != backend) {
+      if (lastBackend != backend) {
+        let backendType;
+        let polyfillType;
+        [backendType, deviceType, polyfillType] = backend.split('_');
+        await utils.setBackend(backendType, deviceType, polyfillType);
+        lastBackend = backend;
       }
       if (netInstance !== null) {
         // Call dispose() to and avoid memory leak
diff --git a/style_transfer/index.html b/style_transfer/index.html
index fa46667d..2f701c0a 100644
--- a/style_transfer/index.html
+++ b/style_transfer/index.html
@@ -32,13 +32,13 @@
           <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)
+                <input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="polyfill">
-                <input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
+                <input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
               </label>
               <label class="btn btn-outline-info custom" name="webnn">
                 <input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
diff --git a/style_transfer/main.js b/style_transfer/main.js
index 25dde460..069ea5c7 100644
--- a/style_transfer/main.js
+++ b/style_transfer/main.js
@@ -20,10 +20,9 @@ let loadTime = 0;
 let buildTime = 0;
 let computeTime = 0;
 let outputBuffer;
-let deviceType = '';
-let lastdeviceType = '';
 let backend = '';
 let lastBackend = '';
+let deviceType = '';
 const disabledSelectors = [
   '#tabs > li',
   '#gallery',
@@ -37,8 +36,7 @@ $(document).ready(() => {
 });
 
 $('#backendBtns .btn').on('change', async (e) => {
-  [backend, deviceType] =
-      $('input[name="backend"]:checked').attr('id').split('_');
+  backend = $('input[name="backend"]:checked').attr('id');
   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
   await main();
 });
@@ -195,14 +193,13 @@ export async function main() {
 
     // Only do load() and build() when model first time loads,
     // there's new model choosed, backend changed or device changed
-    if (isFirstTimeLoad || isModelChanged ||
-      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 (isFirstTimeLoad || isModelChanged || lastBackend != backend) {
+      if (lastBackend != backend) {
+        let backendType;
+        let polyfillType;
+        [backendType, deviceType, polyfillType] = backend.split('_');
+        await utils.setBackend(backendType, deviceType, polyfillType);
+        lastBackend = backend;
       }
       if (fastStyleTransferNet !== undefined) {
         // Call dispose() to and avoid memory leak