MediaPipe Pose实战教程：构建智能健身APP-平芜编程栈

MediaPipe Pose实战教程：构建智能健身APP

1. 引言

1.1 学习目标

在本教程中，你将学会如何基于Google MediaPipe Pose模型，从零开始搭建一个可用于智能健身场景的 AI 骨骼关键点检测系统。完成本教程后，你将掌握：

如何部署并运行本地化的 MediaPipe 姿态估计服务
实现人体 33 个关键点的实时检测与可视化
构建 WebUI 界面实现图像上传与结果展示
将该能力集成到智能健身 APP 中的核心思路

最终，你可以将此模块扩展为动作标准度评分、运动轨迹分析、姿态纠正提醒等实用功能。

1.2 前置知识

建议具备以下基础： - Python 编程基础（熟悉函数、类、文件操作） - Flask 或 FastAPI 等轻量 Web 框架使用经验（非必须但有助于理解） - 对计算机视觉和人体姿态估计有基本了解

1.3 教程价值

不同于依赖云端 API 或复杂深度学习训练流程的方案，本文提供的方法： -完全本地化运行，无网络延迟与隐私泄露风险 -环境极简，仅需安装mediapipe和flask即可启动 -毫秒级响应，适合嵌入移动或边缘设备 -可二次开发性强，便于接入摄像头、动作识别逻辑等

2. 环境准备与项目结构

2.1 安装依赖库

确保已安装 Python 3.8+，然后执行以下命令：

pip install mediapipe flask numpy opencv-python pillow

⚠️ 注意：MediaPipe 官方已对 CPU 推理进行了高度优化，无需 GPU 即可流畅运行。

2.2 项目目录结构

创建如下文件夹结构：

smart_fitness_app/ ├── app.py # Web服务主程序 ├── static/ │ └── uploads/ # 用户上传图片存储路径 ├── templates/ │ └── index.html # 图像上传与结果显示页面 └── pose_detector.py # 核心姿态检测模块

3. 核心功能实现

3.1 关键点检测模块开发

我们封装一个独立的姿态检测类，便于复用。

`pose_detector.py`

