update README webui img to gif (#3735)

Co-authored-by: Lijiao <Lijiaoa@outlook.com>
Co-authored-by: kvartet <48014605+kvartet@users.noreply.github.com>

README.md

@@ -27,7 +27,7 @@ The tool manages automated machine learning (AutoML) experiments, **dispatches a
 
 ## **What's NEW!** &nbsp;<a href="#nni-released-reminder"><img width="48" src="docs/img/release_icon.png"></a>
 * **New release**: [v2.2 is available](https://github.com/microsoft/nni/releases) - _released on April-26-2021_
-* **New demo available**: [Youtube entry](https://www.youtube.com/channel/UCKcafm6861B2mnYhPbZHavw) | [Bilibili 入口](https://space.bilibili.com/1649051673) - _last updated on Apr-21-2021_
+* **New demo available**: [Youtube entry](https://www.youtube.com/channel/UCKcafm6861B2mnYhPbZHavw) | [Bilibili 入口](https://space.bilibili.com/1649051673) - _last updated on May-26-2021_
 
 * **New use case sharing**: [Cost-effective Hyper-parameter Tuning using AdaptDL with NNI](https://medium.com/casl-project/cost-effective-hyper-parameter-tuning-using-adaptdl-with-nni-e55642888761) - _posted on Feb-23-2021_
 
@@ -299,10 +299,7 @@ You can use these commands to get more information about the experiment
 
 * Open the `Web UI url` in your browser, you can view detailed information of the experiment and all the submitted trial jobs as shown below. [Here](https://nni.readthedocs.io/en/stable/Tutorial/WebUI.html) are more Web UI pages.
 
-<table style="border: none">
-    <th><img src="./docs/img/webui-img/full-oview.png" alt="drawing" width="395" height="300"/></th>
-    <th><img src="./docs/img/webui-img/full-detail.png" alt="drawing" width="410" height="300"/></th>
-</table>
+<img src="docs/static/img/webui.gif" alt="webui" width="100%"/>
 
 ## **Releases and Contributing**
 NNI has a monthly release cycle (major releases). Please let us know if you encounter a bug by [filling an issue](https://github.com/microsoft/nni/issues/new/choose).

docs/en_US/_templates/index.html

@@ -236,8 +236,8 @@
     <h2 class="second-title">Install</h2>
     <p>
       NNI supports and is tested on Ubuntu >= 16.04, macOS >= 10.14.1,
-      and Windows 10 >= 1809. Simply run the following `pip install`
-      in an environment that has `python 64-bit >= 3.6`.
+      and Windows 10 >= 1809. Simply run the following <code>pip install</code>
+      in an environment that has <code>python 64-bit >= 3.6</code>.
     </p>
     <div class="command-intro">Linux or macOS</div>
     <div class="command">python3 -m pip install --upgrade nni</div>
@@ -315,10 +315,7 @@ You can use these commands to get more information about the experiment
         Open the Web UI url in your browser, you can view detail information of the experiment and
         all the submitted trial jobs as shown below. <a href="{{ pathto('Tutorial/WebUI') }}">Here</a> are more Web UI
         pages.
-        <div class="ui-img">
-          <img src="_images/webui_overview_page.png">
-          <img src="_images/webui_trialdetail_page.png">
-        </div>
+        <img src="_static/img/webui.gif" width="100%"/>
   </div>
   </li>
   </ul>

docs/static/css/custom.css

@@ -91,7 +91,7 @@ td.framework{
 }
   
 .ui-img img{
-    height: 230px;
+    height: 350px;
 }
 
 .wy-side-nav-search>div.version{