如何在ml5.js中使用Teachable Machine训练的姿态识别模型？

你之前调用的ml5.imageClassifier仅支持Teachable Machine图像分类项目导出的模型，姿态项目训练的模型输入是人体关键点特征而非原始图像，所以不能直接调用该接口加载。

实现逻辑 #

• 先通过PoseNet提取摄像头画面中的人体姿态17个关键点坐标
• 将坐标做归一化处理后，作为输入传给你训练的Teachable Machine姿态分类模型
• 得到分类结果后输出即可

完整实现代码 #

HTML部分（引入依赖+页面元素） #

<!-- 依赖可下载到本地后替换为本地路径，无需外部跳转 -->
<script src="tf.min.js"></script>
<script src="ml5.min.js"></script>
<video id="webcam" autoplay playsinline width="640" height="480"></video>
<div id="result"></div>

JS逻辑部分 #

// 替换为你自己的姿态模型导出后model.json的访问路径
const poseModelURL = '你的姿态模型路径/model.json';
let poseNet, poseClassifier, video;

async function start() {
  // 初始化摄像头
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: { width: 640, height: 480 }
  });
  video = document.getElementById('webcam');
  video.srcObject = stream;
  await video.play();

  // 加载PoseNet用于提取人体关键点
  poseNet = ml5.poseNet(video, { detectionType: 'single' }, () => {
    console.log('PoseNet加载完成');
  });

  // 加载你训练的姿态分类模型
  poseClassifier = await tf.loadLayersModel(poseModelURL);
  console.log('姿态分类模型加载完成');

  // 启动识别循环
  detectLoop();
}

async function detectLoop() {
  // 检测单个人体关键点
  const poses = await poseNet.estimatePoses(video);
  if (poses.length > 0) {
    const keypoints = poses[0].keypoints;
    // 处理关键点为模型要求的输入格式：提取x,y坐标并按摄像头分辨率归一化
    const input = keypoints.flatMap(kp => [kp.x / 640, kp.y / 480]);
    // 转换为张量输入模型
    const tensorInput = tf.tensor2d([input]);
    const predictions = await poseClassifier.predict(tensorInput).data();
    // 取置信度最高的结果
    const maxIndex = predictions.indexOf(Math.max(...predictions));
    // 替换为你训练时设置的分类标签列表，顺序需要和训练时完全一致
    const labels = ["姿态A", "姿态B", "姿态C"];
    document.getElementById("result").textContent = `${labels[maxIndex]}，置信度：${(predictions[maxIndex]*100).toFixed(2)}%`;
    // 清理张量避免内存泄漏
    tensorInput.dispose();
  }
  requestAnimationFrame(detectLoop);
}

// 页面加载完成后启动
window.addEventListener('DOMContentLoaded', start);

注意事项 #

• 导出模型时请选择Teachable Machine姿态项目下的「TensorFlow.js」格式导出包，解压后将路径替换到代码中对应位置
• 归一化时的宽高数值要和你摄像头设置的分辨率匹配
• 如果环境不允许加载外部CDN，可将tfjs和ml5的js文件下载到本地后自行引入

内容的提问来源于stack exchange，提问作者shuyin2