Teachable Machine tensorflow.js预测HTML Canvas内容返回相同结果问题

你当前的代码存在两个核心错误导致预测结果固定：

• 调用model.predict(image)时传入的image变量未定义，你仅获取了canvas元素赋值给了canvas变量，实际传入预测方法的是不存在的变量，相当于每次输入都是固定的无效值，所以返回结果永远相同。
• Teachable Machine图像模型要求输入尺寸与训练时匹配，若canvas尺寸与模型要求的输入尺寸差异过大也会导致预测结果异常。

修改后的可运行代码如下：

const URL = "https://teachablemachine.withgoogle.com/models/S5O-110Gl/";

let model, labelContainer, maxPredictions;

// 点击按钮时预测画布上的绘制内容
document.getElementById('start').addEventListener('click', async function() {
  const modelURL = URL + "model.json";
  const metadataURL = URL + "metadata.json";

  // 加载模型和元数据
  model = await tmImage.load(modelURL, metadataURL);
  maxPredictions = model.getTotalClasses();

  var canvas = document.getElementById('myCanvas');
  // 核心修改：直接传入canvas元素作为预测输入，tmImage内置支持canvas作为输入源
  const prediction = await model.predict(canvas);
  console.log(prediction)
});

如果修改后仍然存在预测偏差，可以补充做以下适配：

• 确保canvas尺寸与模型训练时的输入尺寸一致，Teachable Machine默认训练的图像尺寸为224x224，可直接将canvas的宽高设置为224px。
• 也可以手动提取canvas的图像数据传入预测：

const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const prediction = await model.predict(imageData);

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