Push Up Counter App

🏋️ MCP学习平台项目

   

一款前沿的AI健身应用，具备实时姿态检测功能，可自动计数俯卧撑。该应用采用模块化的JavaScript架构和现代网页技术构建，是MCP（模型上下文协议）学习平台的一部分。

🎯（目标） 现场演示

🔗（链接符号，无实际翻译内容，可保持原样或根据上下文替换为具体链接描述） 现在就试试吧！

✨（这个符号通常表示闪耀、光芒或庆祝，没有直接对应的中文翻译，但可以理解为“闪闪发光”或根据上下文翻译为相应的表达） 特点/功能

🤖 机器人 基于人工智能的检测

• 实时姿态估计使用Google的MediaPipe进行精确的身体追踪
• 自适应校准自动适应用户的移动范围
• 智能计数逻辑通过状态机实现防止误报
• 视觉反馈实时姿态关键点叠加，支持自定义样式

🏗️ 翻译为中文是“建筑工地”或“正在建造中”。这个表情符号通常用来表示与建筑、施工或建造相关的场景。 现代建筑

• 模块化设计使用ES6类实现关注点的清晰分离
• 性能优化高效的帧处理和内存管理
• 抗错误（或容错）全面的错误边界和优雅的降级处理
• 可扩展的支持插件的架构，用于添加更多运动类型

🎨 表示“美术”或“艺术创作”（具体含义可能根据上下文有所不同）。 用户体验

• 玻璃质感界面（Glassmorphism UI）现代、易用的界面设计
• 响应式布局在桌面和移动设备上均能顺畅运行
• 实时分析实时计数并进行视觉确认
• 无障碍优先ARIA标签和屏幕阅读器支持

🚀 火箭/快速前进/快速上升（根据上下文可灵活翻译） 快速入门

先决条件

• 现代网页浏览器（Chrome 80+、Firefox 75+、Safari 13+）
• 相机访问权限
• HTTPS连接（用于摄像头安全）

安装

# Clone the repository
git clone https://github.com/soljourr/MCP-Learning-Platform-Project.git

# Navigate to project directory
cd MCP-Learning-Platform-Project

# Start local development server
npm start
# or
python -m http.server 8000

# Open in browser
open http://localhost:8000

用法

1. 摆好你的位置 在镜头前
2. 点击“开始” 开始锻炼
3. 做俯卧撑 - AI自动计数
4. 监控进度 具有实时反馈功能
5. 重置或停止 按需

🏗️ 表示“建筑工地”或“正在建造中”。 架构概述

src/
├── js/
│   ├── config.js           # 📋 Centralized configuration
│   ├── PoseDetector.js     # 🤖 MediaPipe integration
│   ├── CameraManager.js    # 📹 Video streaming management
│   ├── PushupCounter.js    # 🔢 Counting logic & state
│   ├── UIController.js     # 🎨 Interface management
│   ├── App.js              # 🎯 Main orchestrator
│   └── main.js             # 🚀 Application entry point
├── css/
│   └── styles.css          # 💅 Responsive styling
└── index.html              # 📄 Main application shell

核心组件

🎯 App.js（目标文件：App.js） - 应用程序编排器

// Coordinates all components and manages lifecycle
class App {
    async initialize() {
        await this.poseDetector.initialize();
        await this.cameraManager.initialize();
        this.setupCallbacks();
    }
}

🤖 PoseDetector.js（姿态检测器.js） - 人工智能视觉处理

// Wraps MediaPipe for pose detection
class PoseDetector {
    async processFrame(video) {
        await this.pose.send({ image: video });
    }
}

🔢 PushupCounter.js（可译为“俯卧撑计数器.js”） - 智能计数逻辑

// Implements adaptive counting algorithm
class PushupCounter {
    detectPushup(landmarks) {
        // State machine for accurate counting
        if (this.transitionFromDownToUp()) {
            this.incrementCount();
        }
    }
}

🛠️（工具或修理的象征） 发展

本地开发

# Install dependencies (optional)
npm install

# Start development server
npm run dev

# Run linting (when configured)
npm run lint

# Run tests (when configured)
npm test

配置

自定义检测参数 js/config.js：

export const CONFIG = {
    DETECTION: {
        CALIBRATION_FRAMES_NEEDED: 30,
        MOVEMENT_THRESHOLD: 0.4,
        MIN_MOVEMENT_RANGE: 0.05
    },
    CAMERA: {
        WIDTH: 640,
        HEIGHT: 480,
        FACING_MODE: 'user'
    }
};

