Doc: update UI editor

environment/container-usage.md

@@ -16,7 +16,7 @@ ModelBox目前提供了支持CUDA，Ascend加速卡硬件和TensoFlow，LibTorch
 
 ## 容器镜像下载
 
-使用以下命令拉取相关的镜像。比如cuda11.2，TensorFlow的unbuntu开发镜像，则下载最新版本镜像命令如下：
+使用以下命令拉取相关的镜像。比如cuda11.2，TensorFlow的ubuntu开发镜像，则下载最新版本镜像命令如下：
 
 ```shell
 docker pull modelbox/modelbox-develop-tensorflow_2.6.0-cuda_11.2-ubuntu-x86_64:latest

plugins/editor.md

@@ -1,6 +1,6 @@
 # 可视化编排插件
 
-ModelBox提供了在线可视化编排的工具——Editor，在开发时，可使用此工具，提升开发效率。
+ModelBox提供了在线可视化编排的工具——Editor。在开发时，可使用此工具进行创建项目、创建功能单元、编排图、调试等来提升开发效率。
 
 ## 编排插件是什么
 
@@ -10,7 +10,7 @@ ModelBox提供了在线可视化编排的工具——Editor，在开发时，可
 
 ![editor-feature alt rect_w_500](../assets/images/figure/server/editor-feature.png)
 
-1. 安装ModelBox server服务。
+1. 安装ModelBox Server服务。
 1. 配置ModelBox Server。
 1. 配置启用编排插件。
 1. 浏览器访问Editor界面。
@@ -21,19 +21,27 @@ ModelBox提供了在线可视化编排的工具——Editor，在开发时，可
 
 ## 编排插件配置
 
+### 安装ModelBox server服务
+
+具体内容可参考[环境准备](../environment/container-usage.md)章节进行安装。
+
+### 配置ModelBox Server
+
 ModelBox Server安装完成后，编排插件会通过插件的形式由ModelBox Server加载，并在网页浏览器上提供在线可视化编排插件。
 
 对应插件路径为`"/usr/local/lib/modelbox-plugin-editor.so"`(#由于不同操作系统目录结构存在差异，此路径也可能为 `"/usr/local/lib64/modelbox-plugin-editor.so"`，下文涉及系统lib库路径的地方均存在系统路径差异)。
 
 编排插件的配置文件路径为`$HOME/modelbox-service/conf/modelbox.conf`，其配置项目如下：
 
-| 配置项目               | 配置说明                                                                    |
-| ---------------------- | --------------------------------------------------------------------------- |
-| editor.enable          | 是否启用Editor工具                                                          |
-| editor.ip              | Editor工具监听IP，默认为127.0.0.1。不指定的情况下，和server.ip一致          |
-| editor.port            | Editor工具监听端口，默认为1104，不指定情况下，和server.port一致             |
-| editor.root            | Editor前端UI路径，默认为/usr/local/share/modelbox/www                       |
-| editor.demo_root       | Editor demo路径，默认为/usr/local/share/modelbox/demo |
+| 配置项目         | 配置说明                                                           |
+| ---------------- | ------------------------------------------------------------------ |
+| editor.enable    | 是否启用Editor工具                                                 |
+| editor.ip        | Editor工具监听IP，默认为127.0.0.1。不指定的情况下，和server.ip一致 |
+| editor.port      | Editor工具监听端口，默认为1104，不指定情况下，和server.port一致    |
+| editor.root      | Editor前端UI路径，默认为/usr/local/share/modelbox/www              |
+| editor.demo_root | Editor demo路径，默认为/usr/local/share/modelbox/demo              |
+
+### 配置启用编排插件
 
 通过如下命令，可开启基于Web的可视化编辑工具——Editor：
 
@@ -130,7 +138,7 @@ modelbox-tool develop -s
 
   1. 重启ModelBox Server服务使配置生效。
 
-## 访问编排服务
+### 浏览器访问Editor界面
 
 服务启动成功后，可使用浏览器访问服务，输入对应的网址即可，如：`http://[host]:1104/editor/`，成功后，将显示如下界面：
 
@@ -168,7 +176,25 @@ modelbox-tool develop -s
 
   1. 对应网址的端口号以Docker启动脚本中的 `EDITOR_MAP_PORT` 为准，默认端口号为1104。
 
-## 任务编排页面
+* **任务管理页面**
+
+![editor-management alt rect_w_1000](../assets/images/figure/server/editor-management.png)
+
+如果编排任务被下发，那么所有正在运行的任务都会显示在任务管理页面中。
+
+该页面除了可以查看运行中的任务状态，还可以对任务进行Http调试。
+
+调试功能有：`api调试`与`Base64编码`
+
+api调试：
+
+  选择模板， 修改Request中的Header和Body部分，发送请求之后得到的Reponse将显示在页面上。
+
+Base64编码：
+
+  选择需要转成base64格式的文件，即可在页面右侧得到base64代码。
+
+* **任务编排页面**
 
 ![editor-main alt rect_w_1000](../assets/images/figure/server/editor-main.png)
 
