diff --git a/assets/images/figure/server/editor-attribute.png b/assets/images/figure/server/editor-attribute.png new file mode 100644 index 00000000..09855a33 Binary files /dev/null and b/assets/images/figure/server/editor-attribute.png differ diff --git a/assets/images/figure/server/editor-ide.png b/assets/images/figure/server/editor-ide.png new file mode 100644 index 00000000..dbdd2e95 Binary files /dev/null and b/assets/images/figure/server/editor-ide.png differ diff --git a/assets/images/figure/server/editor-main.png b/assets/images/figure/server/editor-main.png index afa94dd9..7cdc4c95 100644 Binary files a/assets/images/figure/server/editor-main.png and b/assets/images/figure/server/editor-main.png differ diff --git a/assets/images/figure/server/editor-management.png b/assets/images/figure/server/editor-management.png index 20e90c60..7182c639 100644 Binary files a/assets/images/figure/server/editor-management.png and b/assets/images/figure/server/editor-management.png differ diff --git a/assets/images/figure/server/editor-project.png b/assets/images/figure/server/editor-project.png new file mode 100644 index 00000000..ad7779b3 Binary files /dev/null and b/assets/images/figure/server/editor-project.png differ diff --git a/assets/images/figure/server/editor-tool-bar.png b/assets/images/figure/server/editor-tool-bar.png new file mode 100644 index 00000000..3541bdc6 Binary files /dev/null and b/assets/images/figure/server/editor-tool-bar.png differ diff --git a/environment/container-usage.md b/environment/container-usage.md index 65a397ba..1759792a 100644 --- a/environment/container-usage.md +++ b/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 diff --git a/plugins/editor.md b/plugins/editor.md index 0c1d717c..544f94e1 100644 --- a/plugins/editor.md +++ b/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代码。 + 如果在后端对功能单元直接进行了更改，可用该功能直接加载更新后的功能单元