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

MediaPipe Etkileşimli Resim Segmenter görevi, bir görüntüdeki konumu alır ve bir nesneye karşılık gelir ve nesnenin segmentasyonunu görüntü olarak döndürür dışı verilerdir. Bu talimatlarda, Düğüm ve web için Etkileşimli Resim Segmenter'in nasıl kullanılacağı gösterilmektedir Özellikler, modeller ve yapılandırma hakkında daha fazla bilgi için bu görevin seçenekleri için Genel Bakış'ı inceleyin.

Kod örneği

Etkileşimli Resim Segmenter için örnek kodu, bu etiketin eksiksiz bir şekilde uygulanmasını sağlar görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize Kendi etkileşimli görüntü segmentasyon uygulamanızı oluşturmaya başlayın. Şunları yapabilirsiniz: Etkileşimli Resim Segmenter'i görüntüleyin, çalıştırın ve düzenleyin ö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

Etkileşimli Resim Segmenter koduna MediaPipe @mediapipe/tasks-vision üzerinden erişilebilir. 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 Etkileşimli Resim Segmenter görevi, bu görevi görebilir. Etkileşimli Resim Segmenter için eğitilmiş modeller hakkında daha fazla bilgi için bkz. 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

Aşağıdaki işlemler için Etkileşimli Resim Segmenter createFrom...() işlevlerinden birini kullanın: çı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çeneklerine sahip etkileşimli Resim Segmenter'ı. Yapılandırma 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çenekler:

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ç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. Bu bir uint8 resmi gibi, burada her bir piksel değeri pikselin alakalı bölgede bulunan nesne. {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 pikselin ilgili alanda bulunan nesnenin parçası olduğunu doğrulayın. {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

Verileri hazırlama

Etkileşimli 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.

Etkileşimli Resim Segmenter segment() ve segmentForVideo() yöntemlerine yapılan çağrılar çalıştırılıyor senkronize edin ve kullanıcı arayüzü ileti dizisini engelleyin. Nesneleri kameradan alınan video kareleri varsa 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

Etkileşimli Resim Segmenter, çıkarımları tetiklemek için segment() yöntemini kullanır. İlgili içeriği oluşturmak için kullanılan Etkileşimli 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:

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