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

MediaPipe Resim Segmenter görevi, görüntüleri önceden tanımlanmış öğelere göre bölgelere bölmenizi sağlar. kategorilerden en iyi şekilde yararlanabilirsiniz. Bu talimatlarda, Düğüm ve web uygulamaları için Resim 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

Resim Segmenteri'nin örnek kodunda, bu görevin JavaScript'te tam bir uygulaması referans olarak sunulmaktadır. Bu kod, bu görevi test etmenize ve kendi görüntü segmentasyon uygulamanızı oluşturmaya başlamanıza yardımcı olur. Görüntü segmentasyon örnek kodunu yalnızca web tarayıcınızı kullanarak görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz. Bu örneğin kodunu şuradan da inceleyebilirsiniz: GitHub'a gidin.

Kurulum

Bu bölümde, geliştirme ortamınızı ve ayarlarınızı yönetmeyle ilgili kullanmak için özel olarak projeleri kodlayabilir. Platform sürümü koşulları 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

Resim Segmenter kodu MediaPipe @mediapipe/tasks-vision üzerinden kullanılabilir NPM paketi. 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 içerik yayınlama ağı (CDN) aracılığıyla içe aktarmak istiyorsanız hizmetini kullanmak için, 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örevi görebilir. Resim Segmenter için eğitilmiş mevcut modeller hakkında daha fazla bilgi için göreve genel bakış Modeller bölümü.

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

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

Görevi oluşturma

Resim Segmenter createFrom...() işlevlerinden birini kullanarak ve çıkarımları yapmaya hazırlarsınız. createFromModelPath() kullanın işlevi görür. Modeliniz belleğe zaten yüklenmişse aşağıdakileri kullanabilirsiniz: createFromModelBuffer() yöntemini çağırın.

Aşağıdaki kod örneğinde, createFromOptions() işlevinin görevi ayarlayın. createFromOptions işlevi, resim segmentörünü yapılandırma seçenekleriyle özelleştirmenize olanak tanır. Görevle ilgili daha fazla bilgi için Yapılandırma seçenekleri bölümüne bakın.

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

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şturmanın daha kapsamlı bir uygulaması için bkz. kod örneği hakkında daha fazla bilgi edinin.

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 kazanan kategori değerini gösterdiği uint8 resim olarak bir segmentasyon maskesi içerir. {True, False} False
outputConfidenceMasks True olarak ayarlanırsa çıkışta segmentasyon maskesi bulunur. her kayan değerin güveni temsil ettiği bir kayan değer resmi olarak ve puan eşlemesini seçin. {True, False} True
displayNamesLocale Görevin modelinin meta verilerinde sağlanan görünen adlar için kullanılacak etiketlerin dilini belirler (varsa). Şunun için varsayılan: en İngilizce. TensorFlow Lite Meta Veri Yazıcı API'yi kullanarak özel bir modelin meta verilerine yerelleştirilmiş etiketler ekleyebilirsiniz Yerel ayar kodu en
resultListener Sonuç dinleyiciyi, resim segmentörü LIVE_STREAM modundayken segmentasyon sonuçlarını asenkron olarak alacak şekilde ayarlar. Yalnızca koşu modu LIVE_STREAM olarak ayarlandığında kullanılabilir Yok Yok

Verileri hazırlama

Resim Segmenti, resimlerdeki nesneleri ana tarayıcı tarayıcısı. Görev ayrıca aşağıdakiler de dahil olmak üzere veri girişi ön işlemesini: yeniden boyutlandırma, döndürme ve değer normalleştirmesi gibi.

Resim Segmentleyici segment() ve segmentForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü ileti dizisini engeller. Nesneleri cihaz kamerasından video kareleri YouTube'da izlemek için her segmentasyon görevi ana ileti dizisi. 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

Resim segmentleyici, çıkarım tetiklemek için resim modunda segment() yöntemini ve video modunda segmentForVideo() yöntemini kullanır. İlgili içeriği oluşturmak için kullanılan Resim Segmenter, algılanan segmentleri bir geri çağırmaya resim verisi olarak döndürür işlev için bir çıkarım çalıştırırken belirlediğiniz işlevdir.

Aşağıdaki kod, görev modeliyle işlemenin 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 segmentleyici 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 Segmenter görevi, segment resim verilerini bir geri çağırma işlevinden yararlanırız. Çıkışın içeriği, ayarladığınız outputType değerine bağlıdır Görevi yapılandırdığınızda.

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

Kategori güveni

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

Orijinal resim ve kategori güven maskesi çıkışı. Şuradaki kaynak resim: VOC 2012'nin Paskalası veri kümesiyle birlikte kullanılamaz.

Kategori değeri

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

Orijinal resim ve kategori maskesi çıktısı. Şuradaki kaynak resim: VOC 2012'nin Paskalası veri kümesiyle birlikte kullanılamaz.

Resim Segmentleyici örnek kodunda, görevden döndürülen segmentasyon sonuçlarının nasıl görüntüleneceği gösterilmektedir. Ayrıntılar için kod örneğine bakın.