Question

I am following this tutorial for building an object detection application using Tensorflow JS and React JS: https://www.youtube.com/watch?v=ZTSRZt04JkY&t=1474s. Despite having the exact same code, I got this error and found out that boxes[i] in utilities.js is not an array of 4 values but rather a single number.

Here is the full error (number changes based on the prediction):

Uncaught TypeError TypeError: number 26 is not iterable (cannot read property Symbol(Symbol.iterator)) at drawRect (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcutilities.js:39:1) at (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcApp.js:65:1) --- requestAnimationFrame --- at detect (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcApp.js:65:1) --- await --- at (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcApp.js:24:1) --- setInterval --- at runCoco (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcApp.js:23:1) --- await --- at (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcApp.js:76:1) at commitHookEffectListMount (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:23150:1) at commitPassiveMountOnFiber (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:24926:1) at commitPassiveMountEffects_complete (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:24891:1) at commitPassiveMountEffects_begin (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:24878:1) at commitPassiveMountEffects (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:24866:1) at flushPassiveEffectsImpl (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:27039:1) at flushPassiveEffects (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:26984:1) at (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:26769:1) at workLoop (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:266:1) at flushWork (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:239:1) at performWorkUntilDeadline (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:533:1) --- postMessage --- at schedulePerformWorkUntilDeadline (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:574:1) at performWorkUntilDeadline (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:538:1) --- postMessage --- at schedulePerformWorkUntilDeadline (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:574:1) at requestHostCallback (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:588:1) at unstable_scheduleCallback (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modulesschedulercjsscheduler.development.js:441:1) at scheduleCallback$1 (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:27537:1) at ensureRootIsScheduled (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:25683:1) at scheduleUpdateOnFiber (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:25531:1) at updateContainer (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:28858:1) at ReactDOMHydrationRoot.render.ReactDOMRoot.render (c:UsersAswin.Surya24RealTimeObjectDetectionasl-app ode_modules eact-domcjs eact-dom.development.js:29314:1) at ./src/index.js (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appsrcindex.js:8:1) at options.factory (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appwebpack untime eact refresh:6:1) at webpack_require (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appwebpackootstrap:24:1) at (c:UsersAswin.Surya24RealTimeObjectDetectionasl-appwebpackstartup:7:1) at (localhost꞉3000/static/js/bundle.js:177811:12)

Here is my drawRect function:

//Define a drawing function
export const drawRect = (boxes, classes, scores, threshold, imgWidth, imgHeight, ctx)=>{
    for(let i=0; i<=boxes.length; i++){
        if(boxes[i] && classes[i] && scores[i]>threshold){
            // Extract variables
            //console.log("Boxes:" + boxes[i])
            const [y,x,height,width] = boxes[i]
            
            const text = classes[i]
        
            // Set styling
            ctx.strokeStyle = labelMap[text][ color ]
            ctx.lineWidth = 10
            ctx.fillStyle =  white 
            ctx.font =  30px Arial          
            
            // DRAW!!
            ctx.beginPath()
            //labelMap[text][ name ] + 
            ctx.fillText(labelMap[text][ name ] +   -   + Math.round(scores[i]*100)/100, x*imgWidth, y*imgHeight-10)
            ctx.rect(x*imgWidth, y*imgHeight, width*imgWidth/2, height*imgHeight/1.5);
            ctx.stroke()
        }
    }
}

I tested the same model on Jupyter Notebook, and it worked, so I know it s not a problem with the model itself. However, I am not sure if TFJS changed the way it formats its tensors. I did get the 8 tensor values when I run console.log(obj).

I have a feeling that the following code is wrong and it is changed/deprecated, potentially causing my error. When I checked the shape of boxes, it is (1, 100) instead of the expected (4, 100).

 const boxes = await obj[1].array()
 const classes = await obj[2].array()
 const scores = await obj[4].array()

Can anyone figure out why boxes is not the right shape? I also tried labelMap[text][ color] and that returns a TypeError that labelMap[text] is undefined. When I ran console.log(classes[i]), it outputs a value of tensors instead of the expected integers to use as the indexes of the labelMap. I m not sure whether the issues are related, but it seems boxes and classes aren t being assigned the right values from obj.

The code in App.js and utilities.js is the exact same as the one in the video. I d really appreciate any and all help with this!

友情链接