[Doc] Add document for fastdeploy components (#1189)

* add document for fastdeploy components * add document for fastdeploy components * add document for fastdeploy components * add graph * fix links * fix links * update doc * add english document * add english document * update document for index * update document for index * update format * update docs * update docs * update docs

[Doc] Add document for fastdeploy components (#1189)
* add document for fastdeploy components * add document for fastdeploy components * add document for fastdeploy components * add graph * fix links * fix links * update doc * add english document * add english document * update document for index * update document for index * update format * update docs * update docs * update docs
36808ca4 · chenjian · GitHub · 5208d7f4 · 36808ca4 · 36808ca4
12 changed file
--- a/README.md
+++ b/README.md
@@ -160,7 +160,7 @@ In the above example, the log has recorded three sets of scalar values. Develope
 Use the command line to launch the VisualDL panel：
 ```python
-visualdl --logdir <dir_1, dir_2, ... , dir_n> --model <model_file> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only
+visualdl --logdir <dir_1, dir_2, ... , dir_n> --model <model_file> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only --component_tabs <tab_name1, tab_name2, ...>
 ```
 Parameter details:
@@ -175,6 +175,7 @@ Parameter details:
 | --language      | The language of the VisualDL panel. Language can be specified as 'en' or 'zh', and the default is the language used by the browser. |
 | --public-path   | The URL path of the VisualDL panel. The default path is '/app', meaning that the access address is 'http://&lt;host&gt;:&lt;port&gt;/app'. |
 | --api-only      | Decide whether or not to provide only API. If this parameter is set, VisualDL will only provides API service without displaying the web page, and the API address is 'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'. Additionally, If the public_path parameter is not specified, the default address is 'http://&lt;host&gt;:&lt;port&gt;/api'. |
+| --component_tabs  | Decide which components are presented in page, currently support 15 components, i.e. 'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'. If this parameter is set, only specified components will be presented. If not set, and specify --logdir parameter, only components with data in vdlrecords log are presented. If both --component_tabs and --logdir are not set, only present 'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client' components by default |
 To visualize the log file generated in the previous step, developers can launch the panel through the command:
@@ -214,6 +215,7 @@ The interface parameters are as follows:
 | public_path   | string                                             | The URL path of the VisualDL panel. The default path is '/app', meaning that the access address is 'http://&lt;host&gt;:&lt;port&gt;/app'. |
 | api_only      | boolean                                            | Decide whether or not to provide only API. If this parameter is set, VisualDL will only provides API service without displaying the web page, and the API address is 'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'. Additionally, If the parameter public_path is not specified, the default address is 'http://&lt;host&gt;:&lt;port&gt;/api'. |
 | open_browser  | boolean                                            | Whether or not to open the browser. If this parameter is set as True, the browser will be opened automatically and VisualDL panel will be launched at the same time. If parameter api_only is specified as True,  parameter open_browser can be ignored. |
+| component_tabs | string or list[string_1, string_2, ... , string_n] | Decide which components are presented in page, currently support 15 components, i.e. 'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'. If this parameter is set, only specified components will be presented. If not set, and specify --logdir parameter, only components with data in vdlrecords log are presented. If both --component_tabs and --logdir are not set, only present 'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client' components by default |
 To visualize the log file generated in the previous step, developers can launch the panel through the command:
@@ -388,6 +390,36 @@ Developers can compare multiple experiments by specifying and uploading the path
 <img src="https://user-images.githubusercontent.com/22424850/185894151-53ffc60b-7203-4cb8-a289-5d97332d0691.gif" width="85%"/>
 </p>
+### Performance Analysis
+**Performance Analysis**(Profiler) visualize the profiling data collected during your program runs, helping you identify program bottlenecks and optimize performance. Please refer to [VisualDL Profiler Guide](./docs/components/profiler/README.md).
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/185894151-53ffc60b-7203-4cb8-a289-5d97332d0691.gif" width="85%"/>
+</p>
+### X2Paddle
+The X2Paddle component provides the functions of onnx model format visualization and transformation to paddle format.
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203066-f2e43ef5-104f-436a-b44c-cad2b37ad518.gif" width="100%"/>
+</p>
+### FastDeployServer
+The FastDeployServer component provides the functions of loading and editing the model repository, fastdeployserver service management and monitoring, and providing the client to test service. Please refer to [use VisualDL for fastdeploy serving deployment visualization](./docs/components/fastdeploy_server/README.md).
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211196832-1a05bf80-5aaa-493f-bba2-27e819c18bb9.gif" width="100%"/>
+</p>
+### FastDeployClient
+The FastDeployClient component is mainly used to quickly access the fastdeployserver service, to help users visualize prediction requests and results. Please refer to [use VisualDL as fastdeploy client for request visualization](./docs/components/fastdeploy_client/README.md).
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203852-059d5b98-6299-4057-97d8-5209805aa67f.gif" width="100%"/>
+</p>
 ### VDL.service
 **VDL.service** enables developers to easily save, track and share visualization results with anyone for free.
@@ -409,7 +441,7 @@ Developers are warmly welcomed to use, comment and contribute.
 ## More Details
-For more details related to the use of VisualDL, please refer to [**VisualDL User Guide**](./docs/components/README.md)。
+For more details related to the use of VisualDL, please refer to [**VisualDL User Guide**](./docs/components/README.md), [**VisualDL Profiler Guide**](./docs/components/profiler/README.md), [**Use VisualDL for fastdeploy serving deployment visualization**](./docs/components/fastdeploy_server/README.md), [**Use VisualDL as fastdeploy client for request visualization**](./docs/components/fastdeploy_client/README.md).
 ## Technical Communication

--- a/README_CN.md
+++ b/README_CN.md
@@ -175,7 +175,7 @@ with LogWriter(logdir="./log/scalar_test/train") as writer:  # 将会创建日
 使用命令行启动VisualDL面板，命令格式如下：
 ```python
-visualdl --logdir <dir_1, dir_2, ... , dir_n> --model <model_file> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only
+visualdl --logdir <dir_1, dir_2, ... , dir_n> --model <model_file> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only --component_tabs <tab_name1, tab_name2, ...>
 ```
 参数详情：
@@ -190,6 +190,7 @@ visualdl --logdir <dir_1, dir_2, ... , dir_n> --model <model_file> --host <host>
 | --language      | VisualDL面板语言，可指定为'en'或'zh'，默认为浏览器使用语言   |
 | --public-path   | VisualDL面板URL路径，默认是'/app'，即访问地址为'http://&lt;host&gt;:&lt;port&gt;/app' |
 | --api-only      | 是否只提供API，如果设置此参数，则VisualDL不提供页面展示，只提供API服务，此时API地址为'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'；若没有设置public_path参数，则默认为'http://&lt;host&gt;:&lt;port&gt;/api' |
+| --component_tabs | 设定需要显示的组件，当前支持'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'共15个组件。如果设置了此参数，将只展示所指定的组件。如果没有设置此参数，当指定了--logdir参数时候，将会根据日志文件中拥有的数据类型来自动显示相应的组件。当没有指定--logdir参数，默认显示'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'这四个名称代表的组件 |
 针对上一步生成的日志，启动命令为：
@@ -228,6 +229,7 @@ visualdl.server.app.run(logdir,
 | public_path   | string                                           | VisualDL面板URL路径，默认是'/app'，即访问地址为'http://&lt;host&gt;:&lt;port&gt;/app' |
 | api_only      | boolean                                          | 是否只提供API，如果设置此参数，则VisualDL不提供页面展示，只提供API服务，此时API地址为'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'；若没有设置public_path参数，则默认为'http://&lt;host&gt;:&lt;port&gt;/api' |
 | open_browser  | boolean                                          | 是否打开浏览器，设置为True则在启动后自动打开浏览器并访问VisualDL面板，若设置api_only，则忽略此参数 |
+| --component_tabs | string或list[string_1, string_2, ... , string_n] | 设定需要显示的组件，当前支持'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'共15个组件。如果设置了此参数，将只展示所指定的组件。如果没有设置此参数，当指定了--logdir参数时候，将会根据日志文件中拥有的数据类型来自动显示相应的组件。当没有指定--logdir参数，默认显示'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'这四个名称代表的组件 |
 针对上一步生成的日志，我们的启动脚本为：
@@ -402,11 +404,33 @@ value: 3.1297709941864014
 </p>
 ### Profiler
-通过多个视图可视化性能分析的数据，辅助用户定位性能瓶颈并进行优化。可参考[使用VisualDL做性能分析](./profiler/README_CN.md)。
+通过多个视图可视化性能分析的数据，辅助用户定位性能瓶颈并进行优化。可参考[使用VisualDL做性能分析](./docs/components/profiler/README_CN.md)。
 <p align="center">
 <img src="https://user-images.githubusercontent.com/22424850/185893177-a049c8d5-2310-4138-8dd5-844cf198e425.gif" width="85%"/>
 </p>
+### X2Paddle
+提供onnx模型转paddle模型的可视化操作界面，帮助用户可视化onnx模型结构并且获取转换后的paddle模型结构和参数文件。
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203066-f2e43ef5-104f-436a-b44c-cad2b37ad518.gif" width="100%"/>
+</p>
+### FastDeployServer
+基于[FastDeploy](https://github.com/PaddlePaddle/FastDeploy)的Serving可视化部署，提供配置模型库、管理监控服务以及测试服务等功能。详细内容可参考[使用VisualDL进行Serving可视化部署](./docs/components/fastdeploy_server/README_CN.md)。
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211196832-1a05bf80-5aaa-493f-bba2-27e819c18bb9.gif" width="100%"/>
+</p>
+### FastDeployClient
+提供给用户访问fastdeployserver服务的客户端界面，进行一键预测和可视化结果。详细内容可参考[使用VisualDL作为fastdeployserver服务的客户端](./docs/components/fastdeploy_client/README_CN.md)。
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203852-059d5b98-6299-4057-97d8-5209805aa67f.gif" width="100%"/>
+</p>
 ### VDL.service
@@ -436,8 +460,7 @@ Graph 相关功能由 [Netron](https://github.com/lutzroeder/netron) 提供技
 ## 更多细节
-想了解更多关于VisualDL可视化功能的使用详情介绍，请查看[**VisualDL使用指南**](./docs/components/README_CN.md)。
+想了解更多关于VisualDL可视化功能的使用详情介绍，请查看[**VisualDL使用指南**](./docs/components/README_CN.md)，[**使用VisualDL做性能分析**](./docs/components/profiler/README_CN.md)，[**使用VisualDL进行Serving可视化部署**](./docs/components/fastdeploy_server/README_CN.md)，[**使用VisualDL作为fastdeployserver服务的客户端**](./docs/components/fastdeploy_client/README_CN.md)。
 ## 技术交流
 欢迎您加入VisualDL官方QQ群：1045783368 与飞桨团队以及其他用户共同针对VisualDL进行讨论与交流。

--- a/docs/README.md
+++ b/docs/README.md
@@ -126,7 +126,7 @@ In the above example, the log has recorded three sets of scalar values. Develper
 Use the command line to launch the VisualDL panel：
 ```python
-visualdl --logdir <dir_1, dir_2, ... , dir_n> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only
+visualdl --logdir <dir_1, dir_2, ... , dir_n> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only --component_tabs <tab_name1, tab_name2, ...>
 ```
 Parameter details:
@@ -140,6 +140,7 @@ Parameter details:
 | --language      | The language of the VisualDL panel. Language can be specified as 'en' or 'zh', and the default is the language used by the browser. |
 | --public-path   | The URL path of the VisualDL panel. The default path is '/app', meaning that the access address is 'http://&lt;host&gt;:&lt;port&gt;/app'. |
 | --api-only      | Decide whether or not to provide only API. If this parameter is set, VisualDL will only provides API service without displaying the web page, and the API address is 'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'. Additionally, If the public_path parameter is not specified, the default address is 'http://&lt;host&gt;:&lt;port&gt;/api'. |
+| --component_tabs  | Decide which components are presented in page, currently support 15 components, i.e. 'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'. If this parameter is set, only specified components will be presented. If not set, and specify --logdir parameter, only components with data in vdlrecords log are presented. If both --component_tabs and --logdir are not set, only present 'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client' components by default |
 To visualize the log file generated in the previous step, developers can launch the panel through the command:
@@ -176,6 +177,7 @@ The interface parameters are as follows:
 | public_path   | string                                             | The URL path of the VisualDL panel. The default path is '/app', meaning that the access address is 'http://&lt;host&gt;:&lt;port&gt;/app'. |
 | api_only      | boolean                                            | Decide whether or not to provide only API. If this parameter is set, VisualDL will only provides API service without displaying the web page, and the API address is 'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'. Additionally, If the parameter public_path is not specified, the default address is 'http://&lt;host&gt;:&lt;port&gt;/api'. |
 | open_browser  | boolean                                            | Whether or not to open the browser. If this parameter is set as True, the browser will be openned automatically and VisualDL panel will be launched at the same time. If parameter api_only is specified as True,  parameter open_browser can be ignored. |
+| component_tabs | string or list[string_1, string_2, ... , string_n] | Decide which components are presented in page, currently support 15 components, i.e. 'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'. If this parameter is set, only specified components will be presented. If not set, and specify --logdir parameter, only components with data in vdlrecords log are presented. If both --component_tabs and --logdir are not set, only present 'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client' components by default |
 To visualize the log file generated in the previous step, developers can launch the panel through the command:
@@ -288,11 +290,35 @@ Developers can compare with multiple experiments by specifying and uploading the
 </p>
 ### Performance Analysis
-**Performance Analysis**(Profiler) visualize the profiling data collected during your program runs, helping you identify program bottlenecks and optimize performance. Please refer to [VisualDL Profiler Guide](./profiler/README.md)。
+**Performance Analysis**(Profiler) visualize the profiling data collected during your program runs, helping you identify program bottlenecks and optimize performance. Please refer to [VisualDL Profiler Guide](./components/profiler/README.md).
 <p align="center">
 <img src="https://user-images.githubusercontent.com/22424850/185894151-53ffc60b-7203-4cb8-a289-5d97332d0691.gif" width="85%"/>
 </p>
+### X2Paddle
+The X2Paddle component provides the functions of onnx model format visualization and transformation to paddle format.
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203066-f2e43ef5-104f-436a-b44c-cad2b37ad518.gif" width="100%"/>
+</p>
+### FastDeployServer
+The FastDeployServer component provides the functions of loading and editing the model repository, fastdeployserver service management and monitoring, and providing the client to test service. Please refer to [use VisualDL for fastdeploy serving deployment visualization](./components/fastdeploy_server/README.md).
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211196832-1a05bf80-5aaa-493f-bba2-27e819c18bb9.gif" width="100%"/>
+</p>
+### FastDeployClient
+The FastDeployClient component is mainly used to quickly access the fastdeployserver service, to help users visualize prediction requests and results. Please refer to [use VisualDL as fastdeploy client for request visualization](./components/fastdeploy_client/README.md).
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203852-059d5b98-6299-4057-97d8-5209805aa67f.gif" width="100%"/>
+</p>
 ### VDL.service
 **VDL.service** enables developers to easily save, track and share visualization results with anyone for free.
@@ -308,7 +334,7 @@ VisualDL, in which Graph is powered by [Netron](https://github.com/lutzroeder/ne
 ## More Details
-For more details related to the use of VisualDL, please refer to [**VisualDL User Guide**](./docs/components/README.md)。
+For more details related to the use of VisualDL, please refer to [**VisualDL User Guide**](./components/README.md), [**VisualDL Profiler Guide**](./components/profiler/README.md), [**Use VisualDL for fastdeploy serving deployment visualization**](./components/fastdeploy_server/README.md), [**Use VisualDL as fastdeploy client for request visualization**](./components/fastdeploy_client/README.md).
 ## Technical Communication

--- a/docs/README_CN.md
+++ b/docs/README_CN.md
@@ -135,7 +135,7 @@ with LogWriter(logdir="./log/scalar_test/train") as writer:
 使用命令行启动VisualDL面板，命令格式如下：
 ```python
-visualdl --logdir <dir_1, dir_2, ... , dir_n> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only
+visualdl --logdir <dir_1, dir_2, ... , dir_n> --host <host> --port <port> --cache-timeout <cache_timeout> --language <language> --public-path <public_path> --api-only --component_tabs <tab_name1, tab_name2, ...>
 ```
 参数详情：
@@ -150,6 +150,8 @@ visualdl --logdir <dir_1, dir_2, ... , dir_n> --host <host> --port <port> --cach
 | --language      | VisualDL面板语言，可指定为'en'或'zh'，默认为浏览器使用语言                                                                                                                                   |
 | --public-path   | VisualDL面板URL路径，默认是'/app'，即访问地址为'http://&lt;host&gt;:&lt;port&gt;/app'                                                                                                                    |
 | --api-only      | 是否只提供API，如果设置此参数，则VisualDL不提供页面展示，只提供API服务，此时API地址为'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'；若没有设置public_path参数，则默认为'http://&lt;host&gt;:&lt;port&gt;/api' |
+| --component_tabs | 设定需要显示的组件，当前支持'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'共15个组件。如果设置了此参数，将只展示所指定的组件。如果没有设置此参数，当指定了--logdir参数时候，将会根据日志文件中拥有的数据类型来自动显示相应的组件。当没有指定--logdir参数，默认显示'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'这四个名称代表的组件 |
 针对上一步生成的日志，启动命令为：
@@ -187,6 +189,7 @@ visualdl.server.app.run(logdir,
 | public_path   | string                                           | VisualDL面板URL路径，默认是'/app'，即访问地址为'http://&lt;host&gt;:&lt;port&gt;/app'                                                                                                                    |
 | api_only      | boolean                                          | 是否只提供API，如果设置此参数，则VisualDL不提供页面展示，只提供API服务，此时API地址为'http://&lt;host&gt;:&lt;port&gt;/&lt;public_path&gt;/api'；若没有设置public_path参数，则默认为'http://&lt;host&gt;:&lt;port&gt;/api' |
 | open_browser  | boolean                                          | 是否打开浏览器，设置为True则在启动后自动打开浏览器并访问VisualDL面板，若设置api_only，则忽略此参数                                                                                           |
+| --component_tabs | string或list[string_1, string_2, ... , string_n] | 设定需要显示的组件，当前支持'scalar', 'image', 'text', 'embeddings', 'audio', 'histogram', 'hyper_parameters', 'static_graph', 'dynamic_graph', 'pr_curve', 'roc_curve', 'profiler', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'共15个组件。如果设置了此参数，将只展示所指定的组件。如果没有设置此参数，当指定了--logdir参数时候，将会根据日志文件中拥有的数据类型来自动显示相应的组件。当没有指定--logdir参数，默认显示'static_graph', 'x2paddle', 'fastdeploy_server', 'fastdeploy_client'这四个名称代表的组件 |
 针对上一步生成的日志，我们的启动脚本为：
@@ -304,11 +307,32 @@ app.run(logdir="./log")
 </p>
 ### Profiler
-通过多个视图可视化性能分析的数据，辅助用户定位性能瓶颈并进行优化。可参考[使用VisualDL做性能分析](./profiler/README_CN.md)。
+通过多个视图可视化性能分析的数据，辅助用户定位性能瓶颈并进行优化。可参考[使用VisualDL做性能分析](./components/profiler/README_CN.md)。
 <p align="center">
 <img src="https://user-images.githubusercontent.com/22424850/185893177-a049c8d5-2310-4138-8dd5-844cf198e425.gif" width="85%"/>
 </p>
+### X2Paddle
+提供onnx模型转paddle模型的可视化操作界面，帮助用户可视化onnx模型结构并且获取转换后的paddle模型结构和参数文件。
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203066-f2e43ef5-104f-436a-b44c-cad2b37ad518.gif" width="100%"/>
+</p>
+### FastDeployServer
+基于[FastDeploy](https://github.com/PaddlePaddle/FastDeploy)的Serving可视化部署，提供配置模型库、管理监控服务以及测试服务等功能。详细内容可参考[使用VisualDL进行Serving可视化部署](./components/fastdeploy_server/README_CN.md)。
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211196832-1a05bf80-5aaa-493f-bba2-27e819c18bb9.gif" width="100%"/>
+</p>
+### FastDeployClient
+提供给用户访问fastdeployserver服务的客户端界面，进行一键预测和可视化结果。详细内容可参考[使用VisualDL作为fastdeployserver服务的客户端](./components/fastdeploy_client/README_CN.md)。
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203852-059d5b98-6299-4057-97d8-5209805aa67f.gif" width="100%"/>
+</p>
 ### VDL.service
 VisualDL可视化结果保存服务，以链接形式将可视化结果保存下来，方便用户快速、便捷的进行托管与分享。
@@ -327,7 +351,8 @@ Graph 相关功能由 [Netron](https://github.com/lutzroeder/netron) 提供技
 ## 更多细节
-想了解更多关于VisualDL可视化功能的使用详情介绍，请查看[**VisualDL使用指南**](./docs/components/README_CN.md)。
+想了解更多关于VisualDL可视化功能的使用详情介绍，请查看[**VisualDL使用指南**](./components/README_CN.md)，[**使用VisualDL做性能分析**](./components/profiler/README_CN.md)，[**使用VisualDL进行Serving可视化部署**](./components/fastdeploy_server/README_CN.md)，[**使用VisualDL作为fastdeployserver服务的客户端**](./components/fastdeploy_client/README_CN.md)。
 ## 技术交流

--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -6,7 +6,7 @@
 VisualDL is a visualization tool designed for Deep Learning. VisualDL provides a variety of charts to show the trends of parameters. It enables users to understand the training process and model structures of Deep Learning models more clearly and intuitively so as to optimize models efficiently.
-Currently, VisualDL provides **Ten Components**: scalar, image, audio, text, graph, histogram, pr curve, ROC curve, high dimensional and hyperparameters. VisualDL iterates rapidly and new functions will be continuously added.
+Currently, VisualDL provides **Fifteen Components**: scalar, image, audio, text, graph(dynamic, static), histogram, pr curve, ROC curve, high dimensional and hyperparameters, profiler, x2paddle, fastdeployserver, fastdeployclient. VisualDL iterates rapidly and new functions will be continuously added.
@@ -22,6 +22,10 @@ Currently, VisualDL provides **Ten Components**: scalar, image, audio, text, gra
 |                   [ROC Curve](#ROC-Curve)                   |   Receiver Operating Characteristic curve    | Show 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. |
 | [Hyper Parameters](#hyperparameters--hyperparameter-visualization) |  HyperParameter Visualization  | Visualize the relationship between hyperparameters and model metrics (such as accuracy and loss) in a rich view, helping you identify the best hyperparameters in an efficient way. |
+|[Profiler](#Profiler--profiling-data-visualization)| Profiling data visualization | Analyse profiling data exported by paddle, helping users identify program bottlenecks and optimize performance |
+|[X2Paddle](#X2Paddle--model-format-transformation)| Model conversion| Convert onnx model to paddle format |
+|[FastDeployServer](#fastdeployserver--fastdeploy-serving-deployment-visualization) | fastdeploy serving deployment visualization | Provide the functions of loading and editing the model repository, fastdeployserver service management and monitoring |
+|[FastDeployClient](#fastdeployclient--fastdeploy-client-for-request-visualization)| fastdeploy client for request visualization  | Access the fastdeployserver service, helping users visualize prediction requests and results |
 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.
@@ -1104,6 +1108,67 @@ Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
    <img src="https://user-images.githubusercontent.com/28444161/119221157-8b93d100-bb20-11eb-9c9e-7540b3cb92a1.png" width="20%"/>
  </p>
+## Profiler--profiling data visualization
+### Introduction
+VisualDL supports to visualize profiling data exported by paddle and helps you identify program bottlenecks and optimize performance. Please refer to [VisualDL Profiler Guide](./components/profiler/README.md).
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/185894151-53ffc60b-7203-4cb8-a289-5d97332d0691.gif" width="85%"/>
+</p>
+## X2Paddle--model format transformation
+### Introduction
+The X2Paddle component is used to read the onnx model, display the network structure of the onnx model, and help users convert the onnx model into a paddle model. Users can compare the original onnx model and the converted paddle model network, and obtain the converted model for use.
+### Usage
+Launch the panel by:
+```shell
+visualdl --port 8080
+```
+Then, open the browser and enter the address`http://127.0.0.1:8080` to use X2Paddle component.
+### Functional Instrucions
+- Convert onnx model and download
+   <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203066-f2e43ef5-104f-436a-b44c-cad2b37ad518.gif" width="100%"/>
+</p>
+- Reload a new model
+   <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203105-afa88c93-038c-4c01-bbc8-b07aa5ecfcf4.gif" width="100%"/>
+</p>
+- Compare model network between conversions
+   <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203137-cb113b58-7977-4de5-b742-2089e4336b47.gif" width="100%"/>
+</p>
+**Note**: If failed to convert an onnx model to paddle, you can copy the error message of the model conversion to [X2Paddle](https://github.com/PaddlePaddle/X2Paddle/issues) issue to help us improve this tool.
+## FastDeployServer--fastdeploy serving deployment visualization
+### Introduction
+The FastDeployServer component assists users to use fastdeployserver to deploy service conveniently based on [FastDeploy project](https://github.com/PaddlePaddle/FastDeploy). It mainly provides the functions of loading and editing the model repository, service management and monitoring, and providing the client to test service. Please refer to [use VisualDL for fastdeploy serving deployment management](./fastdeploy_server/README.md).
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211196832-1a05bf80-5aaa-493f-bba2-27e819c18bb9.gif" width="100%"/>
+</p>
+## FastDeployClient--fastdeploy client for request visualization
+### Introduction
+The FastDeployClient component is mainly used to quickly access the fastdeployserver service based on [FastDeploy project](https://github.com/PaddlePaddle/FastDeploy), to help users visualize prediction requests and results, and make quick verification of deployed services. Please refer to [use VisualDL as fastdeploy client for request visualization](./fastdeploy_client/README.md).
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203852-059d5b98-6299-4057-97d8-5209805aa67f.gif" width="100%"/>
+</p>
 ## VDL.service
 ### Introduction

--- a/docs/components/README_CN.md
+++ b/docs/components/README_CN.md
@@ -6,7 +6,7 @@
 VisualDL 是一个面向深度学习任务设计的可视化工具。VisualDL 利用了丰富的图表来展示数据，用户可以更直观、清晰地查看数据的特征与变化趋势，有助于分析数据、及时发现错误，进而改进神经网络模型的设计。
-目前，VisualDL 支持 scalar, image, audio，text, graph, histogram, pr curve, ROC curve, high dimensional, hyper parameters 十个组件，项目正处于高速迭代中，敬请期待新组件的加入。
+目前，VisualDL 支持 scalar, image, audio，text, graph（动态图，静态图）, histogram, pr curve, ROC curve, high dimensional, hyper parameters, profiler, x2paddle, fastdeployserver, fastdeployclient 共十五个组件，项目正处于高速迭代中，敬请期待新组件的加入。
 |                           组件名称                           |  展示图表  | 作用                                                         |
 | :----------------------------------------------------------: | :--------: | :----------------------------------------------------------- |
@@ -20,6 +20,12 @@ VisualDL 是一个面向深度学习任务设计的可视化工具。VisualDL 
 |              [ROC Curve](#ROC-Curve--ROC曲线组件)               |   折线图   | 展示不同阈值下的模型表现                               |
 | [High Dimensional](#High-Dimensional--数据降维组件) |  数据降维  | 将高维数据映射到 2D/3D 空间来可视化嵌入，便于观察不同数据的相关性 |
 | [Hyper Parameters](#HyperParameters--超参可视化组件) |  超参数可视化  | 以丰富的视图多角度地可视化超参数与模型关键指标间的关系，便于快速确定最佳超参组合，实现高效调参。 |
+|[Profiler](#Profiler--性能数据可视化组件)| 性能数据可视化 | 解析飞桨框架性能分析器导出的性能数据，辅助用户诊断训练程序性能瓶颈 |
+|[X2Paddle](#X2Paddle--模型转换组件)| 模型转换 | 展示onnx网络结构，并帮助用户转换为飞桨模型，提供转换后的模型结构和参数文件 |
+|[FastDeployServer](#fastdeployserver--serving可视化部署组件) | Serving可视化部署 | 提供对基于[FastDeploy](https://github.com/PaddlePaddle/FastDeploy)的Serving可视化部署，提供配置模型库、管理监控服务以及测试服务等功能 |
+|[FastDeployClient](#fastdeployclient--serving服务的客户端组件)| Serving服务的客户端 | 提供对fastdeployserver服务进行访问的客户端界面 |
 同时，VisualDL提供可视化结果保存服务，通过 [VDL.service](#vdlservice) 生成链接，保存并分享可视化结果
@@ -1148,6 +1154,67 @@ visualdl --logdir ./log --port 8080
    <img src="https://user-images.githubusercontent.com/28444161/119221157-8b93d100-bb20-11eb-9c9e-7540b3cb92a1.png" width="20%"/>
  </p>
+## Profiler--性能数据可视化组件
+### 介绍
+性能数据可视化组件用来解析飞桨框架性能分析器导出的性能数据文件，从多个角度对性能数据进行汇总分析，帮助用户诊断训练程序的性能瓶颈所在。请参考文档[使用VisualDL做性能分析](./profiler/README_CN.md)进行使用。
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/185893177-a049c8d5-2310-4138-8dd5-844cf198e425.gif" width="85%"/>
+</p>
+## X2Paddle--模型转换组件
+### 介绍
+X2Paddle模型转换组件用来读取onnx模型，展示onnx模型的网络结构，并且帮助用户对onnx模型转换为paddle模型。用户可以对比原始的onnx模型和转换后的paddle模型结构，并且获取转换后的模型进行使用。
+### 启动方式
+使用该功能需要安装x2paddle和onnx>=1.6，在安装visualdl>=2.5.0时候应该会自动安装依赖库。如果需要手动安装上述依赖，可以执行命令
+```bash
+python -m pip install x2paddle onnx>=1.6
+```
+在命令行执行
+```shell
+visualdl --host 0.0.0.0 --port 8080
+```
+接着在浏览器打开`http://127.0.0.1:8080`，即可使用X2Paddle组件进行模型转换。
+### 功能操作说明
+- 转换onnx模型并进行下载
+   <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203066-f2e43ef5-104f-436a-b44c-cad2b37ad518.gif" width="100%"/>
+</p>
+- 更换模型，选取一个新的模型进行转换
+   <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203105-afa88c93-038c-4c01-bbc8-b07aa5ecfcf4.gif" width="100%"/>
+</p>
+- 对比转换前后的模型结构
+   <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203137-cb113b58-7977-4de5-b742-2089e4336b47.gif" width="100%"/>
+</p>
+**注**：如果转换模型失败，将会弹出报错提示，可以拷贝模型转换失败的错误信息到[X2Paddle](https://github.com/PaddlePaddle/X2Paddle/issues)的issue中，帮助我们更好地优化模型转换工具。
+## FastDeployServer--Serving可视化部署组件
+### 介绍
+FastDeployServer组件辅助用户基于[FastDeploy项目](https://github.com/PaddlePaddle/FastDeploy)使用fastdeployserver进行快速的服务化部署。主要提供模型库配置修改，服务管理监控的功能。请参考文档[使用VisualDL进行Serving可视化部署](./fastdeploy_server/README_CN.md)进行使用。
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211196832-1a05bf80-5aaa-493f-bba2-27e819c18bb9.gif" width="100%"/>
+</p>
+## FastDeployClient--Serving服务的客户端组件
+### 介绍
+FastDeployClient组件提供给用户对fastdeployserver服务进行访问的客户端界面，进行一键预测和可视化结果。请参考文档[使用VisualDL作为fastdeployserver服务的客户端](./fastdeploy_client/README_CN.md)进行使用。
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211203852-059d5b98-6299-4057-97d8-5209805aa67f.gif" width="100%"/>
+</p>
 ## VDL.service

--- a/docs/components/fastdeploy_client/README.md
+++ b/docs/components/fastdeploy_client/README.md
+[**中文**](./README_CN.md)
+# Use VisualDL as fastdeploy client for request visualization
+### Introduction
+The FastDeploy Client component is mainly used to quickly access the fastdeployserver service based on [FastDeploy project](https://github.com/PaddlePaddle/FastDeploy), to help users visualize prediction requests and results, and make quick verification of deployed services. This component is developed based on the gradio.
+  <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211204267-8e044f32-1008-46a7-828a-d7c27ac5754a.gif" width="100%"/>
+   </p>
+### Usage
+use command
+```shell
+visualdl --host 0.0.0.0 --port 8080
+```
+Then open `http://127.0.0.1:8080` in the browser (please replace it with the ip of the machine that starts visualdl if not localhost), you can see the component tab of FastDeploy Client.
+### Function Description
+The client component is mainly divided into four parts. The first part is the parameter setting area of the fastdeployserver service, including the ip and port number of the http service, the port number of the metrics service, the model name and version number of the http inference service to be requested. The second part is the input and output area of the model, which helps users visualize prediction requests and results. The third part is the metrics area of the service, which is used to display the current performance metrics of the service. The fourth part is used to display the execution status of each operation.
+  <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211206389-9932d606-ea71-4f05-87eb-dcc21c5eeec9.png" width="100%"/>
+   </p>
+- Parameter setting area of fastdeployserver service
+   Set the ip address and port information of the server to be requested, as well as the model name and version number to perform inference. Subsequent requests will be sent to the set address.
+- Input and output areas of the model
+   Currently, there are two ways to access the service. The first one is "component form". This method will directly obtain the input and output of the model deployed on the server, and represent input and output variables by the components of Gradio. Each input and output variable is equipped with a text component and an image component. The user selects the corresponding component to use according to the actual type of the variable. For example, if the variable is image data, use the image component to input it, and if it is text, use the text component to input it. The returned data is also visualized through components. Since the visualization operations of different tasks are different, the task type selection is provided above. When the task type is not specified, the output variable is only displayed with the text component, displaying the original data returned by the server. When the task type is specified, the returned data will be parsed and displayed visually using the image component.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211207902-4717011d-8ae2-4105-9508-ab164896f177.gif" width="100%"/>
+   </p>
+   The second is "original form", which is equivalent to an original http client, where the payload of the http request is input in the input text box, and the original payload returned by the server is displayed in the output text box. Using this approach, the construct format of the input and output is completely opaque to the user, so it is not recommended unless neccessary.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211208731-381222bb-8fbe-45fa-bf78-4a3e2c7f6f04.gif" width="100%"/>
+   </p>
+- Service metrics area
+   It is used to display the performance information returned by the fastdeployserver metrics service, including the execution statistics for  each request, response delay, and the utilization rate of computing devices in the environment.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211208071-e772ed55-9a3d-4a21-9bca-3d80f444ca64.gif" width="100%"/>
+   </p>
+- Execution status display area
+   Displays the status of all operations performed on the client component. When the user clicks the "get model input and output", "submit request" and "update metrics" buttons, if an exception occurs, the execution status display area will show the exception messages. And if the execution is successful, there will be a corresponding tips so that the user can know the execution successes.
\ No newline at end of file
--- a/docs/components/fastdeploy_client/README_CN.md
+++ b/docs/components/fastdeploy_client/README_CN.md
+[**English**](./README.md)
+# 使用fastdeploy client进行可视化请求服务
+### 概述
+FastDeploy服务的客户端组件主要用于快速的访问基于[FastDeploy项目](https://github.com/PaddlePaddle/FastDeploy)开启的fastdeployserver服务，帮助用户进行预测请求和结果的可视化，对部署的服务进行快速验证。该页面基于gradio进行开发。
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211204267-8e044f32-1008-46a7-828a-d7c27ac5754a.gif" width="100%"/>
+  </p>
+### 使用方式
+使用命令
+```shell
+visualdl --host 0.0.0.0 --port 8080
+```
+接着在浏览器打开`http://127.0.0.1:8080`（如果浏览器和启动visualdl的机器不同，请替换为启动visualdl机器的ip），即可以看到FastDeploy Client的功能选项卡。
+### 功能说明
+FastDeploy服务的客户端页面主要分四部分，第一部分为fastdeployserver服务的参数设置区，包括http服务的ip, 端口号，性能服务的端口号，要请求推理服务的模型名称和版本号。第二部分为模型的输入和输出区，帮助用户对预测请求和返回结果进行可视化。第三部分为服务的性能统计区，用于展示服务当前的性能指标。第四部分用来显示各个操作的执行状态。
+ <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211206389-9932d606-ea71-4f05-87eb-dcc21c5eeec9.png" width="100%"/>
+  </p>
+- fastdeployserver服务的参数设置区
+  设置需要请求的服务器的ip地址和端口信息，以及要执行推理的模型名称和版本号。后续的请求都会发往所设置的地址。
+- 模型的输入和输出区
+  当前提供两种访问服务的方式，第一种是"组件形式"，这种方式会通过服务器直接获取模型的输入和输出，并且通过gradio的组件来进行表示，每个输入和输出变量配有一个文本组件和一个图像组件，用户根据变量的实际类型来选择对应组件进行使用，比如变量是图像数据则用图像组件输入，是文本则用文本组件进行输入。返回的数据也会通过组件进行可视化呈现。由于不同任务可视化的解析操作不同，因此上方提供了任务类型的选择，当不指定任务类型的时候，输出变量只用文本组件进行显示，显示服务器返回的原始数据。当指定了任务类型，将会对返回的数据进行解析，并且使用图像组件来可视化呈现出来。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211207902-4717011d-8ae2-4105-9508-ab164896f177.gif" width="100%"/>
+  </p>
+  第二种是"原始形式"，这种方式相当于一个原始的http客户端，输入框中输入http请求的原始负载，输出框中显示服务器返回的原始负载。使用这种方式，输入和输出的构造格式对用户完全不透明，因此不建议使用，除非组件形式没法成功实现请求。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211208731-381222bb-8fbe-45fa-bf78-4a3e2c7f6f04.gif" width="100%"/>
+  </p>
+- 服务的性能统计区
+  用来显示通过fastdeployserver性能服务的端口请求回来的性能指标信息，包括各个模型响应请求的执行统计、延迟统计，以及环境中计算设备的利用率。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211208071-e772ed55-9a3d-4a21-9bca-3d80f444ca64.gif" width="100%"/>
+  </p>
+- 执行状态显示区
+  显示在客户端界面执行的所有操作的情况，当用户点击"获取模型输入输出"、"提交请求"和"更新统计数据"按钮的时候，如果发生异常，执行状态显示区会给出异常发生的原因，如果执行成功也会有相应提醒，以便用户知道执行情况。
--- a/docs/components/fastdeploy_server/README.md
+++ b/docs/components/fastdeploy_server/README.md
+[**中文**](./README_CN.md)
+# Use VisualDL for fastdeploy serving deployment visualization
+### Introduction
+VisualDL supports fastdeploy serving deployment visualization based on [FastDeploy project](https://github.com/PaddlePaddle/FastDeploy). It mainly provides the functions of loading and editing the model repository, service management and monitoring, and providing the client to test service. You can directly load a initial model repository in FastDeploy examples, and complete the download of model resources required and modification of the model configuration file on VisualDL. Then start the fastdeployserver to deploy a certain model repository, monitor the service log and metrics, and help you make quick test and verification of deployed services.
+### Pre-requisite
+In order to use this function, you need to install fastdeployserver in the environment. Fastdeployserver is a serving deployment tool of [FastDeploy project](https://github.com/PaddlePaddle/FastDeploy), you can directly use fastdeployserver by downloading the docker image of fastdeploy.
+- CPU docker image
+```bash
+docker pull registry.baidubce.com/paddlepaddle/fastdeploy:1.0.2-cpu-only-21.10
+```
+- GPU docker image
+```bash
+docker pull registry.baidubce.com/paddlepaddle/fastdeploy:1.0.2-gpu-cuda11.4-trt8.4-21.10
+```
+You can enter a container using command
+```bash
+nvidia-docker run -it --net=host --name fd_serving -v `pwd`/:/FastDeploy registry.baidubce.com/paddlepaddle/fastdeploy:1.0.2-gpu-cuda11.4-trt8.4-21.10  bash
+```
+And install VisualDL in the container by
+```python
+python -m pip install visualdl
+```
+You can refer to the above command to obtain the image for use. For more information about fastdeploy serving deployment, please refer to the document [FastDeploy  Serving Deployment](https://github.com/PaddlePaddle/FastDeploy/blob/release/1.0.2 /serving/README_CN.md).
+This article assumes that the user has started the fastdeploy docker image, has the fastdeployserver command in the environment, and installed visualdl>=2.5.0. Then visualdl can be used to manage the fastdeployserver services.
+### Usage 
+use command
+```shell
+visualdl --host 0.0.0.0 --port 8080
+```
+Then open `http://127.0.0.1:8080` in the browser (please replace it with the ip of the machine that starts visualdl if not localhost), and you can see the component tab of FastDeploy Server.
+### Function Description
+The FastDeploy Server component mainly provides the functions of model repository loading and editing, services management and monitoring.
+The following uses the examples directory under the [FastDeploy project](https://github.com/PaddlePaddle/FastDeploy) as an example to describe the functions. You can first use the following commands to obtain the resources required by the example then open visualdl.
+```bash
+git clone https://github.com/PaddlePaddle/FastDeploy.git
+cd FastDeploy/examples
+visualdl --host 0.0.0.0 --port 8080
+```
+After entering the component tab of FastDeploy Server, you can
+1.Model repository loading and editing
+   - **model repository Loading**
+   Click the "load model repository" button to select the model repository path, and the "root path" is where visualdl starts. If the selected path is not a valid model repository path, you will be warned and please re-select. Open the model repository ./vision/detection/paddledetection/serving/models
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211199367-18d36b58-cbe8-4d5f-994b-9d9317753f78.gif" width="100%"/>
+   </p>
+   - **model configuration editor**
+   In the model repository, models can be divided into basic models and ensemble models. The ensemble model is composed of basic models, and represents a pipeline formed by multiple basic models. For example, three basic models "preprocess", "runtime", and "postprocess" can form an ensemble model. What is displayed in the canvas is the composition of the ensemble model, and the current ensemble model and all basic models are listed on the right panel.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211194661-51ecb563-0095-48ce-8143-ed7123f5b03c.png" width="100%"/>
+   </p>
+   You can click the basic model on the right panel, or double-click the basic model on the canvas to open the configuration editor. Click the "ensemble configuration" button to open the configuration editor of the ensemble model. You can select the configuration file you want to view in the configuration editor.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211201905-89c3ab64-0dcc-472d-89cc-a83c79945aa5.gif" width="100%"/>
+   </p>
+   The current configuration editor provides functions for configuration modification and update, downloading model resources, and setting the startup configuration file of models when starting the service.
+   a. Configuration modification update
+   When the user selects a configuration file, the configuration editor will display the configuration information in the selected configuration file. Currently, the configuration editor mainly supports you to modify the configuration of three attributes: maxBatchSize, instanceGroup, and optimization. The meanings and values of these three attributes are described as follows.
+   ```text
+   maxBatchSize: The maximum batch size allowed in inference. Please enter a non-negative integer, such as 16
+   instanceGroup: Set hardware resources the server uses and how many instances are deployed. It contains three configurable items, count represents the number of deployed instances, please enter a non-negative integer, such as 2. kind indicates the type of device used, and you can choose KIND_CPU to indicate the use of CPU or KIND_GPU to indicate the use of GPU. When KIND_GPU is selected, gpus indicates that the GPU card numbers need to be used, please enter multiple integers separated by commas (,), such as using cards 2 and 3, i.e. 2,3
+   optimization: Set the configuration of execution acceleration, you can configure the acceleration configuration of cpu and gpu separately. It contains the name of the backend, such as onnxruntime, and parameters related to the backend. The first text is filled with the parameter name, such as cpu_threads, and the second text is filled with the parameter value, such as 4
+   ```
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211202046-3ec7989b-9ceb-4c7a-b120-01780fb72df3.gif" width="100%"/>
+   </p>
+   When the "update" button is clicked, the content of the configuration file will be updated according to the user's modification, and the original configuration file will be backed up before the update. The backup configuration file is named as "{name}_vdlbackup_{time}. pbtxt", the backup configuration file is not allowed to be modified, which is used for configuration rollback.
+   For a complete definition of the configuration file of a model repository, please refer to [proto definition](https://github.com/triton-inference-server/common/blob/main/protobuf/model_config.proto), document [Model Configuration introduction](https://github.com/PaddlePaddle/FastDeploy/blob/release/1.0.2/serving/docs/zh_CN/model_configuration.md) gives some brief explanation of the definition.
+   b. Download model resources
+   The versions property in configuration editor will list the resource files that exist in different versions of the current model. When you need to add or replace a pre-trained model under a certain version, you can click the version number to pop up the download box, select the name of the pre-trained model you want to add or replace, and the pre-trained model can be automatically downloaded as the model resources under version. Besides, model resource files are allowed to rename and delete.
+<p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211198445-e276c9b2-78c3-4c35-82a6-4b85cd014e1e.gif" width="100%"/>
+   </p>
+   c. Set the startup configuration file of models
+   When fastdeployserver serves a the model repository, the configuration file used is config.pbtxt in each model directory. When there are multiple configuration files in the model directory, you can select a configuration file to set as the startup configuration file, the content of the selected configuration file will overwrite config.pbtxt. Therefore, this operation is equivalent to configuration rollback, which can be used to load the data of a backup configuration file into config.pbtxt, or to just select a configuration file as the startup configuration file.
+<p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211198515-96932d01-de59-44e5-ac76-e90b146c1aa8.gif" width="100%"/>
+   </p>
+2.services management
+   VisualDL provides management and monitoring functions for services. It mainly includes the functions of starting service, monitoring service, closing service and testing service.
+   a. Start the service
+   Click the "launch server" button to start a fastdeployserver service, and the deployed model repository is the currently loaded one. You can configurate launch parameters of a service on the launch parameters configuration editor.
+   The description of each launch parameter is as follows:
+   ```text
+   server-name: The service name specified by the user, which is used to name the deployed service for subsequent viewing. If not filled, the default service name is the process number pid of the service process
+   model-repository: The model repository to be deployed, which is the currently loaded model repository.
+   backend-config: Specify the backend configuration of service, the format is <backend_name>,<setting>=<value>, where backend_name is the backend name, such as python, tensorrt, etc., followed by the specific configurable items of the backend. The default value is python, shm-default-byte-size=10485760
+   http-port: Specify the http service port of service, the default is 8000
+   grpc-port: Specify the grpc service port of service, the default is 8001
+   metrics-port: Specify the metrics query service port of service, the default is 8002
+   gpus: Specify the number of gpus that can be used by the deployed service. If card 2 and card 3 are used, it is "2,3". If not filled, all available gpus will be used
+   ```
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211198608-c40283b0-e2cb-4a02-ae8a-3f6a2d5baae4.gif" width="100%"/>
+   </p>
+   b. Monitoring service
+   At present, the monitoring of the started service is mainly realized by providing the user with the output information of the  service, the metrics information, and the information of the deployed model repository. By default, the front-end will automatically update the monitored information every 10s, and you can also click the "update" button to manually update.
+   - Log (the output log of the service, which can be used to obtain the startup and loading status of the service, exception information, etc.)
+   - Metrics (obtain performance-related data by accessing the metric query service)
+   - Model repository configuration (used to view the model repository information deployed by the service)
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211198677-b14cab30-bf48-4f8d-a9a6-a97857217020.gif" width="100%"/>
+   </p>
+   c. Shutting down the service
+   Click the close tab on the left or the "shutdown" button to manually shut down a service.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211198748-c0628ed9-505a-4f7d-ae17-ecadf060b562.gif" width="100%"/>
+   </p>
+   d. Testing the service
+   Click the "open client" button to open the client for quickly testing the service. The client is written based on gradio, and will automatically help you fill in basic information according to the launch parameters of the service. You can refer to [Use VisualDL as fastdeploy client for request visualization](../fastdeploy_client/README.md) to use.
+   <p align="center">
+   <img src="https://user-images.githubusercontent.com/22424850/211198901-3e58fe9d-8667-4416-987a-200f9edeb05d.gif" width="100%"/>
+   </p>
\ No newline at end of file
--- a/docs/components/fastdeploy_server/README_CN.md
+++ b/docs/components/fastdeploy_server/README_CN.md
+[**English**](./README.md)
+# 使用VisualDL进行Serving可视化部署
+### 概述
+VisualDL支持基于[FastDeploy项目](https://github.com/PaddlePaddle/FastDeploy)使用fastdeployserver进行serving可视化部署。主要提供模型库载入和编辑、服务管理监控、以及提供客户端快速测试服务的功能。使用VisualDL可以直接载入一个比较初始的模型库，并完成模型库所需模型资源的下载、模型配置文件的数据修改，开启fastdeployserver服务化部署某个模型库，监控服务的状态和指标，并对已经部署的服务进行快速的测试验证。
+### 前置条件
+为了使用该功能，用户需要在环境里安装fastdeployserver。fastdeployserver作为[FastDeploy项目](https://github.com/PaddlePaddle/FastDeploy)的服务化部署工具，可以通过下载fastdeploy的docker镜像来直接使用fastdeployserver。
+- CPU镜像
+```bash
+docker pull registry.baidubce.com/paddlepaddle/fastdeploy:1.0.2-cpu-only-21.10
+```
+- GPU镜像
+```bash
+docker pull registry.baidubce.com/paddlepaddle/fastdeploy:1.0.2-gpu-cuda11.4-trt8.4-21.10
+```
+使用如下命令可以进入容器
+```bash
+nvidia-docker run -it --net=host --name fd_serving -v `pwd`/:/FastDeploy registry.baidubce.com/paddlepaddle/fastdeploy:1.0.2-gpu-cuda11.4-trt8.4-21.10  bash
+```
+在容器中使用如下命令可以安装VisualDL
+```python
+python -m pip install visualdl
+```
+可以参考上述命令来获取镜像进行使用，关于镜像和服务化部署的更多说明，可以参考文档[FastDeploy 服务化部署](https://github.com/PaddlePaddle/FastDeploy/blob/release/1.0.2/serving/README_CN.md)。
+本文假定用户已经启动了fastdeploy的镜像，环境中拥有了fastdeployserver命令，并且安装了visualdl>=2.5.0，以便能够正常使用VisualDL对fastdeployserver服务化部署进行管理。
+### 使用方式
+使用命令
+```shell
+visualdl --host 0.0.0.0 --port 8080
+```
+接着在浏览器打开`http://127.0.0.1:8080`（如果浏览器和启动visualdl的机器不同，请替换为启动visualdl机器的ip），即可以看到FastDeployServer的功能选项卡。
+### 功能说明
+VisualDL的FastDeployServer组件用来支持serving可视化部署，主要提供模型库载入和编辑、服务管理监控这两方面的功能。
+下面以[FastDeploy项目](https://github.com/PaddlePaddle/FastDeploy)下的examples目录为示例进行功能说明，可以先通过下列命令来获取示例所需要的资源并开启visualdl。
+```bash
+git clone https://github.com/PaddlePaddle/FastDeploy.git
+cd FastDeploy/examples
+visualdl --host 0.0.0.0 --port 8080
+```
+进入FastDeployServer的功能选项卡后，
+1.模型库载入和编辑
+  -  **模型库载入**
+  点击"载入模型库"按钮选择模型库路径，可选路径的"根路径"为visualdl启动时所在的路径。如果所选择的路径不是一个有效的模型库路径，则会进行提醒。打开模型库./vision/detection/paddledetection/serving/models
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211199367-18d36b58-cbe8-4d5f-994b-9d9317753f78.gif" width="100%"/>
+  </p>
+  - **模型配置编辑**
+  在模型库中，模型可以分为基础模型和ensemble模型。ensemble模型由基础模型构成，表示多个基础模型形成的pipeline，如三个基础模型"preprocess","runtime","postprocess"可以构成一个ensemble模型。在画布中显示的即是ensemble模型的构成，右边列举了当前的ensemble模型和所有的基础模型。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211194661-51ecb563-0095-48ce-8143-ed7123f5b03c.png" width="100%"/>
+  </p>
+  用户可以通过单击右侧的基础模型列表，或者是双击图上的基础模型来打开对应模型的配置界面。点击"ensemble配置"按钮可以打开ensemble模型的配置界面。进入配置页面后可以选择需要查看的配置文件。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211201905-89c3ab64-0dcc-472d-89cc-a83c79945aa5.gif" width="100%"/>
+  </p>
+  当前配置页面提供配置修改更新、下载模型资源、以及设置启动服务时的模型配置文件的功能。
+  a. 配置修改更新
+  当用户选择某个配置文件的时候，配置界面将会展示所选配置文件里的配置信息。目前配置界面主要支持用户修改maxBatchSize、instanceGroup以及optimization三个属性的配置，这三个属性的含义和可修改值的说明如下。
+  ```text
+  maxBatchSize: 设置模型推理时候，允许的最大batch size。请输入非负整数，如16
+  instanceGroup: 设置服务器使用哪种硬件资源，分别部署多少个模型推理实例。其中包含三个可设置的项，count表示部署的模型实例个数，请输入非负整数，如2。kind表示使用的设备类型，可以选择KIND_CPU表示使用CPU或者KIND_GPU表示使用GPU。当选择KIND_GPU时，gpus表示需要使用GPU卡编号，请输入多个用逗号（,)分割的整数，如使用2号和3号卡，即输入2,3
+  optimization: 设置执行加速的配置，可以分别配置cpu和gpu的加速配置。其中包含后端的名字name, 如onnxruntime，以及和该后端相关的参数配置，如添加一组参数的设置, 第一个框填参数名，如cpu_threads, 第二个框填参数值，如4
+  ```
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211202046-3ec7989b-9ceb-4c7a-b120-01780fb72df3.gif" width="100%"/>
+  </p>
+  当点击更新按钮时，会根据用户的修改对配置文件的内容进行更新，并且在更新之前会对原有配置文件进行备份，备份的配置文件命名方式为"所选配置文件名_vdlbackup_时间.pbtxt"，备份的配置文件不允许进行修改，主要是用于配置的回滚操作。
+  关于模型库的配置文件的完整定义可以参考[proto定义](https://github.com/triton-inference-server/common/blob/main/protobuf/model_config.proto)，文档[Model Configuration介绍](https://github.com/PaddlePaddle/FastDeploy/blob/release/1.0.2/serving/docs/zh_CN/model_configuration.md)对定义进行了一些简要说明。
+  b. 下载模型资源
+  模型配置框的versions属性，将会列出当前模型所拥有的不同版本目录下存在的资源文件。当需要新增或者替换某个版本下的预训练模型时候，可以点击版本号，弹出预训练模型的下载框，选择希望新增或者替换的预训练模型名，即可以自动下载预训练模型作为该版本下的模型资源。此外，模型资源文件允许进行重命名和删除。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211198445-e276c9b2-78c3-4c35-82a6-4b85cd014e1e.gif" width="100%"/>
+  </p>
+  c. 设置启动服务时的模型配置文件
+  当使用fastdeployserver服务化部署模型库时候，所用到的配置文件是每个模型目录下的config.pbtxt，当模型目录下有多个提前准备好的配置文件时候，可以通过选择某个配置文件设置为启动配置文件，就会将所选择的配置文件的内容覆盖config.pbtxt。因此，这一操作相当于是配置回滚，可以用于将某个备份的配置文件的数据载入到config.pbtxt，也可以用于选定某一个配置文件作为服务载入模型时所用到的配置文件。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211198515-96932d01-de59-44e5-ac76-e90b146c1aa8.gif" width="100%"/>
+  </p>
+2.服务管理监控
+  VisualDL提供了对服务的管理监控功能。主要包括启动服务、监控服务、关闭服务、测试服务四个方面的功能。
+  a. 启动服务
+  点击启动服务按钮，将会启动一个fastdeployserver服务，所启动的模型库即为当前载入的模型。在配置启动参数界面可以填写服务的启动参数。
+  各个启动参数的说明如下：
+  ```text
+  server-name: 用户指定的服务名称，用于给启动的服务命名，方便后续查看。如果没有填，默认服务名称为所启动服务进程的进程号pid
+  model-repository: 要部署的模型库，即为当前载入的模型库。
+  backend-config: 指定服务的后端配置，格式为<backend_name>,<setting>=<value>，其中backend_name为后端名称，如python、tensorrt等，后面接该后端的具体可配置项，提供的默认值为python,shm-default-byte-size=10485760
+  http-port: 指定服务的http服务端口，默认为8000
+  grpc-port: 指定服务的grpc服务端口，默认为8001
+  metrics-port: 指定服务的性能查询服务端口，默认为8002
+  gpus: 指定部署的服务能够使用的gpu号，如使用卡2和卡3，即为"2,3"，如果没有填，则会使用全部可获得的gpu
+  ```
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211198608-c40283b0-e2cb-4a02-ae8a-3f6a2d5baae4.gif" width="100%"/>
+  </p>
+  b. 监控服务
+  目前主要通过提供给用户服务的输出信息、性能信息、以及所启动的模型库信息，来实现对所启动服务的监控。前端默认每10s会自动更新一下所监控的信息，用户也可以点击"更新数据"按钮进行手动更新。
+  - 日志（服务的输出信息，可用于获取服务的启动和加载情况，异常信息等）
+  - 性能（通过访问服务的性能查询服务，获取性能相关数据）
+  - 模型库配置（用于查看服务所部署的模型库信息）
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211198677-b14cab30-bf48-4f8d-a9a6-a97857217020.gif" width="100%"/>
+  </p>
+  c. 关闭服务
+  点击左侧的关闭标签或者"关闭服务"按钮，可以手动关停某个服务。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211198748-c0628ed9-505a-4f7d-ae17-ecadf060b562.gif" width="100%"/>
+  </p>
+  d. 测试服务
+  点击"打开客户端"按钮，会打开快速测试服务的客户端界面。该界面基于gradio编写，并且会自动根据服务启动的参数，帮助用户填好基本的信息，用户可以参考 [使用fastdeploy client进行可视化请求服务](../fastdeploy_client/README_CN.md)进行使用。
+  <p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/211198901-3e58fe9d-8667-4416-987a-200f9edeb05d.gif" width="100%"/>
+  </p>
\ No newline at end of file
--- a/docs/components/profiler/README.md
+++ b/docs/components/profiler/README.md
+[**中文**](./README_CN.md)
 # VisualDL Profiler Guide
 ### Introduction

--- a/docs/components/profiler/README_CN.md
+++ b/docs/components/profiler/README_CN.md
+[**English**](./README.md)
 # 使用VisualDL做性能分析
 ### 概述