@tensorflow-models/handpose returns 空数组

Question

我正在尝试在 Angular 项目中实现 tensorflow.js 的手势检测。我创建了一个新的 angular 项目。

ng new tensorflow-handpose-2

然后我导入了以下库：

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

我摆脱了两个编译器错误（一个是在我的 src 文件夹下放置一个新文件 typings.d.ts 并放置以下行：

// 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;

然后在

之后添加我的 tsconfig.app.json

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

以下：

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

为了摆脱我在文件 node_modules@tensorflow\tfjs-core\dist\hash_util.d.ts “引用类型”行中添加的第二个编译器错误：

/// <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;

我的 app.component.ts 看起来像这样：

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);
  }

}

我的app.component.html里面只有这个：

<router-outlet></router-outlet>

现在我想知道我是否破坏了手部姿势模型的功能。因为当我运行

ng serve --open

显示图像。但在控制台中它只是输出：握手 2：然后是 Array(0)

该模型是否有效？我不知道我是否以及在哪里使用错误。

有什么建议请补充！

谢谢

Answer 1

我找到了解决方案：

问题不在代码中。我放了一个显然更容易处理的不同的 jpg。使用新的 jpg，上面的代码工作得很好。

@tensorflow-models/handpose returns 空数组

@tensorflow-models/handpose returns empty array

javascript

angular

machine-learning

tensorflow.js

mediapipe