tfjs: Error: TensorList shape mismatch: Shapes -1 and 3 must match - CONTINUE

I trained Kangaroo dataset again. I used this code below to convert javascript. This model is running my demo code not React. As a results, the model is OK. I think that React is problem. I didn’t use React before.

tensorflowjs_converter \
    --input_format=tf_saved_model \
    --output_format=tfjs_graph_model \
    --signature_name=serving_default \
    --saved_model_tags=serve \
    saved_model \
    web_model

I tried it. It is working. Thank you everyone.

Perfect!

https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.1.0/dist/tf.min.js

Sorry about that!! I just pushed some changes to fix the bounding boxes. I think it is better now. The Web App ran a little older version of the code, so it didn’t have that problem.

Try removing the homepage line from the package.json https://github.com/luke-iqt/SkyScan-Web-App/blob/main/package.json#L5 that will let you use the URL localhost:3000/

I think the tfjs-3.1.0 version works fine. However, I have not printed the model outputs on the screen yet. I can share when finished.

I pulled in some of Hugo’s code. I think the only major difference is that he was looking at different Output Tensor Arrays: I found the Classes, Scores and Boxes in these arrays: https://github.com/luke-iqt/SkyScan-Web-App/blob/main/src/App.js#L110 I think he was using 4,5,6 in the output array.

My model only had one class. You may need to adjust things. Probably best to put a Breakpoint and examine the output from the inference in the Chrome Web Developer panel. Your model could be outputing things differently.

I tested everything out, and it is working for me. I am using an SSD based Object Detection Model. I used the TF Obj Detect API 2.0 to retrain a MobileNet model. My web app is here: https://luke-iqt.github.io/SkyScan-Web-App/index.html And the source code is here: https://github.com/luke-iqt/SkyScan-Web-App

Please give me sometime. I’ll try this example and get back to you. Everyone is in trouble with this new version. Actually I’m thinking of a video conference to discuss.

I shared demo codes.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.0.0/dist/tf.min.js"></script>

const model_url = 'http://127.0.0.1:5502/web_ws/model.json';
console.log(model_url)

var model = undefined;
var vidHeight = 320;
var vidWidth = 320;

async function app() {

    const model = await tf.loadGraphModel(model_url);
    console.log('Model loaded');

    const img = document.getElementById('img');
    const tfImg = await tf.browser.fromPixels(img);

    const smallImg = await tf.image.resizeBilinear(tfImg, [vidHeight, vidWidth]);
    const resized = await tf.cast(smallImg, 'int32');
    var tf4d_ = await tf.tensor4d(Array.from(resized.dataSync()), [1, vidHeight, vidWidth, 3]);
    const tf4d = await tf.cast(tf4d_, 'int32');
    console.log('Preprocess completed');
    const predictions = await model.executeAsync(tf4d);

    console.log(predictions[0].dataSync())
    console.log(predictions[1].dataSync())
    console.log(predictions[2].dataSync())
    console.log(predictions[3].dataSync())
}

app();

However, older models are working. This is really interesting. Where are we doing wrong?

Any chance you can post a link to an SSD MobileNet V2 FPNLite 320x320 model that is working?

The models we just created do not work. I think a new update generated such an error while creating the model.

However, older models are working. This is really interesting. Where are we doing wrong?

The current package on NPM doesn’t included this change yet. If you are using NPM or the <script> tag to pull in the package it won’t have the change yet. I am not sure how to build and run the packages directly from Github, but if you figure that out, you should be able to try out the fix that has been merged in.

https://www.npmjs.com/package/@tensorflow/tfjs is still on ver 3.0.0

Same here. If anyone knows how to fix it, please share

I am getting the same:

Uncaught (in promise) Error: TensorList shape mismatch:  Shapes -1 and 3 must match
    at Module.assert (:3000/static/js/0.chunk.js:102327)
    at assertShapesMatchAllowUndefinedSize (:3000/static/js/0.chunk.js:40206)
    at TensorList.setItem (:3000/static/js/0.chunk.js:39991)
    at _callee2$ (:3000/static/js/0.chunk.js:41111)
    at tryCatch (:3000/static/js/0.chunk.js:141550)
    at Generator.invoke [as _invoke] (:3000/static/js/0.chunk.js:141769)
    at Generator.prototype.<computed> [as next] (:3000/static/js/0.chunk.js:141603)
    at asyncGeneratorStep (:3000/static/js/0.chunk.js:140798)
    at _next (:3000/static/js/0.chunk.js:140820)
    at :3000/static/js/0.chunk.js:140827
    at new Promise (<anonymous>)
    at Module.<anonymous> (:3000/static/js/0.chunk.js:140816)
    at Module.executeOp (:3000/static/js/0.chunk.js:41213)
    at :3000/static/js/0.chunk.js:47719
    at executeOp (:3000/static/js/0.chunk.js:47799)
    at _loop (:3000/static/js/0.chunk.js:38002)
    at GraphExecutor.processStack (:3000/static/js/0.chunk.js:38038)
    at GraphExecutor._callee4$ (:3000/static/js/0.chunk.js:37928)
    at tryCatch (:3000/static/js/0.chunk.js:141550)
    at Generator.invoke [as _invoke] (:3000/static/js/0.chunk.js:141769)
    at Generator.prototype.<computed> [as next] (:3000/static/js/0.chunk.js:141603)
    at asyncGeneratorStep (:3000/static/js/0.chunk.js:140798)
    at _next (:3000/static/js/0.chunk.js:140820)

