Update architecture image

Author: ibelem

_includes/footer.html

@@ -18,6 +18,7 @@
             <li><a class="footer_link underline up" href="{{ 'webnn-intro' | relative_url }}">WebNN</a></li>
             <li><a class="footer_link underline" href="{{ 'webnn-getstarted' | relative_url }}">Get Started</a></li>
             <li><a class="footer_link underline" href="{{ 'webnn-samples-intro' | relative_url }}">Samples</a></li>
+            <li><a class="footer_link underline" href="https://github.com/webmachinelearning/awesome-webnn">Awesome WebNN</a></li>
           </ul>
           <ul>
             <li><a class="footer_link underline up" href="{{ 'model-loader-intro' | relative_url }}">Model Loader</a></li>

_includes/header.html

@@ -52,7 +52,7 @@
                       Polyfill</a></li>
                   <li class="menu-item"><a href="https://github.com/webmachinelearning/webnn-samples">WebNN Samples</a>
                   </li>
-                  <li class="menu-item"><a href="https://github.com/webmachinelearning/webnn-native">WebNN Native</a>
+                  <li class="menu-item"><a href="https://github.com/webmachinelearning/awesome-webnn">Awesome WebNN</a>
                   </li>
                 </ol>
               </li>

_includes/webnn-archsvg.html

@@ -1,120 +1,76 @@
+.arch svg {
+  max-height: 340px;
+}
 
-  .arch svg {
-    max-height: 300px;
-  }
+#webnn:hover {
+  fill: #00C7FD;
+  stroke: #00C7FD;
+  cursor: pointer;
+}
 
-  .arc-1 {
-    fill: $faq-color;
-  }
-  .arc-1:hover {
-    fill: darken($faq-color, 10%);
-  }
-  .arc-2,
-  .arc-5 {
-    font-size: 9px;
-  }
-  .arc-2 {
-    fill: #fff;
-  }
-  .arc-4 {
-    fill: #d0ebff;
-  }
-  .arc-5 {
-    fill: #474c58;
-  }
-  .arc-12 {
-    fill: $brand-color2;
-  }
-  .arc-12:hover {
-    fill: $brand-color;
-  }
-  .arc-13 {
-    fill: #90b665;
-  }
-  .arc-13:hover {
-    fill: #80a655;
-  }
-  .arc-18,
-  .arc-19,
-  .arc-20,
-  .arc-21,
-  .arc-22 {
-    fill: none;
-    stroke: #d0ebff;
-    stroke-width: 0.25px;
-  }
-  .arc-18,
-  .arc-20,
-  .arc-21,
-  .arc-22 {
-    stroke-linecap: round;
-  }
-  .arc-18,
-  .arc-20,
-  .arc-21 {
-    stroke-linejoin: round;
-  }
-  .arc-19,
-  .arc-22 {
-    stroke-miterlimit: 10;
-  }
-  .arc-20 {
-    stroke-dasharray: 1 4.99;
-  }
+/* #26CC0B */
+.arch text:hover:not(.webgpu, .webnn, .webassembly) {
+  fill: $brand-color;
+}
 
-  .arch text:hover {
-    font-weight: 500;
-  }
-  .arch text:hover:not(.webgpu, .webnn, .webassembly) {
-    fill: $brand-color;
-  }
+.webnn:hover ~ .nnline,
+.webnn:hover ~ .nnpath {
+  fill: #00C7FD;
+  stroke: #00C7FD;
+  animation: 0.5s draw linear forwards;
+}
 
-  .arch path:hover {
-    stroke: $brand-color;
-  }
+.webnn:hover ~ #directml {
+  fill: #FD0D8E;
+  stroke: #FD0D8E;
+}
 
-  .webgpu:hover ~ .gpuline,
-  .webgpu:hover ~ .gpupath {
-    stroke: darken($faq-color, 10%);
-    animation: 0.5s draw linear forwards;
-  }
+.webnn:hover ~ #tflite {
+  fill: #F9B508;
+  stroke: #F9B508;
+}
 
-  .webgpu:hover ~ .gpu,
-  .webgpu:hover ~ .gputext {
-    fill: darken($faq-color, 10%);
-  }
+.webnn:hover ~ #coreml {
+  fill: #26cc0b;
+  stroke: #26cc0b;
+}
 
-  .webassembly:hover ~ .wasmline,
-  .webassembly:hover ~ .wasmpath {
-    stroke: #80a655;
-    animation: 0.5s draw linear forwards;
-  }
+.webnn:hover ~ #cpu {
+  fill: #0068B5;
+  stroke: #0068B5;
+}
 
-  .webassembly:hover ~ .wasm,
-  .webassembly:hover ~ .wasmtext {
-    fill: #80a655;
-  }
+.webnn:hover ~ #gpu {
+  fill: #FF2052;
+  stroke: #FF2052;
+}
 
-  .webnn:hover ~ .nnline,
-  .webnn:hover ~ .nnpath {
-    stroke: $brand-color;
-    animation: 0.5s draw linear forwards;
-  }
+.webnn:hover ~ #npu {
+  fill: #010734;
+  stroke: #010734;
+}
 
-  .webnn:hover ~ .nn,
-  .webnn:hover ~ .nntext {
-    fill: $brand-color;
-  }
+.webnn:hover ~ #text-tflite,
+.webnn:hover ~ #text-directml,
+.webnn:hover ~ #text-coreml,
+.webnn:hover ~ #text-cpu,
+.webnn:hover ~ #text-gpu,
+.webnn:hover ~ #text-npu
+{
+  fill: #fff;
+}
 
-  @keyframes draw {
-    0% {
-      stroke-dasharray: 140 540;
-      stroke-dashoffset: -474;
-      stroke-width: 0.5px;
-    }
-    100% {
-      stroke-dasharray: 760;
-      stroke-dashoffset: 0;
-      stroke-width: 0.5px;
-    }
-  }
+@keyframes draw {
+  0% {
+    stroke-dasharray: 600 100;
+    stroke-dashoffset: 600;
+    stroke-width: 1px;
+  }
+  100% {
+    stroke-dasharray: 0;
+    stroke-dashoffset: 0;
+    stroke-width: 1px;
+    fill: #00C7FD;
+    stroke: #00C7FD;
+  }
+}

_sass/archsvg.scss

@@ -25,10 +25,10 @@
     opacity: 0.75;
   }
   .cls-8 {
-    fill: #90b665;
+    fill: #2555a0;
   }
   .cls-9 {
-    fill: #a1d469;
+    fill: rgba(1, 7, 52, 0.8);
   }
   .cls-10,
   .cls-15 {
@@ -51,7 +51,7 @@
     fill: #595959;
   }
   .cls-17 {
-    fill: #95c461;
+    fill: rgba(1, 7, 52, 0.8);
   }
   .cls-18 {
     fill: #c18255;
@@ -341,7 +341,7 @@
     fill: #fcf2d6;
   }
   .cls-94 {
-    fill: #719253;
+    fill: #010734;
   }
   .cls-95 {
     fill: #e1d5c9;