Udhëzues për zbulimin e fytyrës për ueb

Detyra MediaPipe Face Detector ju lejon të zbuloni fytyrat në një imazh ose video. Mund ta përdorni këtë detyrë për të gjetur fytyrat dhe tiparet e fytyrës brenda një kuadri. Kjo detyrë përdor një model të të mësuarit automatik (ML) që funksionon me imazhe të vetme ose me një rrjedhë të vazhdueshme imazhesh. Detyra nxjerr vendndodhjet e fytyrave, së bashku me pikat kryesore të mëposhtme të fytyrës: syri i majtë, syri i djathtë, maja e hundës, goja, tragioni i syrit të majtë dhe tragioni i syrit të djathtë.

Këto udhëzime ju tregojnë se si të përdorni Detektorin e Fytyrës për aplikacionet e uebit dhe JavaScript. Për më shumë informacion rreth aftësive, modeleve dhe opsioneve të konfigurimit të kësaj detyre, shihni Përmbledhjen .

Shembull kodi

Kodi shembull për Face Detector ofron një implementim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod ju ndihmon të testoni këtë detyrë dhe të filloni ndërtimin e aplikacionit tuaj të zbulimit të fytyrës. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e Face Detector duke përdorur vetëm shfletuesin tuaj të internetit.

Konfigurimi

Ky seksion përshkruan hapat kryesorë për konfigurimin e mjedisit tuaj të zhvillimit posaçërisht për të përdorur Detektorin e Fytyrës. 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 uebin .

Paketat JavaScript

Kodi i Detektorit të Fytyrës ë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 e Detektorit të Fytyrës MediaPipe 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 Detektorin e Fytyrës, shihni seksionin Modelet e përmbledhjes së detyrës.

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 createFrom...() të Face Detector 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() për të konfiguruar detyrën. Funksioni createFromOptions ju lejon të personalizoni Detektorin e Fytyrës me opsione konfigurimi. Për më shumë informacion mbi opsionet e konfigurimit, shihni Opsionet e konfigurimit .

Kodi i mëposhtëm tregon se si të ndërtohet dhe konfigurohet detyra me opsione të personalizuara:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Opsionet e konfigurimit

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

Emri i opsionit	Përshkrimi	Diapazoni i Vlerave	Vlera e parazgjedhur
`option_var_1_web_js`	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`
`minDetectionConfidence`	Rezultati minimal i besimit që zbulimi i fytyrës të konsiderohet i suksesshëm.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	Pragu minimal jo maksimal i shtypjes për zbulimin e fytyrës duhet të konsiderohet i mbivendosur.	`Float [0,1]`	`0.3`

Përgatitni të dhënat

Detektori i Fytyrës mund të zbulojë fytyrat 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 fytyrat 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ë kuadrit për të përcaktuar se kur shfaqen fytyrat brenda videos.

Ekzekuto detyrën

Detektori i Fytyrës përdor metodat detect() (me image në modalitetin ekzekutues) dhe detectForVideo() (me video në modalitetin ekzekutues) për të shkaktuar përfundime. Detyra përpunon të dhënat, përpiqet të zbulojë fytyrat dhe më pas raporton rezultatet.

Thirrjet në metodat Face Detector detect() dhe detectForVideo() ekzekutohen në mënyrë sinkrone dhe bllokojnë fijen e ndërfaqes së përdoruesit. Nëse zbuloni fytyra në kuadro video nga kamera e një pajisjeje, çdo zbulim bllokon fijen kryesore. Mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat detect() dhe detectForVideo() 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 faceDetectorResult = faceDetector.detect(image);

Video

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

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

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

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

Për një implementim më të plotë të ekzekutimit të një detyre të Detektorit të Fytyrës, shihni shembullin .

Trajtoni dhe shfaqni rezultatet

Detektori i Fytyrës gjeneron një objekt rezultati të detektorit të fytyrës për çdo ekzekutim zbulimi. Objekti i rezultatit përmban fytyra në koordinatat e imazhit dhe fytyra në koordinatat e botës.

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

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

Dy fëmijë me kuti rrethuese rreth fytyrave të tyre

Për imazhin pa kuti kufizuese, shihni imazhin origjinal .

Kodi shembullor i Detektorit të Fytyrës tregon se si të shfaqen rezultatet e kthyera nga detyra, shihni shembullin