Hi @JoaoSisanoski , can you try converting with the wizard and use 3.1.0 to run the model? If control_flow_v2=true, then it will use TensorList, which is the issue reported here. It is fixed in version 3.1.0.

I was having the same issue and I got it working after I decided to not use the tensorflowjs_wizard and run the tensorflowjs_converter straight away and it did work fine after that. I noticed that tensorflowjs_wizard adds an extra argument to the conversion. --control_flow_v2=True and for some reason, it was causing the issues for me

I trained Kangaroo dataset again. I used this code below to convert javascript. This model is running my demo code not React. As a results, the model is OK. I think that React is problem. I didn’t use React before.

tensorflowjs_converter \
    --input_format=tf_saved_model \
    --output_format=tfjs_graph_model \
    --signature_name=serving_default \
    --saved_model_tags=serve \
    saved_model \
    web_model

I trained Kangaroo dataset again. I used this code below to convert javascript. This model is running my demo code not React. As a results, the model is OK. I think that React is problem. I didn’t use React before.

tensorflowjs_converter \
    --input_format=tf_saved_model \
    --output_format=tfjs_graph_model \
    --signature_name=serving_default \
    --saved_model_tags=serve \
    saved_model \
    web_model

Thank you @umitkacar. I think it’s safe to say all goes well with tfjs in 3.1.0 for us now. We just can’t figure out the right way to deploy it in the broswer, I guess -.-

I tested everything out, and it is working for me. I am using an SSD based Object Detection Model. I used the TF Obj Detect API 2.0 to retrain a MobileNet model. My web app is here: https://luke-iqt.github.io/SkyScan-Web-App/index.html And the source code is here: https://github.com/luke-iqt/SkyScan-Web-App

I’ve managed to get my web model imported fine with your app. Nicely done. No moaning about any missing ‘backend’ now so probably that was just React playing? I must admit I’m not very skilled when it comes to React & debugging javascript . I was already investigating these 2 imports:

import '@tensorflow/tfjs-backend-cpu';
import '@tensorflow/tfjs-backend-webgl';

However no detections / detection boxes are rendered with my model as of yet 😃 Everything looks fine in Tensorboard’s eval though.

@AlexAndrascu Is my understanding correct that the same tfjs model was not being deployed correctly with Hugo’s React app but it works with Luke’s app ? Same model, different front end deployment method and it works ?

Indeed that’s how it looks like. 🤷

I’ve trained SSD MobileNet V2 FPNLite 320x320 model from the Tensorflow object detection zoo using the object detection API. Then converted it to tfjs, and after updating to tfjs 3.1.0 I now have a problem saying: Cannot read property ‘backend’ of undefined

Here is both the saved_model after training on two classes and the web_model that was converted: https://drive.google.com/drive/folders/1YtT2OHY0Ni6QgimQAWKgvWI6v2v2liZ_?usp=sharing

the code for loading the model to the browser and making the inference: loadGraphModel(“http://172.18.109.97:8080/model.json”).then(model.then(model) => { setModel(model); }); const runModel = async () => { const image = document.getElementById(‘image’); model.executeAsync(tf.browser.fromPixels(image).expandDims()).then(pred=>{ console.log(pred); }) }

Does anyone know how to fix it?

Same problem here

I’ve trained SSD MobileNet V2 FPNLite 320x320 model from the Tensorflow object detection zoo using the object detection API. Then converted it to tfjs, and after updating to tfjs 3.1.0 I now have a problem saying: Cannot read property ‘backend’ of undefined

Here is both the saved_model after training on two classes and the web_model that was converted: https://drive.google.com/drive/folders/1YtT2OHY0Ni6QgimQAWKgvWI6v2v2liZ_?usp=sharing

the code for loading the model to the browser and making the inference: loadGraphModel(“http://172.18.109.97:8080/model.json”).then(model => { setModel(model); }); const runModel = async () => { const image = document.getElementById(‘image’); model.executeAsync(tf.browser.fromPixels(image).expandDims()).then(pred=>{ console.log(pred); }) }

Does anyone know how to fix it?

I have a docker container and notebooks for building an objection detection model using TF 2.0 here: https://github.com/IQTLabs/SkyScan/tree/main/ml-model

I have some additional notebooks for converting it to TensorJS.

Other model is running:

https://github.com/KostaMalsev/ObjectDetection/tree/master/model/mobile_netv2/web_model2

"format": "graph-model", "generatedBy": "2.3.0", "convertedBy": "TensorFlow.js Converter v2.6.0",

It is working. This is old model.

https://github.com/hugozanini/TFJS-object-detection/tree/master/models/kangaroo-detector

I checked model.json . I noticed:

format": "graph-model", "generatedBy": "2.4.0", "convertedBy": "TensorFlow.js Converter v2.8.0"