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;
};