ReactJS应用无法解析自定义TFJS目标检测模型预测张量输出

硬编码索引4/5/6提取检测结果的逻辑不成立——不同版本TF Object Detection API导出、经转换器生成的TFJS模型，输出张量顺序没有统一固定值，靠索引取值很容易错位。按以下步骤处理即可：

1 按张量名匹配输出，不要依赖固定索引 #

不要预设输出位置，加载模型后先通过张量名称匹配对应结果，兼容不同导出版本的输出顺序：

// 执行推理，input为完成预处理的模型输入张量
const rawPredictions = await model.executeAsync(input);
let detectionBoxes, detectionScores, detectionClasses, validCount;

// 遍历所有输出张量，按名称匹配对应字段
for (const tensor of rawPredictions) {
  const name = tensor.name.toLowerCase();
  if (name.includes('detection_boxes')) detectionBoxes = tensor;
  if (name.includes('detection_scores')) detectionScores = tensor;
  if (name.includes('detection_classes')) detectionClasses = tensor;
  if (name.includes('num_detections')) validCount = tensor;
}

绝大多数用TF2.x OD API训练导出的模型，输出顺序为[num_detections, detection_boxes, detection_classes, detection_scores]，对应索引0-3，和旧模板里的索引4/5/6完全错位，这是取值失败的核心原因

2 提取有效检测结果，处理张量维度 #

模型输出默认带batch维度，且包含大量低于阈值的冗余结果，需要先压缩维度、按有效检测数截断：

// 提取实际有效检测的数量
const validDetectionNum = Math.round((await validCount.data())[0]);

// 去掉batch维度，截断到有效检测范围，转为普通JS数组
const boxes = (await detectionBoxes.squeeze().array()).slice(0, validDetectionNum);
const scores = (await detectionScores.squeeze().array()).slice(0, validDetectionNum);
const classes = (await detectionClasses.squeeze().array()).slice(0, validDetectionNum);

// 立即释放所有推理返回的张量，避免内存泄漏
rawPredictions.forEach(t => t.dispose());

3 坐标转换并绘制检测框 #

模型输出的检测框是归一化格式[ymin, xmin, ymax, xmax]，取值范围0-1，需要先转成画布对应像素坐标再绘制：

const ctx = canvas.getContext('2d');
// 先清空画布，绘制当前视频帧
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

// 置信度阈值，可根据需求调整
const CONFIDENCE_THRESHOLD = 0.5;
scores.forEach((score, idx) => {
  if (score < CONFIDENCE_THRESHOLD) return;
  // 解析归一化坐标
  const [ymin, xmin, ymax, xmax] = boxes[idx];
  // 转换为画布像素坐标
  const x = xmin * canvas.width;
  const y = ymin * canvas.height;
  const boxWidth = (xmax - xmin) * canvas.width;
  const boxHeight = (ymax - ymin) * canvas.height;

  // 绘制检测框
  ctx.strokeStyle = '#22c55e';
  ctx.lineWidth = 2;
  ctx.strokeRect(x, y, boxWidth, boxHeight);

  // 绘制标签（注意：模型输出类别id默认从1开始，对应标签表要减1匹配）
  const label = `${classLabelMap[classes[idx] - 1]} ${(score * 100).toFixed(1)}%`;
  ctx.fillStyle = '#22c55e';
  ctx.font = '14px sans-serif';
  ctx.fillText(label, x, y > 14 ? y - 4 : y + 14);
});

常见问题排查 #

• 如果匹配不到对应张量，先打印model.outputNodes查看模型实际暴露的输出节点名，调用model.executeAsync(input, ['输出节点名1','输出节点名2'...])指定输出节点，避免拿到多余中间张量
• 确认推理前预处理逻辑和训练时完全一致：包括输入尺寸、像素值归一化范围（是0-1还是-1到1）、通道顺序（RGB/BGR），预处理错误会导致检测结果完全失效
• 类别id默认从1开始计数，直接用返回值做标签表索引会出现错位
• 所有TFJS张量用完必须手动调用dispose()，否则会出现内存泄漏，页面运行一段时间后会卡顿崩溃

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