Web için etkileşimli resim segmentasyon kılavuzu

MediaPipe Interactive Image Segmenter görevi, bir resimdeki konumu alır, bu konumdaki bir nesnenin sınırlarını tahmin eder ve nesnenin segmentasyonunu görüntü verileri olarak döndürür. Bu talimatlarda, Node ve web uygulamaları için Etkileşimli Görüntü Segmenter'ı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

Etkileşimli Görüntü Segmentleyici'nin ö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 etkileşimli görüntü segmentasyonu uygulamanızı oluşturmaya başlamanıza yardımcı olur. Etkileşimli Görüntü Segmentleyici ö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ı ve kod projelerinizi özellikle Etkileşimli Görüntü Segmenter'ı kullanacak şekilde ayarlamayla ilgili temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri de dahil olmak üzere MediaPipe görevlerini kullanmak için geliştirme ortamınızı ayarlama hakkında genel bilgi edinmek istiyorsanız Web için kurulum kılavuzu başlıklı makaleyi inceleyin.

JavaScript paketleri

Interactive Image Segmenter kodu, MediaPipe @mediapipe/tasks-vision NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platform Kurulum Kılavuzu'nda verilen bağlantılardan bulup indirebilirsiniz.

Aşağıdaki komutu kullanarak yerel hazırlama için gerekli paketleri aşağıdaki kodla yükleyebilirsiniz:

npm install --save @mediapipe/tasks-vision

Görev kodunu bir içerik yayınlama ağı (CDN) hizmeti üzerinden içe aktarmak istiyorsanız HTML dosyanızdaki etiketine aşağıdaki kodu ekleyin:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Model

MediaPipe Interactive Image Segmenter görevi için bu görevle uyumlu, eğitilmiş bir model gerekir. Etkileşimli Görüntü Segmentleyici 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 Interactive Image Segmenter 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 Etkileşimli Görüntü Segmentleyici'yi ö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:

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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
outputCategoryMask True olarak ayarlanırsa çıkış, uint8 görüntüsü olarak bir segmentasyon maskesi içerir. Burada her piksel değeri, pikselin ilgi alanında bulunan nesnenin bir parçası olup olmadığını gösterir. {True, False} False
outputConfidenceMasks True olarak ayarlanırsa çıkış, kayan noktalı değer görüntüsü olarak bir segmentasyon maskesi içerir. Burada her kayan noktalı değer, pikselin ilgi alanında bulunan nesnenin bir parçası olduğuna dair güveni temsil eder. {True, False} True
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

Verileri hazırlama

Etkileşimli Resim Segmentleyici, ana makine tarayıcısı tarafından desteklenen herhangi bir biçimdeki resimlerdeki nesneleri segmentlere ayırabilir. 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.

Interactive Image Segmenter segment() ve segmentForVideo() 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 segmentlere ayırırsanız her segmentasyon görevi ana iş parçacığını engeller. segment() ve segmentForVideo() öğelerini başka bir iş parçacığında çalıştıracak web işçileri uygulayarak bunu önleyebilirsiniz.

Görevi çalıştırma

Etkileşimli Görüntü Segmentleyici, çıkarımları tetiklemek için segment() yöntemini kullanır. Interactive Image Segmenter, algılanan segmentleri, görev için çıkarım çalıştırırken ayarladığınız bir geri çağırma işlevine görüntü verileri olarak döndürür.

Aşağıdaki kodda, görev modeliyle işlemenin nasıl yürütüleceği gösterilmektedir:

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

Etkileşimli Görüntü Segmentleyici görevini çalıştırmanın daha eksiksiz bir uygulaması için örneğe bakın.

Sonuçları işleme ve görüntüleme

Etkileşimli Görüntü Segmentleyici görevi, çıkarım çalıştırıldıktan sonra segment görüntü verilerini bir geri çağırma işlevine döndürür. Çıkışın içeriği görüntü verileridir ve görevi yapılandırırken ayarladıklarınıza bağlı olarak kategori maskesi, güven maskeleri veya her ikisini de içerebilir.

Aşağıdaki bölümlerde bu görevden elde edilen çıkış verileri daha ayrıntılı olarak açıklanmaktadır:

Kategori maskesi

Aşağıdaki görsellerde, ilgi alanı noktası belirtilmiş bir kategori değeri maskesi için görev çıkışının görselleştirilmesi gösterilmektedir. Her piksel, ilgi alanında bulunan nesnenin bir parçası olup olmadığını gösteren bir uint8 değeridir. İkinci resimdeki siyah beyaz daire, seçilen ilgi alanını gösterir.

Bir yaprak yığınının ortasında duran köpek Önceki resimdeki köpeğin ana hatları

Orijinal resim ve kategori maskesi çıkışı. Pascal VOC 2012 veri kümesinden kaynak görüntü.

Güven maskesi

Güven maskesinin çıkışı, her görüntü giriş kanalı için [0, 1] arasında kayan nokta değerleri içerir. Değerler ne kadar yüksekse resim pikselinin ilgi alanında bulunan nesnenin bir parçası olduğuna dair güven o kadar yüksektir.

Etkileşimli Görüntü Segmentleyici örnek kodu, görevden döndürülen sınıflandırma sonuçlarının nasıl görüntüleneceğini gösterir. Ayrıntılar için örneğe bakın.