重排软著说明书多图功能展示

- 按功能步骤重新安排软著说明书图片,一个功能区域可放置多张不同截图。

- 新增项目库视频/DICOM就绪状态截图,补充分割工作区矩形标注与画笔标注截图。

- 补充AI智能分割交互工具、正向点结果、正负点结果、边界框提示和边界框结果说明。

- 更新功能验证与素材清单,记录新增截图和多图展示规则。

- 扩展核心素材录制脚本,覆盖新增项目库、手工标注和边界框AI分割截图。
This commit is contained in:
2026-05-08 02:45:43 +08:00
parent 7187fb260f
commit 2ce5131d22
8 changed files with 86 additions and 6 deletions

View File

@@ -77,6 +77,30 @@ async function completePolygon(page) {
await sleep(1000); await sleep(1000);
} }
async function drawRectangleMask(page) {
await page.getByTitle('创建矩形 (R)').click();
await sleep(300);
const box = await canvasBox(page);
await page.mouse.move(box.x + box.width * 0.32, box.y + box.height * 0.35);
await page.mouse.down();
await page.mouse.move(box.x + box.width * 0.52, box.y + box.height * 0.55, { steps: 8 });
await page.mouse.up();
await sleep(700);
}
async function drawBrushStroke(page) {
await page.getByTitle('画笔').click();
await sleep(300);
const box = await canvasBox(page);
await page.mouse.move(box.x + box.width * 0.42, box.y + box.height * 0.45);
await page.mouse.down();
for (const [px, py] of [[0.43, 0.47], [0.45, 0.50], [0.48, 0.51], [0.50, 0.49]]) {
await page.mouse.move(box.x + box.width * px, box.y + box.height * py, { steps: 4 });
}
await page.mouse.up();
await sleep(800);
}
async function captureCoreScreenshots() { async function captureCoreScreenshots() {
const browser = await chromium.launch({ headless: true, args: ['--window-size=1920,1080'] }); const browser = await chromium.launch({ headless: true, args: ['--window-size=1920,1080'] });
const context = await browser.newContext({ viewport, deviceScaleFactor: 1 }); const context = await browser.newContext({ viewport, deviceScaleFactor: 1 });
@@ -89,6 +113,9 @@ async function captureCoreScreenshots() {
await sleep(800); await sleep(800);
await shot(page, '38-logout-button-hover.png'); await shot(page, '38-logout-button-hover.png');
await clickTitle(page, '项目库', 800);
await shot(page, '39-project-library-refreshed.png');
await openWorkspace(page); await openWorkspace(page);
await shot(page, '24-workspace-current-frame-timeline.png'); await shot(page, '24-workspace-current-frame-timeline.png');
@@ -103,6 +130,10 @@ async function captureCoreScreenshots() {
await shot(page, '25-create-polygon-vertices.png'); await shot(page, '25-create-polygon-vertices.png');
await completePolygon(page); await completePolygon(page);
await shot(page, '26-create-polygon-completed.png'); await shot(page, '26-create-polygon-completed.png');
await drawRectangleMask(page);
await shot(page, '40-workspace-rectangle-mask.png');
await drawBrushStroke(page);
await shot(page, '41-workspace-brush-mask.png');
await page.getByTitle('AI自动推理').click(); await page.getByTitle('AI自动推理').click();
await sleep(800); await sleep(800);
@@ -141,6 +172,24 @@ async function captureCoreScreenshots() {
await sleep(1200); await sleep(1200);
await shot(page, '31-ai-segmentation-result.png'); await shot(page, '31-ai-segmentation-result.png');
await shot(page, '36-ai-segmentation-positive-negative-result.png'); await shot(page, '36-ai-segmentation-positive-negative-result.png');
await page.getByRole('button', { name: /清空全体锚点|清空所有锚点|清空/ }).click().catch(() => {});
await sleep(500);
await page.getByRole('button', { name: '边界框选' }).click();
await sleep(500);
const boxPrompt = await canvasBox(page);
await page.mouse.move(boxPrompt.x + boxPrompt.width * 0.38, boxPrompt.y + boxPrompt.height * 0.34);
await page.mouse.down();
await page.mouse.move(boxPrompt.x + boxPrompt.width * 0.68, boxPrompt.y + boxPrompt.height * 0.72, { steps: 8 });
await page.mouse.up();
await sleep(800);
await shot(page, '43-ai-segmentation-box-prompt.png');
await page.getByRole('button', { name: '执行高精度语义分割' }).click();
await page.waitForFunction(() => {
const text = document.body.innerText;
return text.includes('候选') || text.includes('推送至工作区编辑');
}, null, { timeout: 90000 }).catch(() => {});
await sleep(1200);
await shot(page, '44-ai-segmentation-box-result.png');
await page.getByTitle(/当前用户.*点击退出/).first().hover().catch(async () => { await page.getByTitle(/当前用户.*点击退出/).first().hover().catch(async () => {
await page.mouse.move(32, 1020); await page.mouse.move(32, 1020);
@@ -187,7 +236,7 @@ async function captureVideos() {
await openWorkspace(page); await openWorkspace(page);
await drawPolygonDraft(page); await drawPolygonDraft(page);
await completePolygon(page); await completePolygon(page);
await page.getByTitle('AI自动推理').click(); await page.getByTitle('AI自动推理').click();
await sleep(900); await sleep(900);
await page.getByLabel('传播起始帧').fill('1').catch(() => {}); await page.getByLabel('传播起始帧').fill('1').catch(() => {});
await page.getByLabel('传播结束帧').fill('12').catch(() => {}); await page.getByLabel('传播结束帧').fill('12').catch(() => {});

View File

@@ -49,7 +49,9 @@
![](images/08-frame-parse-dialog.png) ![](images/08-frame-parse-dialog.png)
选择“导入DICOM序列”时用户可批量选择 DICOM 文件。系统会按照文件名自然顺序读取序列避免切片顺序错位。上传及解析过程中项目库会显示导入进度、文件数量和处理状态。解析完成后DICOM 项目可与普通帧序列项目一样进入分割工作区进行标注。 选择“导入DICOM序列”时用户可批量选择 DICOM 文件。系统会按照文件名自然顺序读取序列避免切片顺序错位。上传及解析过程中项目库会显示导入进度、文件数量和处理状态。解析完成后DICOM 项目可与普通帧序列项目一样进入分割工作区进行标注。项目库中会同时显示视频项目与 DICOM 项目的封面、帧数量和就绪状态。
![](images/39-project-library-refreshed.png)
项目卡片中提供项目名称编辑入口。用户单击编辑按钮后,可修改项目名称,确认后系统更新项目列表中的显示名称。项目卡片旁还提供复制功能,用户可选择“新项目重置”或“全内容复制”;前者复制项目媒体和帧序列但不复制标注,后者复制项目内容及已有标注信息。删除项目时,系统会弹出确认提示,用户确认后系统移除该项目。 项目卡片中提供项目名称编辑入口。用户单击编辑按钮后,可修改项目名称,确认后系统更新项目列表中的显示名称。项目卡片旁还提供复制功能,用户可选择“新项目重置”或“全内容复制”;前者复制项目媒体和帧序列但不复制标注,后者复制项目内容及已有标注信息。删除项目时,系统会弹出确认提示,用户确认后系统移除该项目。
@@ -66,7 +68,7 @@
![](images/32-workspace-current-frame-switched.png) ![](images/32-workspace-current-frame-switched.png)
左侧工具栏提供多边形、矩形、圆形、画笔、橡皮擦、区域合并、重叠区域去除、删除遮罩、清空遮罩、导入 GT Mask 和 AI 智能分割等工具。用户在右侧语义分类树中选择分类后,可使用绘制工具在当前图像上创建新的标注区域;若当前已有选中遮罩,绘制内容可并入当前选中区域。 左侧工具栏提供多边形、矩形、圆形、画笔、橡皮擦、区域合并、重叠区域去除、删除遮罩、清空遮罩、导入 GT Mask 和 AI 智能分割等工具。用户在右侧语义分类树中选择分类后,可使用绘制工具在当前图像上创建新的标注区域;若当前已有选中遮罩,绘制内容可并入当前选中区域。各工具按钮按绘制、修正、范围处理和导入推理类别分组显示,便于用户快速选择。
![](images/10-workspace-tools.png) ![](images/10-workspace-tools.png)
@@ -74,10 +76,18 @@
![](images/25-create-polygon-vertices.png) ![](images/25-create-polygon-vertices.png)
多边形闭合后,系统生成遮罩并自动选中该遮罩,界面显示可编辑边界点。用户可继续拖动顶点微调区域,也可切换语义分类树修改该遮罩所属类别。使用矩形、圆形或画笔工具时,系统同样会在当前帧生成可编辑遮罩;画笔工具可调节笔刷大小,橡皮擦工具可对选中遮罩进行局部擦除。 多边形闭合后,系统生成遮罩并自动选中该遮罩,界面显示可编辑边界点。用户可继续拖动顶点微调区域,也可切换语义分类树修改该遮罩所属类别。
![](images/26-create-polygon-completed.png) ![](images/26-create-polygon-completed.png)
用户选择矩形工具后,可在图像上按住鼠标并拖拽形成矩形遮罩。矩形遮罩创建后同样进入可编辑状态,便于用户调整边界或修改分类。
![](images/40-workspace-rectangle-mask.png)
用户选择画笔工具后,可调节画笔大小并在图像中连续涂画。若已有选中遮罩,涂画内容会并入当前遮罩;若未选中遮罩,系统会按照当前语义分类创建新的遮罩。
![](images/41-workspace-brush-mask.png)
当需要处理多个相邻或相关区域时,用户可选择“区域合并”功能,将多个遮罩合并为同一区域;选择“重叠区域去除”功能,可对重叠遮罩进行裁决处理。对于传播产生的连续帧遮罩,系统会提示用户选择操作范围,包括当前帧、指定范围帧或所有传播帧。 当需要处理多个相邻或相关区域时,用户可选择“区域合并”功能,将多个遮罩合并为同一区域;选择“重叠区域去除”功能,可对重叠遮罩进行裁决处理。对于传播产生的连续帧遮罩,系统会提示用户选择操作范围,包括当前帧、指定范围帧或所有传播帧。
@@ -107,6 +117,10 @@
![](images/15-ai-page.png) ![](images/15-ai-page.png)
AI 智能分割界面提供正向选点、反向选点、边界框选和视口控制等交互式提示工具。用户可先选择提示方式,再在图像区域中添加对应提示。
![](images/16-ai-prompt-tools.png)
用户可在图像中添加正向点、反向点或边界框提示,系统根据提示生成候选分割结果。添加正向点时,用户应单击目标区域内部;添加反向点时,用户应单击希望排除的区域。提示点会显示在图像上,用户可根据需要删除提示点后重新选择。 用户可在图像中添加正向点、反向点或边界框提示,系统根据提示生成候选分割结果。添加正向点时,用户应单击目标区域内部;添加反向点时,用户应单击希望排除的区域。提示点会显示在图像上,用户可根据需要删除提示点后重新选择。
![](images/30-ai-segmentation-positive-point.png) ![](images/30-ai-segmentation-positive-point.png)
@@ -115,10 +129,22 @@
![](images/35-ai-segmentation-negative-point.png) ![](images/35-ai-segmentation-negative-point.png)
单击“执行高精度语义分割”后,系统生成候选遮罩并叠加显示在图像上。用户可查看候选遮罩边界,并可继续添加提示点进行细化。确认结果后,用户可将分割结果推送至分割工作区,并在工作区中继续进行语义分类、顶点调整和保存 单击“执行高精度语义分割”后,系统生成候选遮罩并叠加显示在图像上。仅使用正向点时,系统会围绕目标点生成候选区域,用户可判断该结果是否符合预期
![](images/31-ai-segmentation-result.png)
正向点与反向点共同使用时,系统会结合包含区域和排除区域重新细化候选遮罩。用户可查看候选遮罩边界,并可继续添加提示点进行细化。确认结果后,用户可将分割结果推送至分割工作区,并在工作区中继续进行语义分类、顶点调整和保存。
![](images/36-ai-segmentation-positive-negative-result.png) ![](images/36-ai-segmentation-positive-negative-result.png)
用户也可选择“边界框选”方式,在图像中拖拽形成矩形提示框。系统会以框选范围作为主要参考区域进行分割。
![](images/43-ai-segmentation-box-prompt.png)
执行分割后,系统在框选范围内生成候选遮罩,用户可根据遮罩覆盖情况决定是否继续细化或推送至分割工作区。
![](images/44-ai-segmentation-box-result.png)
## 3.6 GT Mask 导入与结果预览 ## 3.6 GT Mask 导入与结果预览

Binary file not shown.

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 780 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 782 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 652 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 652 KiB

View File

@@ -42,6 +42,11 @@
- images/36-ai-segmentation-positive-negative-result.pngAI智能分割正向点与反向点共同生成结果界面图 - images/36-ai-segmentation-positive-negative-result.pngAI智能分割正向点与反向点共同生成结果界面图
- images/37-logout-hover.pngAI智能分割页面退出按钮悬停提示界面图 - images/37-logout-hover.pngAI智能分割页面退出按钮悬停提示界面图
- images/38-logout-button-hover.png总体概况页面退出按钮悬停提示界面图 - images/38-logout-button-hover.png总体概况页面退出按钮悬停提示界面图
- images/39-project-library-refreshed.png项目库视频项目与DICOM项目就绪状态界面图
- images/40-workspace-rectangle-mask.png分割工作区矩形遮罩创建界面图
- images/41-workspace-brush-mask.png分割工作区画笔涂画与遮罩合并界面图
- images/43-ai-segmentation-box-prompt.pngAI智能分割边界框提示界面图
- images/44-ai-segmentation-box-result.pngAI智能分割边界框生成结果界面图
## 分段视频 ## 分段视频
- 系统使用视频/01-登录与总体概况演示.mp4 - 系统使用视频/01-登录与总体概况演示.mp4
@@ -60,7 +65,7 @@
- 系统使用视频/07-AI智能分割点选推理演示.webm - 系统使用视频/07-AI智能分割点选推理演示.webm
## 验证说明 ## 验证说明
本次验证以管理员账号进入线上系统逐项检查登录、总体概况、项目库、分割工作区、切换当前帧、创建多边形标注、AI 智能分割正向点/反向点推理、AI 自动推理较大范围传播、传播结果帧查看、GT Mask 导入预览、分割结果导出、模板库、用户管理、审计日志和退出登录等说明书涉及功能。删除项目、恢复演示出厂设置、生成帧确认、导出下载确认等可能改变演示环境或产生下载文件的危险提交动作仅验证入口与确认界面,不执行最终提交。说明书已调整为每个截图文件只引用一次,避免同一界面图重复出现在多个功能段落;说明书正文已移除“查看分段演示视频”类链接文本。 本次验证以管理员账号进入线上系统,逐项检查登录、总体概况、项目库、分割工作区、切换当前帧、创建多边形标注、矩形标注、画笔标注、AI 智能分割正向点/反向点/边界框推理、AI 自动推理较大范围传播、传播结果帧查看、GT Mask 导入预览、分割结果导出、模板库、用户管理、审计日志和退出登录等说明书涉及功能。删除项目、恢复演示出厂设置、生成帧确认、导出下载确认等可能改变演示环境或产生下载文件的危险提交动作仅验证入口与确认界面,不执行最终提交。说明书已调整为同一功能区域可配置多张不同功能截图,但每个截图文件只引用一次,避免同一界面图重复出现在多个功能段落;说明书正文已移除“查看分段演示视频”类链接文本。
## 自动化测试补充 ## 自动化测试补充