Il risultato della previsione di Tensorflow.js non cambia

Question

Ho addestrato il mio modello con Google Teachable Machines (immagine) e ho incluso il modello nella mia app Ionic Angular. Ho caricato il modello con successo e ho utilizzato l'anteprima della fotocamera per prevedere la classe mostrata nell'immagine dalla fotocamera. L'immagine visualizzata nell'area di disegno cambia correttamente, ma il metodo Forecast () - restituisce lo stesso risultato per ogni chiamata.

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();
   });
}

Il risultato della previsione è ad esempio: class1 = 0.34, class2 = 0.66 ma non cambia. Spero che tu possa aiutarmi a trovare il mio bug, grazie in anticipo!

Answer 1

L'immagine probabilmente non è stata ancora caricata prima di chiamare il modello di previsione. È stato discusso qua e là

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