I am trying to work on a Facemask Detection System. I have trained the Images and I have my model. I have also converted the generated model to the TensorflowJS json file.

I am having a problem implementing the tfjs model via a REACT application. I have my model being loaded successfully. As I have console.log it but i am having some issues drawing the rectangular bounding boxes for the detected class. The browser is throwing an error TypeError: Cannot read properties of undefined (reading 'color').

Here is my utilities.js file which is throwing the error.

// Define our labelmap
const labelMap = [
  {id: 1, name:'with mask', color:'red'},
  {id: 2, name:'no mask', color:'yellow'},
  {id: 3, name:'incorrect', color:'lime'},
]

// 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
          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()
          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/2);
          ctx.stroke()
      }
  }
}

I know this error has to do with the way the labelMap color variable is referenced. It is throwing the error probably because i am not referencing the color variable well. Also if this error is fixed. I will also be having another error thrown in labelMap[text]['name'] because the referencing is done same way.

Thanks in advance.