Clean up index.html for cleaner URLs (#252)

webmachinelearning · Jun 21, 2024 · ea4b02b · ea4b02b
1 parent 9c37259
commit ea4b02b
Show file tree

Hide file tree

Showing 16 changed files with 59 additions and 57 deletions.
diff --git a/code/index.html b/code/index.html
@@ -25,7 +25,7 @@
   </head>
   <body>
     <nav class="navbar navbar-expand-md navbar-dark">
-      <a href="../index.html">
+      <a href="../">
         <div class="logosvg" id="logosvg"></div>
       </a>
       <span class="navbar-brand">WebNN Code Editor</span>

diff --git a/common/component/component.js b/common/component/component.js
@@ -545,17 +545,17 @@ const webnnsamplenav = () => {
             Samples
         </a>
         <div class="dropdown-menu" id="webnn-dropdown">
-            <a class="dropdown-item" href="../nnotepad/index.html">NNotepad - WebNN Playground</a>
-            <a class="dropdown-item" href="../image_classification/index.html">Image Classification</a>
-            <a class="dropdown-item" href="../lenet/index.html">Handwritten Digits Classification</a>
-            <a class="dropdown-item" href="../nsnet2/index.html">Noise Suppression (NSNet2)</a>
-            <a class="dropdown-item" href="../rnnoise/index.html">Noise Suppression (RNNoise)</a>
-            <a class="dropdown-item" href="../style_transfer/index.html">Fast Style Transfer</a>
-            <a class="dropdown-item" href="../object_detection/index.html">Object Detection</a>
-            <a class="dropdown-item" href="../semantic_segmentation/index.html">Semantic Segmentation</a>
-            <a class="dropdown-item" href="../face_recognition/index.html">Face Recognition</a>
-            <a class="dropdown-item" href="../facial_landmark_detection/index.html">Facial landmark Detection</a>
-            <a class="dropdown-item" href="../code/index.html">WebNN Code Editor</a>
+            <a class="dropdown-item" href="../nnotepad/">NNotepad - WebNN Playground</a>
+            <a class="dropdown-item" href="../image_classification/">Image Classification</a>
+            <a class="dropdown-item" href="../lenet/">Handwritten Digits Classification</a>
+            <a class="dropdown-item" href="../nsnet2/">Noise Suppression (NSNet2)</a>
+            <a class="dropdown-item" href="../rnnoise/">Noise Suppression (RNNoise)</a>
+            <a class="dropdown-item" href="../style_transfer/">Fast Style Transfer</a>
+            <a class="dropdown-item" href="../object_detection/">Object Detection</a>
+            <a class="dropdown-item" href="../semantic_segmentation/">Semantic Segmentation</a>
+            <a class="dropdown-item" href="../face_recognition/">Face Recognition</a>
+            <a class="dropdown-item" href="../facial_landmark_detection/">Facial landmark Detection</a>
+            <a class="dropdown-item" href="../code/">WebNN Code Editor</a>
         </div>
         </li>
     `;

diff --git a/face_recognition/index.html b/face_recognition/index.html
@@ -16,7 +16,7 @@
 
 <body id='facerecognition'>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Face Recognition</span>

diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Facial Landmark Detection</span>

diff --git a/image_classification/index.html b/image_classification/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Image Classification</span>

diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="./index.html">
+    <a href="./">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand"></span>
@@ -34,10 +34,10 @@ <h4 class="text-info">WebNN Samples</h4>
           <div id="bg_nnotepad" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./nnotepad/index.html">NNotepad - WebNN Playground</a></h1>
+                <h1 class="title"><a class="replaceableUrl" href="./nnotepad/">NNotepad - WebNN Playground</a></h1>
                 <p class="text">A browser-based playground for experimenting with WebNN expressions without boilerplate code.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./nnotepad/index.html">
+                  <a class="replaceableUrl" href="./nnotepad/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -63,11 +63,11 @@ <h1 class="title"><a class="replaceableUrl" href="./nnotepad/index.html">NNotepa
           <div id="bg_ce" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./code/index.html">WebNN Code
+                <h1 class="title"><a class="replaceableUrl" href="./code/">WebNN Code
                     Editor</a></h1>
                 <p class="text">Evaluate, review and modify WebNN sample codes interactively in web browser.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./code/index.html">
+                  <a class="replaceableUrl" href="./code/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -93,11 +93,11 @@ <h1 class="title"><a class="replaceableUrl" href="./code/index.html">WebNN Code
           <div id="bg_ic" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./image_classification/index.html">Image
+                <h1 class="title"><a class="replaceableUrl" href="./image_classification/">Image
                     Classfication</a></h1>
                 <p class="text">Classifying the major object in the image into a set of pre-defined classes.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./image_classification/index.html">
+                  <a class="replaceableUrl" href="./image_classification/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -126,11 +126,11 @@ <h1 class="title"><a class="replaceableUrl" href="./image_classification/index.h
           <div id="bg_hr" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./lenet/index.html">Handwritten Digits
+                <h1 class="title"><a class="replaceableUrl" href="./lenet/">Handwritten Digits
                     Classification</a></h1>
                 <p class="text">Use LeNet to classify handwritten digits from the clasic MNIST example data set.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./lenet/index.html">
+                  <a class="replaceableUrl" href="./lenet/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -156,11 +156,11 @@ <h1 class="title"><a class="replaceableUrl" href="./lenet/index.html">Handwritte
           <div id="bg_st" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./style_transfer/index.html">Fast
+                <h1 class="title"><a class="replaceableUrl" href="./style_transfer/">Fast
                     Style Transfer</a></h1>
                 <p class="text">Applying the STARRY NIGHT and other painting styles of Van Gogh to your image.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./style_transfer/index.html">
+                  <a class="replaceableUrl" href="./style_transfer/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -186,11 +186,11 @@ <h1 class="title"><a class="replaceableUrl" href="./style_transfer/index.html">F
           <div id="bg_ns" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./nsnet2/index.html">Noise
+                <h1 class="title"><a class="replaceableUrl" href="./nsnet2/">Noise
                     Suppression (NSNet2)</a></h1>
                 <p class="text">A NSNet2 baseline implementation of deep learning-based noise suppression.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./nsnet2/index.html">
+                  <a class="replaceableUrl" href="./nsnet2/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -218,11 +218,11 @@ <h1 class="title"><a class="replaceableUrl" href="./nsnet2/index.html">Noise
           <div id="bg_ns2" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./rnnoise/index.html">Noise
+                <h1 class="title"><a class="replaceableUrl" href="./rnnoise/">Noise
                     Suppression (RNNoise)</a></h1>
                 <p class="text">An RNNoise baseline implementation of deep learning-based noise suppression.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./rnnoise/index.html">
+                  <a class="replaceableUrl" href="./rnnoise/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -248,12 +248,12 @@ <h1 class="title"><a class="replaceableUrl" href="./rnnoise/index.html">Noise
           <div id="bg_od" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./object_detection/index.html">Object
+                <h1 class="title"><a class="replaceableUrl" href="./object_detection/">Object
                     Detection</a></h1>
                 <p class="text">Detecting instances of semantic objects of a certain class in digital images and videos.
                 </p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./object_detection/index.html">
+                  <a class="replaceableUrl" href="./object_detection/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -279,12 +279,12 @@ <h1 class="title"><a class="replaceableUrl" href="./object_detection/index.html"
           <div id="bg_ss" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./semantic_segmentation/index.html">Semantic
+                <h1 class="title"><a class="replaceableUrl" href="./semantic_segmentation/">Semantic
                     Segmentation</a></h1>
                 <p class="text">Partitioning image into semantically meaningful parts to classify each part into
                   pre-determined class.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./semantic_segmentation/index.html">
+                  <a class="replaceableUrl" href="./semantic_segmentation/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -312,12 +312,12 @@ <h1 class="title"><a class="replaceableUrl" href="./semantic_segmentation/index.
           <div id="bg_fld" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./facial_landmark_detection/index.html">Facial
+                <h1 class="title"><a class="replaceableUrl" href="./facial_landmark_detection/">Facial
                     Landmark Detection</a></h1>
                 <p class="text">Detecting facial landmarks like eyes, nose, mouth, etc., which can be used for web-based
                   try-on simulator of online store.</p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./facial_landmark_detection/index.html">
+                  <a class="replaceableUrl" href="./facial_landmark_detection/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">
@@ -343,12 +343,12 @@ <h1 class="title"><a class="replaceableUrl" href="./facial_landmark_detection/in
           <div id="bg_fr" class="cardwrapper">
             <div class="data">
               <div class="content">
-                <h1 class="title"><a class="replaceableUrl" href="./face_recognition/index.html">Face
+                <h1 class="title"><a class="replaceableUrl" href="./face_recognition/">Face
                     Recognition</a></h1>
                 <p class="text">Detecting faces of participants using object detection and checking whether each face was present or not.
                 </p>
                 <div class="samplelink">
-                  <a class="replaceableUrl" href="./face_recognition/index.html">
+                  <a class="replaceableUrl" href="./face_recognition/">
                     Explore
                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                       stroke-width="2" class="link" viewBox="0 0 24 24">

diff --git a/lenet/index.html b/lenet/index.html
@@ -13,7 +13,7 @@
   </head>
   <body>
     <nav class="navbar navbar-expand-md navbar-dark">
-      <a href="../index.html">
+      <a href="../">
         <div class="logosvg" id="logosvg"></div>
       </a>
       <span class="navbar-brand">Handwritten Digits Classification</span>

diff --git a/nnotepad/css/index.css b/nnotepad/css/index.css
@@ -170,6 +170,7 @@ pre {
   min-width: 280px;
   text-align: right;
   margin-right: 6px;
+  margin-top: -2px;
 }
 
 #navbar:hover {
@@ -276,6 +277,7 @@ pre {
   background-image: linear-gradient(#eee 50%, #e4e4e4 50%);
   background-size: 100% 2lh;
   font-family: "JetBrains Mono", "Consolas", "Lucida Console", monospace !important;
+  font-size: 14px;
 }
 
 .monaco-editor .view-lines,

diff --git a/nnotepad/index.html b/nnotepad/index.html
@@ -119,17 +119,17 @@
           </svg>
         </div>
         <div class=dropdown-menu id=webnn-dropdown>
-          <a class=dropdown-item href="../nnotepad/index.html">NNotepad - WebNN Playground</a>
-          <a class=dropdown-item href="../image_classification/index.html">Image Classification</a>
-          <a class=dropdown-item href="../lenet/index.html">Handwritten Digits Classification</a>
-          <a class=dropdown-item href="../nsnet2/index.html">Noise Suppression (NSNet2)</a>
-          <a class=dropdown-item href="../rnnoise/index.html">Noise Suppression (RNNoise)</a>
-          <a class=dropdown-item href="../style_transfer/index.html">Fast Style Transfer</a>
-          <a class=dropdown-item href="../object_detection/index.html">Object Detection</a>
-          <a class=dropdown-item href="../semantic_segmentation/index.html">Semantic Segmentation</a>
-          <a class=dropdown-item href="../face_recognition/index.html">Face Recognition</a>
-          <a class=dropdown-item href="../facial_landmark_detection/index.html">Facial landmark Detection</a>
-          <a class=dropdown-item href="../code/index.html">WebNN Code Editor</a>
+          <a class=dropdown-item href="../nnotepad/">NNotepad - WebNN Playground</a>
+          <a class=dropdown-item href="../image_classification/">Image Classification</a>
+          <a class=dropdown-item href="../lenet/">Handwritten Digits Classification</a>
+          <a class=dropdown-item href="../nsnet2/">Noise Suppression (NSNet2)</a>
+          <a class=dropdown-item href="../rnnoise/">Noise Suppression (RNNoise)</a>
+          <a class=dropdown-item href="../style_transfer/">Fast Style Transfer</a>
+          <a class=dropdown-item href="../object_detection/">Object Detection</a>
+          <a class=dropdown-item href="../semantic_segmentation/">Semantic Segmentation</a>
+          <a class=dropdown-item href="../face_recognition/">Face Recognition</a>
+          <a class=dropdown-item href="../facial_landmark_detection/">Facial landmark Detection</a>
+          <a class=dropdown-item href="../code/">WebNN Code Editor</a>
         </div>
       </div>
       <button id=peek title="Show generated code">

diff --git a/nsnet2/index.html b/nsnet2/index.html
@@ -13,7 +13,7 @@
   </head>
   <body>
     <nav class="navbar navbar-expand-md navbar-dark">
-      <a href="../index.html">
+      <a href="../">
         <div class="logosvg" id="logosvg"></div>
       </a>
       <span class="navbar-brand">Noise Suppression (NSNet2)</span>

diff --git a/object_detection/index.html b/object_detection/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Object Detection</span>

diff --git a/rnnoise/index.html b/rnnoise/index.html
@@ -13,7 +13,7 @@
   </head>
   <body>
     <nav class="navbar navbar-expand-md navbar-dark">
-      <a href="../index.html">
+      <a href="../">
         <div class="logosvg" id="logosvg"></div>
       </a>
       <span class="navbar-brand">Noise Suppression (RNNoise)</span>

diff --git a/selfie_segmentation/index.html b/selfie_segmentation/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Selfie Segmentation</span>

diff --git a/semantic_segmentation/README.md b/semantic_segmentation/README.md
@@ -2,7 +2,7 @@
 
 Semantic segmentation is the task of clustering parts of an image together which belong to the same object class. It is a form of pixel-level prediction because each pixel in an image is classified according to a category.
 
-This example shows how the [DeepLab V3 MobileNet V2](http://download.tensorflow.org/models/deeplabv3_mnv2_pascal_trainval_2018_01_29.tar.gz), from TFLite models may be implemented by using the WebNN API. (Note: the DeepLab V3 MobileNet V2 model is trained on the [Pascal VOC 2012](http://host.robots.ox.ac.uk/pascal/VOC/voc2012/index.html) dataset.)
+This example shows how the [DeepLab V3 MobileNet V2](http://download.tensorflow.org/models/deeplabv3_mnv2_pascal_trainval_2018_01_29.tar.gz), from TFLite models may be implemented by using the WebNN API. (Note: the DeepLab V3 MobileNet V2 model is trained on the [Pascal VOC 2012](http://host.robots.ox.ac.uk/pascal/VOC/voc2012/) dataset.)
 
 ## How to Generate Deeplab V3 MobileNet V2 models?
 

diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Semantic Segmentation</span>

diff --git a/style_transfer/index.html b/style_transfer/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <nav class="navbar navbar-expand-md navbar-dark">
-    <a href="../index.html">
+    <a href="../">
       <div class="logosvg" id="logosvg"></div>
     </a>
     <span class="navbar-brand">Fast Style Transfer</span>