How to fix Tensor shape error for Tensorflow JS?

Viewed 21

I'm trying to implement Tensorflow.js into React.js for object detection, but I'm getting a Tensor shape error every time I try using a local downloaded model for prediction. This is the error:

Uncaught (in promise) Error: Error in concat4D: Shape of tensors[1] (1,3,207,208) does not match the shape of the rest (1,3,208,208) along the non-concatenated axis 1

Currently, I'm trying to use an Onnx model type and to make it work, I converted from Onnx -> Tensorflow Saved Model with Onnx-Tensorflow Convertor and then from TF Saved Model -> TF Graph Layers Model using TFJS convertor. These conversions were all in the command line. Code for loading the model in React.js:

const run = async () => {
    readyAPIData();
    const net = await tf.loadGraphModel(process.env.PUBLIC_URL + "/prodmodel/result/model.json");
    console.log(net);
    setInterval(() => {
        if(detectFlag.current === true){
            detect(net);
        }
    }, 100);
};

Code for detect function which uses react-webcam to get video element for predictions and then converting that to tensor for predictions. The model expects the tensor to be in shape [-1 3 416 416].

const detect = async (net) => {
    detectFlag.current = false;
    if (
        typeof webcamRef.current !== "undefined" &&
        webcamRef.current !== null &&
        webcamRef.current.video.readyState === 4
    ){
        console.log("hello")
        const screen = webcamRef.current.getScreenshot();
        const video = webcamRef.current.video;
        const videoWidth = webcamRef.current.video.videoWidth;
        const videoHeight = webcamRef.current.video.videoHeight;

        // video height/width
        webcamRef.current.video.width = videoWidth;
        webcamRef.current.video.height = videoHeight;

        // canvas height/width
        canvasRef.current.width = videoWidth;
        canvasRef.current.height = videoHeight;

        // 4. TODO - Make Detections
        console.log("image");

        const img = tf.browser.fromPixels(video);
        console.log(img);
        img.print();
        
        console.log("Resized");
        const resized = tf.image.resizeBilinear(img, [416, 416]);
        console.log(resized);
        resized.print();

        const resh = resized.reshape([3, 416, 416]);
        console.log(resh);

        console.log("Casted");
        const casted = resh.cast('float32')
        console.log(casted);

        // -1 by 3 by 416 by 416
        console.log("Expanded");
        const expanded = casted.expandDims(0);
        console.log(expanded);

        console.log("testing");
        expanded.array().then(array => console.log(array));

        console.log("Object");
        const obj = await net.executeAsync(expanded)
        console.log(obj)

        const boxes = await obj[1].array()
        const classes = await obj[2].array()
        const scores = await obj[4].array()
        
        // Draw mesh
        const ctx = canvasRef.current.getContext("2d");

        // 5. TODO - Update drawing utility
        // drawSomething(obj, ctx)  
        requestAnimationFrame(()=>{drawRectNet(boxes[0], classes[0], scores[0], 0.8, videoWidth, videoHeight, ctx)}); 

        tf.dispose(img)
        tf.dispose(resized)
        tf.dispose(casted)
        tf.dispose(expanded)
        tf.dispose(obj)
    }
    detectFlag.current = true;
};
0 Answers
Related