Web için görüntü segmentasyon kılavuzu

MediaPipe Resim Segmenter görevi, arka plan bulanıklaştırma gibi görsel efektler uygulamak için resimleri önceden tanımlanmış kategorilere göre bölgelere ayırmanızı sağlar. Bu talimatlar, Düğüm ve web uygulamaları için Resim Segmenter'ın nasıl kullanılacağını gösterir. 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

Resim Segmenter örnek kodu, 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 görüntü segmentasyon uygulamanızı oluşturmaya başlamanıza yardımcı olur. Yalnızca web tarayıcınızı kullanarak Resim Segmenter örnek kodunu görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz. Bu örnekle ilgili kodu GitHub'da da inceleyebilirsiniz.

Kurulum

Bu bölümde, geliştirme ortamınızı kurmanın önemli adımları ve projelerinizi özellikle Görüntü Segmenter'ı kullanacak şekilde kodlamak için izlemeniz gereken temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri de dahil olmak üzere, MediaPipe görevlerini kullanmak amacıyla geliştirme ortamınızı ayarlama hakkında genel bilgiler için Web için kurulum kılavuzuna bakın.

JavaScript paketleri

Resim Segmenter kodu, MediaPipe @mediapipe/tasks-vision NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platform Kurulum rehberinde sağlanan bağlantılardan bulup indirebilirsiniz.

Aşağıdaki komutu kullanarak gerekli paketleri yerel hazırlık için 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 etikete 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 Resim Segmenter görevi, bu görevle uyumlu, eğitilmiş bir model gerektirir. Resim Segmenter için eğitilmiş modeller hakkında daha fazla bilgi almak isterseniz göreve genel bakış Modeller 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 yapma görevine hazırlanmak için Resim Segmenter 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, görevi ayarlamak için createFromOptions() işlevinin kullanımını gösterir. createFromOptions işlevi, yapılandırma seçenekleriyle Resim Segmenter'ı özelleştirmenize olanak tanır. Görev yapılandırması hakkında daha fazla bilgi için Yapılandırma seçenekleri bölümüne bakın.

Aşağıdaki kod, görevin özel seçeneklerle nasıl oluşturulacağını ve yapılandırılacağını gösterir:

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

Resim Segmenter 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
outputCategoryMask True olarak ayarlanırsa çıkış, uint8 görüntüsü olarak bir segmentasyon maskesi içerir. Her piksel değeri, kazanan kategori değerini gösterir. {True, False} False
outputConfidenceMasks True olarak ayarlanırsa çıktı, kayan değer resmi olarak bir segmentasyon maskesi içerir. Burada her kayan değer, kategorinin güven puanı haritasını temsil eder. {True, False} True
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

Verileri hazırlama

Resim Segmenter, resimlerdeki nesneleri ana makine tarayıcısının desteklediği herhangi bir biçimde segmentlere ayırabilir. 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.

Resim 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. Video karelerindeki nesneleri cihazın kamerasından 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ırmak için web çalışanlarını uygulayarak bunu önleyebilirsiniz.

Görevi çalıştırma

Resim Segmenter, çıkarımları tetiklemek için görüntü modu ile segment() yöntemini ve video modu ile segmentForVideo() yöntemini kullanır. Resim Segmentörü, algılanan segmentleri, görev için bir çıkarımı çalıştırırken ayarladığınız bir geri çağırma işlevine resim verileri olarak döndürür.

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

Resim

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
  

Video

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Resim Segmenter görevi çalıştırmanın daha kapsamlı bir uygulaması için kod örneğine bakın.

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

Çıkarım çalıştırıldıktan sonra, Resim Segmentleyici görevi segment resim verilerini bir geri çağırma işlevine döndürür. Çıktının içeriği, görevi yapılandırırken ayarladığınız outputType değerine bağlıdır.

Aşağıdaki bölümlerde, bu görevden elde edilen çıkış verilerinin örnekleri gösterilmektedir:

Kategori güveni

Aşağıdaki resimlerde, bir kategori güven maskesi için görev çıkışının görselleştirmesi gösterilmektedir. Güven maskesi çıktısı, [0, 1] arasında kayan noktalı değerler içeriyor.

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

Kategori değeri

Aşağıdaki resimlerde, bir kategori değeri maskesi için görev çıkışının görselleştirmesi gösterilmektedir. Kategori maskesi aralığı [0, 255] ve her piksel değeri, model çıktısının kazanan kategori dizinini temsil eder. Kazanan kategori dizini, modelin tanıyabileceği kategoriler arasında en yüksek puana sahiptir.

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

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