diff --git a/common/utils.js b/common/utils.js
index c28185fa..a76f3ef0 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -199,16 +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', 'gpu', 'cpu']
-  // 'default' or 'gpu': tfjs-backend-webgl, 'cpu': tfjs-backend-wasm
-  if (!device) device = 'gpu';
-  // 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' : 'webgl';
   const context = await navigator.ml.createContext();
   const tf = context.tf;
   if (tf) {
@@ -221,8 +217,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) {
@@ -277,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);
@@ -304,7 +300,7 @@ export async function setBackend(backend, device) {
       // Create WebNN-polyfill script
       await loadScript(webnnPolyfillUrl, webnnPolyfillId);
     }
-    await setPolyfillBackend(device);
+    await setPolyfillBackend(polyfillBackend);
   } else if (backend === 'webnn') {
     // For Electron
     if (isElectron()) {
@@ -327,7 +323,7 @@ export async function setBackend(backend, 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 0a929c3f..f196e436 100644
--- a/face_recognition/index.html
+++ b/face_recognition/index.html
@@ -32,10 +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_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_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 b6eaf20a..2072e2be 100644
--- a/facial_landmark_detection/index.html
+++ b/facial_landmark_detection/index.html
@@ -32,10 +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_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_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 4daf5917..8e60a4b9 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 30f7e033..7af3e3e3 100644
--- a/image_classification/index.html
+++ b/image_classification/index.html
@@ -32,10 +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_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_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 7ee1a339..23b74573 100644
--- a/lenet/index.html
+++ b/lenet/index.html
@@ -29,10 +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_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_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 33bf573f..55b177ad 100644
--- a/nsnet2/index.html
+++ b/nsnet2/index.html
@@ -29,10 +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_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_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 5892b214..113e504b 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, polyfillType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    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 96234020..1813cdd9 100644
--- a/object_detection/index.html
+++ b/object_detection/index.html
@@ -32,10 +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_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_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 b8c91d3a..a1221344 100644
--- a/rnnoise/index.html
+++ b/rnnoise/index.html
@@ -29,10 +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_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_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 c805fe50..59a63da5 100644
--- a/rnnoise/main.js
+++ b/rnnoise/main.js
@@ -212,15 +212,16 @@ fileInput.addEventListener('input', (event) => {
 
 export async function main() {
   try {
-    const [backend, deviceType] =
+    const [backend, deviceType, polyfillType] =
         $('input[name="backend"]:checked').attr('id').split('_');
-    await utils.setBackend(backend, deviceType);
+    const contextOptions = {};
+    contextOptions['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);
     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 7f2a071b..d4825331 100644
--- a/semantic_segmentation/index.html
+++ b/semantic_segmentation/index.html
@@ -32,10 +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_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_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 4565cc3d..2f701c0a 100644
--- a/style_transfer/index.html
+++ b/style_transfer/index.html
@@ -32,10 +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_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_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