Remove legacy code for supporting Electron (#244)

webmachinelearning · Jun 6, 2024 · fc9f030 · fc9f030
1 parent 4a62cc3
commit fc9f030
Show file tree

Hide file tree

Showing 13 changed files with 23 additions and 186 deletions.
diff --git a/code/index.html b/code/index.html
@@ -63,14 +63,6 @@
       <div id="badge"></div>
       <div id="footer"></div>
     </footer>
-    <script>
-      // This workaround is to fix jquery loading issue in electron.
-      // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-      if (typeof module === "object") {
-        window.tempModule = module;
-        module = undefined;
-      }
-    </script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
@@ -79,10 +71,6 @@
     <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>
-      // To restore module after loading 3rd-party libraries.
-      if (window.tempModule) module = window.tempModule;
-    </script>
     <script type="module">
       import {main} from './main.js';
       window.onload = async () => {

diff --git a/common/component/component.js b/common/component/component.js
@@ -1,4 +1,4 @@
-import { isElectron, isWebNN } from "../utils.js";
+import { isWebNN } from "../utils.js";
 
 const webnnlogo = () => {
   const nnlogo = `
@@ -598,26 +598,24 @@ $(document).ready(async () => {
   $("#footer").html(footer());
   if (await isWebNN()) {
     if ($("#backendBtns")) {
-      if (!isElectron()) {
-        $('label[name="polyfill"]').addClass("disabled");
-        $('label[name="polyfill"]').addClass("btn-outline-secondary");
-        $('label[name="polyfill"]').removeClass("btn-outline-info");
-        $('label[name="polyfill"]').attr(
+      $('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'});
+      } catch (error) {
+        $('#webnn_npu').parent().addClass('disabled');
+        $('#webnn_npu').parent().addClass('btn-outline-secondary');
+        $('#webnn_npu').parent().removeClass('btn-outline-info');
+        $('#webnn_npu').parent().attr(
           "title",
-          "WebNN is supported, disable WebNN Polyfill."
+          "Unable to find a capable NPU adapter."
         );
-        // Disable WebNN NPU backend if failed to find a capable NPU adapter.
-        try {
-          await navigator.ml.createContext({deviceType: 'npu'});
-        } catch (error) {
-          $('#webnn_npu').parent().addClass('disabled');
-          $('#webnn_npu').parent().addClass('btn-outline-secondary');
-          $('#webnn_npu').parent().removeClass('btn-outline-info');
-          $('#webnn_npu').parent().attr(
-            "title",
-            "Unable to find a capable NPU adapter."
-          );
-        }
       }
     }
     $("#webnnstatus").html("supported").addClass("webnn-status-true");

diff --git a/common/utils.js b/common/utils.js
@@ -375,25 +375,8 @@ export async function setBackend(backend, device) {
     }
     await setPolyfillBackend(device);
   } else if (backend === 'webnn') {
-    // For Electron
-    if (isElectron()) {
-      if (webnnPolyfillElem) {
-        document.body.removeChild(webnnPolyfillElem);
-      }
-      if (!webnnNodeElem) {
-        // Create WebNN node script, node_setup.js is located at
-        // https://github.com/webmachinelearning/webnn-native/tree/main/node/examples/electron/webnn-samples
-        // Specific for running samples with WebNN node addon on Electron.js
-        await loadScript('../../node_setup.js', webnnNodeId);
-      }
-      addAlert(
-          `This sample is running on WebNN-native with <b>${device}</b>` +
-          ` backend.`, 'info');
-    } else {
-      // For Browser
-      if (!await isWebNN()) {
-        addAlert(`WebNN is not supported!`, 'warning');
-      }
+    if (!await isWebNN()) {
+      addAlert(`WebNN is not supported!`, 'warning');
     }
   } else {
     addAlert(`Unknow backend: ${backend}`, 'warning');
@@ -415,24 +398,12 @@ async function loadScript(url, id) {
   });
 }
 
-export function isElectron() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.indexOf(' electron/') > -1;
-}
-
 export async function isWebNN() {
-  // This would be used in
-  // https://github.com/webmachinelearning/webnn-native/tree/main/node/examples/electron/webnn-samples,
-  // where WebNN is enabled by default.
-  if (isElectron()) {
-    return true;
+  if (typeof MLGraphBuilder !== 'undefined') {
+    const context = await navigator.ml.createContext();
+    return !context.tf;
   } else {
-    if (typeof MLGraphBuilder !== 'undefined') {
-      const context = await navigator.ml.createContext();
-      return !context.tf;
-    } else {
-      return false;
-    }
+    return false;
   }
 }
 

diff --git a/face_recognition/index.html b/face_recognition/index.html
@@ -207,14 +207,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
     <div id="badge"></div>
     <div id="footer"></div>
   </footer>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
@@ -227,10 +219,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"
     integrity="sha256-thVOvsS0U8X0/2twH3+6dCK3ZPTvgWgFSivgfpj5vQQ="
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module" src='./main.js'></script>
   <script type="module" src="../common/component/component.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
@@ -180,14 +180,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
     <div id="badge"></div>
     <div id="footer"></div>
   </footer>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
@@ -200,10 +192,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"
     integrity="sha256-thVOvsS0U8X0/2twH3+6dCK3ZPTvgWgFSivgfpj5vQQ="
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module" src='./main.js'></script>
   <script type="module" src="../common/component/component.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/image_classification/index.html b/image_classification/index.html
@@ -224,14 +224,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
     <div id="badge"></div>
     <div id="footer"></div>
   </footer>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
@@ -241,10 +233,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module" src="./main.js"></script>
   <script type="module" src="../common/component/component.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/index.html b/index.html
@@ -353,24 +353,12 @@ <h1 class="title"><a class="replaceableUrl" href="./face_recognition/index.html"
   <footer class="text-muted text-center text-small mt-5">
     <div id="footer"></div>
   </footer>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module">
     import {getUrlParams} from './common/utils.js';
     window.onload = () => {

diff --git a/lenet/index.html b/lenet/index.html
@@ -112,22 +112,10 @@ <h5>Prediction Result:</h5>
       <div id="badge"></div>
       <div id="footer"></div>
     </footer>
-    <script>
-      // This workaround is to fix jquery loading issue in electron.
-      // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-      if (typeof module === "object") {
-        window.tempModule = module;
-        module = undefined;
-      }
-    </script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
     <script src="libs/mnist.js"></script>
-    <script>
-      // To restore module after loading 3rd-party libraries.
-      if (window.tempModule) module = window.tempModule;
-    </script>
     <script type="module" src="main.js"></script>
     <script type="module" src="../common/component/component.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/nsnet2/index.html b/nsnet2/index.html
@@ -102,22 +102,10 @@
       <div id="badge"></div>
       <div id="footer"></div>
     </footer>
-    <script>
-      // This workaround is to fix jquery loading issue in electron.
-      // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-      if (typeof module === "object") {
-        window.tempModule = module;
-        module = undefined;
-      }
-    </script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js" integrity="sha256-thVOvsS0U8X0/2twH3+6dCK3ZPTvgWgFSivgfpj5vQQ=" crossorigin="anonymous"></script>
-    <script>
-      // To restore module after loading 3rd-party libraries.
-      if (window.tempModule) module = window.tempModule;
-    </script>
     <script type="module" src="./main.js"></script>
     <script type="module" src="../common/component/component.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/object_detection/index.html b/object_detection/index.html
@@ -174,14 +174,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
     <div id="badge"></div>
     <div id="footer"></div>
   </footer>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
@@ -191,10 +183,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module" src='./main.js'></script>
   <script type="module" src="../common/component/component.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/rnnoise/index.html b/rnnoise/index.html
@@ -102,23 +102,11 @@
       <div id="badge"></div>
       <div id="footer"></div>
     </footer>
-    <script>
-      // This workaround is to fix jquery loading issue in electron.
-      // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-      if (typeof module === "object") {
-        window.tempModule = module;
-        module = undefined;
-      }
-    </script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
     <script type="module" src="./rnnoise.js"></script>
     <script type="module" src="./processer.js"></script>
-    <script>
-      // To restore module after loading 3rd-party libraries.
-      if (window.tempModule) module = window.tempModule;
-    </script>
     <script type="module" src="./main.js"></script>
     <script type="module" src="../common/component/component.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
@@ -215,14 +215,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </footer>
   <img id='feedElement' hidden crossorigin='anonymous' src=''>
   <video id='feedMediaElement' autoplay playsinline hidden></video>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
@@ -236,10 +228,6 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"
     integrity="sha256-thVOvsS0U8X0/2twH3+6dCK3ZPTvgWgFSivgfpj5vQQ="
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module" src="./main.js"></script>
   <script type="module" src="../common/component/component.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>

diff --git a/style_transfer/index.html b/style_transfer/index.html
@@ -191,14 +191,6 @@ <h6 class='text-muted shoulddisplay' style='display: none;'>
     <div id="badge"></div>
     <div id="footer"></div>
   </footer>
-  <script>
-    // This workaround is to fix jquery loading issue in electron.
-    // Refer to https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined.
-    if (typeof module === "object") {
-      window.tempModule = module;
-      module = undefined;
-    }
-  </script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
@@ -208,10 +200,6 @@ <h6 class='text-muted shoulddisplay' style='display: none;'>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
-  <script>
-    // To restore module after loading 3rd-party libraries.
-    if (window.tempModule) module = window.tempModule;
-  </script>
   <script type="module" src="./main.js"></script>
   <script type="module" src="../common/component/component.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-6TK7JD3KKY"></script>