手势识别系统搭建：MediaPipe Hands+Flask完整项目-洪萨配资

手势识别系统搭建：MediaPipe Hands+Flask完整项目

1. 引言：AI 手势识别与追踪

随着人机交互技术的不断发展，手势识别正逐步成为智能设备、虚拟现实、增强现实和智能家居等场景中的核心感知能力。传统的触摸或语音交互方式在特定环境下存在局限，而基于视觉的手势识别则提供了更自然、直观的交互体验。

本项目聚焦于构建一个轻量级、高精度、本地化运行的手势识别系统，结合 Google 的MediaPipe Hands模型与 Python Web 框架Flask，实现从图像输入到手部关键点检测、再到“彩虹骨骼”可视化输出的全流程闭环。系统完全基于 CPU 运行，无需 GPU 支持，也不依赖网络下载模型，极大提升了部署稳定性与启动效率。

该方案特别适用于教育演示、原型开发、边缘计算设备部署等对环境依赖敏感的场景，真正做到了“开箱即用”。

2. 技术架构与核心组件解析

2.1 MediaPipe Hands 模型原理

MediaPipe 是 Google 开发的一套跨平台机器学习管道框架，其中Hands 模型专为手部关键点检测设计，采用两阶段检测机制：

手部区域定位（Palm Detection）
使用 SSD（Single Shot MultiBox Detector）结构在整张图像中快速定位手掌区域。这一阶段不依赖手指姿态，因此即使手部部分遮挡也能有效检测。
关键点回归（Hand Landmark Regression）
在裁剪出的手掌区域内，通过回归网络预测21 个 3D 关键点坐标（x, y, z），覆盖拇指、食指、中指、无名指、小指及手腕的关键关节。

📌为何选择 MediaPipe？- 支持单/双手同时检测 - 输出包含深度信息（z 坐标） - 轻量化模型适合移动端和 CPU 推理 - 官方持续维护，API 稳定

2.2 彩虹骨骼可视化算法设计

标准 MediaPipe 可视化仅使用单一颜色绘制连接线，难以区分各手指状态。为此，我们实现了定制化的“彩虹骨骼”渲染逻辑，为每根手指分配独立颜色通道：

手指	颜色	RGB 值
拇指	黄色	(255, 255, 0)
食指	紫色	(128, 0, 128)
中指	青色	(0, 255, 255)
无名指	绿色	(0, 255, 0)
小指	红色	(255, 0, 0)

# rainbow_skeleton.py import cv2 import mediapipe as mp def draw_rainbow_connections(image, landmarks, connections): h, w, _ = image.shape finger_colors = [ (255, 255, 0), # 拇指 - 黄 (128, 0, 128), # 食指 - 紫 (0, 255, 255), # 中指 - 青 (0, 255, 0), # 无名指 - 绿 (255, 0, 0) # 小指 - 红 ] # 各手指对应的连接索引（根据 MediaPipe 定义） finger_indices = [ [0,1,2,3,4], # 拇指 [0,5,6,7,8], # 食指 [0,9,10,11,12], # 中指 [0,13,14,15,16], # 无名指 [0,17,18,19,20] # 小指 ] for i, indices in enumerate(finger_indices): color = finger_colors[i] for j in range(len(indices)-1): start_idx = indices[j] end_idx = indices[j+1] start_point = ( int(landmarks[start_idx].x * w), int(landmarks[start_idx].y * h) ) end_point = ( int(landmarks[end_idx].x * w), int(landmarks[end_idx].y * h) ) cv2.line(image, start_point, end_point, color, 2) # 绘制关键点 for landmark in landmarks: cx, cy = int(landmark.x * w), int(landmark.y * h) cv2.circle(image, (cx, cy), 3, (255, 255, 255), -1) # 白点表示关节

此代码段实现了按手指分组绘制彩色骨骼线，并以白色圆点标注所有 21 个关键点，显著提升可读性与科技感。

3. Flask Web服务集成与接口设计

3.1 项目目录结构

hand_tracking_web/ ├── app.py # Flask 主程序 ├── static/ │ └── uploads/ # 用户上传图片存储 ├── templates/ │ └── index.html # 前端页面 ├── utils/ │ ├── hand_detector.py # MediaPipe 封装类 │ └── rainbow_skeleton.py # 彩虹骨骼绘制模块 └── requirements.txt

