Pixel Flow · 图片粒子化与手势还原(MiniMax M3.1 Flash / max)
原始提示词
见 完整原始输入。该输入与主题提示词 v1 正文一致(含中英文两版)。
实现说明
单文件 index.html,Three.js r160(ESM CDN)+ MediaPipe Hands(CDN),其余代码内联。
粒子化
- 上传本地图片(或拖拽到页面,或使用内置示例图)后,用 Canvas API 缩放到 96px 量级并按「采样密度」滑块逐格取样,每个采样点成为一个
THREE.Points顶点,携带原始颜色与尺寸权重。 - 粒子初始位于一个随机散布的三维空间中(宽 12 × 高 8 × 深 6),呈飘散的粒子流而非原图。
- 每个粒子同时保存目标位置与打散位置,并维护一个 0→1 的还原进度;每帧按进度在两者之间做 smoothstep 插值,因此粒子是从粒子流"重组成"图片,而不是直接切换。
手势与力场
- MediaPipe Hands 实时取手部 21 个关键点,用「指尖到腕距离 > 第二关节到腕距离」判断每根手指是否伸展:
- 张开手掌(≥4 指伸展):激活吸引,粒子向原图位置回归。
- 握拳(≤1 指伸展):暂停吸引,粒子保持当前状态。
- 过渡手势:只跟随不吸引。
- 掌心位置映射到场景坐标,形成半径可调的力场:场内的粒子额外获得吸引力,并沿切向叠加涡旋扰动,产生被"吸回去"的流动感。
- 摄像头画面在面板中镜像显示,检测到的手部位置用高亮圆环标出,状态栏实时显示当前手势。
其他
- 采样密度、还原速度、力场半径三个滑块实时生效;「重新打散」「全部还原」「自动演示」「开启摄像头」「保存截图」按钮均可用。
- 自动演示模式在没有摄像头或未授权时用脚本驱动虚拟手部轨迹,完整演示吸引与暂停两种状态。
运行与验证
Playwright + Chromium 自动化校验(模型生成的实现,均通过):
- Three.js 画布创建成功;MediaPipe Hands 脚本从 CDN 加载完成(
window.Hands为函数)。 - 示例图生成 576 个粒子,粒子数显示正确。
- 自动演示开启后还原进度由 0.094 上升到 0.213,虚拟手部位置与手势状态(open / fist)可读。
- 「重新打散」后进度归 0;「全部还原」后进度为 1。
- 导出 PNG 返回有效
data:image/png;base64(约 83KB)。 - 390px 视口无水平溢出;控制台无错误。
- 已知限制:测试环境无摄像头,手势识别链路(
hands.send)未在真机上验证;示例图为程序生成,不是照片。
当前归档信息(自动生成)
- 实验 ID:
pixel-flow--minimax-m3-1-flash-max-r01 - 模型:MiniMax M3.1 Flash;推理档位:max
- 类型:app;预览:static;网络:required
- 完整原始输入快照 · 主题与其他版本
- 输入记录:完整原始输入快照,与主题提示词 v1 正文一致(含中英文两版要求)。
- 工具:Claude Code CLI(当前会话,模型 MiniMax-M3.1-Flash,档位 max)。单会话直接实现,未使用子代理;本地用 Playwright/Chromium 以 file:// 与 390px 视口做自动化校验(无摄像头环境,使用自动演示模式验证还原逻辑)。
- 运行方式:浏览器直接打开本目录入口;CDN/外部素材需要联网。
- 费用记录:MiniMax 批次合计 金额未记录(11 个案例;批次 minimax-m3-1-flash-max-2026-10-19;未记录单案例费用)
- 粒子还原主页面
部署适配记录
- Three.js 与 MediaPipe Hands 均通过 CDN 引入,因此预览标记为 network: required。
- 新增『自动演示』模式:在没有摄像头或未授权时,用脚本驱动虚拟手部轨迹,仍可完整体验粒子还原过程(提示词未要求,属于可用性补充)。
- 迁移来源:F:\dev\ai-coding-demo-test 的 experiment/minimax-m3-1-flash-max 分支,提交 871beb18e0e85d6dd542cadca398e67aa4ff1247;保留该提交中的任务输入、实现源码和原有说明。
- 维护者于 2026-10-20 按本仓库统计规则为网页入口引用公共 assets/analytics.js;原始任务输入未改动。
- 维护者于 2026-10-20 在本仓库本地 HTTP 预览中补拍真实桌面截图,并按案例评分规则 v2 逐项复核。
- 维护者于 2026-10-20 按用户要求重新逐图评分,原始 PNG、输入及实现不变;旧分、新分、逐项观察和规则快照保存在 catalog/score-reviews/2026-10-20-minimax-m3-1-flash-max-v2.json。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据;旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码,截图不证明完整功能、算法、手势或性能。