TensorFlowJS model converted from GoogleColab has different probabilities values in prediction result (using angular with tfjs)

user_16902178 0
Viewed 182

I'm new to TensorFlowJS. I've used the Google Colab to create and train a model using TensorFlow Lite Model Maker, convert it to a TFJS, and then use it in an angular application.

In the colab, the model achieved high acuracity. I've saved the model using:

model.export(export_dir='.', export_format=ExportFormat.SAVED_MODEL);

and then I use

tfjs.converters.convert_tf_saved_model('saved_model','tfjsconvertido');

in order to obtain the tfjs. In the angular, i'm using:

async fazerPrevisao(modelo: tf.GraphModel){    
const batched = tf.tidy(() => {      
    const im = new Image();
    im.src = this.foto.webviewPath;
    im.height = 224;
    im.width = 224;        
    const imagem = tf.cast(tf.browser.fromPixels(im).reshape([-1,224,224,3]),'float32');        
    
  this.prediction = modelo.predict(imagem);
  this.prediction.print();
 });
}

The result in angular differs too much from Colab. In some cases, the result label is not correct, and even getting the right label, the values of probabilities are completely different. What could it be?

Thanks in advance.

tensorflow.js angular prediction
2 Answers
im.height = 224;
im.width = 224;

The image may not be resized properly. tf.image.resizeBilinear can be used for resizing.

const resized = tf.image.resizeBilinear(tf.browser.fromPixels(im), [224, 224]).expandDims()

It could also be that the image has not completely loaded when it is used

function load(url){
  return new Promise((resolve, reject) => {
    const im = new Image()
        im.crossOrigin = 'anonymous'
        im.src = 'url'
        im.onload = () => {
          resolve(im)
        }
   })
}

const image = await load(url)
let tensor = await tf.browser.fromPixels(image)

const resized = tf.image.resizeBilinear (tensor, [224, 224]).expandDims()

The resized tensor can now be used for the prediction

user_50699570

I've found a alternative to the problem changing the model exported. I've found the https://teachablemachine.withgoogle.com/train/image and there i've trained and exported the model to TFJS. In angular, i've installed the @teachablemachine/image and then changed the code in order to use this aproach:

...

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

...
model: tmImage.CustomMobileNet;
predictions: any;

const modelURL = 'URL/model.json';
const metadataURL = 'URL/metadata.json';

this.model = await tmImage.load(modelURL, metadataURL);

await this.fazerPrevisao(this.model);

async fazerPrevisao(modelo: tmImage.CustomMobileNet){
const im = new Image();
im.src = PATHOFTHEPHOTO;
im.height = 224;
im.width = 224;              
this.predictions = await this.model.predict(im,true);
console.log('Previsão: ',this.predictions);
}

the Probabilities now are pretty good. Thanks @edkeveked for the help!

user_169021780
Related