零基础部署AI手势识别：基于Flask的彩虹骨骼API快速搭建指南

零基础部署AI手势识别基于Flask的彩虹骨骼API快速搭建指南1. 引言1.1 学习目标本教程将带你从零开始搭建一个AI手势识别系统基于MediaPipe Hands模型实现21个3D手部关键点检测并通过Flask框架封装为可调用的API服务。你将学会如何快速部署MediaPipe Hands模型实现彩虹骨骼可视化效果构建完整的Flask后端服务通过API接口进行手势识别将系统部署为可访问的Web应用1.2 前置知识本教程面向零基础开发者只需具备基本的Python编程能力了解命令行操作熟悉简单的Web概念无需GPU设备所有操作都可在普通CPU上完成。1.3 教程价值不同于简单的模型演示本教程提供完整的工程化解决方案可直接用于生产环境的代码详细的错误处理和性能优化建议创新的彩虹骨骼可视化效果一键部署的Web服务2. 环境准备与快速部署2.1 系统要求Python 3.7pip包管理工具任意操作系统Windows/Linux/macOS2.2 安装依赖创建并激活Python虚拟环境python -m venv hand_tracking_env source hand_tracking_env/bin/activate # Linux/macOS hand_tracking_env\Scripts\activate # Windows安装所需依赖pip install flask opencv-python mediapipe numpy2.3 项目结构创建以下目录结构hand_tracking_api/ ├── app.py ├── utils/ │ └── hand_tracker.py ├── static/ │ └── uploads/ └── templates/ └── index.html3. 核心代码实现3.1 手势识别模块创建utils/hand_tracker.py文件import cv2 import mediapipe as mp import numpy as np class HandTracker: def __init__(self): self.mp_hands mp.solutions.hands self.hands self.mp_hands.Hands( static_image_modeTrue, max_num_hands2, min_detection_confidence0.6 ) # 彩虹颜色定义BGR格式 self.finger_colors [ (0, 255, 255), # 黄拇指 (128, 0, 128), # 紫食指 (255, 255, 0), # 青中指 (0, 255, 0), # 绿无名指 (0, 0, 255) # 红小指 ] # 每根手指的关键点范围 self.finger_segments [(1,4), (5,8), (9,12), (13,16), (17,20)] def draw_rainbow_skeleton(self, image, landmarks): h, w image.shape[:2] points [(int(lm.x * w), int(lm.y * h)) for lm in landmarks] # 绘制白点所有关节 for x, y in points: cv2.circle(image, (x, y), 5, (255, 255, 255), -1) # 绘制彩色骨骼 for idx, (start, end) in enumerate(self.finger_segments): color self.finger_colors[idx] for i in range(start, end): cv2.line(image, points[i], points[i1], color, 2) return image def process_image(self, image_path): image cv2.imread(image_path) if image is None: return {error: 无法读取图像} rgb_image cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results self.hands.process(rgb_image) if not results.multi_hand_landmarks: return {message: 未检测到手部} output_image image.copy() landmarks_data [] for hand_landmarks in results.multi_hand_landmarks: landmarks [{x: lm.x, y: lm.y, z: lm.z} for lm in hand_landmarks.landmark] landmarks_data.append(landmarks) output_image self.draw_rainbow_skeleton(output_image, hand_landmarks.landmark) output_path image_path.replace(uploads/, uploads/result_) cv2.imwrite(output_path, output_image) return { hand_count: len(landmarks_data), landmarks: landmarks_data, result_image: output_path }3.2 Flask主程序创建app.py文件from flask import Flask, request, jsonify, send_file, render_template import os from utils.hand_tracker import HandTracker app Flask(__name__) tracker HandTracker() UPLOAD_FOLDER static/uploads os.makedirs(UPLOAD_FOLDER, exist_okTrue) app.config[UPLOAD_FOLDER] UPLOAD_FOLDER app.route(/) def index(): return render_template(index.html) app.route(/api/track, methods[POST]) def track_hand(): if file not in request.files: return jsonify({error: 请上传文件}), 400 file request.files[file] if file.filename : return jsonify({error: 未选择文件}), 400 if file: filename file.filename filepath os.path.join(app.config[UPLOAD_FOLDER], filename) file.save(filepath) result tracker.process_image(filepath) if error in result: return jsonify(result), 400 return jsonify(result) app.route(/result/filename) def get_result(filename): return send_file(fstatic/uploads/{filename}) if __name__ __main__: app.run(host0.0.0.0, port5000)3.3 前端测试页面创建templates/index.html!DOCTYPE html html head title手势识别测试/title style body { font-family: Arial; max-width: 800px; margin: 0 auto; padding: 20px; } .container { display: flex; gap: 20px; } .upload-box { border: 2px dashed #ccc; padding: 20px; text-align: center; } button { padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; } img { max-width: 100%; } /style /head body h1AI手势识别测试/h1 div classcontainer div classupload-box h3上传手部照片/h3 form iduploadForm enctypemultipart/form-data input typefile namefile acceptimage/* required / brbr button typesubmit分析手势/button /form /div div idresultContainer styledisplay: none; h3分析结果/h3 img idresultImage src alt结果图像 / p idresultText/p /div /div script document.getElementById(uploadForm).addEventListener(submit, async (e) { e.preventDefault(); const formData new FormData(e.target); try { const response await fetch(/api/track, { method: POST, body: formData }); const data await response.json(); if (data.error) { alert(data.error); return; } document.getElementById(resultImage).src /result/ data.result_image.split(/).pop(); document.getElementById(resultText).textContent 检测到 ${data.hand_count} 只手21个关键点已标记; document.getElementById(resultContainer).style.display block; } catch (err) { alert(处理出错: err.message); } }); /script /body /html4. 运行与测试4.1 启动服务在项目根目录运行python app.py服务将在http://localhost:5000启动。4.2 API接口测试使用curl测试APIcurl -X POST -F fileyour_image.jpg http://localhost:5000/api/track成功响应示例{ hand_count: 1, landmarks: [ [ {x: 0.512, y: 0.603, z: -0.021}, // ...其他20个关键点 ] ], result_image: static/uploads/result_your_image.jpg }4.3 测试建议推荐测试以下手势张开手掌验证所有手指是否被正确识别比耶手势检查食指和中指分离效果握拳测试模型对重叠手指的处理能力点赞手势观察拇指的独立追踪效果5. 常见问题解决5.1 图像无法上传检查static/uploads目录是否存在且有写入权限确认上传的文件是有效的图片格式JPEG/PNG文件大小不超过服务器限制默认无限制5.2 检测效果不佳确保手部在图像中清晰可见尝试调整手部角度和光照条件可适当降低min_detection_confidence参数值5.3 服务无法启动检查端口5000是否被占用确认所有依赖已正确安装查看Python版本是否为3.76. 总结6.1 核心收获通过本教程你已经成功部署了MediaPipe Hands手势识别模型实现了创新的彩虹骨骼可视化效果构建了完整的Flask API服务创建了简单的前端测试界面掌握了手势识别系统的完整部署流程6.2 进阶方向添加视频流处理功能实现特定手势的识别和分类集成到移动应用中开发基于手势的交互应用获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。