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 @@ <h1 class="title">Installation</h1>
     <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 @@ <h2 class="second-title">Verify installation</h2>
         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{