完善软著说明书核心功能截图

- 重新截取更大范围的AI自动推理传播范围图,并补充传播结果帧查看截图。

- 补充AI智能分割正向点、反向点及正负点共同生成结果截图。

- 在分割工作区说明中补充时间轴切换当前帧截图。

- 删除说明书正文中的所有分段演示视频链接文本。

- 更换退出系统小节截图为鼠标悬停退出按钮的界面图。

- 更新素材录制脚本与功能验证素材清单。
This commit is contained in:
2026-05-08 02:27:30 +08:00
parent abd8c73812
commit 7187fb260f
18 changed files with 58 additions and 14 deletions

View File

@@ -10,6 +10,7 @@ const IMAGE_DIR = path.join(OUT_ROOT, 'images');
const VIDEO_DIR = path.join(OUT_ROOT, '系统使用视频');
const viewport = { width: 1920, height: 1080 };
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const shouldSkipVideos = process.env.SEG_SKIP_VIDEO === '1';
async function ensureDirs() {
await fs.mkdir(IMAGE_DIR, { recursive: true });
@@ -82,9 +83,22 @@ async function captureCoreScreenshots() {
const page = await context.newPage();
await login(page);
await page.getByTitle(/当前用户.*点击退出/).first().hover().catch(async () => {
await page.mouse.move(32, 1020);
});
await sleep(800);
await shot(page, '38-logout-button-hover.png');
await openWorkspace(page);
await shot(page, '24-workspace-current-frame-timeline.png');
await page.getByText('0003').first().click().catch(async () => {
const box = await page.locator('body').boundingBox();
if (box) await page.mouse.click(box.x + box.width * 0.55, box.y + box.height * 0.95);
});
await sleep(1200);
await shot(page, '32-workspace-current-frame-switched.png');
await drawPolygonDraft(page);
await shot(page, '25-create-polygon-vertices.png');
await completePolygon(page);
@@ -93,14 +107,21 @@ async function captureCoreScreenshots() {
await page.getByTitle('AI自动推理').click();
await sleep(800);
await page.getByLabel('传播起始帧').fill('1').catch(() => {});
await page.getByLabel('传播结束帧').fill('3').catch(() => {});
await page.getByLabel('传播结束帧').fill('12').catch(() => {});
await shot(page, '27-ai-auto-inference-range.png');
await shot(page, '33-ai-auto-inference-wide-range.png');
await page.getByRole('button', { name: '开始传播' }).click();
await sleep(1800);
await shot(page, '28-ai-auto-inference-running.png');
await page.waitForFunction(() => document.body.innerText.includes('已自动传播') || document.body.innerText.includes('没有生成新'), null, { timeout: 90000 }).catch(() => {});
await sleep(1000);
await shot(page, '29-ai-auto-inference-completed.png');
await page.getByText('0008').first().click().catch(() => {});
await sleep(1300);
const propagatedBox = await canvasBox(page);
await page.mouse.click(propagatedBox.x + propagatedBox.width * 0.46, propagatedBox.y + propagatedBox.height * 0.50);
await sleep(800);
await shot(page, '34-ai-auto-inference-result-selected.png');
await clickTitle(page, 'AI智能分割', 1800);
await page.getByRole('button', { name: '正向选点' }).click();
@@ -108,6 +129,10 @@ async function captureCoreScreenshots() {
await page.mouse.click(box.x + box.width * 0.48, box.y + box.height * 0.48);
await sleep(700);
await shot(page, '30-ai-segmentation-positive-point.png');
await page.getByRole('button', { name: '反向选点' }).click();
await page.mouse.click(box.x + box.width * 0.34, box.y + box.height * 0.40);
await sleep(700);
await shot(page, '35-ai-segmentation-negative-point.png');
await page.getByRole('button', { name: '执行高精度语义分割' }).click();
await page.waitForFunction(() => {
const text = document.body.innerText;
@@ -115,6 +140,13 @@ async function captureCoreScreenshots() {
}, null, { timeout: 90000 }).catch(() => {});
await sleep(1200);
await shot(page, '31-ai-segmentation-result.png');
await shot(page, '36-ai-segmentation-positive-negative-result.png');
await page.getByTitle(/当前用户.*点击退出/).first().hover().catch(async () => {
await page.mouse.move(32, 1020);
});
await sleep(800);
await shot(page, '37-logout-hover.png');
await browser.close();
}
@@ -155,10 +187,10 @@ async function captureVideos() {
await openWorkspace(page);
await drawPolygonDraft(page);
await completePolygon(page);
await page.getByTitle('AI自动推理').click();
await page.getByTitle('AI自动推理').click();
await sleep(900);
await page.getByLabel('传播起始帧').fill('1').catch(() => {});
await page.getByLabel('传播结束帧').fill('3').catch(() => {});
await page.getByLabel('传播结束帧').fill('12').catch(() => {});
await sleep(900);
await page.getByRole('button', { name: '开始传播' }).click();
await sleep(5000);
@@ -180,7 +212,9 @@ async function captureVideos() {
async function main() {
await ensureDirs();
await captureCoreScreenshots();
await captureVideos();
if (!shouldSkipVideos) {
await captureVideos();
}
}
main().catch((error) => {

View File

@@ -20,7 +20,6 @@
![](images/02-dashboard.png)
[查看分段演示视频:登录与总体概况](系统使用视频/01-登录与总体概况演示.mp4)
# 3.系统核心管理界面
@@ -56,7 +55,6 @@
![](images/07-project-copy-dialog.png)
[查看分段演示视频:项目库与分割工作区](系统使用视频/02-项目库与分割工作区演示.mp4)
## 3.3 分割工作区
@@ -66,6 +64,8 @@
用户可通过底部时间轴切换当前帧也可使用播放控制按钮浏览连续帧。右下角显示当前帧序号及总帧数。若某一帧已经存在人工标注、AI 标注或自动传播结果,时间轴会用不同颜色进行提示,便于用户快速定位已处理帧。
![](images/32-workspace-current-frame-switched.png)
左侧工具栏提供多边形、矩形、圆形、画笔、橡皮擦、区域合并、重叠区域去除、删除遮罩、清空遮罩、导入 GT Mask 和 AI 智能分割等工具。用户在右侧语义分类树中选择分类后,可使用绘制工具在当前图像上创建新的标注区域;若当前已有选中遮罩,绘制内容可并入当前选中区域。
![](images/10-workspace-tools.png)
@@ -78,7 +78,6 @@
![](images/26-create-polygon-completed.png)
[查看分段演示视频:创建多边形标注](系统使用视频/05-创建多边形标注演示.mp4)
当需要处理多个相邻或相关区域时,用户可选择“区域合并”功能,将多个遮罩合并为同一区域;选择“重叠区域去除”功能,可对重叠遮罩进行裁决处理。对于传播产生的连续帧遮罩,系统会提示用户选择操作范围,包括当前帧、指定范围帧或所有传播帧。
@@ -88,7 +87,7 @@
在分割工作区中用户可单击左侧工具栏的“AI自动推理”按钮。系统进入传播范围选择状态并在顶部显示传播权重、起始帧、结束帧、向前传播帧数和向后传播帧数。用户可在时间轴上拖拽选择范围也可直接填写帧号。
![](images/27-ai-auto-inference-range.png)
![](images/33-ai-auto-inference-wide-range.png)
确认范围后,用户单击“开始传播”按钮。系统以当前帧已有遮罩为参考,在指定范围内自动生成连续帧分割结果。传播期间,界面顶部显示当前处理状态,用户可继续观察时间轴与当前帧区域。
@@ -98,7 +97,9 @@
![](images/29-ai-auto-inference-completed.png)
[查看分段演示视频AI自动推理传播](系统使用视频/06-AI自动推理传播演示.mp4)
用户单击自动推理生成的目标帧后,系统会显示该帧的传播结果。用户可继续单击遮罩查看当前区域效果,并根据实际需要进行后续修正或保存。
![](images/34-ai-auto-inference-result-selected.png)
## 3.5 AI 智能分割
@@ -110,11 +111,14 @@
![](images/30-ai-segmentation-positive-point.png)
切换到“反向选点”后,用户可在不希望纳入结果的区域添加反向提示点。正向点与反向点会同时显示在图像上,系统据此细化目标区域与排除区域之间的边界。
![](images/35-ai-segmentation-negative-point.png)
单击“执行高精度语义分割”后,系统生成候选遮罩并叠加显示在图像上。用户可查看候选遮罩边界,并可继续添加提示点进行细化。确认结果后,用户可将分割结果推送至分割工作区,并在工作区中继续进行语义分类、顶点调整和保存。
![](images/31-ai-segmentation-result.png)
![](images/36-ai-segmentation-positive-negative-result.png)
[查看分段演示视频AI智能分割点选推理](系统使用视频/07-AI智能分割点选推理演示.mp4)
## 3.6 GT Mask 导入与结果预览
@@ -146,7 +150,6 @@
![](images/19-template-batch-import.png)
[查看分段演示视频:模板库与用户管理](系统使用视频/04-模板库与用户管理演示.mp4)
## 3.9 用户管理与审计
@@ -160,4 +163,4 @@
用户完成工作后,可单击左下角当前用户图标旁的退出按钮。系统清除当前登录状态并返回登录界面。再次使用时,用户需重新输入账号和密码登录系统。
![](images/23-logout.png)
![](images/38-logout-button-hover.png)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 784 KiB

After

Width:  |  Height:  |  Size: 779 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 798 KiB

After

Width:  |  Height:  |  Size: 802 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 786 KiB

After

Width:  |  Height:  |  Size: 792 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 794 KiB

After

Width:  |  Height:  |  Size: 799 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 788 KiB

After

Width:  |  Height:  |  Size: 807 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 788 KiB

After

Width:  |  Height:  |  Size: 800 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 654 KiB

After

Width:  |  Height:  |  Size: 630 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 569 KiB

After

Width:  |  Height:  |  Size: 588 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 790 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 799 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 795 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 630 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 588 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 590 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

View File

@@ -35,6 +35,13 @@
- images/29-ai-auto-inference-completed.pngAI自动推理完成后传播帧段标识界面图
- images/30-ai-segmentation-positive-point.pngAI智能分割正向点提示界面图
- images/31-ai-segmentation-result.pngAI智能分割候选结果叠加界面图
- images/32-workspace-current-frame-switched.png分割工作区切换当前帧后的时间轴界面图
- images/33-ai-auto-inference-wide-range.pngAI自动推理较大传播范围选择界面图
- images/34-ai-auto-inference-result-selected.pngAI自动推理生成帧结果查看界面图
- images/35-ai-segmentation-negative-point.pngAI智能分割反向点提示界面图
- images/36-ai-segmentation-positive-negative-result.pngAI智能分割正向点与反向点共同生成结果界面图
- images/37-logout-hover.pngAI智能分割页面退出按钮悬停提示界面图
- images/38-logout-button-hover.png总体概况页面退出按钮悬停提示界面图
## 分段视频
- 系统使用视频/01-登录与总体概况演示.mp4
@@ -53,7 +60,7 @@
- 系统使用视频/07-AI智能分割点选推理演示.webm
## 验证说明
本次验证以管理员账号进入线上系统逐项检查登录、总体概况、项目库、分割工作区、创建多边形标注、AI 智能分割点推理、AI 自动推理传播、GT Mask 导入预览、分割结果导出、模板库、用户管理、审计日志和退出登录等说明书涉及功能。删除项目、恢复演示出厂设置、生成帧确认、导出下载确认等可能改变演示环境或产生下载文件的危险提交动作仅验证入口与确认界面,不执行最终提交。说明书已调整为每个截图文件只引用一次,避免同一界面图重复出现在多个功能段落。
本次验证以管理员账号进入线上系统,逐项检查登录、总体概况、项目库、分割工作区、切换当前帧、创建多边形标注、AI 智能分割正向点/反向点推理、AI 自动推理较大范围传播、传播结果帧查看、GT Mask 导入预览、分割结果导出、模板库、用户管理、审计日志和退出登录等说明书涉及功能。删除项目、恢复演示出厂设置、生成帧确认、导出下载确认等可能改变演示环境或产生下载文件的危险提交动作仅验证入口与确认界面,不执行最终提交。说明书已调整为每个截图文件只引用一次,避免同一界面图重复出现在多个功能段落;说明书正文已移除“查看分段演示视频”类链接文本
## 自动化测试补充