在Angular 9中创建TensorFlow湖北福彩检测

在本教程中，我们将看到如何在Angular 9中创建TensorFlow湖北福彩检测。创建像AI这样的小功能–使用 TensorFlow 模块。

通过使用TensorFlow的JS库，可以在Web应用程序中使用TensorFlow。在本演示中，我们将使用 湖北福彩分类模块.

具有湖北福彩分类模块的TensorFlow湖北福彩检测

使用湖北福彩分类模块，我们可以检测到任何包含人，活动，动物，植物和地点的湖北福彩。我们将在Angular 9应用程序中使用此模块。

现在让我向您展示可以在angular 9应用程序中实现它。

安装TensorFlow软件包

首先，我们需要做的就是使用npm工具安装所有必需的软件包。
以下是软件包列表：

• @ tensorflow / tfjs: TensorFlow JS
• @ tensorflow-models / mobilenet: TensorFlow Mobilenet模块（湖北福彩分类）
• @ tensorflow / tfjs-节点: 通过NodeJS的TensorFlow后端

通过NPM安装

# Main Dependencies
npm i @ tensorflow / tfjs @ tensorflow-models / mobilenet @ tensorflow / tfjs-节点 --save
# Peer Dependencies
npm i events node-fetch string_decoder --save

...
"dependencies" : {
  ...
  "@ tensorflow-models / mobilenet": "2.0.4",
  "@ tensorflow / tfjs-converter": "1.2.11",
  "@ tensorflow / tfjs": "2.0.0",
  "events": "^3.1.0",
  "node-fetch": "^2.6.0",
  "string_decoder": "^1.3.0",
  ...
}

使用湖北福彩进行TensorFlow湖北福彩检测

检测可以通过两种不同方式完成的对象，即通过湖北福彩或通过网络摄像头。首先通过上传图片进行封面。

import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';
import * as mobilenet from '@ tensorflow-models / mobilenet';

export interface Prediction {
   className: string;
   probability: number;
}

...
export class AppComponent  {
 public model: any;
 public loading = true;
 public imageSrc: string;
 public predictions: Prediction[];
 @ViewChild('img') public imageEl: ElementRef;

 public async ngOnInit(): Promise<void> {
   this.model = await mobilenet.load();
   this.loading = false;
 }

 public async fileChangeEvent(event): Promise<void> {
   if (event.target.files && event.target.files[0]) {
     const reader = new FileReader();
     reader.readAsDataURL(event.target.files[0]);
     reader.onload = (res: any) => {
       this.imageSrc = res.target.result;
       setTimeout(async () => {
         const imgEl = this.imageEl.nativeElement;
         this.predictions = await this.model.classify(imgEl);
       }, 0);
     };
   }
 }
}

basically we have loaded a module mobilenet.load() on a component init and on image selection, we passed the image to classify(imgEl) method which gives us the predictions.
并且从html我们只需要接受文件并显示数据，例如

<input type="file" (change)="fileChangeEvent($event)">
...
<tr  *ngFor="let prediction of predictions">
  <td>{{prediction.className}}</td>
  <td>{{prediction.probability}}</td>
</tr>

使用网络摄像头进行TensorFlow湖北福彩检测

对于通过视频/网络摄像头进行目标检测，可以考虑使用相同的方法来代替输入字段，我们将显示视频。

import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import * as mobilenet from '@ tensorflow-models / mobilenet';

export class VideoDetectionComponent implements OnInit, AfterViewInit {
  public model: any;
  public loading = true;
  public predictions: Prediction[];
  @ViewChild('video') public video: ElementRef;
  constructor() { }

  public async ngOnInit(): Promise<void> {
    this.model = await mobilenet.load();
    this.loading = false;
    setInterval(async () => {
      this.predictions = await this.model.classify(this.video.nativeElement);
    }, 3000);
  }

  public async ngAfterViewInit(): Promise<void> {
    const vid = this.video.nativeElement;
    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
        vid.srcObject = stream;
      })
      .catch((error) => {console.log(error);});
    }
  }
}

当我们加载和分配湖北福彩元素时，相同的方法将适用于视频元素。
并从html显示视频和显示数据，例如：

<video autoplay playsinline muted id="webcam" width="300" height="300" #video></video>
...
<tr  *ngFor="let prediction of predictions">
  <td>{{prediction.className}}</td>
  <td>{{prediction.probability}}</td>
</tr>

演示版