Udhëzues për zbulimin e pikave referuese të fytyrës për ueb

Detyra MediaPipe Face Landmarker ju lejon të zbuloni pikat referuese të fytyrës dhe shprehjet e fytyrës në imazhe dhe video. Ju mund ta përdorni këtë detyrë për të identifikuar shprehjet e fytyrës njerëzore, për të aplikuar filtra dhe efekte të fytyrës dhe për të krijuar avatarë virtualë. Kjo detyrë përdor modele të mësimit të makinerive (ML) që mund të funksionojnë me imazhe të vetme ose një rrymë të vazhdueshme imazhesh. Detyra nxjerr pika referimi 3-dimensionale të fytyrës, rezultatet e formës së përzierjes (koeficientët që përfaqësojnë shprehjen e fytyrës) për të nxjerrë përfundime të sipërfaqeve të detajuara të fytyrës në kohë reale dhe matricat e transformimit për të kryer transformimet e kërkuara për paraqitjen e efekteve.

Këto udhëzime ju tregojnë se si të përdorni Face Landmarker për aplikacionet në ueb dhe JavaScript. Për më shumë informacion rreth aftësive, modeleve dhe opsioneve të konfigurimit të kësaj detyre, shihni Përmbledhjen .

Shembull kodi

Shembulli i kodit për Face Landmarker ofron një zbatim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod të ndihmon të testosh këtë detyrë dhe të fillosh të ndërtosh aplikacionin tënd për shënuesin e fytyrës. Mund të shikoni, ekzekutoni dhe modifikoni kodin shembull të Face Landmarker 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 Face Landmarker. 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 Face Landmarker ofrohet përmes paketës MediaPipe @mediapipe/tasks-vision NPM . Ju mund t'i gjeni dhe shkarkoni këto biblioteka duke ndjekur udhëzimet në udhëzuesin e konfigurimit të platformës.

Ju 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 dëshironi 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.js"
    crossorigin="anonymous"></script>
</head>

Model

Detyra MediaPipe Face Landmarker kërkon një model të trajnuar që është në përputhje me këtë detyrë. Për më shumë informacion mbi modelet e trajnuara të disponueshme për Face Landmarker, shihni seksionin Modelet e përmbledhjes së detyrave.

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni në direktorinë e projektit tuaj:

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

Krijo detyrën

Përdorni një nga funksionet Face Landmarker createFrom...() për të përgatitur detyrën për ekzekutimin e konkluzioneve. Përdorni funksionin createFromModelPath() me një shteg relative ose absolute drejt skedarit të modelit të trajnuar. Nëse modeli juaj tashmë është i ngarkuar në memorie, mund të përdorni metodën createFromModelBuffer() .

Shembulli i kodit më poshtë tregon përdorimin e funksionit createFromOptions() për të vendosur detyrën. Funksioni createFromOptions ju lejon të personalizoni Shënuesin e Fytyrës me opsionet e konfigurimit. Për më shumë informacion, shihni Opsionet e konfigurimit .

Kodi i mëposhtëm tregon se si të ndërtoni dhe konfiguroni detyrën me opsione të personalizuara:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const faceLandmarker = await faceLandmarker.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 Gama e vlerave Vlera e paracaktuar
running_mode Vendos modalitetin e ekzekutimit për detyrën. Ka dy mënyra:

IMAGE: Modaliteti për hyrjet e një imazhi të vetëm.

VIDEO: Modaliteti për kornizat e deshifruara të një videoje ose në një transmetim të drejtpërdrejtë të të dhënave hyrëse, si p.sh. nga një aparat fotografik.
{ IMAGE, VIDEO } IMAGE
numFaces Numri maksimal i fytyrave që mund të zbulohen nga FaceLandmarker . Zbutja zbatohet vetëm kur num_faces është vendosur në 1. Integer > 0 1
minFaceDetectionConfidence Rezultati minimal i besimit për zbulimin e fytyrës për t'u konsideruar i suksesshëm. Float [0.0,1.0] 0.5
minFacePresenceConfidence Rezultati minimal i besimit të rezultatit të pranisë së fytyrës në zbulimin e pikës referimi të fytyrës. Float [0.0,1.0] 0.5
minTrackingConfidence Rezultati minimal i besimit për gjurmimin e fytyrës për t'u konsideruar i suksesshëm. Float [0.0,1.0] 0.5
outputFaceBlendshapes Nëse Face Landmarker nxjerr format e përzierjes së fytyrës. Format e përzierjes së fytyrës përdoren për paraqitjen e modelit të fytyrës 3D. Boolean False
outputFacialTransformationMatrixes Nëse FaceLandmarker nxjerr matricën e transformimit të fytyrës. FaceLandmarker përdor matricën për të transformuar pikat referuese të fytyrës nga një model kanonik i fytyrës në fytyrën e zbuluar, në mënyrë që përdoruesit të mund të aplikojnë efekte në pikat referuese të zbuluara. Boolean False

Përgatitni të dhënat

Face Landmarker mund të zbulojë fytyrat në imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra trajton gjithashtu parapërpunimin e hyrjes së të dhënave, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerës. Për të shënuar fytyrat në video, mund të përdorni API-në për të përpunuar shpejt një kornizë në një kohë, duke përdorur vulën kohore të kornizës për të përcaktuar se kur shfaqen fytyrat brenda videos.

Drejtoni detyrën

Face Landmarker përdor metodat detect() (me modalitetin e ekzekutimit IMAGE ) dhe detectForVideo() (me modalitetin e ekzekutimit VIDEO ) për të shkaktuar përfundime. Detyra përpunon të dhënat, përpiqet të shënojë fytyrat dhe më pas raporton rezultatet.

Thirrjet drejt metodave Face Landmarker detect() dhe detectForVideo() ekzekutohen në mënyrë sinkronike dhe bllokojnë lidhjen e ndërfaqes së përdoruesit. Nëse zbuloni fytyra në kornizat video nga kamera e një pajisjeje, çdo zbulim bllokon lidhjen kryesore. Ju mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat detect() dhe detectForVideo() në një thread tjetër.

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

Imazhi

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

Video

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

Për një zbatim më të plotë të ekzekutimit të një detyre Face Landmarker, shihni shembullin e kodit .

Trajtoni dhe shfaqni rezultatet

Face Landmarker kthen një objekt rezultati për çdo ekzekutim zbulimi. Objekti i rezultatit përmban një rrjetë fytyre për çdo fytyrë të zbuluar, me koordinata për çdo pikë referimi të fytyrës. Opsionale, objekti i rezultatit mund të përmbajë gjithashtu forma përzierjeje, të cilat tregojnë shprehjet e fytyrës, dhe një matricë transformimi të fytyrës për të aplikuar efektet e fytyrës në pikat referuese të zbuluara.

Më poshtë tregon një shembull të të dhënave dalëse nga kjo detyrë:

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

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

Një burrë me zonat e fytyrës së tij të përcaktuara gjeometrikisht për të treguar formën dhe dimensionet e fytyrës së tij

Kodi i shembullit të Face Landmarker demonstron se si të shfaqen rezultatet e kthyera nga detyra, shikoni shembullin e kodit