Udhëzues për zbulimin e objekteve për ueb

Detyra MediaPipe Object Detector ju lejon të zbuloni praninë dhe vendndodhjen e klasave të shumta të objekteve. Kjo detyrë merr të dhëna të imazhit dhe nxjerr një listë të rezultateve të zbulimit, secila prej të cilave përfaqëson një objekt të identifikuar në imazh. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e Object Detector duke përdorur vetëm shfletuesin tuaj të internetit.

Për më shumë informacion rreth aftësive, modeleve dhe opsioneve të konfigurimit të kësaj detyre, shihni Përmbledhjen .

Konfigurimi

Ky seksion përshkruan hapat kryesorë për konfigurimin e mjedisit tuaj të zhvillimit posaçërisht për të përdorur Object Detector. Për informacion të përgjithshëm mbi konfigurimin e mjedisit tuaj të zhvillimit të uebit dhe JavaScript, duke përfshirë kërkesat e versionit të platformës, shihni udhëzuesin e konfigurimit për ueb .

Paketat JavaScript

Kodi i Detektorit të Objekteve është i disponueshëm përmes paketës MediaPipe @mediapipe/tasks-vision NPM . Mund t'i gjeni dhe shkarkoni këto biblioteka duke ndjekur udhëzimet në udhëzuesin e Konfigurimit të platformës.

Mund të instaloni paketat e kërkuara përmes NPM duke përdorur komandën e mëposhtme:

npm install @mediapipe/tasks-vision

Nëse doni të importoni kodin e detyrës nëpërmjet një shërbimi të rrjetit të shpërndarjes së përmbajtjes (CDN), shtoni kodin e mëposhtëm në etiketën <head> në skedarin tuaj HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Model

Detyra MediaPipe Object Detector kërkon një model të trajnuar që është i pajtueshëm me këtë detyrë. Për më shumë informacion mbi modelet e trajnuara të disponueshme për Object Detector, shihni përmbledhjen e detyrës në seksionin Modele .

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni atë brenda direktorisë së projektit tuaj:

<dev-project-root>/app/shared/models/

Krijo detyrën

Përdorni një nga funksionet Object Detector ObjectDetector.createFrom...() për të përgatitur detyrën për ekzekutimin e inferencave. Përdorni funksionin createFromModelPath() me një shteg relativ ose absolut për në skedarin e modelit të trajnuar. Nëse modeli juaj është ngarkuar tashmë në memorie, mund të përdorni metodën createFromModelBuffer() . Shembulli i kodit më poshtë demonstron përdorimin e funksionit createFromOptions() , i cili ju lejon të vendosni më shumë opsione konfigurimi. Për më shumë informacion mbi opsionet e konfigurimit të disponueshme, shihni seksionin Opsionet e konfigurimit .

Kodi i mëposhtëm tregon se si të ndërtohet dhe konfigurohet kjo detyrë:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

Për një implementim më të plotë të krijimit të një detyre të Detektorit të Objekteve, shihni shembullin e kodit .

Opsionet e konfigurimit

Kjo detyrë ka opsionet e mëposhtme të konfigurimit për aplikacionet Web:

Emri i opsionit	Përshkrimi	Diapazoni i Vlerave	Vlera e parazgjedhur
`runningMode`	Cakton modalitetin e ekzekutimit për detyrën. Ekzistojnë dy mënyra: IMAZH: Modaliteti për futjen e një imazhi të vetëm. VIDEO: Modaliteti për kuadrot e dekoduara të një videoje ose në një transmetim të drejtpërdrejtë të të dhënave hyrëse, si p.sh. nga një kamera.	{ `IMAGE, VIDEO` }	`IMAGE`
`displayNamesLocale`	Cakton gjuhën e etiketave që do të përdoren për emrat e shfaqur të dhënë në metadatat e modelit të detyrës, nëse është e disponueshme. Vlera e parazgjedhur është `en` për anglishten. Mund të shtoni etiketa të lokalizuara në metadatat e një modeli të personalizuar duke përdorur API-në e Shkruesit të Metadatave TensorFlow Lite.	Kodi lokal	en
`maxResults`	Cakton numrin maksimal opsional të rezultateve të zbulimit me rezultatet më të larta që duhen kthyer.	Çdo numër pozitiv	-1 (të gjitha rezultatet kthehen)
`scoreThreshold`	Cakton pragun e rezultatit të parashikimit që mbivendos atë të dhënë në meta të dhënat e modelit (nëse ka). Rezultatet nën këtë vlerë refuzohen.	Çdo noton	Nuk është vendosur
`categoryAllowlist`	Cakton listën opsionale të emrave të lejuar të kategorive. Nëse nuk është bosh, rezultatet e zbulimit, emri i kategorisë së të cilave nuk është në këtë grup, do të filtrohen. Emrat e kategorive të dyfishta ose të panjohura injorohen. Ky opsion është reciprokisht ekskluziv me `categoryDenylist` dhe përdorimin e të dy rezultateve në një gabim.	Çdo varg	Nuk është vendosur
`categoryDenylist`	Cakton listën opsionale të emrave të kategorive që nuk lejohen. Nëse nuk është bosh, rezultatet e zbulimit emri i kategorisë së të cilave është në këtë grup do të filtrohen. Emrat e kategorive të dyfishta ose të panjohura injorohen. Ky opsion është reciprokisht ekskluziv me `categoryAllowlist` dhe përdorimin e të dy rezultateve në një gabim.	Çdo varg	Nuk është vendosur

Përgatitni të dhënat

Detektori i Objekteve mund të zbulojë objekte në imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra gjithashtu trajton përpunimin paraprak të të dhënave të futura, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerës. Për të zbuluar objektet në video, mund të përdorni API-n për të përpunuar shpejt një kuadër në të njëjtën kohë, duke përdorur vulën kohore të kornizës për të përcaktuar se kur ndodhin gjestet në video.

Ekzekuto detyrën

Detektori i Objekteve përdor detect() për të punuar me imazhe të vetme dhe detectForVideo() punon për të zbuluar objekte në kuadro video. Detyra përpunon të dhënat, përpiqet të njohë objektet dhe më pas raporton rezultatet.

Thirrjet në metodat detect() dhe detectForVideo() ekzekutohen në mënyrë sinkrone dhe bllokojnë fijen e ndërfaqes së përdoruesit. Nëse i njihni objektet në kuadro video nga kamera e një pajisjeje, çdo klasifikim bllokon fijen kryesore. Mund ta parandaloni këtë duke zbatuar punëtorë web për të ekzekutuar zbulimin në një fije tjetër.

Kodi i mëposhtëm tregon se si ekzekutohet përpunimi me modelin e detyrës:

Imazh

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

Video

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Për një implementim më të plotë të ekzekutimit të një detyre të Detektorit të Objekteve, shihni shembullin e kodit .

Trajtoni dhe shfaqni rezultatet

Detektori i Objekteve gjeneron një objekt rezultatesh zbulimi për çdo ekzekutim zbulimi. Objekti i rezultateve përmban një listë zbulimesh, ku çdo zbulim përfshin një kuti kufizuese dhe informacion kategorie rreth objektit të zbuluar, duke përfshirë emrin e objektit dhe një rezultat besimi.

Më poshtë tregohet një shembull i të dhënave të daljes nga kjo detyrë:

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

Imazhi i mëposhtëm tregon një vizualizim të rezultatit të detyrës:

Dy qen që janë të theksuar me kuti kufitare

Kodi shembullor i Detektorit të Objekteve tregon se si të shfaqen rezultatet e zbulimit të kthyera nga detyra, shihni shembullin e kodit për detaje.