@tensorflow-models/handpose 返回空数组答案

【问题标题】：@tensorflow-models/handpose returns empty array@tensorflow-models/handpose 返回空数组
【发布时间】：2022-01-21 20:06:54
【问题描述】：

我正在尝试在 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)

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

请添加任何建议！

谢谢

【问题讨论】：

标签： javascript angular machine-learning tensorflow.js mediapipe

【解决方案1】：

我找到了解决办法：

问题不在代码中。我放了一个不同的 jpg，它显然更容易处理。有了新的 jpg，上面的代码就可以正常工作了。

【讨论】：