用TensorFlow構建物體檢測器

物體檢測已成為一項核心創新，應用於計算機視覺、安全和身份驗證措施、犯罪檢測、交通、實時影象分析等多個領域。通過在網路應用程式中利用 TensorFlow 的功能，我們可以使用張量模型實現高效的物體檢測。本文旨在深入介紹物件檢測，並以例項說明將物件檢測整合到網路應用程式中的步驟。

物體檢測在各個領域的重要性怎麼強調都不為過，因為它能帶來諸多好處：

• 人工智慧驅動的汽車：通過實施物體檢測模型，自動駕駛汽車可以輕鬆檢測並正確識別路標、交通訊號燈、人和其他機車，從而有助於在駕駛過程中更好地導航和決策。
• 安全和監控：物體檢測大大增強了安防系統，使監控系統能夠跟蹤和識別人和物，監控行為，並增強機場等公共場所的安全性。
• 醫療保健：作為醫療領域的一項應用，訓練有素的模型可以識別掃描中的疾病和異常。通過這些模型，可以及時發現異常情況並採取補救措施。
• 增強視覺理解和資料表示：利用物體檢測，計算機系統可以理解和解釋圖形資料，並以使用者可以快速吸收的形式表示這些資訊。

什麼是物體檢測？

物體檢測是計算機視覺的一個要素，它利用人工智慧（AI）從影象、視訊和系統的視覺輸入中獲取有意義的資訊。物體檢測模型可以檢測、分類和勾勒視覺輸入中的物體（通常在一個邊界框內），並執行或推薦該模型定義的操作。

物體檢測模型主要由兩個關鍵部分組成：視覺輸入定位和物體分類。視覺輸入定位涉及定位輸入中的物體，並在檢測到的物體周圍指定一個邊界框。這些邊框考慮了檢測到的物體的寬度、高度和位置（x 座標和 y 座標）。物體分類則是為檢測到的物體分配標籤，提供物體的上下文。

什麼是 Tensorflow？

根據文件介紹，TensorFlow 是谷歌開發的一個開源機器學習框架，為計算機視覺、深度學習和自然語言處理等機器學習相關任務提供各種工具和資源。它支援多種程式語言，包括 Python 和 C++ 等流行語言，使更多使用者可以使用它。利用 TensorFlow，使用者可以建立在任何平臺上執行的機器學習模型，如桌面、移動、網路和雲應用。

設定開發環境

在本文中，我們將使用 React.js 和 TensorFlow。首先，請執行以下步驟：

• 在本地計算機上設定 React 應用程式，開啟專案目錄，然後繼續下一步，新增 TensorFlow 依賴關係。
• 在專案根目錄下開啟 shell 視窗，使用以下命令安裝 TensorFlow 依賴項：

npm i @tensorflow/tsfjs-backend-cpu @tensorflow/tfjs-backend-webgl @tensorflow/tfjs-converter @tensorflow/tfjs-core @tensorflow-models/coco-ssd

我們將開發一個網路應用程式，使用兩種方法檢測物體。第一種方法是檢測上載影象中的物體，第二種方法是檢測攝像頭訊號源中的物體。

利用上傳影象進行物體檢測

在本節中，我們將建立一個物體檢測器，對上傳的影象進行操作，以識別其中的物件。首先，建立一個元件資料夾和一個新檔案 ImageDetector.js。在該檔案中新增以下程式碼：

"use client";
import React, { useRef, useState } from "react";
import * as cocoSsd from "@tensorflow-models/coco-ssd";
import "@tensorflow/tfjs-backend-webgl";
import "@tensorflow/tfjs-backend-cpu";
const ImageDetector = () => {
// We are going to use useRef to handle image selects
const ImageSelectRef = useRef();
// Image state data
const [imageData, setImageData] = useState(null);
// Function to open image selector
const openImageSelector = () => {
if (ImageSelectRef.current) {
ImageSelectRef.current.click();
}
};
// Read the converted image
const readImage = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener("load", (e) => resolve(e.target.result));
reader.addEventListener("error", reject);
reader.readAsDataURL(file);
});
};
// To display the selected image
const onImageSelect = async (e) => {
// Convert the selected image to base64
const file = e.target.files[0];
if (file && file.type.substr(0, 5) === "image") {
console.log("image selected");
} else {
console.log("not an image");
}
const image = await readImage(file);
// Set the image data
setImageData(image);
};
return (
<div
style={{
display: "flex",
height: "100vh",
justifyContent: "center",
alignItems: "center",
gap: "25px",
flexDirection: "column",
}}
>
<div
style={{
border: "1px solid black",
minWidth: "50%",
position: "relative"
}}
>
{/* Display uploaded image here */}
{
//   If image data is null then display a text
!imageData ? (
<p
style={{
textAlign: "center",
padding: "250px 0",
fontSize: "20px",
}}
>
Upload an image
</p>
) : (
<img
src={imageData}
alt="uploaded image"
/>
)
}
</div>
{/* Input image file */}
<input
style={{
display: "none",
}}
type="file"
ref={ImageSelectRef}
onChange={onImageSelect}
/>
<div
style={{
padding: "10px 15px",
background: "blue",
color: "#fff",
fontSize: "48px",
hover: {
cursor: "pointer",
},
}}
>
{/* Upload image button */}
<button onClick={() => openImageSelector()}>Select an Image</button>
</div>
</div>
);
};
export default ImageDetector;

