图片粒子化与手势还原(DeepSeek-V4.1-Flash-0731 · high · r01)
单文件网页,直接打开 index.html 即可运行。需要联网:通过 import map 加载 Three.js r160,并从 CDN 动态加载 MediaPipe Tasks Vision 的手部模型。无后端、无构建步骤。
原始提示词
见 完整原始输入;任务正文与 v1 任务正文 逐字一致(该正文含中英双语同一份需求)。
实现要点
- 流程:
<input type="file">上传本地图片 → 离屏 Canvas 取像素 → 按可调采样间隔把每个采样点变成一个 Three.jsPoints粒子,并记录其原图位置与颜色。 - 初始状态是随机球状分布的飘散粒子流,不是原图。粒子围绕各自的「漂浮基准位置」做带阻尼的振荡,因此粒子云始终有界,不会越飘越远。
- 手势: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%。另外两处:力场半径最初只有视口宽度的约四分之一且场外完全没有吸引,按住手掌几乎无效,改为场内强吸引 + 场外弱吸引并把光环半径与真实力场对齐;「还原图片」按钮的强制吸引标志被指针分支覆盖而失效。最后把指针模式的按压状态显示到面板上,用户能确认手势已被识别。
当前归档信息(自动生成)
- 实验 ID:
pixel-flow--deepseek-v4-1-flash-0731-high-r01 - 模型:DeepSeek-V4.1-Flash-0731;推理档位:high
- 类型:single-html;预览:static;网络:required
- 完整原始输入快照 · 主题与其他版本
- 输入记录:本次批量执行的完整指令 + 主题任务正文;正文与 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;未记录单案例费用)
- 主页面
部署适配记录
- 迁移来源: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。未重跑模型或改写实验源码,截图不证明完整功能、算法、手势或性能。