MediaPipe Yüz Dedektörü görevi, bir resimdeki veya videodaki yüzleri algılamanızı sağlar. Yüzleri ve yüz özelliklerini bir çerçeve içindeki yerini belirlemek için bu görevi kullanabilirsiniz. Bu görev, tek görüntülerle veya sürekli bir görüntü akışıyla çalışan bir makine öğrenimi (ML) modeli kullanır. Görev, yüzdeki konumları ve yüzdeki şu önemli noktaları sağlar: sol göz, sağ göz, burun ucu, ağız, sol göz trajyonu ve sağ göz trajyonu.
Bu talimatlar, Yüz Dedektörü'nü web ve JavaScript uygulamaları için nasıl kullanacağınızı gösterir. 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 Dedektörü için örnek kod, size referans olması açısından bu görevin JavaScript'te eksiksiz bir şekilde uygulanmasını 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. Yalnızca web tarayıcınızı kullanarak Yüz Dedektörü örnek kodunu görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.
Kurulum
Bu bölümde, geliştirme ortamınızı özellikle Yüz Dedektörü'nü kullanmak için ayarlamayla ilgili 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 Dedektörü kodu MediaPipe @mediapipe/tasks-vision
NPM paketi aracılığıyla edinilebilir. 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 Dedektörü görevi için bu görevle uyumlu, eğitilmiş bir model gerekir. Yüz Dedektörü için eğitilmiş modeller hakkında daha fazla bilgi almak isterseniz 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örevine hazırlanmak için Yüz Dedektörü 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, yapılandırma seçenekleriyle Yüz Dedektörü'nü özelleştirmenize olanak tanır. Yapılandırma seçenekleri hakkında daha fazla bilgi edinmek 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 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 modu. VİDEO: Bir videonun kodu çözülmüş kareleri veya kamera gibi giriş verilerinin canlı yayınındaki mod. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Yüz algılamanın başarılı olarak kabul edilmesi için gereken minimum güven puanı. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Yüz algılamanın çakıştığı kabul edilmesi için maksimum olmayan minimum engelleme eşiği. | Float [0,1] |
0.3 |
Verileri hazırlama
Yüz Dedektörü, ana makine tarayıcısının desteklediği herhangi bir biçimdeki resimlerdeki 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 yüzleri algılamak için API'yi kullanarak tek seferde bir kareyi hızlıca işleyebilirsiniz. Bunun için karenin zaman damgasını kullanıp videoda yüzlerin ne zaman geçtiğini belirleyebilirsiniz.
Görevi çalıştırma
Yüz Dedektörü, çıkarımları tetiklemek için detect() (çalışma moduyla image) ve detectForVideo() (çalışma moduyla video) yöntemlerini kullanır. Görev verileri işler, yüzleri algılamaya çalışır ve ardından sonuçları bildirir.
Yüz Dedektörü 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. 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 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 dedektörü görevi çalıştırmayla ilgili daha kapsamlı bir uygulama için kod örneğine 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 algılayıcı sonuç nesnesi oluşturur. Sonuç nesnesi, resim koordinatlarında yüzler ve dünya koordinatlarındaki yüzleri içerir.
Aşağıda, bu görevden alınan çıkış verilerinin bir örneği gösterilmektedir:
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 çıkışının görseli gösterilmektedir:
Sınırlayıcı kutusu olmayan resim için orijinal resme bakın.
Yüz Algılama ö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.