在上面的程式碼片段中，我們使用 useRef 和 FileReader 來處理影象選擇。點選 “Select an Image” 按鈕後，隱藏的檔案輸入將被觸發，檔案選擇視窗將開啟。選定的圖片會轉換為 base64 格式，並使用 JavaScript FileReader 在非同步函式中讀取。此時，imageData 狀態會更新為包含所選圖片，三元運算子會顯示圖片。

要掛載此元件，我們可以在專案目錄 primary app/page.jsx 中新增並渲染它：

import ImageDetector from "@/components/imagedetector";
export default function Home() {
return (
<div>
<ImageDetector />
</div>
);
}

如果我們執行應用程式，會得到如下結果：

建立影象物件檢測器

為了處理所選影象中的物體檢測，我們將建立一個新函式，使用我們之前安裝的 TensorFlow Coco-ssd 物體檢測模型：

//...
// Function to detect objects in the image
const handleObjectDetection = async (imageElement) => {
// load the model
const model = await cocoSsd.load();
// Detect objects in the image
const predictions = await model.detect(imageElement, 5);
console.log("Predictions: ", predictions);
};

上述程式碼使用 cocoSsd 軟體包來處理物件檢測。我們還將檢測次數限制為 5 次，因為如果執行系統的 GPU 和 CPU 記憶體不足，在瀏覽器上執行多次檢測有時會導致速度變慢。

要建立 imageElement，我們將在 onImageSelect 函式中建立一個元素，並將所選圖片的資料傳遞給它。

// Within the onImageSelect function
//...
// Create an image element
const imageElement = document.createElement("img");
imageElement.src = image;
imageElement.onload = async () => {
handleObjectDetection(imageElement);
};

handleObjectDetection 函式返回的 predictions 結果會對所選影象中的物體進行分類，並提供有關其位置的資訊。利用這些資訊，我們將構建一個邊界框。例如，我們可以新增一張狗和一隻貓的圖片，並得到以下結果：

下圖顯示了瀏覽器控制檯中記錄的預測結果：

仔細觀察，我們可以看到物體檢測模型生成的預測結果。

• bbox：提供有關邊界框位置和大小的資訊。
• class：這是影象中物體的分類。
• score：預測準確度的估計值。該值越接近 1，表示預測越準確。

為預測物件構建邊界框

對於預測，我們將建立一個狀態物件，該物件將根據模型返回的預測資料進行更新。

// Handle predictions
const [predictionsData, setPredictionsData] = useState([]);

要使用預測資料更新此狀態，請對 handleObjectDetection 進行以下更改：

// Set the predictions data
setPredictionsData(predictions);

我們將使用 predictionsData 陣列建立一個函式，為影象中的每個元素生成一個邊框。要建立獨特顏色的邊界框，我們首先要建立一個顏色陣列和一個函式，以對陣列進行洗牌並提供獨特的顏色部分：

// An array of bounding box colors
const colors = ["blue", "green", "red", "purple", "orange"];
// Shuffle the array to randomize the color selection
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
shuffleArray(colors);

最後，我們可以用下面幾行程式碼建立並顯示邊界框：

