Add implementation status of WebNN Operations page (#41)

1. WebNN XNNPack/CPU ops implementation status for first-wave models defined in WebNN spec 2. W3C Web Platform Test (WPT) implementation status 3. TFLite WebNN delegate supported ops status 4. ONNX Runtime Web WebNN EP supported ops status
webmachinelearning · Jun 19, 2023 · 144b3c3 · 144b3c3
1 parent b3f655e
commit 144b3c3
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 25 deletions.
diff --git a/Gemfile b/Gemfile
@@ -17,6 +17,7 @@ gem "minima", "~> 2.5"
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
   gem 'jekyll-toc'
+  gem 'jekyll-spaceship'
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -11,6 +11,7 @@ GEM
     eventmachine (1.2.7)
     ffi (1.15.0)
     forwardable-extended (2.6.0)
+    gemoji (3.0.1)
     http_parser.rb (0.6.0)
     i18n (1.8.10)
       concurrent-ruby (~> 1.0)
@@ -35,6 +36,11 @@ GEM
       sassc (> 2.0.1, < 3.0)
     jekyll-seo-tag (2.7.1)
       jekyll (>= 3.8, < 5.0)
+    jekyll-spaceship (0.10.2)
+      gemoji (~> 3.0)
+      jekyll (>= 3.6, < 5.0)
+      nokogiri (~> 1.6)
+      rainbow (~> 3.0)
     jekyll-toc (0.17.0)
       jekyll (>= 3.9)
       nokogiri (~> 1.10)
@@ -63,6 +69,7 @@ GEM
       forwardable-extended (~> 2.6)
     public_suffix (4.0.6)
     racc (1.6.2)
+    rainbow (3.1.1)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -82,6 +89,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll-feed (~> 0.12)
+  jekyll-spaceship
   jekyll-toc
   minima (~> 2.5)
   tzinfo (~> 1.2)
@@ -90,4 +98,4 @@ DEPENDENCIES
   webrick (~> 1.7)
 
 BUNDLED WITH
-   2.3.5
+   2.3.26
diff --git a/_config.yml b/_config.yml
@@ -14,8 +14,14 @@ theme: minima
 plugins:
   - jekyll-feed
   - jekyll-toc
+  - jekyll-spaceship
 excerpt_separator: <!-- more -->
 
+jekyll-spaceship:
+  # default enabled processors
+  processors:
+    - table-processor
+
 host: 0.0.0.0
 
 # Exclude from processing.

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,5 +1,5 @@
 <header class="site-header" role="banner">
-  
+
   <div class="wrapper">
     <div class="nav-grid">
       <div class="logo">
@@ -38,17 +38,22 @@
                   <li class="menu-item"><a href="{{ 'webnn-getstarted' | relative_url }}">Get Started</a></li>
                   <!-- <li class="menu-item"><a href="{{ 'webnn-spec' | relative_url }}">Spec</a></li> -->
                   <li class="menu-item"><a href="{{ 'webnn-samples-intro' | relative_url }}">Samples</a></li>
+                  <li class="menu-item"><a href="{{ 'webnn-status' | relative_url }}">Impl Status</a></li>
                 </ol>
               </li>
-              <li class="menu-item"><a class="link link--dia" href="{{ 'model-loader-intro' | relative_url }}">Model Loader</a></li>
+              <li class="menu-item"><a class="link link--dia" href="{{ 'model-loader-intro' | relative_url }}">Model
+                  Loader</a></li>
               <li class="menu-item"><a class="link link--dia" href="{{ 'blog' | relative_url }}">Blog</a></li>
               <li class="menu-item"><a class="link link--dia" href="{{ 'community' | relative_url }}">Community</a></li>
               <li class="menu-item">
                 <a class="link link--dia faq" href="https://github.com/webmachinelearning/">GitHub</a>
                 <ol class="sub-menu">
-                  <li class="menu-item"><a href="https://github.com/webmachinelearning/webnn-polyfill">WebNN 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>
+                  <li class="menu-item"><a href="https://github.com/webmachinelearning/webnn-polyfill">WebNN
+                      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>
                 </ol>
               </li>
               <!-- <li class="menu-item"><a class="link link--dia faq" href="{{ 'faq' | relative_url }}">FAQ</a></li> -->
@@ -59,4 +64,4 @@
     </div>
   </div>
 
-</header>
+</header>
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -15,13 +15,21 @@
     animation: pulse 1s ease infinite;
     animation-delay: 3s;
     margin: 0 0.4rem;
-  }
-
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.2); }
-    100% { transform: scale(1); }
-  }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.2);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
 
 .herobar,
 .gr {
@@ -36,6 +44,7 @@
 .gs {
     margin-bottom: 1rem;
 }
+
 .modelloader {
     display: block !important;
     text-align: center;
@@ -79,7 +88,8 @@
     text-align: right;
 }
 
-.post svg, .community a svg {
+.post svg,
+.community a svg {
     width: 1rem;
     height: 1rem;
     margin-left: 2px;
@@ -116,7 +126,7 @@
 }
 
 .bgr {
-    background: linear-gradient(-45deg,$brand-color2, $brand-color0);
+    background: linear-gradient(-45deg, $brand-color2, $brand-color0);
     color: white;
 }
 
@@ -131,7 +141,7 @@
 }
 
 .community .moreitem h3 {
-    margin-top: -0.5rem;    
+    margin-top: -0.5rem;
 }
 
 .community .moreitem div {
@@ -173,7 +183,8 @@
     overflow: hidden;
 }
 
-.join, .join a {
+.join,
+.join a {
     font-size: .9rem !important;
 }
 
@@ -210,6 +221,7 @@
 .post table {
     margin: 1rem 0;
     color: $grey-color;
+    font-size: 0.8rem;
 }
 
 .post table th {
@@ -697,7 +709,8 @@ table th {
         margin-left: 0rem;
     }
 
-    pre, code {
+    pre,
+    code {
         overflow: hidden;
         max-width: 99.5vw;
     }
@@ -814,7 +827,8 @@ ul.c4 li {
         margin: 0.5rem 0 !important;
     }
 
-    .more, .g3 {
+    .more,
+    .g3 {
         display: block !important;
         grid-template-columns: 1fr !important;
         grid-template-rows: 1fr 1fr 1fr !important;
@@ -876,6 +890,7 @@ ul.c4 li {
     .faqs.gr {
         display: block !important;
     }
+
     .typing {
         width: 344px;
         text-align: center;
@@ -915,11 +930,13 @@ ul.c4 li {
     background-color: rgba(255, 255, 255, 1);
 }
 
-.mt, .mt2 {
+.mt,
+.mt2 {
     margin-top: 2rem;
 }
 
-.mb, .mb2 {
+.mb,
+.mb2 {
     margin-bottom: 2rem;
 }
 
@@ -1027,7 +1044,8 @@ ul.c4 li {
     margin-bottom: 1rem;
 }
 
-.more, .g3 {
+.more,
+.g3 {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr;
@@ -1143,7 +1161,9 @@ ul.c4 li {
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 812px),
 (min-device-width: 768px) and (max-device-width: 1366px) {
-    pre, code {
+
+    pre,
+    code {
         overflow: hidden;
     }
 
@@ -1161,7 +1181,9 @@ ul.c4 li {
         grid-template-areas: ". .";
         align-items: flex-start;
     }
-    .more, .g3 {
+
+    .more,
+    .g3 {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         gap: 1rem 0px;