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

MediaPipe Etkileşimli Görüntü Segmentörü görevi, bir resimdeki bir konumu alır, bu konumdaki bir nesnenin sınırlarını tahmin eder ve nesnenin segmentasyonunu resim verileri olarak döndürür. Bu talimatlarda, Node ve web uygulamaları için Etkileşimli Görüntü Segmentleyici'nin 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 Resim Segmentleyici'ye ait örnek kod, referans olarak kullanabileceğiniz bu görevin JavaScript'de eksiksiz bir şekilde uygulanmasını sağlar. Bu kod, bu görevi test etmenize ve kendi etkileşimli resim segmentasyon uygulamanızı oluşturmaya başlamanıza yardımcı olur. Etkileşimli Resim Segmentörü örnek kodunu yalnızca web tarayıcınızı kullanarak görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz. Bu örneğin kodunu GitHub'da da inceleyebilirsiniz.

Kurulum

Bu bölümde, geliştirme ortamınızı ve kod projelerinizi özellikle Etkileşimli Resim Segmentleyici'yi kullanacak şekilde ayarlamayla ilgili temel adımlar açıklanmaktadır. Platform sürümü şartları da dahil olmak üzere, MediaPipe görevlerini kullanmak için geliştirme ortamınızı ayarlama hakkında genel bilgi için Web için kurulum kılavuzu başlıklı makaleyi inceleyin.

JavaScript paketleri

Etkileşimli resim segmentleyici kodu, MediaPipe @mediapipe/tasks-vision NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platformun Kurulum kılavuzundaki bağlantılardan bulabilir ve indirebilirsiniz.

Aşağıdaki komutu kullanarak yerel hazırlık 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 aracılığıyla 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.js"
    crossorigin="anonymous"></script>
</head>

Model

MediaPipe Interactive Image Segmenter görevi, bu görevle uyumlu bir eğitimli model gerektirir. Etkileşimli Resim Segmentleyici için mevcut eğitimli modeller hakkında daha fazla bilgi edinmek istiyorsanız göreve genel bakıştaki Modeller bölümüne göz atın.

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

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

Görevi oluşturun

Görevi çıkarım çalıştırmaya hazırlamak için Etkileşimli Resim Segmentleyici createFrom...() işlevlerinden birini kullanın. Eğitilmiş model dosyasının göreli veya mutlak yoluyla createFromModelPath() işlevini kullanın. Modeliniz zaten belleğe yüklenmişse createFromModelBuffer() yöntemini kullanabilirsiniz.

Aşağıdaki kod örneğinde, görevi ayarlamak için createFromOptions() işlevinin kullanımı gösterilmektedir. createFromOptions işlevi, Etkileşimli Resim Segmentleyici'yi yapılandırma seçenekleriyle ö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örevde, web uygulamaları için aşağıdaki yapılandırma seçenekleri bulunur:

Seçenek Adı Açıklama Değer Aralığı Varsayılan değer
outputCategoryMask True olarak ayarlanırsa çıkış, her piksel değerinin pikselin ilgi alanı {True, False} False
outputConfidenceMasks True olarak ayarlanırsa çıkış, her kayan nokta değerinin pikselin ilgi alanındaki nesnenin bir parçası olduğuna dair güveni temsil ettiği, kayan nokta değeri resmi olarak bir segmentasyon maskesi içerir. {True, False} True
displayNamesLocale Görevin modelinin meta verilerinde sağlanan görünen adlar için kullanılacak etiketlerin dilini belirler (varsa). Varsayılan değer, İngilizce için en'tir. TensorFlow Lite Meta Veri Yazıcı API'yi kullanarak özel bir modelin meta verilerine yerelleştirilmiş etiketler ekleyebilirsiniz Yer kodu en

Verileri hazırlama

Etkileşimli Resim Segmentleyici, resimlerdeki nesneleri barındıran tarayıcı tarafından desteklenen herhangi bir biçimde segmentlere ayırabilir. Görev, yeniden boyutlandırma, döndürme ve değer normalleştirme dahil olmak üzere veri girişi ön işleme işlemlerini de yönetir.

Etkileşimli Resim Segmentleyici segment() ve segmentForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacısını engeller. Bir cihazın kamerasından video karelerindeki nesneleri segmentlere ayırırsanız her segmentasyon görevi ana iş parçacığını engeller. segment() ve segmentForVideo()'yi başka bir iş parçacığında çalıştıracak web işçileri uygulayarak bunu önleyebilirsiniz.

Görevi çalıştırma

Etkileşimli Resim Segmentleyici, çıkarım yapmak için segment() yöntemini kullanır. Etkileşimli Görüntü Segmentörü, algılanan segmentleri görev için çıkarım çalıştırırken ayarladığınız bir geri çağırma işlevine resim verisi 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 resim segmentleyici görevini çalıştırmanın daha kapsamlı bir uygulaması için kod örneğine bakın.

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

Etkileşimli Görüntü Segmentörü görevi, çıkarım çalıştırıldığında segment resim verilerini bir geri çağırma işlevine döndürür. Çıktının içeriği resim verileridir ve görevi yapılandırırken belirlediğinize bağlı olarak kategori maskesi, güven maskeleri veya her ikisi de içerebilir.

Aşağıdaki bölümlerde bu görevin çıkış verileri daha ayrıntılı olarak açıklanmıştır:

Kategori maskesi

Aşağıdaki resimlerde, ilgi alanı noktası alanı belirtilen bir kategori değeri maskesi için görev çıktısının görselleştirmesi gösterilmektedir. Her piksel, pikselin ilgi alanı içinde bulunan nesnenin bir parçası olup olmadığını belirten bir uint8 değeridir. İkinci resimdeki siyah beyaz daire, seçilen ilgi alanını gösterir.

Yaprak yığınının ortasında duran bir köpek Önceki resimdeki köpeğin dış çizgisi

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

Güven maskesi

Güven maskesinin çıkışı, her görüntü giriş kanalı için [0, 1] arasında değişen kayan nokta değerleri içerir. Daha yüksek değerler, resim pikselin ilgi alanındaki nesnenin bir parçası olduğuna dair daha yüksek bir güven düzeyini gösterir.

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