【生活娱乐赛道】PoseMatch — AI 体感姿态匹配互动健身平台

TRAE AI 创造力大赛 【大赛复赛专区】
1

一、团队介绍

我是 笠雨聆月，一名 独立开发者。日常身份之外，我把自己定位成一个"尝试通过大模型让世界变得更好"的人。

我的编程+Vibe Coding 经验约 10 年。早期更多是靠 手搓，PoseMatch 是我一个很久之前就想做的东西，但一直被搁置，最终在大模型的帮助下从需求拆解、架构决策、UI/UX 细节打磨到部署，几乎全程在与 AI 的对话中完成。

做 PoseMatch 的初衷很朴素：在走步机上太无聊了，上半身还是很空闲的，我想基于一个浏览器和普通摄像头，脱离专用硬件，提供游戏闯关、排行、对战的功能，还能增加运动。

二、产品简介

是什么

PoseMatch 是一个基于 MediaPipe 的 AI 体感姿态匹配互动健身网页应用（说是跳舞机其实也差不多）。 用户打开浏览器、授权摄像头，AI 即可在本地实时检测骨骼关键点并与标准动作比对，给出即时匹配度评分与反馈——无需下载 App、无需额外硬件、视频不出本机。

技术形态：Web 应用（前端 React 18 + TypeScript + Vite + Tailwind；后端 FastAPI + SQLite + WebSocket；AI 能力为浏览器端本地运行的 MediaPipe Pose）。

面向谁

  • 核心用户：想在家自主健身、但缺少陪伴与正反馈的人群——上班族、学生、全职妈妈、中老年人。

  • 典型场景：

    • 午休 5 分钟，打开网页跟着"八段锦/办公室拉伸"关卡活动筋骨；
    • 晚上在家跟练一段健身视频，AI 实时纠正动作角度；
    • 把挑战链接发给好友，来一场异地体感 PK；
    • 长辈也能用——零安装、零配置，点开就练。

完整功能清单与用户使用路径

PoseMatch 复赛版已是一个功能闭环完整的产品，覆盖"玩 → 创 → 聚"三条主线：

  1. 玩（核心游玩）

简单来说就是提供了不同游戏模式

  • 单人模式——统一 PlayEngine 引擎驱动三种子模式：
    • 闯关模式：标准动作逐帧匹配，分数 ≥80 过关，排行榜按时长升序；
    • 节拍模式：倒计时结束自动切帧，节奏感更强，排行榜按分数降序；
    • 跟练模式：基于视频时长驱动，支持骨骼视频/原视频切换，像跟真人教练练；
    • 三档评分精度：极简（肩+肘+腕 6 点）/ 半身（+髋 8 点，默认）/ 全身（+膝+踝 12 点），适配不同动作类型。
  • 多人异步群战：房主选模式与关卡 → 生成挑战链接 → 好友加入各自完成 → WebSocket 实时同步 → 多轮 PK + 排行榜。
  • 沉浸模式：右上角独立入口，自由匹配不打分压力，分数入库。
  • 排行榜：5 种模式筛选，不同模式不同排序规则。
  1. 创（内容生产）

简单来说就是能自定义关卡

  • 视频导入生成关卡：本地浏览器抽帧，视频不上传服务器，支持两种模式：
    • 动作抽取：4–12 关键帧，存为独立动作模板，用于闯关/节拍；
    • 跟练抽取：1/2/5/10/15/30 fps 可配采样，生成带时间戳的跟练课程。
  • 图片批量上传生成关卡。
  • 姿态编辑器：支持角度式与坐标点式两种修改并双向同步，对称动作采用镜像对称定义（右=π−左），保证左右关节弧度方向一致。
  • 骨骼视频生成：前端 WebCodecs + webm-muxer，1–3 秒生成骨骼动画，原视频/骨骼视频并排同步预览。
  • 动作/关卡管理：系统预设 + 用户自建 + 本地关卡统一管理，支持编辑改名、删除、发布。
  1. 聚（社区生态）

