docs: add real collaboration platform screenshots

Author: jiapengLi11

README.md

@@ -15,7 +15,7 @@ This project was extracted from an industrial safety-vision workflow. It uses on
 
 ## Pre-generated showcase
 
-No GPU or live command is needed to inspect these results. Analytical report screenshots use committed synthetic fixtures; the grouped-review gallery uses real, user-approved production review samples to show the actual operating experience. Screenshots demonstrate behavior and report structure, not model accuracy claims.
+No GPU or live command is needed to inspect these results. Analytical report screenshots use committed synthetic fixtures; the grouped-review gallery and web-platform captures use real, user-approved production review samples to show the actual operating experience. Screenshots demonstrate behavior and report structure, not model accuracy claims.
 
 ### Model-free dataset audit
 
@@ -84,6 +84,15 @@ See [Grouped Review Application](docs/GROUPED_REVIEW_APP.md) for the queue contr
 
 The repository now includes a deployable web platform for teams that outgrow the portable desktop reviewer. A Vue 3 + TypeScript client talks to a Spring Boot 4 REST API backed by MySQL and Flyway. JWT authentication, `ADMIN / REVIEWER / AUDITOR` RBAC, project membership, pessimistic task claiming, renewable leases, optimistic versions and immutable audit events prevent duplicate work and stale decisions. The Python bridge streams the existing `review_queue.csv` into the API in bounded, idempotent batches.
 
+![Running multi-user review workspace with a real GT/AUTO review image](docs/assets/platform-review-workspace.png)
+
+<p>
+  <img src="docs/assets/platform-login.png" width="49%" alt="Role-aware login screen">
+  <img src="docs/assets/platform-admin-console.png" width="49%" alt="Administrator account and project-member management">
+</p>
+
+These are captures of the actual Vue + Spring Boot application running against seeded local collaboration data, not design mockups. The workspace shows a claimed task, real review visual, class confidence, constrained decisions and live project progress; the admin view demonstrates account creation and project membership assignment.
+
 ```mermaid
 flowchart LR
     P["Python Multi-Teacher pipeline"] -->|"review_queue.csv / batches <= 500"| A["Spring Boot API"]

README.zh-CN.md

@@ -15,7 +15,7 @@
 
 ## 预生成展示结果
 
-查看以下结果不需要 GPU 或现场执行命令。分析报告截图来自仓库内置合成数据；按图片聚合审核图库使用已获许可的真实生产审核样例，用于展示实际工作体验。所有截图都只说明工具行为和报告结构，不构成模型精度声明。
+查看以下结果不需要 GPU 或现场执行命令。分析报告截图来自仓库内置合成数据；按图片聚合审核图库和 Web 平台运行截图使用已获许可的真实生产审核样例，用于展示实际工作体验。所有截图都只说明工具行为和报告结构，不构成模型精度声明。
 
 ### 无模型数据集审计
 
@@ -84,6 +84,15 @@
 
 当便携式桌面审核器无法满足多人并行工作时，可以启用仓库内的 Web 协作平台。Vue 3 + TypeScript 前端连接 Spring Boot 4 REST API，使用 MySQL + Flyway 持久化；JWT 登录、`ADMIN / REVIEWER / AUDITOR` 角色、项目成员隔离、悲观锁原子领任务、可续租心跳、乐观版本号和不可变审计事件共同防止重复审核与旧页面覆盖。Python 桥接脚本会把现有 `review_queue.csv` 以有界、幂等批次流式导入。
 
+![真实 GT/AUTO 审核图驱动的多人协作工作台](docs/assets/platform-review-workspace.png)
+
+<p>
+  <img src="docs/assets/platform-login.png" width="49%" alt="支持角色权限的登录界面">
+  <img src="docs/assets/platform-admin-console.png" width="49%" alt="管理员账号创建与项目成员分配界面">
+</p>
+
+以上均为 Vue + Spring Boot 应用连接本地演示协作数据后的真实运行截图，不是设计示意图。工作台同时展示已领取任务、真实审核图、类别置信度、受约束决策按钮和项目实时进度；管理员界面展示账号创建与项目成员分配能力。
+
 ```mermaid
 flowchart LR
     P["Python Multi-Teacher 流水线"] -->|"review_queue.csv / 每批不超过 500"| A["Spring Boot API"]

docs/COLLABORATION_PLATFORM.md

@@ -6,7 +6,20 @@ The original Tk reviewer remains the best zero-dependency choice for one reviewe
 
 原有 Tk 审核器仍适合单人、离线和拷贝即用场景。多人并行后会新增四类风险：重复领取、旧页面覆盖、跨项目越权和责任不可追溯。Web 协作层只负责账号、任务与决策，不取代 Python 推理、GT/AUTO 枚举和最终派生数据集生成。
 
