Персонализирано откриване на обект с помощта на React с Tensorflow.js

👉 Ще стигнете до платформата за обучение, както е показано на изображението по-долу, щракнете върху качване на изображение.

👉 Качете вашето изображение без етикет с цел маркиране. За тази статия моите ресурси за изображения на хапчета са тук. [2] За моя случай качих приблизително 50–100 изображения за обучението.

Благодаря на потребителя на Github mepotts за ресурсите за изображения.

👉 След това етикетирайте изображенията си едно по едно (това е досадната част), за щастие, Custom Vision ви предоставя много удобни за потребителя инструменти за етикетиране, които могат да улеснят процеса на етикетиране.

👉 След като приключите с етикета, щракнете върху бутона „Трениране“и изчакайте няколко минути и ще получите резултатите по-долу:

👉 Щракнете върху експортиранеи изберете Tensorflow, след коетоTensorFlow.jsза експортиране. и Поздравления, имате първия си персонализиран модел за откриване на обекти в Tf.js

🔎Откриване на персонализиран обект с помощта на React с Tensorflow.js

1. Настройте вашето Create-React-App

Създайте Create-React-App чрез следните команди във вашия терминал:

npx create-react-app tfjs-azureObject
cd tfjs-azureObject

Инсталирайте tensorflow.js и Microsoft Customvision както е показано по-долу:

npm install @tensorflow/tfjs
npm install @microsoft/customvision-tfjs

Инсталирайте уеб камерата react по следния начин:

npm install react-webcam

и стартирайте приложението

npm start

Целият код ще се случи само в App.js, ще покажа само важния код, за пълен код можете да се обърнете към моето хранилище на GitHub

2. Импортирайте необходимите пакети

import React, { useEffect, useState, useRef } from "react";
import Webcam from "react-webcam";
import * as cvstfjs from "@microsoft/customvision-tfjs";

3. Изграждане на UI
UI за този проект включва:

• Бутон — За стартиране на откриването
• Платно — За рисуване на ограничителната рамка и
• Уеб камера — За въвеждане на изображения/видеоклипове

//Button: Trigger a predictionFunction() on Click
<Button
variant={"contained"}
style={{
color: "white",
backgroundColor: "blueviolet",
width: "50%",
maxWidth: "250px",
}}
onClick={() => {
predictionFunction();
}}
>
Start Detect
</Button>
Webcam:
const webcamRef = React.useRef(null);
const [videoWidth, setVideoWidth] = useState(960);
const [videoHeight, setVideoHeight] = useState(640);
const videoConstraints = {
height: 1080,
width: 1920,
facingMode: "environment",
};<div style={{ position: "absolute", top: "400px" }}>
<Webcam
audio={false}
id="img"
ref={webcamRef}
screenshotQuality={1}
screenshotFormat="image/jpeg"
videoConstraints={videoConstraints}
/>
</div>
Canvas:
<div style={{ position: "absolute", top: "400px", zIndex: "9999" }}>
<canvas
id="myCanvas"
width={videoWidth}
height={videoHeight}
style={{ backgroundColor: "transparent" }}
/>
</div>

Забележка: И платното, и уеб камерата трябва да са с еднакъв размер и една и съща позиция, за да могат да рисуват в HTML платното.

4. Зареждане на моделите

Извлечете изтегления модел в „Публична“ папка, уверете се, че model.json е правилно поставен в пътя /model.json с weights.bin. За да предвидите с помощта на модел, кодът е просто:

async function predictionFunction() {
setVideoHeight(webcamRef.current.video.videoHeight);
setVideoWidth(webcamRef.current.video.videoWidth);
//testing azure vision api
let model = new cvstfjs.ObjectDetectionModel();
await model.loadModelAsync("model.json");
const predictions = await model.executeAsync(
document.getElementById("img")
);

Нещата обаче се усложняват, когато предвидените класове трябва да бъдат показани на снимката, това е причината, за която се използва HTML canvas. Цялата функция за прогнозиране изглежда така:

async function predictionFunction() {
setVideoHeight(webcamRef.current.video.videoHeight);
setVideoWidth(webcamRef.current.video.videoWidth);
//testing azure vision api
let model = new cvstfjs.ObjectDetectionModel();
await model.loadModelAsync("model.json");
const predictions = await model.executeAsync(
document.getElementById("img")
);
var cnvs = document.getElementById("myCanvas");
cnvs.style.position = "absolute";
var ctx = cnvs.getContext("2d");
ctx.clearRect(0, 0, cnvs.width, cnvs.height);
console.log(predictions);
if (predictions[0].length > 0) {
for (let n = 0; n < predictions[0].length; n++) {
// Check scores
if (predictions[1][n] > 0.5) {
const p = document.createElement("p");
p.innerText = "Pill" + ": " + Math.round(parseFloat(predictions[1][n]) * 100) + "%";
let bboxLeft = predictions[0][n][0] * webcamRef.current.video.videoWidth;
let bboxTop = predictions[0][n][1] * webcamRef.current.video.videoHeight;
let bboxWidth = predictions[0][n][2] * webcamRef.current.video.videoWidth - bboxLeft;
let bboxHeight = predictions[0][n][3] * webcamRef.current.video.videoHeight - bboxTop;
ctx.beginPath();
ctx.font = "28px Arial";
ctx.fillStyle = "red";
ctx.fillText( "Pill" + ": " + Math.round(parseFloat(predictions[1][n]) * 100) + "%", bboxLeft, bboxTop + 70 );
ctx.rect(bboxLeft, bboxTop + 80, bboxWidth, bboxHeight);
ctx.strokeStyle = "#FF0000";
ctx.lineWidth = 3;
ctx.stroke();
}}
setTimeout(() => predictionFunction(), 500);
}}

Тази функция ще създаде ограничителна кутия, която посочва класа на открития обект над кутията. Състои се от 4 части, като първата част е да изчистите изчертаното HTML платно и след това да стартирате откриването на модела на обектите.

Ако моделът открие обекта, моделът ще върне прогнозните данни. Като използваме данните от ограничителната кутия, можем да начертаем ограничителната кутия с помощта на чертеж на HTML платно. След това цялата функция се изпълнява отново с изчакване от 500 ms и ще стартираме нашето уеб приложение за откриване на обекти.

Последна мисъл

В края на моята 4-та статия за React с Tensorflow.js, за мен е удоволствие да помогна на общността на TF.js, като представя тези прекрасни инструменти в React.

В тази статия разглеждаме как да създадете персонализиран модел за откриване на обекти с помощта на безплатното ниво на Microsoft Custom Vision, това значително намалява натоварването и бариерата за създаване на персонализиран модел за откриване на обекти (с 80% според мен). След това включваме модела в Tensorflow.js с помощта на реакция и кодираме цялото уеб приложение в по-малко от 100 реда код.

Търсенето на персонализирано откриване на обекти е голямо във всяка индустрия. В тази статия създавам брояч на хапчета за моята употреба в аптеката и се надявам, че след познаването на техниката за персонализирано откриване, това може да ви вдъхнови да създадете повече инструменти за вашата индустрия. Споделете с мен, ако го направите!

накрая,

Благодаря ви, че прочетохте.

Надявам се тази статия да ви хареса

Моите статии за React с Tensorflow.js:

Препратки

1. https://www.customvision.ai/
2. https://github.com/mepotts/Pill-Detection