简单来说就是能直接拿别人做好的关卡玩

  • 关卡社区（三层数据架构）：
    • 本地关卡（IndexedDB，无限额，仅本浏览器）；
    • 云端私有关卡（每模式 5 个上限）；
    • 社区关卡（无限额，全站共享）。
  • 发布 / Fork / 收藏：闯关节拍关卡可 Fork 到本地或云端；跟练关卡需登录保存到服务器；收藏后即使作者下架仍可继续玩。
  • 我的收藏 / 我的关卡：本地与云端明确分区展示。

  1. 隐私与工程：所有摄像头画面仅在本地经 MediaPipe 处理，服务器不接收/不存储任何视频流，仅上传匿名化的骨骼关键点评分数据；MediaPipe 输入统一缩放至 640px 宽以降低算力负担；全站采用 emerald/cyan 统一色体系与语义化徽章令牌。

  2. 典型用户路径：

  • 路径 1（玩）：首页 → 单人模式 → 选关 → 授权摄像头 → 实时打分 → 上榜。
  • 路径 2（创）：首页 → 视频导入 → 抽帧/编辑 → 保存到本地/云端 → 我的关卡 → 发布到社区。
  • 路径 3（聚）：关卡社区 → 浏览/筛选 → 收藏或 Fork → 直接开玩。
  • 路径 4（对战）：多人模式 → 创建房间 → 分享链接 → 好友加入 → 实时 PK。

建议配图：首页截图、单人三模式选择页、视频导入抽帧预览页、关卡社区卡片墙、姿态编辑器、多人对战房间。（请自行插入实际产品截图）

相比初赛 Demo 的升级

初赛 Demo 仅验证了"摄像头 + MediaPipe + 评分"的最小闭环（基础单人闯关 + 打分）。复赛成品在三个维度做了体系化升级：

  1. 从单一模式到三模式统一引擎：用配置化 PlayEngine 统一驱动闯关/节拍/跟练，并新增三档评分精度，适配从极简到全身的不同动作。
  2. 从"只能玩预设"到"完整创作生态"：新增视频导入（双模式抽帧）、姿态编辑器（角度/坐标双向同步）、骨骼视频生成，以及"本地—云端私有—社区"三层数据架构与发布/Fork/收藏闭环。
  3. 从单机到联网对战 + 沉浸 + 排行：补齐多人异步群战（WebSocket）、沉浸模式、多模式排行榜，并把配色、徽章、按钮令牌全站统一，从"能跑的 Demo"打磨成"可发布的成品"。

三、产品演示视频

TRAE AI 创造力大赛 作品 PoseMatch 演示 https://v.douyin.com/cfYBNJmpMUc/

四、产品创作历程

灵感诞生

最初的痛点来自我自己：爱玩游戏，但是身体不能支持长时间伏案游玩；想要健身，但是健身不像是游戏一样有明确反馈。市面上的体感健身要么要装 App，要么要买体感设备，门槛都不低。—浏览器现在已经能跑 MediaPipe 了，为什么不直接用摄像头做一个零门槛的"AI 游戏"？ 再叠加游戏化的闯关、排行、对战，把"坚持健身"这件反人性的事，变成"再玩一局"的本能。

初赛 Demo：验证最小闭环

初赛阶段我只做了一件事：证明"摄像头 + MediaPipe + 评分"在网页里能跑通。一个动作模板、一个评分算法、一个分数显示——足够说明方向成立，但离"产品"还很远：只能玩预设、不能自创内容、单机、视觉粗糙。

复赛成品：三步体系化跃迁

