Search code examples
javascripttensorflowneural-networkhtml5-videoml5.js

ml5.js gives: Cannot read property 'shape' of undefined on featureExtractor.regression.train for video (ML5.JS)


Using javascript I'm trying to use ml5.js version 0.5.0 to detect if I'm beginning, middle or end within a video. Yes I know I can do this other ways but I would like to do this using ML. So for example I am adding a beginning image at 0 a middle image at duration/2 and a end image at duration. Adding these images seems to work i.e the callback for add image is not returning an error. The issue that I keep running into is when I attempt to train() with these added images using the MobileNet model as my base I get the following stacktrace:

`backend_webgl.ts:918 Uncaught (in promise) TypeError: Cannot read property 'shape' of undefined
    at t.fusedBatchMatMul (backend_webgl.ts:918)
    at tf-core.esm.js:17
    at engine.ts:462
    at t.scopedRun (engine.ts:404)
    at t.runKernel (engine.ts:459)
    at matMul_ (tf-core.esm.js:17)
    at Object.matMul (tf-core.esm.js:17)
    at bt (tf-layers.esm.js:17)
    at tf-layers.esm.js:17
    at engine.ts:393`

I'm not doing anything impressive when configuring ml5:

loading the model and create regression:

`this["mlsExtractor"] = ml5["featureExtractor"]('MobileNet', this.extractorLoaded.bind(this));`
`extractorLoaded() {
        var video = getVideo();
        console.log("extractor loaded...");
          this["regressor"] = this["mlsExtractor"].regression(video, function () {
            console.log("ml5 regressor loaded...");
            this["mlsloaded"] = true;
        }.bind(this));
    }`

Add Images from video. Res is returning something. Wanted to mention that if I dont pass video to addImage I get an error about the size of the image being incorrect. Not sure if that's related or not.

`var video = this.getVideo();

        if (this["mlsloaded"] && this["regressor"]) {
            this["regressor"].addImage(video, 'finish', function (err, res) {
                if(err){
                    console.log("error", err);
                    return;
                }
                console.log("res", res)
            });
        }else{
            console.log("ml5 not loaded yet...")
        }`

After I've added at least 3 or more images I hit train button. I've noticed that less than 2 gives errors as well so Ive tried training with up to 30 and still no joy.

`this["regressor"].train(function (loss) {
                console.log("training", loss);
            });`

This is where I'm seeing that stacktrace. I'm new to ml, tensorflow.js, and ml5js. I've been looking at similar examples (https://www.openprocessing.org/sketch/565628) doing this type of task but I'm finding the documentation lacking. Looks to be WIP on ml5js.org.

Any help is appreciated!!

Forgot to mention. After hitting train and seeing that stacktrace I'm able to save the model. Not sure if it would be anyhelp to someone but just putting that out there. As it seems odd that train would fail but still create a model.


Solution

  • Ok so I figured out what was happening here. I had both latest of ml5.js and tensorflow.js loaded into my UI. It turns out lastest of tensorflow.js causing conflicts with some of the function calls within ml5.js. Fix for this was to down grade tensorflow.js to version 1.0.0. Hope this helps someone else someday :)