Why is my counter setter counting infinite times

[laura-nguyen]

Select Topic Area

Bug

Body

I'm using Tensorflow to track the number of reps a user does a bicep curl. Every time I curl my bicep, instead of the counter incrementing once, it keeps counting until I stop doing a bicep curl. The count reps function (countReps) is crucial to show the user how many reps they have done so far. The function extracts the points from the shoulder, elbow, and wrist and it finds the angle to determine if a user is doing a bicep curl. I would do one bicep curl, but the longer I hold it, the more it keeps counting up. I'm not sure why this is happening. Can someone help? Most of the code is in the Test.jsx file. Thanks!

The code snippet is:

    const webcamRef = useRef(null);
    const canvasRef = useRef(null);
    const [pose, setPose] = useState(null);
    const [counter, setCounter] = useState(0);
    const [stage, setStage] = useState('down');
    const [angle, setAngle] = useState(0);
    const [canCount, setCanCount] = useState(true);

const countReps = (pose) => {
        const confidenceThreshold = 0.35; // Set a confidence threshold
        const leftShoulder = pose.keypoints.find(point => point.part === 'leftShoulder' && point.score > confidenceThreshold);
        const leftElbow = pose.keypoints.find(point => point.part === 'leftElbow' && point.score > confidenceThreshold);
        const leftWrist = pose.keypoints.find(point => point.part === 'leftWrist' && point.score > confidenceThreshold);
    
        if (leftShoulder && leftElbow && leftWrist) {
            const angle = calculateAngle(leftShoulder.position, leftElbow.position, leftWrist.position);
            setAngle(angle); 
    
            if (angle > 140) {
                setStage('down');
                setCanCount(true);
                console.log('Stage changed to down');
            } else if (angle < 40 && stage === 'down') {
                setCounter(prevCounter => prevCounter + 1);
                setCanCount(false); // Prevent counting until the next down
                setStage('up');
                console.log('Stage changed to up');
                
            }
        } else {
            console.log("Key points not detected or not confident enough");
        }
    };

This is my repo: https://github.com/laura-nguyen/flexifit-ai/tree/main

[marcusvinicius0]

Hey Laura!

I've read a while this code and I noticed something. We don't have a condition to check if the stage is 'down' or 'up'. So that's why the countReps keeps incrementing I guess.

Here in this part:

 if (angle > 140) {
      setStage('down');
      setCanCount(true);
      console.log('Stage changed to down');
 } else if (angle < 40 && stage === 'down') {
       setCounter(prevCounter => prevCounter + 1);
       setCanCount(false); // Prevent counting until the next down
       setStage('up');
       console.log('Stage changed to up');
                
}

Try adding if (angle > 140 && stage !== 'down') {...} .

Also in the 'else if' we don't verify if 'canCount' is true. Here the update:
else if (angle < 40 && stage === 'down' && canCount) {...}

Hope this helps. Let me know if this worked out.

[laura-nguyen]

Hey Marcus! Thanks for your response. I tried your suggestion but it still didn't work :( I keep seeing this on the console log.

[marcusvinicius0]

Oh, I could noticed this just now...

Let's focus here:

else if (angle < 40 && stage === 'down') {
       setCounter(prevCounter => prevCounter + 1);
       setCanCount(false); // Prevent counting until the next down
       setStage('up');
       console.log('Stage changed to up');
                
}

Did you try to change the logic flow? > setStage('up'); > setCounter(prevCounter => prevCounter + 1); > setStage('up')

And forget about the if (angle > 140 && stage !== 'down') {...} that I said previous, that's not supposed to be there anyway.

[laura-nguyen]

@marcusvinicius0 it still didn't work :( I think it has to do with this variableconst [stage, setStage] = useState('down');. I heard that useState is an asynchronous hook. When I was debugging I noticed that state didn't change from down to up when I used setStage('up');

[laura-nguyen]

I think it has to do with this variableconst [stage, setStage] = useState('down');. I heard that useState is an asynchronous hook.

[laura-nguyen]

yes

[laura-nguyen]

Update: this was resolved. I used useRef instead of useState. Here was the answer from Chat GPT

The issue you're encountering is due to the state not updating synchronously, which can cause multiple updates within the same bicep curl. Additionally, there is no mechanism to prevent the counter from incrementing while holding the "up" position. Let's address this by using useRef to manage the canCount state more effectively.

Here's an improved version of your code:

Use a useRef to manage the canCount state.

Ensure the counter only increments once per complete curl.

import React, { useRef, useState, useEffect } from 'react';

const App = () => {
const webcamRef = useRef(null);
const canvasRef = useRef(null);
const [pose, setPose] = useState(null);
const [counter, setCounter] = useState(0);
const [stage, setStage] = useState('down');
const [angle, setAngle] = useState(0);
const canCountRef = useRef(true);

const countReps = (pose) => {
    const confidenceThreshold = 0.35; // Set a confidence threshold
    const leftShoulder = pose.keypoints.find(point => point.part === 'leftShoulder' && point.score > confidenceThreshold);
    const leftElbow = pose.keypoints.find(point => point.part === 'leftElbow' && point.score > confidenceThreshold);
    const leftWrist = pose.keypoints.find(point => point.part === 'leftWrist' && point.score > confidenceThreshold);

    if (leftShoulder && leftElbow && leftWrist) {
        const angle = calculateAngle(leftShoulder.position, leftElbow.position, leftWrist.position);
        setAngle(angle);

        if (angle > 140) {
            setStage('down');
            canCountRef.current = true;
            console.log('Stage changed to down');
        } else if (angle < 40 && stage === 'down' && canCountRef.current) {
            setCounter(prevCounter => prevCounter + 1);
            canCountRef.current = false; // Prevent counting until the next down
            setStage('up');
            console.log('Stage changed to up');
        }
    } else {
        console.log("Key points not detected or not confident enough");
    }
};

useEffect(() => {
    // Add code to initialize the webcam and start the pose detection
    // When a new pose is detected, call countReps with the detected pose
}, []);

return (
    <div>
        <video ref={webcamRef} style={{ display: 'none' }} />
        <canvas ref={canvasRef} />
        <div>Reps: {counter}</div>
    </div>
);

};

const calculateAngle = (a, b, c) => {
const radians = Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x);
let angle = Math.abs(radians * 180.0 / Math.PI);
if (angle > 180.0) {
angle = 360 - angle;
}
return angle;
};

export default App;
Key Changes:
Ref for canCount: By using useRef for canCount, we avoid the asynchronous state update issues, ensuring canCount is correctly managed between frames.

Check for canCount: Only increment the counter if canCount is true, and set it to false immediately after incrementing to prevent further increments until the next complete curl.

Make sure to initialize the webcam and pose detection properly in the useEffect hook. This code assumes you have a pose detection setup that calls countReps with the detected pose. If you need help with setting up the webcam and pose detection, please provide more details about your current setup.