Add filename instructions in EN & Update HiDi in EN&CN (#890)

* Add filename instructions and replace the hidi gif

* Update README.md

* Update README_CN.md

* Update UserGuide-en.md

README.md

@@ -117,6 +117,16 @@ class LogWriter(logdir=None,
 | filename_suffix | string  | Add a suffix to the default log file name.                   |
 | write_to_disk   | boolean | Write into disk or not.                                      |
 | display_name    | string  | Set the name of different runs when `logdir` is too long or needed to be hidden. If not set, the default name is `logdir`. |
+| file_name    | string  | Set the name of the log file. If the file_name already exists, setting the file_name means to continue to add new records in the same log file. Note that the name should include 'vdlrecords'.|
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/103187556-b9714280-48ff-11eb-9052-008e02a21199.png" width="100%"/>
+</p>
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/103187552-b4ac8e80-48ff-11eb-998a-57d5a1bc7ee6.png" width="100%"/>
+</p>
+
 
 #### Example
 
@@ -285,10 +295,10 @@ Histogram displays how the trend of tensors (weight, bias, gradient, etc.) chang
 
 ### High Dimensional
 
-**High Dimensional** provides two approaches--T-SNE and PCA--to do the dimensionality reduction, allowing developers to have an in-depth analysis of the relationship between high-dimensional data and to optimize algorithms based on the analysis.
+**High Dimensional** provides three approaches--T-SNE, PCA and UMAP--to do the dimensionality reduction, allowing developers to have an in-depth analysis of the relationship between high-dimensional data and to optimize algorithms based on the analysis.
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/90870677-85739700-e3cc-11ea-8653-18fa5c4106a3.GIF" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/103188111-1b32ac00-4902-11eb-914e-c2368bdb8373.gif" width="85%"/>
 </p>
 
 

README_CN.md

@@ -124,6 +124,14 @@ class LogWriter(logdir=None,
 | display_name    | string  | 在面板中替换实际显示的`logdir`，当日志所在路径过长或想隐藏日志所在路径时可指定此参数 |
 | file_name       | string  | 指定写入的日志文件名，如果指定的文件名已经存在，则将日志续写在此文件中，文件名必须包括`vdlrecords` |
 
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/103187556-b9714280-48ff-11eb-9052-008e02a21199.png" width="100%"/>
+</p>
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/103187552-b4ac8e80-48ff-11eb-998a-57d5a1bc7ee6.png" width="100%"/>
+</p>
+
 #### 示例
 
 设置日志文件并记录标量数据：
@@ -340,10 +348,10 @@ value: 3.1297709941864014
 
 ### High Dimensional
 
-将高维数据进行降维展示，目前支持T-SNE、PCA两种降维方式，用于深入分析高维数据间的关系，方便用户根据数据特征进行算法优化。
+将高维数据进行降维展示，目前支持T-SNE、PCA、UMAP三种降维方式，用于深入分析高维数据间的关系，方便用户根据数据特征进行算法优化。
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/82396340-3e4dd100-9a80-11ea-911d-798acdbc9c90.gif" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/103188111-1b32ac00-4902-11eb-914e-c2368bdb8373.gif" width="85%"/>
 </p>
 
 

docs/components/README.md

@@ -707,33 +707,33 @@ visualdl --logdir ./log --port 8080
 接着在浏览器打开`http://127.0.0.1:8080`，即可查看降维后的可视化数据。
 
 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/dynamic_high_dimensional.gif" width="80%"/>
+<img src="https://user-images.githubusercontent.com/48054808/103188111-1b32ac00-4902-11eb-914e-c2368bdb8373.gif" width="85%"/>
 </p>
 
 ### 功能操作说明
 
-* 支持展示特定打点数据
+* 支持选择特定实验数据进行展示，且支持根据所选择的数据标签进行展示
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006541-f6f9ae80-a044-11ea-82d9-03f1c99a310a.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103191809-4e306c00-4911-11eb-853f-e143ef86e182.png" width="30%"/>
   </p>
 
-* 可搜索展示特定数据标签或展示所有数据标签
+* 降维方式--TSNE
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006580-0842bb00-a045-11ea-9f7b-776f80ae8b90.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103192762-cea49c00-4914-11eb-896c-070b0bf0e2ea.png" width="27%"/>
   </p>
 
-* 支持「二维」或「三维」展示高维数据分布
+* 降维方式--PCA
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006687-2f998800-a045-11ea-888e-2b59e16a92b9.png" width="27%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103192341-47a2f400-4913-11eb-9995-fdc0acadbdc9.png" width="27%"/>
   </p>
 
-* 可选择「PCA」或「T-SNE」作为降维方式
+* 降维方式--UMAP
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006747-3fb16780-a045-11ea-83e0-a314b7765108.png" width="27%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103192766-d2d0b980-4914-11eb-871e-e4b31542c5e9.png" width="27%"/>
   </p>
 
 

docs/components/UserGuide-en.md

@@ -711,33 +711,33 @@ visualdl --logdir ./log --port 8080
 Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
 
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/90880543-341ed400-e3db-11ea-8fdc-8b914704b916.GIF" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/103188111-1b32ac00-4902-11eb-914e-c2368bdb8373.gif" width="85%"/>
 </p>
 
 ### Functional Instrucions
 
-* Developers are allowed to select specific run of data to display
+* Developers are allowed to select specific runs of data or certain labels of data to display
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/90880592-48fb6780-e3db-11ea-9d87-bd54716839aa.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103191809-4e306c00-4911-11eb-853f-e143ef86e182.png" width="30%"/>
   </p>
 
-* Developers can find specific labels by searching tags or view the all labels
+* TSNE
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/90880759-9aa3f200-e3db-11ea-8b66-ecc890ffdaf9.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103192762-cea49c00-4914-11eb-896c-070b0bf0e2ea.png" width="27%"/>
   </p>
 
-* Support "2D" or "3D" forms to display the high-dimensional data distribution
+* PCA
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/90880813-ad1e2b80-e3db-11ea-8540-5e78075dfb69.png" width="27%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103192341-47a2f400-4913-11eb-9995-fdc0acadbdc9.png" width="27%"/>
   </p>
 
-* PCA and T-SNE are supported
+* UMAP
 
   <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/90880856-bf986500-e3db-11ea-8ffd-261b56d8e730.png" width="27%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/103192766-d2d0b980-4914-11eb-871e-e4b31542c5e9.png" width="27%"/>
   </p>