Update ROC Intro&GIF (#902)

* Update README.md

* Update README_CN.md

* Update README.md

* Update UserGuide-en.md

README.md

@@ -337,7 +337,7 @@ Developers can compare with multiple experiments by specifying and uploading the
 **ROC Curve** shows the performance of a classification model at all classification thresholds; the larger the area under the curve, the better the model performs, aiding developers to evaluate the model performance and choose an appropriate threshold.
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/103274711-42ba6f00-49fd-11eb-9452-4dd492682dd8.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/103344081-8928d000-4ac8-11eb-84d0-28f249886172.gif" width="85%"/>
 </p>
 
 

README_CN.md

@@ -345,10 +345,10 @@ value: 3.1297709941864014
 
 ### ROC Curve
 
-展示不同不同阈值下模型的表现（TPR、TNR），曲线下面积越大，模型表现越好，辅助开发者进行阈值选择以及直观的掌握模型训练情况。
+展示不同阈值下模型指标的变化，同时曲线下的面积（AUC）直观的反应模型表现，辅助开发者掌握模型训练情况并高效进行阈值选择。
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/103275084-51555600-49fe-11eb-8c16-d18d26b724e3.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/103344081-8928d000-4ac8-11eb-84d0-28f249886172.gif" width="85%"/>
 </p>
 
 ### High Dimensional

docs/components/README.md

@@ -658,7 +658,7 @@ visualdl --logdir ./log --port 8080
 
 ### 介绍
 
-ROC曲线展示不同不同阈值下模型的表现（TPR、TNR），曲线下面积越大，模型表现越好，辅助开发者进行阈值选择以及直观的掌握模型训练情况。
+ROC曲线展示不同阈值下模型指标的变化，同时曲线下的面积（AUC）直观的反应模型表现，辅助开发者掌握模型训练情况并高效进行阈值选择。
 
 ### 记录接口
 
@@ -708,7 +708,7 @@ visualdl --logdir ./log --port 8080
 接着在浏览器打开`http://127.0.0.1:8080`，即可查看ROC Curve
 
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/103275084-51555600-49fe-11eb-8c16-d18d26b724e3.png" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/103344081-8928d000-4ac8-11eb-84d0-28f249886172.gif" width="80%"/>
 </p>
 
 *Note：ROC前端页面使用和PR相同，请参考上述PR Curve的使用说明。

docs/components/UserGuide-en.md

@@ -19,7 +19,7 @@ Currently, VisualDL provides seven components: scalar, image, audio, graph, hist
 |              [Graph](#Graph--Network-Structure)              |       Network Structure       | Visualize network structures, node attributes and data flow, assisting developers to learn and to optimize network structures. |
 |       [Histogram](#Histogram--Distribution-of-Tensors)       |    Distribution of Tensors    | Present the changes of distributions of tensors, such as weights/gradients/bias, during the training process. |
 |                   [PR Curve](#PR-Curve)                   |   Precision & Recall Curve    | Display precision-recall curves across training steps, clarifying the tradeoff between precision and recall when comparing models. |
-|                   [ROC Curve](#ROC-Curve)                   |   Receiver Operating Characteristic curve    | Shows the performance of a classification model at all classification thresholds |
+|                   [ROC Curve](#ROC-Curve)                   |   Receiver Operating Characteristic curve    | Shows the performance of a classification model at all classification thresholds. |
 | [High Dimensional](#High-Dimensional--Data-Dimensionality-Reduction) | Data Dimensionality Reduction | Project high-dimensional data into 2D/3D space for embedding visualization, making it convenient to observe the correlation between data. |
 
 At the same time, VisualDL provides [VDL.service](#vdlservice) , which allows developers to easily save, track and share visualization results of experiments with anyone for free.
@@ -713,7 +713,7 @@ 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/103274711-42ba6f00-49fd-11eb-9452-4dd492682dd8.png" width="85%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/103344081-8928d000-4ac8-11eb-84d0-28f249886172.gif" width="85%"/>
 </p>
 
 *Note: the use of ROC Curve in the frontend is the same as that of PR Curve, please refer to the instructions in PR Curve section if needed.