Web için nesne algılama rehberi

MediaPipe Object Detector görevi, birden fazla nesne sınıfının varlığını ve konumunu algılamanıza olanak tanır. Bu görev, görüntü verilerini alır ve görüntüde tanımlanan her nesneyi temsil eden bir algılama sonuçları listesi oluşturur. Yalnızca web tarayıcınızı kullanarak Object Detector örneğini görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.

Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi için Genel Bakış başlıklı makaleyi inceleyin.

Kurulum

Bu bölümde, geliştirme ortamınızı özellikle nesne 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

Object Detector 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 üzerinden 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 Object Detector görevi, bu görevle uyumlu eğitilmiş bir model gerektirir. Nesne Algılayıcı için kullanılabilen eğitilmiş modeller hakkında daha fazla bilgi edinmek için Modeller bölümündeki göreve genel bakış konusuna bakın.

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

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

Görevi oluşturma

Görevleri çıkarım çalıştırmaya hazırlamak için Object Detector ObjectDetector.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, daha fazla yapılandırma seçeneği ayarlamanıza olanak tanıyan createFromOptions() işlevinin kullanımı gösterilmektedir. Kullanılabilir yapılandırma seçenekleri hakkında daha fazla bilgi için Yapılandırma seçenekleri bölümüne bakın.

Aşağıdaki kodda bu görevin 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"
);
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 dedektörü görevi oluşturma işleminin daha eksiksiz bir şekilde uygulanması için kod örneğine bakın.

Yapılandırma seçenekleri

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

Seçenek Adı Açıklama Değer aralığı Varsayılan değer
runningMode 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
displayNamesLocale Görev modelinin meta verilerinde varsa görünen adlar için kullanılacak etiketlerin dilini ayarlar. İngilizce için varsayılan değer en'dir. TensorFlow Lite Metadata Writer API'yi kullanarak özel bir modelin meta verilerine yerelleştirilmiş etiketler ekleyebilirsiniz. Yer kodu en
maxResults Döndürülecek isteğe bağlı maksimum en yüksek puanlı algılama sonucu sayısını ayarlar. Pozitif sayılar -1 (tüm sonuçlar döndürülür)
scoreThreshold Model meta verilerinde (varsa) sağlanan tahmini puan eşiğini geçersiz kılan eşiği ayarlar. Bu değerin altındaki sonuçlar reddedilir. Herhangi bir kayan öğe Ayarlanmadı
categoryAllowlist İzin verilen kategori adlarının isteğe bağlı listesini ayarlar. Boş değilse kategori adı bu kümede olmayan algılama sonuçları filtrelenir. Yinelenen veya bilinmeyen kategori adları yok sayılır. Bu seçenek, categoryDenylist ile birlikte kullanılamaz ve ikisinin birlikte kullanılması hataya neden olur. Tüm dizeler Ayarlanmadı
categoryDenylist İzin verilmeyen isteğe bağlı kategori adları listesini ayarlar. Boş değilse kategori adı bu kümede olan algılama sonuçları filtrelenir. Yinelenen veya bilinmeyen kategori adları yok sayılır. Bu seçenek categoryAllowlist ile birlikte kullanılamaz ve ikisinin birlikte kullanılması hataya neden olur. Tüm dizeler Ayarlanmadı

Verileri hazırlama

Nesne Algılayıcı, ana makine tarayıcısı tarafından desteklenen tüm biçimlerdeki resimlerdeki nesneleri 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 nesneleri algılamak için API'yi kullanarak her seferinde bir kareyi hızlıca işleyebilir ve karedeki hareketlerin videoda ne zaman gerçekleştiğini belirlemek için karenin zaman damgasını kullanabilirsiniz.

Görevi çalıştırma

Nesne Algılayıcı, tek görüntüler üzerinde çalışmak için detect(), video karelerindeki nesneleri algılamak için ise detectForVideo() kullanır. Görev, verileri işler, nesneleri tanımaya çalışır ve sonuçları bildirir.

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 karelerindeki nesneleri tanırsanız her sınıflandırma ana iş parçacığını engeller. Algılamayı başka bir iş parçacığında çalıştırmak için web işçilerini 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 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();
  });
}

Bir nesne dedektörü görevini çalıştırmanın daha eksiksiz bir uygulaması için kod örneğine bakın.

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çlar nesnesi, algılamaların listesini içerir. Her algılama, algılanan nesneyle ilgili sınırlayıcı kutu ve kategori bilgilerini (nesnenin adı ve güven puanı dahil) içerir.

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

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 çıktısının görselleştirilmiş hali gösterilmektedir:

Sınırlayıcı kutularla vurgulanmış iki köpek

Object Detector örnek kodu, görevden döndürülen algılama sonuçlarının nasıl görüntüleneceğini gösterir. Ayrıntılar için kod örneğine bakın.