Considering that I recently started studying both TensorFlow and React, I ask you to help with an incomprehensible error that prevents the application (website) from being built.
The user downloads the neural network in tfjs format and can check its operation directly on the site page.
async function loadModel() {
try {
const tfModel = await tf.loadGraphModel(modelUrl);
setModel(tfModel);
console.log("set loaded Model");
} catch (err) {
console.log("failed load model");
}
return model
}
Model work and drawing frames around the object
async function predictionFunction() {
//Clear the canvas for each prediction
let context = document.getElementById("myCanvas");
if(context){
let ctx = context.getContext("2d");
ctx.clearRect(0, 0, webcamRef.current.video.videoWidth, webcamRef.current.video.videoHeight);
//Start prediction
const VIDEO = document.getElementById('img');
const tfImg = tf.browser.fromPixels(VIDEO);
//Create smaller image which fits the detection size
const smallImg = tf.image.resizeBilinear(tfImg, [MOBILE_NET_INPUT_WIDTH, MOBILE_NET_INPUT_HEIGHT]);
const resized = tf.cast(smallImg, 'int32');
const tf4d_ = tf.tensor4d(Array.from(resized.dataSync()), [1, MOBILE_NET_INPUT_WIDTH, MOBILE_NET_INPUT_HEIGHT, 3]);
const tf4d = tf.cast(tf4d_, 'int32');
const predict = await model.executeAsync(tf4d)
const predictionsCoord = predict[3].dataSync()
const confidence = predict[6].dataSync()
const bestConfidence = (confidence[0] * 100).toFixed(0)
console.log(bestConfidence)
const minY = (predictionsCoord[0] * videoHeight).toFixed(2);
const minX = (predictionsCoord[1] * videoWidth).toFixed(2);
const maxY = (predictionsCoord[2] * videoHeight).toFixed(2);
const maxX = (predictionsCoord[3] * videoWidth).toFixed(2);
const width_ = (maxX - minX).toFixed(2);
const height_ = (maxY - minY).toFixed(2);
ctx.beginPath()
ctx.rect(minX, minY, width_, height_)
ctx.lineWidth = 5
ctx.strokeStyle = 'yellow'
ctx.stroke()
smallImg.dispose();
resized.dispose();
tf4d.dispose();
setTimeout(() => {
predictionFunction()
}, 100);
}
}
Everything works fine on the local machine, but when I try to build the application I get an error
PS C:\Users\User\Desktop\siteai> npm run build
> siteai@0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
TypeError: C:\Users\User\Desktop\siteai\node_modules\@tensorflow\tfjs-core\dist\profiler.js: Cannot read properties of null (reading 'scope')
at Array.filter (<anonymous>)
Please help me figure out how to fix it.