第一步：从单一模式到统一引擎。
最初三种模式（闯关/节拍/跟练）的计时、切帧、判定逻辑各写各的，维护成本极高。关键决策是抽象出配置化的 PlayEngine——把"过关阈值、倒计时、驱动源（分数/时长/节拍）“做成配置项，三模式共用同一套渲染与评分管线。这为后续所有功能扩展打下了地基。
第二步：从"只能玩"到"完整创作生态”——这是最难的一关。
让用户自己造关卡，引出了一连串设计抉择：

  • 存储架构：闯关/节拍用"动作—关卡"两级存储（动作注册到 PoseTemplate 表，关卡引用 pose_ids），跟练因带视频帧时间戳保持单级内嵌——避免污染动作表又支持动作跨关卡复用。
  • 三层数据隔离：本地（IndexedDB 无限额）/ 云端私有（每模式 5 个）/ 社区（无限额）。未登录可浏览社区、可 Fork 闯关节拍到本地，但跟练因视频联网需登录。这套设计在"低门槛"与"可持续"之间找到了平衡。
  • 视频隐私：坚持视频只在本地处理、不上传服务器，因此用 WebCodecs 在浏览器端生成骨骼视频，1–3 秒完成。
  • 姿态编辑器：用户要能改动作，但角度和坐标点两种表达之间需要双向同步；对称动作还必须用镜像对称（右=π−左）而非简单复制，否则左右肘关节弧度方向会反——这些都是在反复试错中钉下来的细节。
    第三步：从单机到联网 + 视觉统一。
    补齐多人异步群战（WebSocket 房间状态机）、沉浸模式、多模式排行榜后，产品功能闭环成型。最后做了一件"看不见但很重要"的事：全站配色统一。初赛时主色变量是 blue，但按钮实际用的是 emerald-cyan 渐变，导致首页绿、内容页蓝的割裂感。复赛把约 70 处主色用法统一为 emerald/cyan 体系，建立语义化徽章令牌（.badge-system/.badge-local/.badge-published 等），让"新增卡片只需套语义类"成为可能。

关键问题与解决思路（创新性）

  1. IndexedDB 配额超限导致保存闪退：大视频文件存本地会撑爆配额。解决——闯关/节拍本地保存时不再存原视频 blob（只跟练模式存），并移除自动跳转、改用"已保存到本地"提示 + 手动跳转按钮，让用户看清状态。
  2. 跨代际可用性：长辈不会装 App。解决——坚持纯网页、零安装、点开就练，并把动作分类（八段锦/办公室/瑜伽）与评分精度做成可选，让不同人群都能找到合适难度。
  3. "动作复用"与"数据隔离"的矛盾：社区动作库通过 PoseTemplate 表的 is_public 字段实现，发布关卡时把引用的私有动作标记为公开即可被复用，作者下架只置 is_public=false，已收藏用户仍可玩——既保护创作者，又不伤害已获得内容的用户。

一句话总结

PoseMatch：有趣可用的健身游戏，可能就藏在你的浏览器里——零门槛、有反馈、像游戏、能社交，而这一切，一个人用 Vibe Coding 也能把它从想法变成成品。

五、 TRAE 实践过程

1518857816656843:cac646b8a7559aa0428e98b77147d937_6a69f01d94ef3c096ff94b5b.6a6ca15f0dd14a0c99f3bd80.6a6ca15f0dd14a0c99f3bd7e:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/31 21:21:35) 修复多人游戏评分问题

image
image988×722 34.1 KB

1518857816656843:478c1f588d08d29f39a2027c8099f5cd_6a6d49e16565261efa436ca3.6a6f733e649d40a87671918f.6a6f733e649d40a87671918d:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/3 00:41:34) 优化存储结构

image
image1033×746 35 KB

1518857816656843:97fd071571d31a417ca023bbd719506b_6a6d49e16565261efa436ca3.6a7064869f1b46723dca1ba0.6a7064869f1b46723dca1b9f:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/3 17:51:07) 优化社区动作的逻辑

image
image1131×724 46.4 KB

1518857816656843:fceb8830248f96732bf304432d0debd5_6a6d49e16565261efa436ca3.6a706b459f1b46723dca1c28.6a706b459f1b46723dca1c26:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/3 18:19:49) 打磨UI

image
image951×638 24 KB

1518857816656843:92d00375aa87eba1461bb696f4a5575d_6a6d49e16565261efa436ca3.6a7086189f1b46723dca2158.6a7086189f1b46723dca2157:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/3 20:16:33) 排查BUG

image
image923×689 31.3 KB

六、技术方案分享

技术栈