添加新的运动类型

1. 扩展PushupCounter（俯卧撑计数器） 采用新的检测逻辑
2. 更新用户界面 （在）选择运动（时）
3. 配置参数 在 config.js 中
4. 添加测试 用于新功能

📱 表示手机或智能手机的符号。 浏览器兼容性

所需的API

• WebRTC（Web实时通信） 为了访问摄像头
• Canvas 2D（画布二维） 用于姿态可视化
• ES6 模块 用于建筑（或：针对建筑）
• MediaDevices（媒体设备） 用于流管理

🔒（锁形符号，常用于表示安全、保密或锁定状态） 隐私与安全

• 🏠 本地处理所有人工智能计算都在设备上进行
• 🚫 不收集数据视频不会离开您的浏览器
• 🔐 安全访问相机权限需要HTTPS
• 👁️ 隐私至上不进行追踪或分析数据收集

🎓（学士帽，常用来表示毕业或学术成就） 学习资源

这个项目展示了：

前端技术

• 使用现代模式的ES6+ JavaScript
• 使用CSS Grid和Flexbox进行布局
• HTML5语义元素与无障碍性
• 渐进式网页应用（Progressive Web App）原则

计算机视觉

• MediaPipe姿态估计
• 实时视频处理
• 基于特征点的运动分析
• 校准与适应算法

软件架构

• 模块化设计模式
• 依赖注入
• 观察者模式的实现
• 错误边界策略

🤝（握手） 做出贡献

我们欢迎投稿！请参阅我们的 贡献指南。

开发工作流程

1. 叉 仓库
2. 创造 特性分支
3. 实施 随着测试而变化
4. 提交 一个拉取请求（或合并请求）

代码标准

• 使用ES6+特性及现代JavaScript
• 遵循模块化架构原则
• 包含JSDoc文档
• 添加全面的错误处理

📋 翻译成中文是：清单/列表 路线图

🎯（目标/瞄准） 第一阶段 （当前）

• \[x\] 基本俯卧撑计数
• \[x\] 模块化架构
• \[x\] 实时姿态检测
• \[x\] 响应式用户界面设计

🚀 火箭或快速前进的象征（无实际文字对应，仅表达动作或状态） 第二阶段 （计划中的）

• \[ \] 多种运动类型（深蹲、仰卧起坐）
• \[ \] 运动历史与分析
• \[ \] 渐进式Web应用（PWA）特性
• \[ \] 语音指令集成

🔮 代表“神秘符号”或“魔法水晶球”，在中文中可直接用其意象表达，或根据上下文译为“神秘之兆”、“魔法预兆”等。 第三阶段 （未来）

• \[ \] 机器学习模型定制
• \[ \] 社交功能与挑战
• \[ \] 可穿戴设备集成
• \[ \] 高级表单分析

📊 表格、数据图表 演出

• ⚡ 快速加载初始加载时间少于2秒
• 🎯 准确计数95%以上的准确率
• 📱 移动设备优化在现代设备上达到60帧每秒
• 💾 轻量级总包大小 \< 500KB

🏆（奖杯/奖牌/冠军等的象征，具体含义根据上下文而定，可译为“奖杯”、“奖牌”、“冠军”或保持为表情符号以传达情感或庆祝氛围） 奖项与认可

• 作为MCP学习平台倡议的一部分而构建
• 展示了现代网页开发的最佳实践
• 展示人工智能在网页应用中的集成

文件 许可证

这个项目遵循MIT许可证授权——详见 许可证 详情请见文件。

🙏（合十礼，表示感谢、祈求或敬意） 致谢

• Google MediaPipe 姿态检测技术团队
• 网络标准社群 用于现代API开发
• 开源贡献者 使网页AI触手可及

📞 电话符号（表示电话或通话） 支持

• 这个表情符号🐛代表“虫子”或“bug”，在中文里可以直接翻译为“虫子”或者根据上下文意译为“小毛病”、“漏洞”等，但最直接的翻译还是“虫子”。 错误报告：
• 💬 讨论:
• 📧 这个符号是电子邮件的图标，通常用来表示与电子邮件相关的事务或内容。在中文中，我们可能直接用“电子邮件”来指代这个符号所代表的概念，或者在需要强调图标的场合下，仍会使用“📧”来表示。所以，这个符号的翻译或解释可以是“电子邮件”或在特定语境下保持为“📧”。 联系：

______________________________________________________________________

⭐ 如果你觉得这个仓库有帮助，请给它点个星！