New emoticons release (#4223)

README.md

@@ -2,8 +2,6 @@
 <img src="docs/img/nni_logo.png" width="300"/>
 </p>
 
------------
-
 [![MIT licensed](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)
 [![Build Status](https://msrasrg.visualstudio.com/NNIOpenSource/_apis/build/status/full%20test%20-%20linux?branchName=master)](https://msrasrg.visualstudio.com/NNIOpenSource/_build/latest?definitionId=62&branchName=master)
 [![Issues](https://img.shields.io/github/issues-raw/Microsoft/nni.svg)](https://github.com/Microsoft/nni/issues?q=is%3Aissue+is%3Aopen)
@@ -31,6 +29,10 @@ The tool manages automated machine learning (AutoML) experiments, **dispatches a
 * **New demo available**: [Youtube entry](https://www.youtube.com/channel/UCKcafm6861B2mnYhPbZHavw) | [Bilibili 入口](https://space.bilibili.com/1649051673) - _last updated on May-26-2021_
 * **New webinar**: [Introducing Retiarii: A deep learning exploratory-training framework on NNI](https://note.microsoft.com/MSR-Webinar-Retiarii-Registration-Live.html) - _scheduled on June-24-2021_
 * **New community channel**: [Discussions](https://github.com/microsoft/nni/discussions)
+* **New emoticons release**: [nnSpider](./docs/en_US/Tutorial/NNSpider.md)
+<p align="center">
+  <a href="#nni-spider"><img width="100%" src="docs/img/emoicons/home.svg" /></a>
+</p>
 
 ## **NNI capabilities in a glance**
 

docs/en_US/Tutorial/NNSpider.md

+<!-- <style>
+  table, tr, td{
+    border: none;
+  }
+  div{
+    width: 300px;
+    height: 200px;
+    border: 1px solid grey;
+    background: #ccc;
+    box-sizing: border-box;
+  }
+  img{
+    width: 260px;
+    height: 160px;
+    margin: 20px;
+  }
+</style> -->
+
+<table>
+  <tr>
+    <td>
+      <div>
+        <img style="
+          width: 300px;
+        "
+        src="../../img/emoicons/NoBug.png"/>
+      </div>
+    </td>
+    <td>
+        <div>
+        <img style="
+          width: 300px;
+        " src="../../img/emoicons/Holiday.png"/>
+      </div>  
+    </td>
+    <td>
+        <div>
+        <img style="
+          width: 300px;
+          height: 180px;
+        " src="../../img/emoicons/Error.png"/>
+      </div>  
+    </td>
+  </tr>
+  <tr>
+    <td align="center">No bug</td>
+    <td align="center">Holiday</td>
+    <td align="center">Error</td>
+  </tr>
+  <tr>
+    <td>
+      <div>
+        <img style="
+          width: 300px;
+          height: 210px;
+        " src="../../img/emoicons/Working.png"/>
+      </div>
+    </td>
+    <td >
+        <div>
+        <img style="
+          width: 300px;
+        " src="../../img/emoicons/Sign.png"/>
+      </div>  
+    </td>
+    <td>
+        <div>
+        <img style="
+          width: 300px;
+        " src="../../img/emoicons/Crying.png"/>
+      </div>  
+    </td>
+  </tr>
+  <tr>
+    <td align="center" >Working</td>
+    <td align="center" >Sign</td>
+    <td align="center" >Crying</td>
+  </tr>
+  <tr>
+    <td>
+      <div>
+        <img style="
+          width: 300px;
+          height: 190px;
+        " src="../../img/emoicons/Cut.png"/>
+      </div>
+    </td>
+    <td>
+        <div>
+        <img style="
+          width: 300px;
+        " src="../../img/emoicons/Weaving.png"/>
+      </div>  
+    </td>
+    <td>
+        <div>
+        <img style="
+          width: 300px;
+        " src="../../img/emoicons/Comfort.png"/>
+      </div>  
+    </td>
+  </tr>
+  <tr>
+    <td align="center">Cut</td>
+    <td align="center">Weaving</td>
+    <td align="center">Comfort</td>
+  </tr>
+  <tr>
+    <td>
+      <div>
+        <img style="
+          width: 300px;
+        " src="../../img/emoicons/Sweat.png"/>
+      </div>
+    </td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td align="center">Sweat</td>
+    <td align="center"></td>
+    <td align="center"></td>
+  </tr>
+</table>