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

Detyra MediaPipe Face Landmarker ju lejon të zbuloni pikat e referimit të fytyrës dhe shprehjet e fytyrës në imazhe dhe video. 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ë të mësuarit automatik (ML) që mund të funksionojnë me imazhe të vetme ose me një rrjedhë të vazhdueshme imazhesh. Detyra nxjerr pika referimi 3-dimensionale të fytyrës, rezultate të formës së përzierjes (koeficientë që përfaqësojnë shprehjet e fytyrës) për të nxjerrë sipërfaqe të detajuara të fytyrës në kohë reale dhe matrica transformimi për të kryer transformimet e kërkuara për renderimin e efekteve.

Këto udhëzime ju tregojnë se si ta përdorni Face Landmarker për aplikacionet web 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 Landmarker 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ë landmarker-it të fytyrës. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e 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 uebin .

Paketat JavaScript

Kodi i Face Landmarker ë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 Face Landmarker 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 Face Landmarker, 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 Landmarker 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 Shenjuesin e Fytyrës me opsione konfigurimi. Për më shumë informacion, 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 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	Diapazoni i Vlerave	Vlera e parazgjedhur
`running_mode`	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`
`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 që zbulimi i fytyrës të konsiderohet 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 pikave të referimit të fytyrës.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Rezultati minimal i besimit që gjurmimi i fytyrës të konsiderohet i suksesshëm.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Nëse Face Landmarker nxjerr forma të përziera të fytyrës. Format e përziera të fytyrës përdoren për renderimin e modelit 3D të fytyrës.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Nëse FaceLandmarker nxjerr matricën e transformimit të fytyrës. FaceLandmarker përdor matricën për të transformuar pikat e referimit 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 e referimit 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 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ë shënuar 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

Treguesi i Vendndodhjes së Fytyrës përdor metodat detect() (me modalitetin ekzekutues IMAGE ) dhe detectForVideo() (me modalitetin ekzekutues VIDEO ) për të shkaktuar përfundime. Detyra përpunon të dhënat, përpiqet të identifikojë fytyrat dhe më pas raporton rezultatet.

Thirrjet në metodat Face Landmarker 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 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ë implementim më të plotë të ekzekutimit të një detyre të Face Landmarker, shihni shembullin .

Trajtoni dhe shfaqni rezultatet

Shënuesi i Fytyrës kthen një objekt rezultati për çdo ekzekutim zbulimi. Objekti i rezultatit përmban një rrjetë fytyre për secilën fytyrë të zbuluar, me koordinata për secilën pikë referimi të fytyrës. Opsionale, objekti i rezultatit mund të përmbajë edhe 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 e referimit të zbuluara.

Më poshtë tregohet një shembull i të dhënave të daljes 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ë rezultatit të detyrës:

Një burrë me zona të fytyrës të hartuara gjeometrikisht për të treguar formën dhe dimensionet e fytyrës së tij.

Kodi shembullor i Face Landmarker tregon se si të shfaqen rezultatet e kthyera nga detyra, shihni shembullin