import cv2 import mediapipe as mp from PIL import Image import numpy as np class PoseDetector: def __init__(self, static_image_mode=True, min_detection_confidence=0.5): self.mp_drawing = mp.solutions.drawing_utils self.mp_pose = mp.solutions.pose self.pose = self.mp_pose.Pose( static_image_mode=static_image_mode, model_complexity=1, # 轻量与精度平衡 smooth_landmarks=True, enable_segmentation=False, min_detection_confidence=min_detection_confidence ) def detect(self, image_path): """输入图像路径，返回带骨架图的RGB数组""" image = cv2.imread(image_path) image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = self.pose.process(image_rgb) if not results.pose_landmarks: return None, "未检测到人体" # 绘制骨架连接线 annotated_image = image_rgb.copy() self.mp_drawing.draw_landmarks( annotated_image, results.pose_landmarks, self.mp_pose.POSE_CONNECTIONS, landmark_drawing_spec=self.mp_drawing.DrawingSpec(color=(255, 0, 0), thickness=2, circle_radius=2), connection_drawing_spec=self.mp_drawing.DrawingSpec(color=(255, 255, 255), thickness=2) ) # 转回BGR用于保存 annotated_image_bgr = cv2.cvtColor(annotated_image, cv2.COLOR_RGB2BGR) return annotated_image_bgr, results.pose_landmarks.landmark

📌代码解析： - 使用mediapipe.solutions.pose初始化姿态模型 -model_complexity=1在速度与精度间取得良好平衡 -draw_landmarks自动绘制红点（关节）与白线（骨骼），符合需求描述 - 返回原始 OpenCV 图像和 33 个关键点坐标列表（可用于后续动作分析）

3.2 Web服务接口搭建

`app.py`

from flask import Flask, request, render_template, send_from_directory import os from pose_detector import PoseDetector import cv2 app = Flask(__name__) UPLOAD_FOLDER = 'static/uploads' os.makedirs(UPLOAD_FOLDER, exist_ok=True) detector = PoseDetector() @app.route('/', methods=['GET', 'POST']) def index(): if request.method == 'POST': file = request.files.get('image') if not file: return '请上传图片' input_path = os.path.join(UPLOAD_FOLDER, 'input.jpg') output_path = os.path.join(UPLOAD_FOLDER, 'output.jpg') file.save(input_path) # 执行姿态检测 result_img, landmarks = detector.detect(input_path) if result_img is None: return f"检测失败: {landmarks}" cv2.imwrite(output_path, result_img) return render_template('index.html', input_image='uploads/input.jpg?ts=' + str(hash(file.filename)), output_image='uploads/output.jpg') return render_template('index.html') @app.route('/static/<path:filename>') def serve_static(filename): return send_from_directory('static', filename) if __name__ == '__main__': app.run(host='0.0.0.0', port=5000, debug=False)

📌核心逻辑说明： - 接收用户上传的图片并保存至static/uploads- 调用PoseDetector.detect()进行处理 - 将结果图像写入同目录下的output.jpg- 渲染 HTML 页面展示原图与骨骼图对比

3.3 前端界面设计

`templates/index.html`

<!DOCTYPE html> <html> <head> <title>AI 智能健身姿态检测</title> <style> body { font-family: Arial; text-align: center; margin: 40px; } .image-row img { max-width: 45%; height: auto; margin: 10px; border: 1px solid #ddd; } .upload-btn { padding: 10px 20px; font-size: 16px; margin: 20px; } </style> </head> <body> <h1>🤸‍♂️ AI 人体骨骼关键点检测 - MediaPipe Pose</h1> <p>上传一张全身照，查看系统自动绘制的骨骼关键点（红点）与连接线（白线）</p> <form method="post" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" required /> <button type="submit" class="upload-btn">上传并分析</button> </form> {% if input_image and output_image %} <div class="image-row"> <div> <h3>原始图像</h3> <img src="{{ url_for('static', filename=input_image) }}" /> </div> <div> <h3>骨骼可视化结果</h3> <img src="{{ url_for('static', filename=output_image) }}" /> </div> </div> {% endif %} </body> </html>

📌前端特点： - 简洁直观，支持拖拽上传 - 左右分栏对比显示原图与结果图 - 使用时间戳防止缓存问题

4. 启动与测试

4.1 启动服务

进入项目根目录，运行：

python app.py

控制台输出：

* Running on http://0.0.0.0:5000

点击平台提供的 HTTP 访问链接即可打开 Web 页面。

4.2 测试示例

上传一张包含站立、深蹲或瑜伽动作的人体照片，系统将在几秒内返回结果：

✅ 正确识别出头部、肩部、手肘、手腕、髋部、膝盖、脚踝等 33 个关键点
✅ 所有关节以红点高亮标注
✅ 骨骼通过白线连接形成“火柴人”骨架图
✅ 支持多种角度与光照条件下的稳定检测

5. 实际应用拓展：构建智能健身助手

5.1 动作标准化评分原理

利用检测出的 33 个关键点坐标，可以进一步实现：

角度计算：如膝关节弯曲角判断深蹲是否到位
距离比值：如双手间距是否符合俯卧撑标准
轨迹追踪：连续帧中某关节运动路径是否平滑合规

示例：判断深蹲动作质量

def calculate_angle(a, b, c): """计算三点形成的角度（a-b-c）""" ba = np.array([a.x - b.x, a.y - b.y]) bc = np.array([c.x - b.x, c.y - b.y]) cosine_angle = np.dot(ba, bc) / (np.linalg.norm(ba) * np.linalg.norm(bc)) angle = np.arccos(cosine_angle) return np.degrees(angle) # 获取左腿三个关键点 left_hip = landmarks[mp_pose.PoseLandmark.LEFT_HIP.value] left_knee = landmarks[mp_pose.PoseLandmark.LEFT_KNEE.value] left_ankle = landmarks[mp_pose.PoseLandmark.LEFT_ANKLE.value] angle = calculate_angle(left_hip, left_knee, left_ankle) if angle < 90: feedback = "深蹲到位！" else: feedback = "还需下蹲更深"

5.2 可扩展功能清单

功能	技术实现方式
实时摄像头检测	替换`cv2.imread`为`cv2.VideoCapture(0)`
多人姿态识别	设置`pose_detector = mp_pose.Pose(..., static_image_mode=False)`
动作序列识别	结合 LSTM 或 Transformer 对关键点序列建模
数据导出	将关键点坐标保存为 CSV 或 JSON 文件供分析

6. 总结

6.1 核心收获回顾

通过本教程，我们成功实现了：

✅ 基于MediaPipe Pose的高精度人体骨骼关键点检测
✅ 构建了完整的本地化 Web 应用，支持图像上传与可视化反馈
✅ 掌握了从模型调用、Web 接口开发到前端展示的全流程
✅ 为智能健身 APP 提供了可落地的技术原型

该项目具备轻量、快速、稳定、可扩展四大优势，特别适合部署在边缘设备或作为移动端 AI 功能模块。

6.2 下一步学习建议

学习 MediaPipe Hands / Face Mesh 模块，实现手势控制或表情识别
尝试将模型转换为 TFLite 格式，部署到 Android/iOS 设备
结合 OpenCV 实现视频流实时处理
使用 PyTorch/TensorFlow 构建自定义动作分类器

💡获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

MediaPipe Pose实战教程：构建智能健身APP