Tensorflow.js 预测结果不变

Question

我使用 Google Teachable Machines (Image) 训练了我的模型，并将该模型包含在我的 Ionic Angular 应用程序中。我成功加载了模型并使用相机预览来预测相机图像中显示的类。 画布中显示的图片会正确更改，但 predict() 方法每次调用都会返回相同的结果。

import * as tmImage from '@teachablemachine/image';
...

async startPrediction() {
   this.model = await tmImage.load(this.modelURL, this.metadataURL);
   this.maxPredictions = this.model.getTotalClasses();
   console.log('classes: ' + this.maxPredictions); //works properly

   requestAnimationFrame(() => {
     this.loop();
   });
}


async loop() {
   const imageAsBase64 = await this.cameraPreview.takeSnapshot({ quality: 60 });
   const canvas = document.getElementById('output') as HTMLImageElement;
   //image changes properly, I checked it with a canvas output
   canvas.src = 'data:image/jpeg;base64,' + imageAsBase64; 

   const prediction = await this.model.predict(canvas);
   for (let i = 0; i < this.maxPredictions; i++) {
     const classPrediction =
       prediction[i].className + ': ' + prediction[i].probability.toFixed(2);
      //probability doesn't change, even if I hold the camera close over a trained image
   }

   requestAnimationFrame(() => {
      this.loop();
   });
}

预测结果例如：class1 = 0.34, class2 = 0.66 但不会改变。 我希望你能帮助我找到我的错误，提前谢谢！

Answer 1

在您调用预测模型之前，图像可能尚未加载。已经讨论过here和there

function load(url){
  return new Promise((resolve, reject) => {
     canvas.src = url
     canvas.onload = () => {
          resolve(canvas)
        }   
   })
}

await load(base64Data)
// then the image can be used for prediction