TypeError when attempting to create MediaPipeHands detector

TensorFlow General Discussion
,
1

Hi,

I’m sure I’m missing something simple, but the documentation here implies that I should be able to run the MediaPipeHands model in-browser using tags. Unfortunately, I’m getting a TypeError when I try to create and run a basic demo.

Here is the code I have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TF Demo</title>
</head>
<body>
<!-- Require the peer dependencies of hand-pose-detection. -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>

<!-- You must explicitly require a TF.js backend if you're not using the TF.js union bundle. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection"></script>

<script>
    (async function init() {
        const model = handPoseDetection.SupportedModels.MediaPipeHands;
        const detectorConfig = {
            runtime: 'mediapipe',
            solution: 'https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection'
        };
        detector = await handPoseDetection.createDetector(model, detectorConfig);
    })();

</script>
</body>
</html>

When I try to open this in Chrome or Firefox I get the following error:

Uncaught (in promise) TypeError: e.Hands is not a constructor
    t https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    l https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    s https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    s https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    o https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    o https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    l https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    createDetector https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    s https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    s https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    o https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    o https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    createDetector https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection:17
    init http://127.0.0.1:5500/index.html:26
    <anonymous> http://127.0.0.1:5500/index.html:27
hand-pose-detection:17:2504
    init http://127.0.0.1:5500/index.html:26
    AsyncFunctionThrow self-hosted:699
    (Async: async)
    <anonymous> http://127.0.0.1:5500/index.html:27

What am I missing? Is it not actually possible to run TFjs this way?

3

Thanks for posting and welcome to the forum! I have also replicated your issue - as far as I can tell you have done everything correctly - let me raise this with the team to see if something changed. Will update this thread once I find out.

1 Like
5

Just by means of an update - the team is looking into this. It seems this demo has to be “built” right now to work correctly (with a valid node_modules folder etc with the deps etc) so without this may be missing something.

Will update this thread once an update is available for a pure front end example which will be preferred for most front end devs who are not working with build systems and just want to use a script import like all our other models. Thanks for finding this and letting us know!

6

Update to the update - if you set the backend to be “tfjs” right now instead of mediapipe that should work for now using the existing example code - just be sure to include the right script imports for that one. We can then get back to you with an update for the mediapipe version later but at least you can try it out - the outputs etc are the same (just runs a little slower on some situations - but more compatible eg works on iOS faster actually)

Edit: Bug to track progress of fix for the MP backend variable not being available: Fix mediapipe obfuscated package export name by ahmedsabie · Pull Request #950 · tensorflow/tfjs-models · GitHub

1 Like