小白也能懂：AI手势识别Flask后端搭建，实现彩虹骨骼可视化

小白也能懂AI手势识别Flask后端搭建实现彩虹骨骼可视化1. 引言1.1 为什么需要手势识别想象一下不用触碰屏幕就能控制设备或者通过简单的手势与虚拟世界互动。这种科幻电影中的场景现在通过AI技术就能实现。本文将带你从零开始用Python和Flask搭建一个手势识别后端系统不仅能识别手部21个关键点还能生成酷炫的彩虹骨骼可视化效果。1.2 你将学到什么通过这篇教程你将掌握如何用MediaPipe库实现高精度手部关键点检测搭建Flask后端服务接收和处理图片设计彩虹骨骼可视化算法让手势更直观构建完整的REST API接口供前端调用1.3 项目特点这个项目特别适合初学者因为完全基于CPU运行不需要昂贵的GPU代码结构清晰每步都有详细解释包含完整的错误处理和优化建议最终效果直观有趣成就感满满2. 准备工作2.1 环境配置首先确保你的电脑安装了Python 3.7或更高版本。然后创建一个新文件夹作为项目目录建议命名为hand_tracking_api。2.2 安装必要库在项目文件夹中创建一个requirements.txt文件内容如下flask2.3.3 opencv-python4.8.0.74 mediapipe0.10.9 numpy1.24.3然后在终端运行pip install -r requirements.txt2.3 项目结构规划我们的项目将采用以下结构hand_tracking_api/ ├── app.py # Flask主程序 ├── utils/ │ └── hand_tracker.py # 手势识别核心代码 ├── static/ │ └── uploads/ # 存储上传的图片 └── templates/ └── index.html # 简单的测试页面3. 核心手势识别实现3.1 MediaPipe Hands简介MediaPipe是Google开发的一个跨平台机器学习框架其中的Hands模型专门用于手部关键点检测。它能识别21个3D关键点包括指尖、指节和手腕位置。3.2 创建手势识别类在utils/hand_tracker.py中我们创建一个HandTracker类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)]3.3 实现彩虹骨骼绘制添加绘制彩虹骨骼的方法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 image3.4 完整图片处理方法添加处理图片的完整方法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 {landmarks: [], message: 未检测到手部} output_image image.copy() all_landmarks [] for hand_landmarks in results.multi_hand_landmarks: # 提取关键点坐标 landmarks [ {x: lm.x, y: lm.y, z: lm.z} for lm in hand_landmarks.landmark ] all_landmarks.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 { landmarks: all_landmarks, result_image: output_path, hand_count: len(all_landmarks) }4. Flask后端搭建4.1 创建Flask应用在app.py中设置基本Flask应用from flask import Flask, request, jsonify, send_file 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_FOLDER4.2 实现API接口添加处理上传图片的API端点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) try: # 处理图片并返回结果 result tracker.process_image(filepath) if error in result: return jsonify(result), 400 return jsonify(result) except Exception as e: return jsonify({error: str(e)}), 5004.3 添加结果图片访问接口app.route(/result/filename) def result_image(filename): return send_file(fstatic/uploads/{filename})4.4 启动应用if __name__ __main__: app.run(host0.0.0.0, port5000)5. 测试与使用5.1 运行服务在终端运行python app.py服务将在http://localhost:5000启动。5.2 测试API你可以使用Postman或curl测试APIcurl -X POST -F fileyour_image.jpg http://localhost:5000/api/track5.3 简单Web界面在templates/index.html中创建一个简单的测试页面!DOCTYPE html html headtitle手势识别测试/title/head body h2上传手部图片/h2 form action/api/track methodpost enctypemultipart/form-data input typefile namefile acceptimage/* required button typesubmit分析手势/button /form p试试比耶、点赞或张开手掌等手势/p /body /html6. 优化与扩展6.1 性能优化建议调整图片大小处理前将大图缩小到640x480左右限制检测手数如果只需要单手设置max_num_hands1使用缓存对相同图片可以缓存处理结果6.2 安全增强限制文件类型只允许jpg/png检查文件大小拒绝过大的文件重命名上传文件防止路径遍历攻击6.3 扩展思路添加手势分类识别特定手势如OK、胜利等支持视频流实时处理摄像头输入增加3D可视化利用z坐标展示深度信息7. 总结7.1 项目回顾通过本教程我们完成了基于MediaPipe的手势关键点检测创新的彩虹骨骼可视化实现完整的Flask后端API搭建简单的前端测试界面7.2 实际应用这个系统可以用于无接触式设备控制虚拟现实交互手语识别智能家居控制7.3 下一步学习想进一步探索AI应用开发可以尝试添加更多手势识别功能部署到云服务器提供在线服务结合其他AI模型如姿势识别获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。