程序员看了会沉默：我靠聊天就让AI写出了手势交互系统！TensorFlow.js模型实战！

2025-11-20 15:58:22

文章摘要

作者受抖音上通过摄像头获取手的姿势模仿抓取物品小程序启发，尝试不写代码实现该功能。利用豆包图片理解能力分析截图，给出开发“手势抓取虚拟物品”的 TensorFlow.js 编程提示词，再让 Claude 编码。之后对项目进行优化，包括模型下载、界面布局等，调试时遇问题参考官网文档优化模型和代码，最后还做了小优化，如添加物品触碰反馈。

小伙伴们，最近在刷抖音时看到了一个好玩的编程点子，通过摄像头获取手的姿势模仿抓取物品的小程序，当时想着如何通过AI来实现。今天我们就来尝试着通过一张截图来不写一行代码来实现这个功能。

截图分析需求：

抖音视频截图如下：

如何制作当前相似的功能呢，要自己写提示词，不存在的，我们利用豆包的图片理解能力分析出当前功能并给出相应的AI编程提示词。

打开豆包，上传截图输入提示词：

开发如下功能给出提示词

豆包给出了相应的提示词

我要开发一个浏览器端应用，功能是用 TensorFlow.js 实现“手势抓取虚拟物品”。具体需求：1. 调用摄像头，通过 TensorFlow.js 加载手部姿态检测模型（类似 MediaPipe Hands 能力），实时输出手部关键点、手势状态（是否检测到手、手掌开合度等）。2. 在页面中用 Canvas 或 HTML 元素渲染虚拟物品，当手势满足“抓取条件”（比如手掌闭合、关键点覆盖物品区域）时，物品跟随手势移动。3. 需处理摄像头权限、模型加载失败等异常，还要优化性能（避免推理卡顿、交互延迟）。希望你能指导：- TensorFlow.js 手部模型选型（比如推荐适合浏览器端、轻量且精度足够的模型）及加载、推理的代码流程。- 手势“抓取判定”的具体算法逻辑（如何映射坐标、判断交互条件、处理物品跟随）。- 前端界面（摄像头预览、交互区、状态提示）与 TensorFlow.js 结合的实现要点。- 性能优化的关键手段（比如帧处理策略、模型推理异步化）。麻烦从技术方案框架、核心代码片段（或伪代码）、易错点提醒（如跨域、坐标转换问题）等方面详细说明，感谢！