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

MediaPipe Yüz İşaretçisi görevi, resimlerdeki ve videolardaki yüzlerin yer işaretlerini ve yüz ifadelerini tespit etmenize olanak tanır. Bu görevi insanların yüz ifadelerini tanımlamak, yüz filtreleri ve efektleri uygulamak ve sanal avatarlar oluşturmak için kullanabilirsiniz. Bu görev, tek görüntülerle veya sürekli bir görüntü akışıyla çalışabilen makine öğrenimi (ML) modellerini kullanır. Görev, yüzlerin 3 boyutlu önemli noktalarını, ayrıntılı yüz yüzeylerini gerçek zamanlı olarak tahmin etmek için harmanlanan şekilleri puanları (yüz ifadesini temsil eden katsayılar) ve efekt oluşturmak için gereken dönüşümleri gerçekleştirmek için dönüşüm matrislerini üretir.

Bu talimatlar, Yüz İşaretçisi'nin web ve JavaScript uygulamaları için nasıl kullanılacağını göstermektedir. 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, size referans olması açısından bu görevin JavaScript'te eksiksiz bir uygulamasını sunmaktadır. Bu kod, bu görevi test etmenize ve kendi yüz işaretleme uygulamanızı oluşturmaya başlamanıza yardımcı olur. Yalnızca web tarayıcınızı kullanarak Yüz İşaretçisi örnek kodunu görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.

Kurulum

Bu bölümde, özellikle Yüz İşaretçisi'ni kullanmak için geliştirme ortamınızı ayarlamaya yönelik temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri dahil olmak üzere web ve JavaScript geliştirme ortamınızı ayarlama hakkında genel bilgiler için Web kurulum kılavuzuna bakın.

JavaScript paketleri

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

Aşağıdaki komutu kullanarak gerekli paketleri AİOY üzerinden yükleyebilirsiniz:

npm install @mediapipe/tasks-vision

Görev kodunu bir içerik yayınlama ağı (CDN) hizmeti aracılığıyla içe aktarmak isterseniz aşağıdaki kodu HTML dosyanızdaki <head> etiketine 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.js"
    crossorigin="anonymous"></script>
</head>

Model

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

Bir model seçip indirin ve ardından proje dizininizde depolayın:

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

Görevi oluşturma

Çıkarım yapma görevi hazırlamak için Yüz İşaretçisi createFrom...() işlevlerinden birini kullanın. createFromModelPath() işlevini, eğitilen model dosyasına giden göreli veya mutlak bir yolla kullanın. Modeliniz belleğe zaten yüklenmişse createFromModelBuffer() yöntemini kullanabilirsiniz.

Aşağıdaki kod örneği, görevi ayarlamak için createFromOptions() işlevinin kullanımını gösterir. createFromOptions işlevi, Yüz İşaretçisi'ni yapılandırma seçenekleriyle özelleştirmenize olanak tanır. Daha fazla bilgi için Yapılandırma seçenekleri bölümüne bakın.

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

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

VİDEO: Bir videonun kodu çözülmüş kareleri veya kamera gibi giriş verilerinin canlı yayınındaki mod.
{IMAGE, VIDEO} IMAGE
numFaces FaceLandmarker tarafından algılanabilen 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ı olarak kabul edilmesi için gereken minimum güven puanı. Float [0.0,1.0] 0.5
minFacePresenceConfidence Yüz belirgin işareti algılamada yüz varlığı için minimum güven puanı. Float [0.0,1.0] 0.5
minTrackingConfidence Yüz izlemenin başarılı kabul edilmesi için gereken minimum güven puanı. Float [0.0,1.0] 0.5
outputFaceBlendshapes Yüz İşaretçisi'nin yüz karıştırma şekilleri oluşturup oluşturmayacağı. Yüz harmanlama şekilleri, 3D yüz modelini oluşturmak için kullanılır. Boolean False
outputFacialTransformationMatrixes FaceLandmarker'ın yüz dönüştürme matrisi oluşturup oluşturmayacağı. FaceLandmarker, yüz yer işaretlerini standart bir yüz modelinden algılanan yüze dönüştürmek için matrisi kullanır. Böylece kullanıcılar, algılanan önemli noktalara efekt uygulayabilir. Boolean False

Verileri hazırlama

Yüz İşaretçisi, ana makine tarayıcısının desteklediği herhangi bir biçimdeki yüzleri algılayabilir. Görev; yeniden boyutlandırma, döndürme ve değer normalleştirmesi dahil olmak üzere, veri girişi ön işlemesini de yönetir. Videolardaki önemli yüzleri belirlemek için API'yi kullanarak tek seferde bir kareyi hızlıca işleyebilirsiniz. Ayrıca, yüzlerin videoda ne zaman geçtiğini belirlemek için karenin zaman damgasını kullanabilirsiniz.

Görevi çalıştırma

Yüz İşaretçisi, çıkarımları tetiklemek için detect() (koşu moduyla IMAGE) ve detectForVideo() (koşu moduyla VIDEO) yöntemlerini kullanır. Görev, verileri işler, yüzlerin yerlerini belirlemeye çalışır ve sonra sonuçları raporlar.

Yüz İşaretçisi detect() ve detectForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü ileti dizisini engeller. Video karelerindeki yüzleri bir cihazın kamerasından 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 çalışanları uygulayarak bunu önleyebilirsiniz.

Aşağıdaki kod, işlemenin görev modeliyle nasıl yürütüldüğünü gösterir:

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

Bir Yüz İşaretçisi görevi çalıştırmanın daha kapsamlı bir uygulaması için kod örneğine 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ğı ve her yüz işareti için koordinatlar içerir. İsteğe bağlı olarak sonuç nesnesi, yüz ifadelerini belirten karışım şekilleri ve algılanan önemli noktalara yüz efektleri uygulamak için bir yüz dönüşüm matrisi de içerebilir.

Aşağıda, bu görevden alınan çıkış verilerinin bir örneği gösterilmektedir:

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 çıkışının görseli gösterilmektedir:

Yüz İşaretçisi örnek kodu, görevden döndürülen sonuçların nasıl görüntüleneceğini gösterir. Kod örneğine göz atın.