Web için nesne algılama rehberi

MediaPipe Nesne Dedektörü görevi, birden fazla nesne sınıfının varlığını ve konumunu algılamanızı sağlar. Bu görev görüntü verilerini alır ve her biri resimde tanımlanan nesneyi temsil eden bir algılama sonuçları listesi oluşturur. Bu talimatlarda açıklanan kod örneğine CodePen üzerinden erişebilirsiniz.

Demoyu izleyerek bu görevi çalışırken görebilirsiniz. Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi edinmek için Genel Bakış bölümüne bakın.

Kod örneği

Nesne 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 metin sınıflandırma uygulamanızı oluşturmaya başlamanıza yardımcı olur. Nesne Algılayıcı örnek kodunu yalnızca web tarayıcınızı kullanarak görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.

Kurulum

Bu bölümde, Nesne Algılayıcı'yı kullanmak için geliştirme ortamınızı özel olarak 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

Nesne Algılayıcı 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 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.js"
    crossorigin="anonymous"></script>
</head>

Model

MediaPipe Nesne Dedektörü görevi için bu görevle uyumlu, eğitilmiş bir model gerekir. Nesne Algılayıcı için eğitilmiş modeller hakkında daha fazla bilgi edinmek için Modeller bölümündeki göreve genel bakış 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 çalıştırma görevine hazırlanmak için Nesne Algılayıcı ObjectDetector.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, daha fazla yapılandırma seçeneği belirlemenize olanak tanıyan createFromOptions() işlevinin kullanımını göstermektedir. Kullanılabilir 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 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ı bir uygulama 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 modu. VİDEO: Bir videonun kodu çözülmüş kareleri veya kamera gibi giriş verilerinin canlı yayınındaki mod.	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	Varsa görev modelinin meta verilerinde sağlanan görünen adlar için kullanılacak etiketlerin dilini ayarlar. İngilizce için varsayılan değer `en` şeklindedir. TensorFlow Lite Metadata Writer API'yi kullanarak özel modelin meta verilerine yerelleştirilmiş etiketler ekleyebilirsiniz	Yerel ayar kodu	en
`maxResults`	İsteğe bağlı olarak döndürülecek en yüksek puanlı algılama sonuçlarının isteğe bağlı maksimum sayısını ayarlar.	Pozitif sayılar	-1 (tüm sonuçlar döndürülür)
`scoreThreshold`	Model meta verilerinde belirtilen eşiği (varsa) geçersiz kılan tahmin puanı eşiğini ayarlar. Bu değerin altındaki sonuçlar reddedilir.	Tüm kayan	Belirlenmedi
`categoryAllowlist`	İsteğe bağlı olarak izin verilen kategori adları listesini ayarlar. Boş değilse kategori adı bu grupta yer almayan algılama sonuçları filtrelenir. Yinelenen veya bilinmeyen kategori adları yoksayılır. Bu seçenek, `categoryDenylist` ile birlikte kullanılamaz ve her iki sonucun da kullanılması hataya neden olur.	Herhangi bir dize	Belirlenmedi
`categoryDenylist`	İzin verilmeyen kategori adlarının isteğe bağlı listesini ayarlar. Boş değilse kategori adı bu kümede yer alan algılama sonuçları filtrelenir. Yinelenen veya bilinmeyen kategori adları yoksayılır. Bu seçenek `categoryAllowlist` ile birlikte kullanılamaz ve her iki sonucun da kullanılması hataya neden olur.	Herhangi bir dize	Belirlenmedi

Verileri hazırlama

Nesne Algılayıcı, ana makine tarayıcısının desteklediği herhangi bir biçimde resimlerdeki nesneleri 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 nesneleri algılamak için API'yi kullanarak tek seferde bir kareyi hızlı bir şekilde işleyebilirsiniz. Hareketlerin videoda ne zaman gerçekleştiğini belirlemek için karenin zaman damgasını kullanabilirsiniz.

Görevi çalıştırma

Nesne Dedektörü, tekli görüntüler üzerinde çalışmak için detect(), video karelerindeki nesneleri algılamak içinse detectForVideo() kullanır. Görev, verileri işler, nesneleri tanımaya çalışır ve ardından 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. Video karelerindeki nesneleri cihazın kamerasından 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ı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 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ı bir uygulama 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ç nesnesi, her algılamanın algılanan nesne hakkında bir sınırlayıcı kutu ve kategori bilgisi (nesnenin adı ve güven puanı dahil) içerdiği algılamaların listesini içerir.

Aşağıda, bu görevden alınan çı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örseli gösterilmektedir:

Nesne Algılayıcı ö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.