# 图片粒子化与手势还原（DeepSeek-V4.1-Flash-0731 · high · r01）

单文件网页，直接打开 [index.html](index.html) 即可运行。**需要联网**：通过 import map 加载 Three.js r160，并从 CDN 动态加载 MediaPipe Tasks Vision 的手部模型。无后端、无构建步骤。

## 原始提示词

见 [完整原始输入](prompt.md)；任务正文与 [v1 任务正文](../../prompts/v1/prompt.md) 逐字一致（该正文含中英双语同一份需求）。

## 实现要点

- **流程**：`<input type="file">` 上传本地图片 → 离屏 Canvas 取像素 → 按可调采样间隔把每个采样点变成一个 Three.js `Points` 粒子，并记录其原图位置与颜色。
- 初始状态是**随机球状分布的飘散粒子流**，不是原图。粒子围绕各自的「漂浮基准位置」做带阻尼的振荡，因此粒子云始终有界，不会越飘越远。
- **手势**：MediaPipe `HandLandmarker`（VIDEO 模式）逐帧检测手部关键点；以腕到指尖与腕到指节的距离比判断「张开手掌」（≥3 指伸展）还是「握拳」，掌心取 landmark 9。
- **力场**：手指移动时，以掌心为圆心、可调半径的吸引区域跟随移动；场内粒子被强吸引，场外保留较弱的全局吸引——挥动手掌能明显看到局部被"吸"回原图，松开手掌（握拳）则粒子重新散开。
- 内置示例图由代码用 Canvas 绘制（星云 + 环形 + 五角星 + 文字），因此**不依赖任何外部图片资源**即可演示完整流程。
- 摄像头不可用（无 `getUserMedia`、拒绝授权）或 MediaPipe 模型加载失败时，都会给出明确的中文提示，并回退到**鼠标 / 触摸手势**：按住画面等同于「张开手掌」，面板上同步显示按压状态。

## 验收自测

无头 Chromium + SwiftShader：

| 检查项 | 实测 |
|---|---|
| 无脚本错误 | `pageerror` 与 console error 均为空 |
| 载入图片生成粒子 | 内置示例图 → 11,025 个粒子（采样间隔 4px）；上传自备图片同样生效 |
| 初始为飘散粒子流 | 首次渲染还原度 0% |
| 手势还原 | 按住画面（等价张掌）连续 6 秒：1% → 7% → 95% → 100% → 100% → 100%，三次运行一致 |
| 握拳 / 松开暂停 | 松开后粒子重新散开，还原度回落 |
| 力场跟随手部 | 光圈位置与半径随指针 / 掌心移动，半径与真实力场一致 |
| 采样间隔可调 | 4px→10px 时粒子由 11,025 重建为 1,764 |
| 打散 / 还原按钮 | 「打散粒子流」回到 0%；「还原图片」在 3 秒窗口内完成归位 |
| 摄像头手势 | 伪设备下 MediaPipe 模型成功加载并报告「未检测到手」；授权失败或模型不可用时给出提示并回退到指针手势 |
| 390px 无水平溢出 | 溢出 0px |

**未验证项**：伪摄像头视频中没有真实手掌，因此真实的手掌识别成功率、张掌 / 握拳判定阈值没有实测数据，只验证了模型加载、推理调用与回退链路。

## 运行与复盘

- 运行方式：联网状态下用浏览器直接打开本目录 `index.html`；摄像头手势需要 `https` 或 `localhost` 等安全上下文，`file://` 下部分浏览器会拒绝摄像头。
- 复盘：首轮生成后经自查修正多处，均为首轮内部问题，`changes` 为空。关键一处：飘散分支原先只叠加正弦速度、没有任何回复力，粒子会无限漂移（实测 5 秒后单颗粒子已漂到 5 个单位外），导致还原几乎不可见（3 秒仅 6%）；改为围绕「漂浮基准位置」的带阻尼振荡后，还原稳定在 3~4 秒内到达 100%。另外两处：力场半径最初只有视口宽度的约四分之一且场外完全没有吸引，按住手掌几乎无效，改为场内强吸引 + 场外弱吸引并把光环半径与真实力场对齐；「还原图片」按钮的强制吸引标志被指针分支覆盖而失效。最后把指针模式的按压状态显示到面板上，用户能确认手势已被识别。

<!-- archive:start -->
## 当前归档信息（自动生成）

- 实验 ID：`pixel-flow--deepseek-v4-1-flash-0731-high-r01`
- 模型：DeepSeek-V4.1-Flash-0731；推理档位：high
- 类型：single-html；预览：static；网络：required
- [完整原始输入快照](prompt.md) · [主题与其他版本](../../../../topic.html?id=pixel-flow)
- 输入记录：本次批量执行的完整指令 + 主题任务正文；正文与 demos/pixel-flow/prompts/v1/prompt.md 逐字一致（该正文含中英双语同一份需求）。历史来源为 demos/pixel-flow/runs/unknown-unknown-r01/prompt.md，原始上下文未留存。
- 工具：Claude Code。模型名称由用户指定为 DeepSeek-V4.1-Flash-0731；会话内模型标识为 deepseek-flash[1m]。单会话直接执行，未委派子代理。Windows 11 + Node 22.16.0。摄像头路径用无头 Chromium 的伪设备（--use-fake-device-for-media-stream）验证：MediaPipe 模型可正常加载并给出「未检测到手」，伪视频中没有真实手掌，因此真实手势识别精度未验证。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- 费用记录：Deepseek 批次合计 2.71 CNY（11 个案例；批次 deepseek-v4-1-flash-0731-high-2026-10-13；未记录单案例费用）
- [主页面](../../../../demos/pixel-flow/runs/deepseek-v4-1-flash-0731-high-r01/index.html)

### 部署适配记录

- 迁移来源：F:\dev\ai-coding-demo-test（model-test-base 工作区）/demos/pixel-flow/runs/deepseek-v4-1-flash-high-r01；保留原测试轮次 r01 与完整输入快照。
- 迁移验收：通过本地 HTTP 实际入口补拍 desktop screenshot.png；390px 页面无横向溢出。静态入口也通过 file:// 直接打开检查。
- 模型与实验目录标识按用户确认更新为 DeepSeek-V4.1-Flash-0731；历史输入、评分、产物与迁移来源保留。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。
<!-- archive:end -->