MediaPipe Face Detector görevi, resim veya videolardaki yüzleri algılamanızı sağlar. Bu görevi kullanarak bir karedeki yüzleri ve yüz özelliklerini bulabilirsiniz. Bu görevde, tek görüntülerle veya sürekli bir görüntü akışıyla çalışan bir makine öğrenimi (ML) modeli kullanılır. Görev, yüz konumlarının yanı sıra şu yüz ana noktalarını da çıkarır: sol göz, sağ göz, burun ucu, ağız, sol göz tragusu ve sağ göz tragusu.
Bu talimatlarda, web ve JavaScript uygulamaları için yüz algılayıcının 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 Algılayıcı'nın örnek kodu, bu görevin JavaScript'te eksiksiz bir uygulamasını referansınız için sağlar. Bu kod, bu görevi test etmenize ve kendi yüz algılama uygulamanızı oluşturmaya başlamanıza yardımcı olur. Yüz Algılayıcı ö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 yüz algılayıcıyı 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 Algılayıcı 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 Detector görevi, bu görevle uyumlu eğitilmiş bir model gerektirir. Yüz Algılayıcı 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 Detector 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 Algılayıcı'yı özelleştirmenize olanak tanır. Yapılandırma seçenekleri hakkında 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 facedetector = await FaceDetector.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 |
|---|---|---|---|
option_var_1_web_js |
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 |
minDetectionConfidence |
Yüz algılamanın başarılı sayılması için gereken minimum güven puanı. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Yüz algılamanın çakışmış olarak kabul edilmesi için minimum maksimum olmayan bastırma eşiği. | Float [0,1] |
0.3 |
Verileri hazırlama
Yüz Algılayıcı, ana makine tarayıcısı tarafından desteklenen tüm biçimlerdeki 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 algılamak için API'yi kullanarak her seferinde bir kareyi hızlıca işleyebilir ve karedeki zaman damgasını kullanarak yüzlerin videoda ne zaman göründüğünü belirleyebilirsiniz.
Görevi çalıştırma
Yüz Algılayıcı, çı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 algılamaya çalışır ve sonuçları bildirir.
Face Detector 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 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(); }); }
Yüz Algılayıcı 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 dedektörü, her algılama çalıştırması için bir yüz dedektörü sonuç nesnesi oluşturur. Sonuç nesnesi, resim koordinatlarında yüzler ve dünya koordinatlarında yüzler içerir.
Aşağıda bu görevden elde edilen çıkış verilerine bir örnek verilmiştir:
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)
Aşağıdaki resimde, görev çıktısının görselleştirilmiş hali gösterilmektedir:
Sınırlayıcı kutusu olmayan görüntü için orijinal görüntüye bakın.
Yüz Algılayıcı örnek kodu, görevden döndürülen sonuçların nasıl görüntüleneceğini gösterir. Örneğe bakın.