层级 选型 说明
前端框架 React 18 + TypeScript SPA，组件化页面与状态隔离
构建工具 Vite 快速冷启动 + HMR
样式 Tailwind CSS + shadcn/ui 原子化 + 语义化徽章令牌
状态管理 Zustand 轻量全局 store（userStore / gameStore）
路由 React Router 单人/多人/社区/管理等页面切换
本地存储 IndexedDB 本地关卡与动作存储，配额可控
AI 能力 MediaPipe Pose（@mediapipe/tasks-vision） 浏览器端本地骨骼检测，视频不出本机
视频编解码 WebCodecs + webm-muxer 前端 1-3 秒生成骨骼动画
后端框架 FastAPI (Python 3.10+) RESTful API + WebSocket
ORM SQLAlchemy 2.0 数据模型与迁移
数据库 SQLite 可平滑切换 PostgreSQL/MySQL
实时通信 WebSocket 多人房间状态同步
认证 bcrypt + 自签 JWT 用户注册/登录/管理员
部署 Docker + Nginx + HTTPS docker-compose 一键部署

关键实现思路

1. 端侧 AI 推理：让 MediaPipe 在浏览器里跑得动

  • MediaPipe 输入统一缩放至 640px 宽再送入检测，降低算力负担，中低端设备也能比较流畅地出骨骼点；
  • 摄像头画面仅在本地处理，服务器只接收匿名化的骨骼关键点评分数据，视频本身不上传；
  • HTTPS 安全上下文检测 + 自签证书 + MediaRecorder fallback，保证 getUserMedia 在各环境下可用。

2. 评分算法：角度 + 坐标双维度，左右对称不翻车

  • 关节角度由骨骼关键点向量计算得出，提供极简/半身/全身三档评分精度（6/8/12 关键点），适配从"只看上肢"到"看全身"的不同动作；
  • 对称动作采用镜像对称定义（右 = π − 左），而非简单复制，避免左右肘关节弧度方向反向这一隐蔽 bug；
  • 评分驱动方式配置化：闯关按分数阈值（≥80 过关）、节拍按倒计时切帧、跟练按视频时长驱动，三模式共用同一 PlayEngine。

3. 两级存储 + 三层数据隔离

  • 两级存储：闯关/节拍模式把动作注册到 PoseTemplate 表，关卡只存 pose_ids 引用——动作可跨关卡复用，不污染关卡表；跟练因带视频帧时间戳等专属字段，保持单级内嵌；
  • 三层数据隔离：
    • 本地关卡 → IndexedDB，无限额，仅本浏览器；
    • 云端私有关卡 → user_courses 表，每模式 5 个上限；
    • 社区关卡 → community_courses 独立表，无限额，与私有表隔离，支持"私有版与社区版独立维护"；
  • 社区动作库复用 PoseTemplate 表的 is_public 字段，发布关卡时把引用的私有动作标记公开即可，作者下架只置 is_public=false，已收藏用户仍可继续玩——既保护创作者，又不伤害已获得内容的用户。

4. 前端骨骼视频生成：视频不出本机的关键一环

  • 用 WebCodecs 逐帧解码原视频 → MediaPipe 抽骨骼 → Canvas 绘制骨架 → webm-muxer 封装为 webm，全程在浏览器完成，1-3 秒出片；
  • 原视频/骨骼视频并排同步预览，用户可直观对比"标准动作 vs 骨骼化效果"；
  • 闯关/节拍本地保存时不再存原视频 blob（只跟练模式存），避免 IndexedDB 配额超限导致保存闪退。

5. WebSocket 房间状态机：多人异步群战

  • 房间状态机：waiting → countdown → playing → round_end → (next round) countdown / game_end；
  • 房主分发关卡（房间存储 templates，全员同一套），消息覆盖 game_start / next_round / player_ready / player_joined / game_end；
  • 大厅房间列表 5 秒自动刷新，断线重连与服务器时间对齐为后续迭代预留接口。

6. 全站设计令牌：配色统一，新增组件有类可套

  • 建立语义化徽章类（.badge-system / .badge-custom / .badge-local / .badge-cloud / .badge-published / .badge-destructive）与按钮令牌（.btn-primary / .btn-secondary）；
  • 主色变量 --primary 设为 emerald (152°)、--accent 设为 cyan (187°)，全站约 70 处主色用法统一，首页与内容页无色跳。

