🏋️ 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用法
- 摆好你的位置 在镜头前
- 点击“开始” 开始锻炼
- 做俯卧撑 - AI自动计数
- 监控进度 具有实时反馈功能
- 重置或停止 按需
🏗️ 表示“建筑工地”或“正在建造中”。 架构概述
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'
}
};添加新的运动类型
- 扩展PushupCounter（俯卧撑计数器） 采用新的检测逻辑
- 更新用户界面 （在）选择运动（时）
- 配置参数 在 config.js 中
- 添加测试 用于新功能
📱 表示手机或智能手机的符号。 浏览器兼容性
| 浏览器 | 版本 | 支持 |
|---|---|---|
| Chrome | 80+ | ✅ 完全支持 |
| Firefox | 75+ | ✅ 完全支持 |
| Safari | 13+ | ✅ 完全支持 |
| Edge | 80+ | ✅ 完全支持 |
所需的API
- WebRTC（Web实时通信） 为了访问摄像头
- Canvas 2D（画布二维） 用于姿态可视化
- ES6 模块 用于建筑（或：针对建筑）
- MediaDevices（媒体设备） 用于流管理
🔒（锁形符号，常用于表示安全、保密或锁定状态） 隐私与安全
- 🏠 本地处理所有人工智能计算都在设备上进行
- 🚫 不收集数据视频不会离开您的浏览器
- 🔐 安全访问相机权限需要HTTPS
- 👁️ 隐私至上不进行追踪或分析数据收集
🎓（学士帽，常用来表示毕业或学术成就） 学习资源
这个项目展示了：
前端技术
- 使用现代模式的ES6+ JavaScript
- 使用CSS Grid和Flexbox进行布局
- HTML5语义元素与无障碍性
- 渐进式网页应用（Progressive Web App）原则
计算机视觉
- MediaPipe姿态估计
- 实时视频处理
- 基于特征点的运动分析
- 校准与适应算法
软件架构
- 模块化设计模式
- 依赖注入
- 观察者模式的实现
- 错误边界策略
🤝（握手） 做出贡献
我们欢迎投稿！请参阅我们的 贡献指南。
开发工作流程
- 叉 仓库
- 创造 特性分支
- 实施 随着测试而变化
- 提交 一个拉取请求（或合并请求）
代码标准
- 使用ES6+特性及现代JavaScript
- 遵循模块化架构原则
- 包含JSDoc文档
- 添加全面的错误处理
📋 翻译成中文是：清单/列表 路线图
🎯（目标/瞄准） 第一阶段 （当前）
- \[x\] 基本俯卧撑计数
- \[x\] 模块化架构
- \[x\] 实时姿态检测
- \[x\] 响应式用户界面设计
🚀 火箭或快速前进的象征（无实际文字对应，仅表达动作或状态） 第二阶段 （计划中的）
- \[ \] 多种运动类型（深蹲、仰卧起坐）
- \[ \] 运动历史与分析
- \[ \] 渐进式Web应用（PWA）特性
- \[ \] 语音指令集成
🔮 代表“神秘符号”或“魔法水晶球”，在中文中可直接用其意象表达，或根据上下文译为“神秘之兆”、“魔法预兆”等。 第三阶段 （未来）
- \[ \] 机器学习模型定制
- \[ \] 社交功能与挑战
- \[ \] 可穿戴设备集成
- \[ \] 高级表单分析
📊 表格、数据图表 演出
- ⚡ 快速加载初始加载时间少于2秒
- 🎯 准确计数95%以上的准确率
- 📱 移动设备优化在现代设备上达到60帧每秒
- 💾 轻量级总包大小 \< 500KB
🏆（奖杯/奖牌/冠军等的象征，具体含义根据上下文而定，可译为“奖杯”、“奖牌”、“冠军”或保持为表情符号以传达情感或庆祝氛围） 奖项与认可
- 作为MCP学习平台倡议的一部分而构建
- 展示了现代网页开发的最佳实践
- 展示人工智能在网页应用中的集成
文件 许可证
这个项目遵循MIT许可证授权——详见 许可证 详情请见文件。
🙏（合十礼，表示感谢、祈求或敬意） 致谢
- Google MediaPipe 姿态检测技术团队
- 网络标准社群 用于现代API开发
- 开源贡献者 使网页AI触手可及
📞 电话符号（表示电话或通话） 支持
- 这个表情符号🐛代表“虫子”或“bug”，在中文里可以直接翻译为“虫子”或者根据上下文意译为“小毛病”、“漏洞”等，但最直接的翻译还是“虫子”。 错误报告：
- 💬 讨论:
- 📧 这个符号是电子邮件的图标，通常用来表示与电子邮件相关的事务或内容。在中文中，我们可能直接用“电子邮件”来指代这个符号所代表的概念，或者在需要强调图标的场合下，仍会使用“📧”来表示。所以，这个符号的翻译或解释可以是“电子邮件”或在特定语境下保持为“📧”。 联系：
______________________________________________________________________
⭐ 如果你觉得这个仓库有帮助，请给它点个星！