Error running BlazePose pose detection on single HTMLImageElement

Open abhishekmishra opened this issue 3 years ago • 0 comments

I'm trying to get 3d pose detection working in the browser using tfjs. I've followed the instructions at https://github.com/tensorflow/tfjs-models/tree/master/pose-detection/src/blazepose_mediapipe Here's my code

main.js

var img = new Image();
img.onload = async () => {
    const model = poseDetection.SupportedModels.BlazePose;
    const detectorConfig = {
        runtime: 'mediapipe', // or 'tfjs'
        modelType: 'lite',
        solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/pose',
    };
    try {
        detector = await poseDetection.createDetector(model, detectorConfig);
        console.log(img);
        const estimationConfig = {
            enableSmoothing: false, maxPoses: 1,
            type: 'full',
            scoreThreshold: 0.65,
            render3D: true
        };
        try {
            const poses = await detector.estimatePoses(img);
            console.log(poses);
        } catch (error) {
            detector.dispose();
            detector = null;
            console.log(error);
        }
    } catch (err) {
        console.log(err);
    }
}
img.src = "testimg.jpg";

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection" crossorigin="anonymous"></script>
    <!-- Include below scripts if you want to use TF.js runtime. -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl" crossorigin="anonymous"></script>

    <!-- Optional: Include below scripts if you want to use MediaPipe runtime. -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose" crossorigin="anonymous"></script>

</head>

<body>
    <script src="main.js"></script>
</body>

</html>

I get the following error when I open the html in the browser. The html is hosted on expressjs.

main.js:11 <img src="testimg.jpg">
main.js:24 TypeError: Cannot read properties of undefined (reading 'Tensor')
    at e.<anonymous> (pose-detection:17:7199)
    at pose-detection:17:2162
    at Object.next (pose-detection:17:2267)
    at pose-detection:17:1204
    at new Promise (<anonymous>)
    at s (pose-detection:17:949)
    at e.estimatePoses (pose-detection:17:6935)
    at img.onload (main.js:19:42)

System information

Have I written custom code (as opposed to using a stock example script provided in TensorFlow.js): Yes
OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Windows 11
Mobile device (e.g. iPhone 8, Pixel 2, Samsung Galaxy) if the issue happens on mobile device:
TensorFlow.js installed from (npm or script link): script link
TensorFlow.js version (use command below):
Browser version: Google Chrome Version 102.0.5005.63
Tensorflow.js Converter Version:

Describe the current behavior There is an error running the estimatePoses with single image element

Describe the expected behavior Pose should be detected and returned

Standalone code to reproduce the issue The code in index.html and main.js above should be enough to reproduce the error

Other info / logs Include any logs or source code that would be helpful to diagnose the problem. If including tracebacks, please include the full traceback. Large logs and files should be attached.

Jun 09 '22 10:06 abhishekmishra