Finger Frame AI 🎬✨

体验地址：https://sophiamyang.github.io/finger-frame-effect-ai/

上传一段展示双手“手指框”手势的视频——你会收到一个版本，其中框内是AI生成的世界。整个视频通过一个视频到视频模型进行风格重绘（包括动作、眨眼等所有细节），然后通过合成技术，让手指框充当通往动画版本的窗口。

手势框应用家族

真实的手，AI的世界——使用默认的“3D动画电影”风格生成（高质量mp4文件）。

工作原理

1. 风格重绘 — 上传的视频会连同你选择的风格（3D动画电影、动漫、黏土动画、水彩或自定义提示词）一起发送到 Gemini Omni Flash视频编辑。这是一个真正的视频模型：整个片段被重新生成，因此动画版本的动作与你完全一致。每个提示词都会附加一个严格对齐的后缀——保持相同取景，不缩放/裁剪/重新构图，面部特征位于相同屏幕坐标，逐帧保留表情（嘴巴开合度、眨眼、视线）——这样结果才能完美对齐到手势框窗口之后。
2. 跟踪 — MediaPipe手部关键点检测器在每一帧中检测双手，手势框的四边形通过与实时应用相同的审核流水线进行跟踪（解剖学角点排序——交叉手指会产生领结效果——带有滞后的展开/面积门控、瞬移拒绝、速度自适应平滑、丢失保持、存在淡入淡出）。
3. 合成 — AI视频通过被跟踪的四边形进行揭示，并带有虚线“蚂蚁线”轮廓和脉动角点。
4. 导出 — 结果记录到可下载的视频中——在浏览器支持录制时（Safari，较新版本的Chrome）为MP4格式，否则为.webm（可用 ffmpeg -i finger-frame-ai.webm -c:v libx264 out.mp4 转换）。

自备API密钥

AI步骤使用你自己的 Gemini API密钥，在应用中输入。密钥仅保存在你的浏览器中（仅在勾选“记住”时存于localStorage），并且只发送给Google的API。生成按视频计费，需要几分钟时间。请将视频片段保持在约15MB以下（几秒钟的720p——任何常见格式：mp4， mov， webm）；更大的文件会超出内联上传限制。没有密钥？占位风格按钮会运行完整的跟踪-合成-导出流水线，使用一个色相偏移的替代品，以便你可以免费尝试所有功能。

本地运行

任何静态服务器都可以：

python3 -m http.server 8124

然后打开 http://localhost:8124。?src=<file> 查询参数可从服务器目录加载视频（开发便利）。

命令行替代方案（Python）

与离线脚本相同的流水线——适用于批量处理或帧精确的H.264输出：

python3 -m venv .venv
.venv/bin/pip install -r requirements.txt

export GEMINI_API_KEY=...
.venv/bin/python stylize.py input.mp4 -o stylized.mp4      # AI风格重绘
.venv/bin/python composite.py input.mp4 stylized.mp4 -o final.mp4

任何ffmpeg/OpenCV可读的输入格式都适用（mp4， mov， webm， …）。composite.py 需要ffmpeg在PATH中，输出H.264 MP4格式，并在有原始音轨时保留音频轨道。

备注

• 输入/输出媒体文件被git忽略——个人影像资料保留在本地。代码库中唯一提交的媒体文件是 examples/ 目录下的示例文件。