@tensorflow-models/handpose returns empty array-CodePudding

I am trying to implement the hand-pose detection of tensorflow.js in an Angular-Project. I created a new angular project.

ng new tensorflow-handpose-2

Then I imported the follwing libraries:

npm install @tensorflow-models/handpose --save
npm install @tensorflow/tfjs-backend-webgl --save

I got rid of two Compiler-Errors ( One by placing a new file typings.d.ts under my src-folder and placing the following lines:

// Temp fix for OffscreenCanvaswas removed from lib.dom.d.ts in Typescript 4.4
// https://github.com/twilio/twilio-video.js/issues/1629
// https://github.com/microsoft/TypeScript/issues/45745#issuecomment-916440817
declare type OffscreenCanvas = any;

and then adding in my tsconfig.app.json after

"include": [
    "src/**/*.d.ts"
  ],

the following:

  "exclude": ["node_modules/@tensorflow/tfjs-backend-webgl/dist/backend_webgl.d.ts",
              "node_modules/@tensorflow/tfjs-backend-webgl/dist/canvas_util.d.ts"]

To get rid of The second compiler-error I added in the file node_modules@tensorflow\tfjs-core\dist\hash_util.d.ts the "reference types"-line:

/// <amd-module name="@tensorflow/tfjs-core/dist/hash_util" />
/// <reference types="long" />
export declare function hexToLong(hex: string): Long;
export declare function fingerPrint64(s: Uint8Array, len?: number): Long;

My app.component.ts looks like this:

import { Component,OnInit } from '@angular/core';
import * as handpose from '@tensorflow-models/handpose';
// Register WebGL backend.
import '@tensorflow/tfjs-backend-webgl';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'tensorflow-handpose-2';
  ngOnInit() {
    this.handDetect();
  }

  async handDetect(): Promise<any> {
    const img = new Image(500);    
    img.src = '/assets/hand-pose.jpg'; 
    document.body.appendChild(img);

  // Load the MediaPipe handpose model.
  const model = await handpose.load();
  // Pass in a video stream (or an image, canvas, or 3D tensor) to obtain a
  // hand prediction from the MediaPipe graph.
  const predictions = await model.estimateHands(img);
  console.log('handpose-2:');  
  console.log(predictions);
  }

}

my app.component.html just has this in it:

<router-outlet></router-outlet>

Now I was wondering if I just broke the functionality of the hand-pose model. Because when I run

ng serve --open

the image gets shown. But in the console it just outputs: handpose-2: and then Array(0)

Does the model work at all? I have no clue if and where I am using it wrong.

Please add any suggestions!

Thank you

CodePudding user response：

I found the solution:

The Problem wasn´t in the code. I put a different jpg which is apparently easier to process. With the new jpg the above code works just fine.