Add link of Installation Guides (#203)

* Add link of Installation Guides * For GPU * For GPU
webmachinelearning · Mar 25, 2024 · 24b069b · 24b069b
1 parent 86eb311
commit 24b069b
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -37,12 +37,15 @@ To get started, follow these steps:
 5. Keep in mind that WebNN currently supports the CPU backend only on Chrome or Edge browsers, and it requires enabling the experimental web platform features flag (see below). Ensure you have this flag enabled in your browser to fully experience WebNN functionality.
 6. Experiment with the code and explore how WebNN can enhance machine learning tasks in the browser, navigating to http://localhost:8080.
 
-### Enabling Experimental Features Flag
-1. In Chrome navigate to `chrome://flags/`. In Edge navigate to `edge://flags/`.
-1. Search for the **#enable-experimental-web-platform-features** flag.
-1. Enable the feature: Toggle the corresponding switch or checkbox to turn it on.  
-   **Note:** Enabling experimental features may lead to unexpected behavior, so proceed with caution.
-1. Restart the browser: If prompted, restart your browser after enabling the feature.
+### WebNN Installation Guides
+
+WebNN requires a compatible browser to run, and Windows 11 v21H2 (DML 1.6.0) or higher for GPU. Try the latest Google Chrome* Canary or Microsoft Edge Canary, which requires enabling WebNN functionality in the settings.
+
+1. Download the latest [Google Chrome Canary](https://www.google.com/chrome/canary/) or [Microsoft Edge Canary](https://www.microsoft.com/en-us/edge/download/insider) browser. 
+2. To enable WebNN, in your browser address bar, `enter chrome://flags`, and then press `Enter`. An Experiments page opens. 
+3. In the Search flags box, enter `webnn`. `Enables WebNN API` appears. 
+4. In the drop-down menu, select `Enabled`. 
+5. Relaunch your browser.
 
 ## Support and Feedback
 If you encounter any issues or have feedback on the WebNN Samples, please open an issue on the repository. We appreciate your input and will strive to address any problems as quickly as possible.

diff --git a/code/index.html b/code/index.html
@@ -61,7 +61,7 @@
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.

diff --git a/common/component/component.js b/common/component/component.js
@@ -576,10 +576,23 @@ const webnnbadge = () => {
   return nnbadge;
 };
 
+const footer = () => {
+    const footerlink = `
+        <p>
+          &copy;2024 
+          <a href="https://webmachinelearning.github.io/">WebNN API</a> ·
+          <a href="https://github.com/webmachinelearning/webnn-samples#webnn-installation-guides">Installation Guides</a> · 
+          <a href="https://webmachinelearning.github.io/webnn-status/">Implementation Status</a>
+        </p>
+    `;
+    return footerlink;
+}
+
 $(document).ready(async () => {
   $("nav ul.navbar-nav").html(webnnsamplenav());
   $("#logosvg").html(webnnlogo());
   $("#badge").html(webnnbadge());
+  $("#footer").html(footer());
   if (await isWebNN()) {
     if ($("#backendBtns")) {
       if (!isElectron()) {

diff --git a/common/css/style.css b/common/css/style.css
@@ -815,4 +815,12 @@ a:hover {
 .wider-col {
   flex: 0 0 13%;
   max-width: 13%;
+}
+
+#footer {
+  font-size: 0.8rem;
+}
+
+#footer a {
+  display: inline-block;
 }
diff --git a/face_recognition/index.html b/face_recognition/index.html
@@ -205,7 +205,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.

diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
@@ -178,7 +178,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.

diff --git a/image_classification/index.html b/image_classification/index.html
@@ -197,7 +197,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.

diff --git a/index.html b/index.html
@@ -351,7 +351,7 @@ <h1 class="title"><a class="replaceableUrl" href="./face_recognition/index.html"
     </div>
   </div>
   <footer class="text-muted text-center text-small mt-5">
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.

diff --git a/lenet/index.html b/lenet/index.html
@@ -110,7 +110,7 @@ <h5>Prediction Result:</h5>
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.

diff --git a/nsnet2/index.html b/nsnet2/index.html
@@ -100,7 +100,7 @@
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.

diff --git a/object_detection/index.html b/object_detection/index.html
@@ -154,7 +154,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.

diff --git a/rnnoise/index.html b/rnnoise/index.html
@@ -100,7 +100,7 @@
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.

diff --git a/selfie_segmentation/index.html b/selfie_segmentation/index.html
@@ -164,7 +164,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <img id='feedElement' hidden crossorigin='anonymous' src=''>
   <video id='feedMediaElement' autoplay playsinline hidden></video>

diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
@@ -211,7 +211,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <img id='feedElement' hidden crossorigin='anonymous' src=''>
   <video id='feedMediaElement' autoplay playsinline hidden></video>

diff --git a/style_transfer/index.html b/style_transfer/index.html
@@ -189,7 +189,7 @@ <h6 class='text-muted shoulddisplay' style='display: none;'>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.