Web için yüz işareti algılama rehberi

MediaPipe Face Landmarker görevi, resim ve videolarda yüz işaret noktalarını ve yüz ifadelerini algılamanıza olanak tanır. Bu görevi kullanarak insan yüz ifadelerini belirleyebilir, yüz filtreleri ve efektleri uygulayabilir ve sanal avatarlar oluşturabilirsiniz. Bu görevde, tek resimlerle veya sürekli bir resim akışıyla çalışabilen makine öğrenimi (ML) modelleri kullanılır. Bu görev; ayrıntılı yüzeyleri gerçek zamanlı olarak tahmin etmek için 3 boyutlu yüz işaret noktaları, blendshape puanları (yüz ifadesini temsil eden katsayılar) ve efekt oluşturma için gereken dönüşümleri gerçekleştirmek üzere dönüşüm matrisleri çıkarır.

Bu talimatlarda, web ve JavaScript uygulamaları için yüz işaretçisinin nasıl kullanılacağı gösterilmektedir. Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi için Genel Bakış bölümüne bakın.

Kod örneği

Yüz İşaretçisi için örnek kod, bu görevin JavaScript'te eksiksiz bir uygulamasını referansınız için sağlar. Bu kod, görevi test etmenize ve kendi yüz işaretleyici uygulamanızı oluşturmaya başlamanıza yardımcı olur. Yüz İşaretleyici örneğini yalnızca web tarayıcınızı kullanarak görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.

Kurulum

Bu bölümde, geliştirme ortamınızı özellikle Face Landmarker'ı kullanacak şekilde ayarlamayla ilgili temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri de dahil olmak üzere web ve JavaScript geliştirme ortamınızı ayarlama hakkında genel bilgi için Web için kurulum kılavuzu'na bakın.

JavaScript paketleri

Yüz İşaretçisi kodu, MediaPipe @mediapipe/tasks-vision NPM paketi üzerinden kullanılabilir. Bu kitaplıkları, platform kurulum kılavuzundaki talimatları uygulayarak bulup indirebilirsiniz.

Gerekli paketleri NPM aracılığıyla aşağıdaki komutu kullanarak yükleyebilirsiniz:

npm install @mediapipe/tasks-vision

Görev kodunu bir içerik yayınlama ağı (CDN) hizmeti aracılığıyla içe aktarmak istiyorsanız HTML dosyanızdaki <head> etiketine aşağıdaki kodu ekleyin:

<!-- 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

MediaPipe Face Landmarker görevi, bu görevle uyumlu eğitilmiş bir model gerektirir. Yüz İşaretçisi için kullanılabilen eğitilmiş modeller hakkında daha fazla bilgi edinmek için görev genel bakışındaki Modeller bölümüne bakın.

Bir model seçip indirin ve proje dizininizde saklayın:

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

Görevi oluşturma

Görevi çıkarım çalıştırmaya hazırlamak için Face Landmarker createFrom...() işlevlerinden birini kullanın. createFromModelPath() işlevini, eğitilmiş model dosyasına ait göreli veya mutlak bir yolla kullanın. Modeliniz zaten belleğe yüklendiyse createFromModelBuffer() yöntemini kullanabilirsiniz.

Aşağıdaki kod örneğinde, görevi ayarlamak için createFromOptions() işlevinin nasıl kullanılacağı gösterilmektedir. createFromOptions işlevi, yapılandırma seçenekleriyle Yüz İşaretçisi'ni özelleştirmenize olanak tanır. Daha fazla bilgi için Yapılandırma seçenekleri başlıklı makaleyi inceleyin.

Aşağıdaki kodda, görevin özel seçeneklerle nasıl oluşturulacağı ve yapılandırılacağı gösterilmektedir:

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
    });

Yapılandırma seçenekleri

Bu görev, Web ve JavaScript uygulamaları için aşağıdaki yapılandırma seçeneklerine sahiptir:

Seçenek Adı Açıklama Değer aralığı Varsayılan değer
running_mode Görevin çalışma modunu ayarlar. İki mod vardır:

RESİM: Tek resim girişleri için mod.

VIDEO: Bir videonun veya bir kameradan gelen giriş verilerinin canlı yayınındaki kod çözülmüş kareler için mod.
{IMAGE, VIDEO} IMAGE
numFaces FaceLandmarker tarafından algılanabilecek maksimum yüz sayısı. Yumuşatma yalnızca num_faces 1 olarak ayarlandığında uygulanır. Integer > 0 1
minFaceDetectionConfidence Yüz algılamanın başarılı sayılması için gereken minimum güven puanı. Float [0.0,1.0] 0.5
minFacePresenceConfidence Yüz işareti algılamada yüz varlığı puanının minimum güven puanı. Float [0.0,1.0] 0.5
minTrackingConfidence Yüz takibinin başarılı olarak kabul edilmesi için gereken minimum güven puanı. Float [0.0,1.0] 0.5
outputFaceBlendshapes Yüz İşaretleyici'nin yüz karışım şekilleri çıkışı verip vermeyeceği. Yüz şekil karıştırmaları, 3D yüz modelini oluşturmak için kullanılır. Boolean False
outputFacialTransformationMatrixes FaceLandmarker'ın yüz dönüşümü matrisini çıkış olarak verip vermeyeceği. FaceLandmarker, yüz işaretlerini kanonik bir yüz modelinden algılanan yüze dönüştürmek için matrisi kullanır. Böylece kullanıcılar, algılanan işaretlere efekt uygulayabilir. Boolean False

Verileri hazırlama

Yüz İşaretleyici, ana makine tarayıcısı tarafından desteklenen herhangi bir biçimdeki resimlerde yüzleri algılayabilir. Görev, yeniden boyutlandırma, döndürme ve değer normalleştirme dahil olmak üzere veri girişi ön işlemesini de gerçekleştirir. Videolardaki yüzleri işaretlemek için API'yi kullanarak her seferinde bir kareyi hızlıca işleyebilir ve yüzlerin videoda ne zaman göründüğünü belirlemek için karenin zaman damgasını kullanabilirsiniz.

Görevi çalıştırma

Yüz İşaretleyici, çıkarımları tetiklemek için detect() (çalıştırma modu IMAGE ile) ve detectForVideo() (çalıştırma modu VIDEO ile) yöntemlerini kullanır. Görev, verileri işler, yüzleri işaretlemeye çalışır ve sonuçları bildirir.

Face Landmarker detect() ve detectForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacığını engeller. Bir cihazın kamerasından alınan video karelerinde yüz algılarsanız her algılama, ana iş parçacığını engeller. detect() ve detectForVideo() yöntemlerini başka bir iş parçacığında çalıştıracak web işçileri uygulayarak bunu önleyebilirsiniz.

Aşağıdaki kodda, görevi işleme modelini kullanarak işlemenin nasıl yürütüleceği gösterilmektedir:

Resim

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();
  });
}

Face Landmarker görevi çalıştırmanın daha eksiksiz bir uygulaması için örneğe bakın.

Sonuçları işleme ve görüntüleme

Yüz İşaretçisi, her algılama çalıştırması için bir sonuç nesnesi döndürür. Sonuç nesnesi, algılanan her yüz için bir yüz ağı içerir. Her yüz önemli noktasının koordinatları da bu ağda yer alır. İsteğe bağlı olarak, sonuç nesnesi yüz ifadelerini belirten karışım şekilleri ve algılanan işaret noktalarına yüz efektleri uygulamak için bir yüz dönüştürme matrisi de içerebilir.

Aşağıda bu görevden elde edilen çıkış verilerine bir örnek verilmiştir:

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]
    ...

Aşağıdaki resimde, görev çıktısının görselleştirilmiş hali gösterilmektedir:

Yüzünün şeklini ve boyutlarını belirtmek için yüz bölgeleri geometrik olarak haritalandırılmış bir adam

Face Landmarker örnek kodu, görevden döndürülen sonuçların nasıl görüntüleneceğini gösterir. Örneğe göz atın.