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
}