TensorflowJS: Error: The shape of dict['images'] provided in model.execute(dict) must be [-1,224,224,3], but was [400,600,1]

Question

I'm using mobilenet Neural Network from google to classify images. I'm using angular 6 + TensorFlow.js to build my image classifier app.

I'm trying to follow the steps provided by the tfjs-converter library readme and I came up with the following code:

import * as tf from '@tensorflow/tfjs';
import { FrozenModel } from '@tensorflow/tfjs';

export class NeuralNetwork {
    private MODEL_PATH: string = 'http://localhost:4200/assets/model/tensorflowjs_model.pb';
    private WEIGHTS_PATH: string = 'http://localhost:4200/assets/model/weights_manifest.json';
    constructor(){}
    async loadModel() {
        const localModel: FrozenModel = (await tf.loadFrozenModel(this.MODEL_PATH, this.WEIGHTS_PATH));
        let image: any = document.getElementById('cat');

        let pixels =  tf.fromPixels(image, 1);
        let result = localModel.predict(pixels);
        
    }
    async predict(){
        let image: any = document.getElementById('cat');
        debugger;
        this.model.execute({input: tf.fromPixels(image)});
    }
    
}

Image HTML Element:

<img id="cat" src="http://localhost:4200/assets/images/cat.jpg"/>

When I try to execute the localModel.predict(pixels) function, I get the following error:

Uncaught (in promise): Error: The shape of dict['images'] provided in model.execute(dict) must be [-1,224,224,3], but was [400,600,1]

I'm a newbie in Tensorflow and TensorFlow.js technologies. Any one know what I'm doing wrong?

Answer 1

Met the same problem, then found the solution in Github: Input appears to be wrong shape

const img = document.getElementById('myimg');
const tfImg = tf.fromPixels(img);
const smalImg = tf.image.resizeBilinear(tfImg, [368, 432]);
const resized = tf.cast(smalImg, 'float32');
const t4d = tf.tensor4d(Array.from(resized.dataSync()),[1,368,432,3])