Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'array')

Viewed 31

I was trying to build this real time violence detection application with live webcam feed. Have trained model and I think everything else is okay. I'm buildling it using Tensorflow.js. I'm using loadGraphModel function of tensorflow and this is the code:

// Import dependencies
import React, { useRef, useState, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import Webcam from "react-webcam";
import "./App.css";
import { nextFrame } from "@tensorflow/tfjs";
// 2. TODO - Import drawing utility here
// e.g. import { drawRect } from "./utilities";
import {drawRect} from "./utilities"; 
import model from './model/model.json'

function App() {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);

  // Main function
  const runCoco = async () => {
    // 3. TODO - Load network 
    // e.g. const net = await cocossd.load();
    // https://tensorflowjsrealtimemodel.s3.au-syd.cloud-object-storage.appdomain.cloud/model.json
    const net = await tf.loadGraphModel('http://127.0.0.1:8080//model.json')
    //  Loop and detect hands
    setInterval(() => {
      detect(net);
    }, 16.7);
  };

  const detect = async (net) => {
    // Check data is available
    if (
      typeof webcamRef.current !== "undefined" &&
      webcamRef.current !== null &&
      webcamRef.current.video.readyState === 4
    ) {
      // Get Video Properties
      const video = webcamRef.current.video;
      const videoWidth = webcamRef.current.video.videoWidth;
      const videoHeight = webcamRef.current.video.videoHeight;

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

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

      // 4. TODO - Make Detections
      const img = tf.browser.fromPixels(video)
      const resized = tf.image.resizeBilinear(img, [128,128])
      const casted = resized.cast('float32')

      const expanded = casted.expandDims(0)
      
      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(()=>{drawRect(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)

    }
  };

  useEffect(()=>{runCoco()},[]);

  return (
    <div className="App">
      <header className="App-header">
        <Webcam
          ref={webcamRef}
          muted={true} 
          style={{
            position: "absolute",
            marginLeft: "auto",
            marginRight: "auto",
            left: 0,
            right: 0,
            textAlign: "center",
            zindex: 9,
            width: 640,
            height: 480,
          }}
        />

        <canvas
          ref={canvasRef}
          style={{
            position: "absolute",
            marginLeft: "auto",
            marginRight: "auto",
            left: 0,
            right: 0,
            textAlign: "center",
            zindex: 8,
            width: 640,
            height: 480,
          }}
        />
      </header>
    </div>
  );
}

export default App;

This is the area where my error happens according to React:

 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()

Yes I know probably 'obj' is null or undefined or something, can anyone help figuring a solution

On doing inspect element after console.log(boxes), I got this "This model execution did not contain any nodes with control flow or dynamic output shapes. You can use model.execute() instead. executeWithControlFlow @ graph_executor.ts:445".. And obj[1] (boxes variable) is shown undefined

The obj variable on console.log gives this

{
    "kept": false,
    "isDisposedInternal": true,
    "shape": [
        1,
        1
    ],
    "dtype": "float32",
    "size": 1,
    "strides": [
        1
    ],
    "dataId": {},
    "id": 189,
    "rankType": "2",
    "scopeId": 200
}
0 Answers
Related