Search code examples
reactjstensorflowfreezelagpose-detection

Optimizing Pose Detection in React.js with TensorFlow.js: Addressing Lag and Hanging Issues


In my React.js code, I'm using the TensorFlow.js PoseNet model to detect multiple poses. When I get all the pose keypoints, I draw lines on each point pair (jointPairs).

It's working, but after 25 minutes or half an hour, it's lagging and hanging my iMac. What can I do to solve this, and is there another way to address my issue with another library for multiple pose detection? Please suggest."

import * as posenet from "@tensorflow-models/posenet";
import Webcam from "react-webcam";
import * as faceapi from "face-api.js";
import RecordRTC from "recordrtc";
import "firebase/auth";
import "firebase/database";


export const jointPairs = [
{ joint1: "leftShoulder", joint2: "leftElbow" },
{ joint1: "leftElbow", joint2: "leftWrist" },
{ joint1: "rightShoulder", joint2: "rightElbow" },
{ joint1: "rightElbow", joint2: "rightWrist" },
{ joint1: "leftHip", joint2: "leftKnee" },
{ joint1: "leftKnee", joint2: "leftAnkle" },
{ joint1: "rightHip", joint2: "rightKnee" },
{ joint1: "rightKnee", joint2: "rightAnkle" },
{ joint1: "leftShoulder", joint2: "rightShoulder" },
{ joint1: "leftShoulder", joint2: "leftHip" },
{ joint1: "rightShoulder", joint2: "rightHip" },
{ joint1: "leftHip", joint2: "rightHip" },
];

Firstly, I'm utilizing 'face-api.js' to recognize the user's face, followed by ' @tensorflow-models/posenet' for detecting multiple poses. My goal is to develop a website for gym training, where I capture the user's posture using TensorFlow.js within my ReactJS project to detect various body poses.

After detecting their poses, I draw lines on the user's body based on their pose keypoints and calculate angles accordingly. These angles, such as shoulder, hip, knee, and elbow angles, are then used to determine suitable exercises. For instance, if the user is performing a shoulder press exercise, I display the count of shoulder press repetitions on the screen. If the user's posture is correct, I show green lines on their body; however, if their posture is incorrect, red lines are displayed.

The functionality of my code works well for around 20 to 25 minutes, after which it starts freezing my system.


Solution

  • You can improve the performance and stability of your application by switching to MoveNet instead of PoseNet. MoveNet offers enhanced accuracy and smoother operation compared to PoseNet. Check out the link below for more information:

    https://blog.tensorflow.org/2021/05/next-generation-pose-detection-with-movenet-and-tensorflowjs.html

    If you have any doubts or questions, feel free to let me know!