Refer to the latest published version of the WebNN API (webmachinelea…

…rning#170)

common/component/component.js

@@ -1,8 +1,7 @@
-import {isElectron, isWebNN} from '../utils.js';
+import { isElectron, isWebNN } from "../utils.js";
 
 const webnnlogo = () => {
-    const nnlogo =
-        `
+  const nnlogo = `
             <svg
             viewBox="2.6957588027748756 5.85526315789474 112.52568466533302 24.310003913380942"
             width="562.65"
@@ -536,12 +535,11 @@ const webnnlogo = () => {
             </g>
         </svg>
         `;
-    return nnlogo;
+  return nnlogo;
 };
 
 const webnnsamplenav = () => {
-    const nnnav =
-        `
+  const nnnav = `
         <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
             Samples
@@ -560,50 +558,55 @@ const webnnsamplenav = () => {
         </div>
         </li>
     `;
-    return nnnav;
+  return nnnav;
 };
 
 const webnnbadge = () => {
-    const nnbadge =
-        `
+  const nnbadge = `
             <div class='webnnbadge mb-4'>
                 <div class='webnn-title'>WebNN API</div>
                 <div id="webnnstatus"></div>
             </div>
             <div class='webnnbadge mb-4'>
                 <div class='webnn-title'>W3C Spec</div>
-                <div class='webnn-status-true'><a href='https://webmachinelearning.github.io/webnn/#usecases'
+                <div class='webnn-status-true'><a href='https://www.w3.org/TR/webnn/#usecases'
                     title='W3C Web Neural Network API Use Cases'>Use Cases</a></div>
             </div>
         `;
-    return nnbadge;
+  return nnbadge;
 };
 
 $(document).ready(function () {
-    $('nav ul.navbar-nav').html(webnnsamplenav());
-    $('#logosvg').html(webnnlogo());
-    $('#badge').html(webnnbadge());
-    if (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('title', 'WebNN is supported, disable WebNN Polyfill.');
-                $('label:contains("WebNN (GPU)")').addClass('disabled');
-                $('label:contains("WebNN (GPU)")').addClass('btn-outline-secondary');
-                $('label:contains("WebNN (GPU)")').removeClass('btn-outline-info');
-                $('label:contains("WebNN (GPU)")').attr('title', 'WebNN GPU backend is not supported.');
-            }
-        }
-        $('#webnnstatus').html('supported').addClass('webnn-status-true');
-    } else {
-        if ($('#backendBtns')) {
-            $('label[name="webnn"]').addClass('disabled');
-            $('label[name="webnn"]').addClass('btn-outline-secondary');
-            $('label[name="webnn"]').removeClass('btn-outline-info');
-            $('label[name="webnn"]').attr('title', 'WebNN is not supported!');
-        }
-        $('#webnnstatus').html('not supported').addClass('webnn-status-false');
+  $("nav ul.navbar-nav").html(webnnsamplenav());
+  $("#logosvg").html(webnnlogo());
+  $("#badge").html(webnnbadge());
+  if (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(
+          "title",
+          "WebNN is supported, disable WebNN Polyfill."
+        );
+        $('label:contains("WebNN (GPU)")').addClass("disabled");
+        $('label:contains("WebNN (GPU)")').addClass("btn-outline-secondary");
+        $('label:contains("WebNN (GPU)")').removeClass("btn-outline-info");
+        $('label:contains("WebNN (GPU)")').attr(
+          "title",
+          "WebNN GPU backend is not supported."
+        );
+      }
     }
-});
+    $("#webnnstatus").html("supported").addClass("webnn-status-true");
+  } else {
+    if ($("#backendBtns")) {
+      $('label[name="webnn"]').addClass("disabled");
+      $('label[name="webnn"]').addClass("btn-outline-secondary");
+      $('label[name="webnn"]').removeClass("btn-outline-info");
+      $('label[name="webnn"]').attr("title", "WebNN is not supported!");
+    }
+    $("#webnnstatus").html("not supported").addClass("webnn-status-false");
+  }
+});