-## 2. Architecture / 架构
+## 2. Running interface / 真实运行界面
+
+![Multi-user workspace with a claimed task and real review image](assets/platform-review-workspace.png)
+
+<p>
+  <img src="assets/platform-login.png" width="49%" alt="Login and role entry">
+  <img src="assets/platform-admin-console.png" width="49%" alt="Admin account and membership management">
+</p>
+
+The screenshots above were captured from the actual Vue and Spring Boot services with seeded local collaboration records. They demonstrate the real login flow, project progress, atomic task claim, read-only review visual delivery, constrained decisions, account creation and member assignment. They are not UI mockups.
+
+以上截图由真实运行的 Vue 与 Spring Boot 服务生成，并加载了本地演示协作记录。截图覆盖登录、项目进度、原子领取任务、只读审核图加载、受约束决策、账号创建和成员分配，不是界面示意图。
+
+## 3. Architecture / 架构
 
 ```mermaid
 flowchart TB
@@ -31,7 +44,7 @@ flowchart TB
 | Persistence | MySQL 8.4, JPA, Flyway | Users, projects, memberships, tasks, decisions, schema migrations |
 | Delivery | Docker Compose, Nginx | One-command three-service deployment and same-origin API proxy |
 
-## 3. Authorization model / 权限模型
+## 4. Authorization model / 权限模型
 
 Authentication and authorization are separate.
 
@@ -43,7 +56,7 @@ Authentication and authorization are separate.
 
 权限采用两层模型：角色决定“能做什么”，项目成员关系决定“能在哪个项目做”。即使知道任务 ID，未加入项目的账号也无法读取审核图。
 
-## 4. Concurrency and correctness / 并发与正确性
+## 5. Concurrency and correctness / 并发与正确性
 
 ### Atomic claim / 原子领取
 
@@ -61,7 +74,7 @@ Every task carries JPA `@Version`. The client submits `expectedVersion` with a d
 
 `(project_id, candidate_id)` is unique, so importing the same queue again safely skips existing candidates. `review_decisions.task_id` is also unique, so one task cannot obtain two final decisions even if a client retries.
 
-## 5. State and data model / 状态与数据模型
+## 6. State and data model / 状态与数据模型
 
 ```mermaid
 stateDiagram-v2
@@ -75,7 +88,7 @@ stateDiagram-v2
 
 Core tables are `app_users`, `review_projects`, `project_members`, `review_tasks`, `review_decisions` and `audit_events`. Flyway owns schema evolution; Hibernate validates rather than mutates the production schema.
 
-## 6. Run with Docker Compose / Docker 一键运行
+## 7. Run with Docker Compose / Docker 一键运行
 
 ```powershell
 cd platform
@@ -90,7 +103,7 @@ docker compose up -d --build
 
 Open `http://localhost:8088`. The bootstrap admin is created only when the configured username does not already exist.
 
-## 7. Import an existing queue / 导入现有审核队列
+## 8. Import an existing queue / 导入现有审核队列
 
 The queue must contain `candidate_id`, `split`, `image_name`, `class_name`, `conf`, `case_code`, `recommended_action` and `visual_file`. `visual_file` must be relative to the mounted review package root.
 
@@ -108,7 +121,7 @@ The importer reads one CSV row at a time and uploads at most 500 rows per reques
 
 After creating reviewer accounts in the admin drawer, assign each username to the selected project. Reviewers then see only their assigned projects.
 
-## 8. Local development / 本地开发
+## 9. Local development / 本地开发
 
 ```powershell
 # Backend
@@ -124,7 +137,7 @@ npm run dev
 
 The Vite development server proxies `/api` to `localhost:8080`. Tests use H2 in MySQL compatibility mode; production uses MySQL and Flyway.
 
-## 9. API surface / 主要接口
+## 10. API surface / 主要接口
 
 | Method | Path | Meaning |
 |---|---|---|
@@ -138,7 +151,7 @@ The Vite development server proxies `/api` to `localhost:8080`. Tests use H2 in
 | GET | `/api/tasks/{id}/visual` | Read an authorized real review image |
 | GET | `/api/projects/{id}/audit` | Read project audit trail, admin/auditor |
 
-## 10. Interview walkthrough / 面试讲解顺序
+## 11. Interview walkthrough / 面试讲解顺序
 
 1. Start from the data problem: incomplete labels make true objects become false background supervision.
 2. Explain why offline inference and online review are separated: GPU jobs are expensive and bursty; human review is concurrent and stateful.
@@ -147,6 +160,6 @@ The Vite development server proxies `/api` to `localhost:8080`. Tests use H2 in
 5. Show bounded idempotent import and read-only visual mounts as memory-safety and data-safety decisions.
 6. Close with evidence: production queue scale, real grouped images, automated Java/Python tests and reproducible Docker deployment.
 
-## 11. Production hardening / 生产加固
+## 12. Production hardening / 生产加固
 
 Before exposing the service beyond a trusted LAN, terminate TLS at a reverse proxy, rotate JWT/database secrets, disable bootstrap admin after first setup, back up MySQL, centralize logs and metrics, and define account disable/password-reset procedures. Docker Compose is an auditable single-host baseline; Kubernetes or managed databases are deployment choices, not prerequisites for the core workflow.

docs/assets/platform-admin-console.png

@@ -9,6 +9,10 @@ This directory turns the offline review queue into a multi-user web workflow:
 - `tools/import_review_queue.py`: bounded, idempotent bridge from `review_queue.csv`.
 - `docker-compose.yml`: MySQL, API and Nginx-hosted frontend.
 
+![Running review workspace](../docs/assets/platform-review-workspace.png)
+
+The image above is a capture of the running application with a real review visual and seeded collaboration records, not a mockup. Additional login and administration screenshots are available in [COLLABORATION_PLATFORM.md](../docs/COLLABORATION_PLATFORM.md).
+
 ```powershell
 cd platform
 Copy-Item .env.example .env