3.2 Flask 核心路由实现

# app.py from flask import Flask, request, render_template, send_from_directory import os import cv2 from utils.hand_detector import HandDetector app = Flask(__name__) UPLOAD_FOLDER = 'static/uploads' os.makedirs(UPLOAD_FOLDER, exist_ok=True) detector = HandDetector() @app.route('/') def index(): return render_template('index.html') @app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files: return 'No file uploaded', 400 file = request.files['file'] if file.filename == '': return 'No selected file', 400 input_path = os.path.join(UPLOAD_FOLDER, 'input.jpg') output_path = os.path.join(UPLOAD_FOLDER, 'output.jpg') file.save(input_path) # 读取图像并进行手势检测 image = cv2.imread(input_path) result_image = detector.detect_and_draw(image) cv2.imwrite(output_path, result_image) return send_from_directory('static/uploads', 'output.jpg', mimetype='image/jpeg') if __name__ == '__main__': app.run(host='0.0.0.0', port=5000, debug=False)

3.3 前端 HTML 页面设计

<!-- templates/index.html --> <!DOCTYPE html> <html> <head> <title>🖐️ AI 手势识别 - 彩虹骨骼版</title> <style> body { font-family: Arial; text-align: center; margin-top: 50px; } .container { max-width: 800px; margin: auto; } img { max-width: 100%; border: 1px solid #ddd; margin: 10px 0; } .upload-btn { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; font-size: 16px; } </style> </head> <body> <div class="container"> <h1>🖐️ AI 手势识别与追踪</h1> <p>上传一张包含手部的照片，系统将自动绘制彩虹骨骼图。</p> <form id="uploadForm" method="POST" enctype="multipart/form-data"> <input type="file" name="file" accept="image/*" required /> <br><br> <button type="submit" class="upload-btn">分析手势</button> </form> <div id="result"></div> </div> <script> document.getElementById('uploadForm').onsubmit = async (e) => { e.preventDefault(); const formData = new FormData(e.target); const res = await fetch('/upload', { method: 'POST', body: formData }); if (res.ok) { const url = '/uploads/output.jpg?' + new Date().getTime(); document.getElementById('result').innerHTML = `<h3>✅ 分析完成</h3><img src="${url}" />`; } else { alert('处理失败，请重试'); } }; </script> </body> </html>

前端采用原生 JavaScript 实现无刷新上传，用户体验流畅。

4. 性能优化与工程实践建议

4.1 CPU 推理加速技巧

尽管 MediaPipe 默认支持 CPU 推理，但在资源受限设备上仍需进一步优化：

降低输入分辨率：将图像缩放至 480p 或更低，减少计算量
启用缓存机制：对静态图像避免重复推理
异步处理队列：防止高并发请求阻塞主线程

# utils/hand_detector.py import mediapipe as mp import cv2 class HandDetector: def __init__(self, static_image_mode=False, max_num_hands=2, min_detection_confidence=0.5): self.mp_hands = mp.solutions.hands self.hands = self.mp_hands.Hands( static_image_mode=static_image_mode, max_num_hands=max_num_hands, min_detection_confidence=min_detection_confidence, model_complexity=0 # 轻量级模型（0: Lite, 1: Full） ) self.mp_drawing = mp.solutions.drawing_utils def detect_and_draw(self, image): # 转换为 RGB rgb_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = self.hands.process(rgb_image) if results.multi_hand_landmarks: for landmarks in results.multi_hand_landmarks: draw_rainbow_connections(image, landmarks.landmark, self.mp_hands.HAND_CONNECTIONS) return image

⚙️model_complexity=0显著降低模型参数量，更适合 CPU 推理。

4.2 部署稳定性保障

预打包模型文件：将.tflite模型嵌入库中，避免首次运行时下载失败
异常捕获机制：python try: result_image = detector.detect_and_draw(image) except Exception as e: print(f"[ERROR] 手势检测失败: {str(e)}") return "Internal Server Error", 500
Docker 化部署：统一环境依赖，确保跨平台一致性

# Dockerfile FROM python:3.9-slim WORKDIR /app COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . EXPOSE 5000 CMD ["python", "app.py"]