{/* Create bounding box */}
{
// If predictions data is not null then display the bounding box
// Each box has a unique color
predictionsData.length > 0 &&
predictionsData.map((prediction, index) => {
const selectedColor = colors.pop(); // Get the last color from the array and remove it
return (
<div
key={index}
style={{
position: "absolute",
top: prediction.bbox[1],
left: prediction.bbox[0],
width: prediction.bbox[2],
height: prediction.bbox[3],
border: `2px solid ${selectedColor}`,
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<p
style={{
background: selectedColor,
color: "#fff",
padding: "10px 15px",
fontSize: "20px",
textTransform: "capitalize",
}}
>
{prediction.class}
</p>
<p
style={{
background: selectedColor,
color: "#fff",
padding: "10px 15px",
fontSize: "20px",
textTransform: "capitalize",
}}
>
{Math.round(parseFloat(prediction.score) * 100)}%
</p>
</div>
);
})
}
{/* Display uploaded image here */}
//... Other code below

在瀏覽器中，我們可以看到以下結果：

在攝像頭上執行物體檢測器模型

在本節中，我們將建立一個元件，利用攝像頭的視覺資料執行物體檢測。為了訪問系統網路攝像頭，我們將安裝一個新的依賴項 React-webcam：

npm i react-webcam

使用 React-webcam 訪問可視資料

要使用 React-webcam 軟體包訪問系統網路攝像頭，請在 components 目錄下建立一個新檔案 CameraObjectDetector.jsx，並新增以下程式碼：

"use client";
import React, { useRef, useState, useEffect } from "react";
import * as cocoSsd from "@tensorflow-models/coco-ssd";
import Webcam from "react-webcam";
const CameraObjectDetector = () => {
// Use useRef to handle webcam
const webcamRef = useRef(null);
// Use useRef to draw canvas
const canvasRef = useRef(null);
// Handle predictions
const [predictionsData, setPredictionsData] = useState([]);
//   Intialize cocoSsd
const initCocoSsd = async () => {
const model = await cocoSsd.load();
setInterval(() => {
detectCam(model);
}, 5);
};
// Function to use webcam
const detectCam = async (model) => {
if (
webcamRef.current !== undefined &&
webcamRef.current !== null &&
webcamRef.current.video.readyState === 4
) {
// Get video properties
const video = webcamRef.current.video;
const videoWidth = webcamRef.current.video.videoWidth;
const videoHeight = webcamRef.current.video.videoHeight;
// Set video width and height
webcamRef.current.video.width = videoWidth;
webcamRef.current.video.height = videoHeight;
// Set the canvas width and height
canvasRef.current.width = videoWidth;
canvasRef.current.height = videoHeight;
// Detect objects in the image
const predictions = await model.detect(video);
console.log(predictions);
// Draw canvas
const ctx = canvasRef.current.getContext("2d");
}
};
// useEffect to handle cocoSsd
useEffect(() => {
initCocoSsd();
}, []);
return (
<div
style={{
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Webcam
ref={webcamRef}
style={{
position: "relative",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
<canvas
ref={canvasRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
</div>
);
};
export default CameraObjectDetector;

在上面的程式碼塊中，我們整合了 React-webcam，以返回檢測到的系統網路攝像頭捕獲的視訊片段。我們還將這段視訊傳遞給 cocoSsd 模型，並在此基礎上記錄預測結果。在接下來的章節中，我們將使用這些預測資料在 canvas 元素中建立邊界框。要載入該元件，請對 app/page.jsx 進行以下更改：

import CameraObjectDetector from "@/components/CameraObjectDetector";
import ImageDetector from "@/components/imagedetector";
export default function Home() {
return (
<div>
{/* <ImageDetector /> */}
<CameraObjectDetector />
</div>
);
}

現在，如果我們執行應用程式，就會在瀏覽器中得到如下結果：

在控制檯中，我們可以看到 cocoSsd 的預測結果：

在上圖中，記錄的預測值包含 bbox, class, 和 score 值。

繪製邊界框

為了繪製邊框，我們將建立一個名為 drawBoundingBox 的函式，該函式將接收預測結果，並使用這些資料在視訊中的物件上構建矩形。

// An array of bounding box colors
const colors = ["blue", "green", "red", "purple", "orange"];
// Shuffle the array to randomize the color selection
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
shuffleArray(colors);
// Counter to keep track of the next color to use
let colorCounter = 0;
// Draw bounding boxes
const drawBoundingBox = (predictions, ctx) => {
predictions.forEach((prediction) => {
const selectedColor = colors[colorCounter]; // Use the next color from the array
colorCounter = (colorCounter + 1) % colors.length; // Increment the counter
// Get prediction results
const [x, y, width, height] = prediction.bbox;
const text = prediction.class;
// Set styling
ctx.strokeStyle = selectedColor;
ctx.font = "40px Montserrat";
ctx.fillStyle = selectedColor;
// Draw rectangle and text
ctx.beginPath();
ctx.fillText(text, x, y);
ctx.rect(x, y, width, height);
ctx.stroke();
});
};

在上面的程式碼塊中，我們建立了一個顏色陣列，用於邊界框。通過 predictions 狀態，我們可以訪問 bbox 屬性來獲取物件的尺寸，並訪問 class 屬性來對顯示的物件進行分類。接下來，我們使用 canvas prop ctx 為邊界框繪製矩形和文字。

最後一步，我們將把畫布屬性和預測值傳遞給 detectCam 中的 drawBoundingBox 函式：

const detectCam = async (model) => {
if (
webcamRef.current !== undefined &&
webcamRef.current !== null &&
webcamRef.current.video.readyState === 4
){
//... Former code here
// Draw canvas
const ctx = canvasRef.current.getContext("2d");
drawBoundingBox(predictions, ctx);
}
};

現在，當我們執行應用程式時，就能在視訊上看到邊界框了：

小結

本文探討了如何在網路應用程式中整合物件檢測功能。我們首先介紹了物件檢測的概念及其有益的應用領域，最後使用 React.js 和 Tensorflow 在網路上建立了物件檢測的實現。

使用 Tensorflow 進行物件檢測的功能是無限的。它的其他自定義模型可以進一步探索這些功能，為監控、增強現實系統等現實世界場景建立互動和應用。