MediaPipe Object Detector görevi, birden fazla öğenin mevcut düşünme egzersizlerini teşvik edersiniz. Bu görev, görüntü verilerini alır ve bir algılama listesi oluşturur sonuçlar (her biri resimde tanımlanan bir nesneyi temsil eder). Kod örneği bu talimatlarda anlatılanları CodePen.
Bu görevi, demo. Modeller ve özellikler, yapılandırma seçeneklerini görmek için Genel Bakış'ı inceleyin.
Kod örneği
Nesne Dedektörü örnek kodu, bu yapılandırmanın tam olarak görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize Kendi metin sınıflandırma uygulamanızı geliştirmeye başlayın. Bu dosyaları görüntüleyebilir, çalıştırabilir Nesne Dedektörü örnek kodunu düzenleyin. yalnızca web tarayıcınızı kullanarak.
Kurulum
Bu bölümde, geliştirme ortamınızı kurmaya yönelik temel adımlar açıklanmaktadır. özellikle de Nesne Dedektörü'nü kullanabilirsiniz. Şu konularda genel bilgi için: dahil olmak üzere web ve JavaScript geliştirme ortamınızı daha fazla bilgi için Web için kurulum kılavuzu.
JavaScript paketleri
Nesne Algılayıcı kodu MediaPipe @mediapipe/tasks-vision üzerinden kullanılabilir
NPM paketi. Şunları yapabilirsiniz:
platformdaki talimatları uygulayarak bu kitaplıkları bulup indirin
Kurulum kılavuzu.
Gerekli paketleri NPM üzerinden yükleyebilirsiniz kullanabilirsiniz:
npm install @mediapipe/tasks-vision
Görev kodunu içerik yayınlama ağı (CDN) aracılığıyla içe aktarmak istiyorsanız
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 Nesne Dedektörü görevi bu görevi görebilir. Nesne Algılayıcı için eğitilen modeller hakkında daha fazla bilgi için Modeller bölümündeki göreve genel bakış.
Bir model seçip indirin ve ardından bu modeli proje dizininizde depolayın:
<dev-project-root>/app/shared/models/
Görevi oluşturma
Şunları yapmak için Nesne Algılayıcı ObjectDetector.createFrom...() işlevlerinden birini kullanın:
çıkarımları yapmaya hazır hale getirebilirsiniz. createFromModelPath() kullanın
işlevi, eğitilen model dosyasına giden göreli veya mutlak bir yolla
Modeliniz belleğe zaten yüklenmişse aşağıdakileri kullanabilirsiniz:
createFromModelBuffer() yöntemini çağırın. Aşağıdaki kod örneğinde,
Daha fazla yapılandırma ayarlamanıza olanak tanıyan createFromOptions() işlevi
seçenekleri vardır. Kullanılabilir yapılandırma seçenekleri hakkında daha fazla bilgi edinmek için
Yapılandırma seçenekleri bölümüne gidin.
Aşağıdaki kod, bu görevin 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"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
},
scoreThreshold: 0.5,
runningMode: runningMode
});
Nesne Algılayıcı görevi oluşturmayla ilgili daha kapsamlı bilgi için bkz. kod örneği hakkında daha fazla bilgi edinin.
Yapılandırma seçenekleri
Bu görev, web uygulamaları için aşağıdaki yapılandırma seçeneklerini içerir:
| Seçenek Adı | Açıklama | Değer Aralığı | Varsayılan Değer |
|---|---|---|---|
runningMode |
Görev için çalışma modunu ayarlar. İki tür
modlar: . IMAGE: Tek resimli giriş modu. . . VIDEO: Bir karedeki kodu çözülmüş karelere ilişkin mod kameradan alınan video veya giriş verileri gibi bir yayın paylaşabilir. |
{IMAGE, VIDEO} |
IMAGE |
displayNamesLocale |
görev modelinin meta verileri (varsa). Şunun için varsayılan: en
İngilizce. Özel bir modelin meta verilerine yerelleştirilmiş etiketler ekleyebilirsiniz
TensorFlow Lite Metadata Writer API'yi kullanarak
|
Yerel ayar kodu | en |
maxResults |
İsteğe bağlı maksimum üst puanlı algılama sonucu sayısını şu değere ayarlar: dön. | Pozitif sayılar | -1 (tüm sonuçlar döndürülür) |
scoreThreshold |
Şu kriterde sağlanan tahmini geçersiz kılan bir tahmin puanı eşiğini belirler: model meta verileri (varsa). Bu değerin altındaki sonuçlar reddedilir. | Herhangi bir kayan nokta | Ayarlanmadı |
categoryAllowlist |
İzin verilen kategori adlarının isteğe bağlı listesini ayarlar. Boş değilse
kategori adı bu kümede bulunmayan algılama sonuçları
filtrelendi. Yinelenen veya bilinmeyen kategori adları yoksayılır.
Bu seçenek categoryDenylist ile birlikte kullanılamaz ve
her ikisi de hataya neden olur. |
Tüm dizeler | Ayarlanmadı |
categoryDenylist |
İzin verilmeyen kategori adlarının isteğe bağlı listesini ayarlar. Eğer
Boş olmayan, kategori adı bu kümede bulunan algılama sonuçları filtrelenir
çıkar. Yinelenen veya bilinmeyen kategori adları yoksayılır. Bu seçenek birlikte
hariç tutmanın yanı sıra her iki sonucun da hatalı olarak kullanılmasıdır.categoryAllowlist |
Tüm dizeler | Ayarlanmadı |
Verileri hazırlama
Nesne Algılayıcısı, ana tarayıcı tarayıcısı. Görev ayrıca aşağıdakiler de dahil olmak üzere veri girişi ön işlemesini: yeniden boyutlandırma, döndürme ve değer normalleştirmesi gibi. Videolardaki nesneleri tespit etmek için: zaman damgasını kullanarak her seferinde bir kareyi çerçeve içine alarak hareketlerin videoda gerçekleştiği zamanı belirler.
Görevi çalıştırma
Nesne Algılayıcı, tek resimler ve resimler üzerinde çalışmak için detect()
detectForVideo(), video çerçevelerindeki nesneleri algılamaya çalışıyor. Görev,
nesneleri tanımaya çalışır ve ardından sonuçları raporlar.
detect() ve detectForVideo() yöntemlerine yapılan çağrılar çalıştırılıyor
senkronize edin ve kullanıcı arayüzü ileti dizisini engelleyin. Arka plandaki nesneleri tanıyorsanız
kameradan alınan video kareleri varsa her sınıflandırma
ileti dizisi. Bu durumu, web üzerinde algılamayı çalıştırmak üzere kullanarak
başka bir ileti dizisinde.
Aşağıdaki kod, işlemin görev modeliyle nasıl yürütüldüğünü gösterir:
Resim
const image = document.getElementById("image") as HTMLImageElement; const detections = objectDetector.detect(image);
Video
await objectDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = detector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
Nesne Algılayıcı görevi çalıştırmayla ilgili daha kapsamlı bilgi için bkz. kod örneği hakkında daha fazla bilgi edinin.
Sonuçları işleme ve görüntüleme
Nesne Algılayıcı, her algılama çalıştırması için bir algılama sonuçları nesnesi oluşturur. Sonuç nesnesi, her algılama aşağıdakileri içeren bir algılama listesi içerir: dahil olmak üzere, algılanan nesne hakkında bir sınırlayıcı kutu ve kategori bir güven puanı ekleyin.
Aşağıda, bu görevdeki çıkış verilerinin bir örneği gösterilmektedir:
ObjectDetectorResult:
Detection #0:
Box: (x: 355, y: 133, w: 190, h: 206)
Categories:
index : 17
score : 0.73828
class name : dog
Detection #1:
Box: (x: 103, y: 15, w: 138, h: 369)
Categories:
index : 17
score : 0.73047
class name : dog
Aşağıdaki resimde, görev çıkışının görselleştirmesi gösterilmektedir:
Nesne Algılayıcısı örnek kodu, algılamanın nasıl görüntüleneceğini daha fazla bilgi edinmek için kod örneği inceleyebilirsiniz.