工程化亮点

  • 配置化引擎：PlayEngine 把"过关阈值/倒计时/驱动源"做成配置，新增模式只需加配置而非重写引擎；
  • 抽帧可取消：视频抽帧用 AbortController，长任务可中途取消；
  • 断线容错：本地保存移除自动跳转，改用"已保存到本地"提示 + 手动跳转按钮，让用户看清状态再操作；
  • 一键部署：docker-compose 编排前后端 + Nginx + HTTPS，降低评审与复用门槛。

七、商业化与社会价值分析

社会价值（核心）

  1. 健身门槛低：私教课不便宜，体感设备也要花钱。PoseMatch 只要有带摄像头的电脑/手机浏览器就能用，不买硬件、不装 App，对学生、上班族、长辈都比较友好。
  2. 适合跨代际：长辈不太会装 App、配设备，但"点开链接就能练"他们做得到。预设的八段锦、办公室拉伸、瑜伽等分类，尽量覆盖不同人群。
  3. 隐私上比较克制：视频不出本机，服务器只收匿名骨骼点，在健康类应用里算是比较克制的做法。
  4. 内容可以流动：用户既能玩也能做——把自己的健身视频抽帧成关卡发到社区，别人可以直接玩，好内容能在用户之间转起来。

商业化路径

  1. 免费层 + 增值层（推荐起步）：
    • 免费：系统预设关卡 + 本地关卡（无限额）+ 社区浏览；
    • 增值（订阅/单次）：云端私有关卡扩容（突破 5 个上限）、跟练模式云端视频存储、高清骨骼视频导出、专属动作包（如康复训练、孕产瑜伽等专业课程）。
  2. 专业内容方接入：如果后续有健身教练、康复师、体育老师愿意入驻，可以开放"认证创作者"通道，专业关卡付费分发。两级存储与 is_public 机制对这种"创作者—平台—用户"的分层比较友好。
  3. B 端场景授权：
    • 企业 HR/工会：员工健康福利，办公室拉伸挑战赛；
    • 学校体育：体测动作纠正与课程跟练；
    • 社区/养老机构：低门槛适老健身指导。
  4. 数据洞察（匿名化，远期）：在隐私合规前提下，对匿名骨骼点做群体级动作质量分析，看看能不能反哺内容方优化动作设计。

底线：核心的"玩"一直免费，收费只在"存储扩容、专业内容、B 端服务"这些增值层。

八、产品迭代规划

短期（1-2 个月）：体验打磨与稳定性

  • 多人对战体验升级：WebSocket 断线重连（指数退避 3s/5s/10s/30s）、服务器时间对齐倒计时、游戏中实时排名广播、房间内骨架预览；
  • 跟练模式视频加载：保存后轮询 bone_video_path（1s 间隔，最多 30s），消除"骨骼视频还没生成完"的空窗；
  • 全局错误边界：React Error Boundary 防白屏；
  • 移动端适配：摄像头权限与布局在手机浏览器的可用性验证，扩大"零门槛"覆盖面。

中期（3-6 个月）：内容生态与社交

  • 认证创作者体系：健身教练/康复师入驻，专业动作包分发与分成；
  • 动作难度智能推荐：根据用户历史分数，动态推荐"刚好够得着"的关卡，提升留存；
  • 好友与圈子：固定好友关系、圈子挑战赛、周榜/月榜；
  • 课程连载：支持多关卡组合成"系列课"，如"八段锦全套 12 课"。

长期（6 个月+）：平台化与智能化

  • AI 动作教练：不止打分，还能给出"左肘抬高了 10°"式的具体纠正建议；
  • 多模态输入：支持图片生成关卡（已部分实现）、语音口令、手势交互；
  • 健康数据档案：在用户授权下，把训练记录沉淀为个人健康档案，可导出/对接家庭医生；
  • 开放能力：把姿态匹配这一块封装成可被第三方调用的接口，看看能不能用在更多场景里。

愿景

希望 PoseMatch 能成为一个打开浏览器就能用的轻量体感健身工具——不用买设备、不用装 App，点开就能练、能玩、能和朋友比一把；也希望能慢慢长成一个大家愿意分享健身内容的社区，让好关卡流动起来。