Update Eng and Chinese Readme & User-guide (add instructions of VDL.service) (#821)

* Update README.md Co-authored-by: ShenYuhan <yhan_shen@163.com>

Update Eng and Chinese Readme & User-guide (add instructions of VDL.service) (#821)
* Update README.md Co-authored-by: ShenYuhan <yhan_shen@163.com>
d2591d3e · YixinKristy · GitHub · 3538b585 · d2591d3e · d2591d3e
6 changed file
--- a/README-en.md
+++ b/README-en.md
@@ -19,7 +19,7 @@
 ## Introduction
 VisualDL, a visualization analysis tool of PaddlePaddle, provides a variety of charts to show the trends of parameters, and visualizes model structures, data samples, histograms of tensors, pr curves and high-dimensional data distributions. It enables users to understand the training process and the model structure more clearly and intuitively so as to optimize models efficiently.

-VisualDL provides various visualization functions, including tracking metrics in real-time, visualizing the model structure, displaying the data sample, presenting the changes of distributions of tensors, showing the pr curves, projecting high-dimensional data to a lower dimensional space and more. For specific guidelines of each function, please refer to  [**VisualDL User Guide**](./docs/components/UserGuide-en.md). Currently, VisualDL iterates rapidly and new functions will be continously added.
+VisualDL provides various visualization functions, including tracking metrics in real-time, visualizing the model structure, displaying the data sample, presenting the changes of distributions of tensors, showing the pr curves, projecting high-dimensional data to a lower dimensional space and more. Additionally, VisualDL provides VDL.service, which enables developers easily to save, track and share visualization results of experiments. For specific guidelines of each function, please refer to  [**VisualDL User Guide**](./docs/components/UserGuide-en.md). Currently, VisualDL iterates rapidly and new functions will be continously added.

 VisualDL natively supports the use of Python. Developers can retrieve plentiful visualization results by simply adding a few lines of Python code into the model before training.

@@ -262,6 +262,14 @@ Histogram displays how the trend of tensors (weight, bias, gradient, etc.) chang
 <img src="https://user-images.githubusercontent.com/48054808/90870677-85739700-e3cc-11ea-8653-18fa5c4106a3.GIF" width="85%"/>
 </p>

+### VDL.service
+
+**VDL.service** enables developers to easily save, track and share visualization results with anyone for free.
+
+<p align="center">
+<img src=https://user-images.githubusercontent.com/48054808/93731055-fbeafb00-fbfd-11ea-80f4-bbfd08a0fc35.png
+</p> 
+  
 ## Contribution

 VisualDL, in which Graph is powered by [Netron](https://github.com/lutzroeder/netron), is an open source project supported by  [PaddlePaddle](https://www.paddlepaddle.org/) and [ECharts](https://echarts.apache.org/) . Developers are warmly welcomed to use, comment and contribute.

--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
 ## 介绍
 VisualDL是飞桨可视化分析工具，以丰富的图表呈现训练参数变化趋势、模型结构、数据样本、高维数据分布等。可帮助用户更清晰直观地理解深度学习模型训练过程及模型结构，进而实现高效的模型优化。

-VisualDL提供丰富的可视化功能，支持标量、图结构、数据样本可视化、直方图、PR曲线及高维数据降维呈现等诸多功能。具体功能使用方式，请参见 [**VisualDL使用指南**](./docs/components/README.md)。项目正处于高速迭代中，敬请期待新组件的加入。
+VisualDL提供丰富的可视化功能，支持标量、图结构、数据样本可视化、直方图、PR曲线及高维数据降维呈现等诸多功能，同时VisualDL提供可视化结果保存服务，通过VDL.service生成链接，保存并分享可视化结果。具体功能使用方式，请参见 [**VisualDL使用指南**](./docs/components/README.md)。项目正处于高速迭代中，敬请期待新组件的加入。

 VisualDL支持浏览器种类：Chrome（81和83）、Safari 13、FireFox（77和78）、Edge（Chromium版）。

@@ -282,6 +282,14 @@ app.run(logdir="./log")
 <img src="https://user-images.githubusercontent.com/48054808/82396340-3e4dd100-9a80-11ea-911d-798acdbc9c90.gif" width="85%"/>
 </p>

+### VDL.service
+
+VisualDL可视化结果保存服务，以链接形式将可视化结果保存下来，方便用户快速、便捷的进行托管与分享。
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/48054808/93729521-72382f00-fbf7-11ea-91ff-6b6ab4b41e32.png" width="85%"/>
+</p>
+
 ## 开源贡献

 VisualDL 是由 [PaddlePaddle](https://www.paddlepaddle.org/) 和 [ECharts](https://echarts.apache.org/) 合作推出的开源项目。

--- a/docs/README-en.md
+++ b/docs/README-en.md
@@ -19,7 +19,7 @@
 ## Introduction
 VisualDL, a visualization analysis tool of PaddlePaddle, provides a variety of charts to show the trends of parameters, and visualizes model structures, data samples, histograms of tensors, pr curves and high-dimensional data distributions. It enables users to understand the training process and the model structure more clearly and intuitively so as to optimize models efficiently.

-VisualDL provides various visualization functions, including tracking metrics in real-time, visualizing the model structure, displaying the data sample, presenting the changes of distributions of tensors, showing the pr curves, projecting high-dimensional data to a lower dimensional space and more. For specific guidelines of each function, please refer to  [**VisualDL User Guide**](./docs/components/UserGuide-en.md). Currently, VisualDL iterates rapidly and new functions will be continously added.
+VisualDL provides various visualization functions, including tracking metrics in real-time, visualizing the model structure, displaying the data sample, presenting the changes of distributions of tensors, showing the pr curves, projecting high-dimensional data to a lower dimensional space and more. Additionally, VisualDL provides VDL.service, which enables developers easily to save, track and share visualization results of experiments. For specific guidelines of each function, please refer to  [**VisualDL User Guide**](./docs/components/UserGuide-en.md). Currently, VisualDL iterates rapidly and new functions will be continously added.

 VisualDL natively supports the use of Python. Developers can retrieve plentiful visualization results by simply adding a few lines of Python code into the model before training. 

@@ -240,7 +240,7 @@ Developers can compare with multiple experiments by specifying and uploading the

 ### Histogram

-Histogram displays how the trend of tensors (weight, bias, gradient, etc.) changes during the training process in the form of histogram. Developers can adjust the model structures accurately by having an in-depth understanding of the effect of each layer.
+**Histogram** displays how the trend of tensors (weight, bias, gradient, etc.) changes during the training process in the form of histogram. Developers can adjust the model structures accurately by having an in-depth understanding of the effect of each layer.

 - Offset Mode

@@ -263,6 +263,14 @@ Histogram displays how the trend of tensors (weight, bias, gradient, etc.) chang
 <img src="https://user-images.githubusercontent.com/48054808/90870677-85739700-e3cc-11ea-8653-18fa5c4106a3.GIF" width="85%"/>
 </p>

+### VDL.service
+
+**VDL.service** enables developers to easily save, track and share visualization results with anyone for free.
+
+<p align="center">
+<img src=https://user-images.githubusercontent.com/48054808/93731055-fbeafb00-fbfd-11ea-80f4-bbfd08a0fc35.png
+</p>   
+  
 ## Contribution

 VisualDL, in which Graph is powered by [Netron](https://github.com/lutzroeder/netron), is an open source project supported by  [PaddlePaddle](https://www.paddlepaddle.org/) and [ECharts](https://echarts.apache.org/) . Developers are warmly welcomed to use, comment and contribute.

--- a/docs/README.md
+++ b/docs/README.md
@@ -20,7 +20,7 @@
 ## 介绍
 VisualDL是飞桨可视化分析工具，以丰富的图表呈现训练参数变化趋势、模型结构、数据样本、高维数据分布等。可帮助用户更清晰直观地理解深度学习模型训练过程及模型结构，进而实现高效的模型优化。

-VisualDL提供丰富的可视化功能，支持标量、图结构、数据样本可视化、直方图、PR曲线及高维数据降维呈现等诸多功能。具体功能使用方式，请参见 [**VisualDL使用指南**](./components/README.md)。项目正处于高速迭代中，敬请期待新组件的加入。
+VisualDL提供丰富的可视化功能，支持标量、图结构、数据样本可视化、直方图、PR曲线及高维数据降维呈现等诸多功能，同时VisualDL提供可视化结果保存服务，通过VDL.service生成链接，保存并分享可视化结果。具体功能使用方式，请参见 [**VisualDL使用指南**](./components/README.md)。项目正处于高速迭代中，敬请期待新组件的加入。

 VisualDL支持浏览器种类：Chrome（81和83）、Safari 13、FireFox（77和78）、Edge（Chromium版）。

@@ -280,6 +280,15 @@ app.run(logdir="./log")
 <img src="https://user-images.githubusercontent.com/48054808/82396340-3e4dd100-9a80-11ea-911d-798acdbc9c90.gif" width="85%"/>
 </p>

+### VDL.service
+
+VisualDL可视化结果保存服务，以链接形式将可视化结果保存下来，方便用户快速、便捷的进行托管与分享。
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/48054808/93729521-72382f00-fbf7-11ea-91ff-6b6ab4b41e32.png" width="85%"/>
+</p>
+
+
 ## 开源贡献

 VisualDL 是由 [PaddlePaddle](https://www.paddlepaddle.org/) 和 [ECharts](https://echarts.apache.org/) 合作推出的开源项目。

--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -18,7 +18,7 @@ VisualDL 是一个面向深度学习任务设计的可视化工具。VisualDL 
 |              [PR Curve](#PR-Curve--PR曲线组件)               |   折线图   | 权衡精度与召回率之间的平衡关系                               |
 | [High Dimensional](#High-Dimensional--数据降维组件) |  数据降维  | 将高维数据映射到 2D/3D 空间来可视化嵌入，便于观察不同数据的相关性 |

-
+同时，VisualDL提供可视化结果保存服务，通过 [VDL.service](#VDL.service) 生成链接，保存并分享可视化结果

 ## Scalar--标量组件

@@ -93,7 +93,7 @@ visualdl --logdir ./log --port 8080
 接着在浏览器打开`http://127.0.0.1:8080`，即可查看以下折线图。

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/82397559-478c6d00-9a83-11ea-80db-a0844dcaca35.png" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/93732057-36ef2d80-fc02-11ea-9dac-b8fdce194d09.png" width="100%"/>
 </p>

 - 多组实验对比
@@ -173,6 +173,25 @@ visualdl --logdir ./log --port 8080
  <img src="https://visualdl.bj.bcebos.com/images/scalar-searchstream.png" width="40%"/>
 </p>

+* 选择显示最值，展示最大最小值以及对应的训练步数
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732336-65213d00-fc03-11ea-96f4-cc6497094a06.png" width="20%"/>
+</p>
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732424-d8c34a00-fc03-11ea-8b7b-0a728274f50f.png" width="60%"/>
+</p>
+
+* 选择仅显示平滑后的数据
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732485-263fb700-fc04-11ea-9edb-40cb8676aad0.png" width="25%"/>
+</p>
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732514-4cfded80-fc04-11ea-99c9-9053f9945c8b.png" width="60%"/>
+</p>

 * X轴有三种衡量尺度

@@ -716,3 +735,36 @@ visualdl --logdir ./log --port 8080
  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/83006747-3fb16780-a045-11ea-83e0-a314b7765108.png" width="27%"/>
  </p>
+
+
+## VDL.service
+
+### 简介
+
+VisualDL可视化结果保存服务，以链接形式将可视化结果保存下来，方便用户快速、便捷的进行托管与分享。
+
+### 使用步骤
+
+1. 确保VisualDL已升级到最新版本，如未升级，请使用以下命令进行升级
+
+```
+pip install visualdl --upgrade
+
+```
+
+2. 上传需保存/分享的日志/模型文件
+
+```
+visualdl service upload --logdir ./log \
+                        --model ./__model__
+```                       
+                       
+3. VDL.service将返回一个URL链接，复制粘贴链接至浏览器中即可查看可视化结果
+
+  <p align="center">
+    <img src="https://user-images.githubusercontent.com/48054808/93733769-5ccc0080-fc09-11ea-88c0-6f17c04ebdce.png" width="100%"/>
+  </p>
+  
+   <p align="center">
+    <img src="https://user-images.githubusercontent.com/48054808/93733790-69e8ef80-fc09-11ea-9256-68a88072f5d2.png" width="100%"/>
+  </p>
--- a/docs/components/UserGuide-en.md
+++ b/docs/components/UserGuide-en.md
@@ -10,6 +10,7 @@ Currently, VisualDL provides seven components: scalar, image, audio, graph, hist



+
 |                        Component Name                        |         Display Chart         | Function                                                     |
 | :----------------------------------------------------------: | :---------------------------: | :----------------------------------------------------------- |
 |                [ Scalar](#Scalar--Line-Chart)                |          Line Chart           | Display scalar data such as loss and accuracy dynamically.   |
@@ -20,7 +21,7 @@ Currently, VisualDL provides seven components: scalar, image, audio, graph, hist
 |                   [PR Curve](#PR-Curve)                   |   Precision & Recall Curve    | Display precision-recall curves across training steps, clarifying the tradeoff between precision and recall when comparing models. |
 | [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](#VDL.service) , which allows developers to easily save, track and share visualization results of experiments with anyone for free.

 ## Scalar--Line Chart

@@ -174,6 +175,25 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li
  <img src="https://user-images.githubusercontent.com/48054808/90873112-2b74d080-e3d0-11ea-8a69-24b7b4abae96.png" width="40%"/>
 </p>

+* Display the global extrema
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732753-46bc4100-fc05-11ea-92ca-35c89467815b.png" width="30%"/>
+</p>
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732766-58054d80-fc05-11ea-89e0-bc00a283f559.png" width="60%"/>
+</p>
+
+* Only display smoothed data 
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732799-7f5c1a80-fc05-11ea-886f-193c3bcc9b5f.png" width="30%"/>
+</p>
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/93732815-9569db00-fc05-11ea-8353-ffa5086d3d52.png" width="60%"/>
+</p>

 * There are three measurement scales of X axis

@@ -719,3 +739,36 @@ 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/90880856-bf986500-e3db-11ea-8ffd-261b56d8e730.png" width="27%"/>
  </p>
+
+
+## VDL.service
+
+### Introduction
+
+VDL.service enables developers to easily save, track and share visualization results with anyone for free.
+
+### Usage Steps
+
+1. Make sure that your get the lastest version of VisualDL, if not, please update by:
+
+```
+pip install visualdl --upgrade
+
+```
+
+2. Upload log/model to save, track and share the visualization results.
+
+```
+visualdl service upload --logdir ./log \
+                        --model ./__model__
+```                       
+                       
+3. An unique URL will be given. Then you can view the visualization results by simply copying and pasting the URL to the browser. 
+
+  <p align="center">
+    <img src="https://user-images.githubusercontent.com/48054808/93733769-5ccc0080-fc09-11ea-88c0-6f17c04ebdce.png" width="100%"/>
+  </p>
+  
+   <p align="center">
+    <img src="https://user-images.githubusercontent.com/48054808/93734496-057b5f80-fc0c-11ea-9b52-229ff8847bc0.png" width="100%"/>
+  </p>