@@ -180,9 +206,41 @@ modelbox-tool develop -s
 当图编排完成之后，可以通过`图属性`设置相关属性。最后，点击`项目`下面的`保存`即可将项目信息保存至后端。
 如果需要运行项目，就点击工具栏上的`运行`按钮即可。
 
-### 项目
+#### 功能单元列表
+
+功能单元列表中，陈列了后端内置以及自制的功能单元。用户可以采用拖拽的方式，将所需要使用的功能单元，拖拽至编排界面。随后进行相对应的图编排以及属性配置等操作。
+
+![editor-attribute alt rect_w_1000](../assets/images/figure/server/editor-attribute.png)
+
+点击已放入编排界面的功能单元，可以通过在右侧弹出的属性面板进行配置。
+
+将鼠标悬浮至目标功能单元，在输出端口上方会显示一个白色的圆圈。点击白色的圆圈并连接至其它圆圈，即可完成功能单元的连接。
+
+所有的更改，都将反馈至下方的文本编辑区域。
+
+#### 工具栏
+
+![editor-tool-bar alt rect_w_1000](../assets/images/figure/server/editor-tool-bar.png)
+
+工具栏分为左中右三个区域。
 
-`项目`下拉菜单在工具栏的左侧的第一个位置，其有四个功能，分别为：
+1. 左侧区域
+
+  该区域包括了图的显示工具（回退，重做，放大，缩小，重置缩放，自适应，切换布局）以及运行按钮。
+
+1. 中部区域
+
+  该区域显示了项目名称，路径，当前处于编排界面的图名称以及编辑状态。
+
+1. 右侧区域
+
+  该区域包括了项目的相关功能，功能单元的相关功能，图属性，按键说明以及下载图。
+
+#### 项目
+
+![editor-project](../assets/images/figure/server/editor-project.png)
+
+`项目`下拉菜单在工具栏的左侧的第一个位置，其有八个功能，分别为：
 
 1. 新建项目
 
@@ -192,48 +250,48 @@ modelbox-tool develop -s
 
 1. 打开项目
 
-  输入项目路径，点击`确认`即可打开项目。
+  输入项目路径，或通过单击文件夹名称来选择项目，最后点击`确认`即可打开项目。
 
   ![editor-open-project](../assets/images/figure/server/editor-open-project.png)
 
-1. 保存
+1. IDE打开工程
 
-  将更改的内容保存至后端。
+  点击`批处理`即可下载脚本。直接运行脚本，可自动配置并打开远程连接至目标容器。
 
-1. 关闭
+  ![editor-ide](../assets/images/figure/server/editor-ide.png)
 
-  将会清空保存在浏览器中的项目数据。
+1. 关闭项目
 
-### 功能单元
+  将会清空保存在浏览器中的项目数据，并停止当前项目正在运行的编排服务。
 
-1. 新建单元
+1. 新建图
 
-  ![editor-open-flowunit](../assets/images/figure/server/editor-create-flowunit.png)
-
-  依次选择功能单元类型，名称，处理类型。
+  输入新图名称之后，将新建图。如果需要保存当前图文件，需要`保存图`将图文件保存至后台。
 
-  端口可通过选择`输入\输出`，`端口名称`，`处理类型`，点击`添加`来增加功能单元的端口。
+1. 选择图
+
+  可以选择当前项目中已保存至后台的图文件，点击确认之后，将从后台拉取至编排界面。
 
-  再选择功能类型。功能类型相关的介绍可以参考[功能单元开发](../use-modelbox/standard-mode/flowunit/flowunit.md)。
+1. 保存图
 
-1. 刷新单元
+  将当前编排界面的图文件保存至后台。
 
-  如果在后端对功能单元进行了更改，可用该功能直接加载更新后的功能
+1. 同步图
 
-## 任务管理页面
+  将后台的图文件覆盖当前编排界面的图文件。
 
-![editor-management alt rect_w_1000](../assets/images/figure/server/editor-management.png)
+#### 功能单元
 
-该页面除了可以查看运行中的任务状态，还可以对任务进行调试。
+1. 新建单元
 
-调试功能有：`api调试`与`转base64`
+  ![editor-open-flowunit](../assets/images/figure/server/editor-create-flowunit.png)
 
-* api调试
+  依次选择功能单元类型，名称，处理类型。
 
-  选择相关模板， 修改Request中的Header和Body部分，发送请求之后得到的Reponse将显示在页面上。
+  端口可通过选择`输入\输出`，`端口名称`，`处理类型`，点击`添加`来增加功能单元的端口。
 
-  也可以不加载模板，直接进行调试。
+  再选择功能类型。功能类型相关的介绍可以参考[功能单元开发](../use-modelbox/standard-mode/flowunit/flowunit.md)。
 
-* 转base64
+1. 刷新单元
 
-  选择需要转成base64格式的文件，即可在页面右侧得到base64代码。
+  如果在后端对功能单元直接进行了更改，可用该功能直接加载更新后的功能单元