在Ubuntu 20.04上用Tensorflow.js和React.js构建一个对象检测应用程序

在这篇文章中，我们将在Ubuntu 20.04上用Tensorflow.js和React.js创建一个物体检测应用程序。

你是否曾想过自驾车是如何自行操作的？或者你的手机上的面部解锁功能是如何工作的？答案是通过物体检测。

那么什么是物体检测呢？

物体检测是计算机视觉和图像处理中的一种方法，它允许我们找到并定位多个物体在图像或视频中的位置。这种算法在检测到一个物体后，在图像或视频中的一个或多个物体周围画出边界框。这些边框是由点、宽度和高度定义的。然后，它为这些物体分配类别标签，即猫、狗或汽车。

前提条件

要跟上这篇文章--读者将需要以下条件。

你需要在你的电脑上安装Visual Studio代码编辑器。
与Windows相比，Linux操作系统是首选。对于Linux用户，任何Linux操作系统都是首选，但我在这个项目中使用了Ubuntu 20.04。
建议你的机器具有真正好的硬件规格，以便在你的本地计算机上无危险地运行程序，即一个强大的处理器和4GB及以上的内存。
还需要一个网络摄像头，以便实时进行物体检测。

目标

在本教程中，我们将完成以下任务。

访问React.js和Tensorflow.js计算机视觉模板。
安装Tensorflow.js并设置预建模型。
建立一个访问网络摄像头的React.js应用程序。
从网络摄像头进行实时检测。

让我们开始吧!

它是如何工作的

在独立的前端应用程序中使用React.js。
从网络摄像头捕捉图像进行物体检测。
使用TensorFlow.js实现检测。

访问React计算机视觉模板

首先，我们要克隆我在Github上公开提供的ReactComputerVisionTemplate。这个模板包含了我们需要开始的所有代码。

在我们的命令行界面，进入你想克隆到的驱动器。我们将需要运行以下命令来克隆模板。

git clone https://github.com/wmkinyan/ReactComputerVisionTemplate

在你尝试上面的命令之前，请确保'git'命令已经安装。如果没有，你可以通过发出该命令来安装'git'。

sudo apt install git

接下来，我们将需要在VSCode上打开模板，在命令行界面上发出以下命令。

code .

这就是'code'，后面有一个句号。这条命令应该启动我们的代码编辑器。

值得注意的是，接下来的这些步骤将在VSCode编辑器上进行。我们将需要使用'npm start'命令来启动我们的React应用程序。这个命令是在vs代码的终端发出的。

这个命令将启动我们的React应用并打开一个新的浏览器。默认情况下，它将直接转到 "localhost 3000"。这就是我们的React应用要启动的地方。

在发出 "npm start "命令之前，请确保 "npm "命令已经安装在你的电脑上。如果没有，请使用以下命令安装它。

sudo apt install npm

发出'npm install'命令后，你应该看到在你的ReactComputerVisionTemplate文件夹的文件列表中安装了一个'node_modules'文件夹。

安装TensorFow.js并设置预建模型

我们将使用微软的COCO SSD预训练模型，它允许我们对图像进行实时物体检测。

在'App.js'文件夹中，我们将通过发出以下命令将TensorFlow和预建模型导入我们的应用程序。

    import * as tf from "@tensorflow/tfjs";
    import * as cocossd from "@tensorflow-models/coco-ssd";

第一个命令将首先导入TensorFlow模块到我们的应用程序中。第二条命令接着从TensorFlow模型中导入COCO SSD模型。

构建React.js应用程序

我们首先导入'App.js'文件夹上的所有依赖项，包括React.js库、TensorFlow.js和COCO SSD预训练模型。它将所需的依赖关系导入我们的应用程序。

import React, { useRef, useState, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import * as cocossd from "@tensorflow-models/coco-ssd";
import Webcam from "react-webcam";
import "./App.css";
import { drawRect } from "./utilities";

我们要做的第二件事是加载我们的 "cocossd "模型。

这可以通过发布以下命令来实现。

    const net = await cocossd.load();

我们首先创建一个名为 "net "的新变量。然后我们等待 "cocossd "模型的加载。我们使用'load()'方法来完成这个任务。

使用TensorFlow.js进行检测

我们在这里要做的第三件事是使用我们的计算机网络摄像头进行检测。我们通过发出以下命令来实现这一目标。

    const obj = await net.detect(video);

这段代码所做的是首先创建一个名为'obj'的变量。然后它使用我们先前创建的'net'变量来获得视频属性，如宽度和高度。通过传递来自我们网络摄像头的视频输入，理想情况下，我们应该在视频中检测到一个物体。

尽管它在视频中检测到了物体，但它并没有在屏幕上绘制任何东西。我们需要应用程序在检测到物体的地方画出边界框，并给它们分配类别标签，即猫、人等。

最后，一旦在网络摄像头视频中检测到物体，我们就可以画出边界框来显示这些物体被检测到的地方，并为其分配类别标签。这是通过使用'utilities.js'文件夹中的以下函数完成的。

    export const drawRect = (detections, ctx) =>{
    // Loop through each prediction
    detections.forEach(prediction => {
  
      // Extract boxes and classes
      const [x, y, width, height] = prediction['bbox']; 
      const text = prediction['class']; 
  
      // Set styling
      const color = Math.floor(Math.random()*16777215).toString(16);
      ctx.strokeStyle = '#' + color
      ctx.font = '18px Arial';
  
      // Draw rectangles and text
      ctx.beginPath();   
      ctx.fillStyle = '#' + color
      ctx.fillText(text, x, y);
      ctx.rect(x, y, width, height); 
      ctx.stroke();
    });
  }

然后用命令将其导入主 "App.js "文件中。

    import { drawRect } from "./utilities";

然后用命令执行它。

    drawRect(obj, ctx);

这样就可以在视频上画出边界框。

总结

这就结束了!在本教程中，我们学习了如何在React应用程序中使用TensorFlow库构建一个物体检测应用程序。

如何在Ubuntu 20.04上用Tensorflow.js和React.js构建一个物体检测应用程序