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. Örneğin, özellikleri, modelleri ve yapılandırma seçenekleri hakkında Bu görev için Genel Bakış'ı inceleyin.

Kod örneği

Resim Segmenter'ın örnek kodu, bu etiketin eksiksiz bir şekilde uygulanmasını sağlar. görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize Kendi görüntü segmentasyon uygulamanızı oluşturmaya başlayın. Bu projeleri görüntüleyebilir, çalıştırabilir, Resim Segmenter aracını düzenleyerek örnek kod yalnızca web tarayıcınızı kullanarak. 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. Şu konularda genel bilgi için: dahil olmak üzere MediaPipe görevlerini kullanmak için geliştirme ortamınızı daha fazla bilgi için Web için kurulum kılavuzu.

JavaScript paketleri

Resim Segmenter kodu MediaPipe @mediapipe/tasks-vision üzerinden kullanılabilir NPM paketi. Şunları yapabilirsiniz: bu kitaplıkları, platformda sağlanan bağlantılardan bulup indirin Kurulum kılavuzu.

Yerel hazırlık için gerekli paketleri aşağıdaki kodla yükleyebilirsiniz kullanabilirsiniz:

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 bu modeli proje dizininizde depolayın:

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

Görevi oluşturma

Resim Segmenter createFrom...() işlevlerinden birini kullanarak çıkarımları yapmaya hazır hale getirebilirsiniz. createFromModelPath() kullanın işlevi, eğitilen model dosyasına giden göreli veya mutlak bir yolla 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, Yapılandırma seçenekleri içeren Resim Segmenter'ı. Görevle ilgili daha fazla bilgi için Yapılandırma seçenekleri bölümüne bakın.

Aşağıdaki kod, görevin özel seçenekler:

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örev, web uygulamaları için aşağıdaki yapılandırma seçeneklerini içerir:

Seçenek Adı Açıklama Değer Aralığı Varsayılan Değer
outputCategoryMask True olarak ayarlanırsa çıkışta segmentasyon maskesi bulunur. her piksel değeri kazanan kategoriyi gösteren bir uint8 resmi olarak değer. {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örev modelinin meta verileri (varsa). Şunun için varsayılan: en İngilizce. Özel bir modelin meta verilerine yerelleştirilmiş etiketler ekleyebilirsiniz TensorFlow Lite Metadata Writer API'yi kullanarak Yerel ayar kodu en
resultListener Sonuç işleyiciyi segmentasyon sonuçlarını alacak şekilde ayarlar Resim segmentleyici LIVE_STREAM modundayken eşzamansız olarak. 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 Segmenter segment() ve segmentForVideo() yöntemlerine yapılan çağrılar çalıştırılır senkronize edin ve kullanıcı arayüzü ileti dizisini engelleyin. Nesneleri cihaz kamerasından video kareleri YouTube'da izlemek için her segmentasyon görevi ana ileti dizisi. Web çalışanlarını kullanarak bu durumu önleyebilirsiniz. segment() ve segmentForVideo() başka bir ileti dizisinde.

Görevi çalıştırma

Resim Segmenter, resim modu ile segment() yöntemini ve Çıkarımları tetiklemek için video modunda segmentForVideo() yöntemi. İ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 Segmenter görevi çalıştırmanın daha kapsamlı bir uygulaması için bkz. kod örneği hakkında daha fazla bilgi edinin.

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 için görev çıkışının görselleştirmesi gösterilmektedir güven maskesi oluşturabilirsiniz. Güven maskesi çıkışı, [0, 1]

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

Kategori değeri

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

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

Resim Segmenter örnek kodu, segmentasyonun nasıl görüntüleneceğini gösterir. daha fazla bilgi edinmek için kod örneği inceleyebilirsiniz.