Web için resim yerleştirme rehberi

MediaPipe Resim Yerleştiricisi görevi, iki resmin benzerliğini karşılaştırma gibi makine öğrenimi ile ilgili resim işleme görevlerini gerçekleştirmek için resim verilerini sayısal bir temsile dönüştürmenize olanak tanır. Bu talimatlarda, Node ve web uygulamaları için resim yerleştiricinin 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 Ekle aracının örnek kodu, referans olarak kullanabileceğiniz bu görevin JavaScript'de eksiksiz bir uygulamasını sağlar. Bu kod, bu görevi test etmenize ve kendi resim yerleştirme uygulamanızı oluşturmaya başlamanıza yardımcı olur. Resim Yerleştirici örnek kodunu yalnızca web tarayıcınızı kullanarak görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.

Kurulum

Bu bölümde, geliştirme ortamınızı ve kod projelerinizi özellikle Resim Yerleştirici'yi kullanacak şekilde ayarlamayla ilgili temel adımlar açıklanmaktadır. 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 Yerleştirici 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 @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:

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

MediaPipe Resim Yerleştiricisi görevi, bu görevle uyumlu bir eğitimli model gerektirir. Resim Yerleştirici 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

Model yolu belirtin

createFromModelPath() yöntemini kullanarak varsayılan seçeneklerle bir görev oluşturabilirsiniz:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

Model arabelleğini belirtin

Modeliniz zaten belleğe yüklenmişse createFromModelBuffer() yöntemini kullanabilirsiniz:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

Özel seçenekleri belirtme

MediaPipe Resim Yerleştirici görevi, görevi ayarlamak için createFromOptions işlevini kullanır. createFromOptions işlevi, yapılandırma seçenekleri için değerleri kabul eder. 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:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

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
running_mode Görevin çalışma modunu ayarlar. İki mod vardır:

RESİM: Tek resim girişleri için kullanılan mod.

VIDEO: Videonun veya kameradan gelen giriş verilerinin canlı yayınındaki kod çözülmüş kareler için kullanılan mod.		 {IMAGE, VIDEO} IMAGE
l2Normalize Döndürülen özellik vektörünün L2 normuyla normalleştirilip normalleştirilmeyeceği. Bu seçeneği yalnızca modelde halihazırda doğal bir L2_NORMALIZATION TFLite Op içermiyorsa kullanın. Çoğu durumda bu durum geçerlidir ve L2 normalleştirmesi, bu seçeneğe gerek kalmadan TFLite çıkarımıyla elde edilir. Boolean False
quantize Döndürülen yerleştirmenin skaler kesme işlemiyle baytlara bölünüp bölünmeyeceği. Yerleşimlerin birim normal olduğu varsayılır ve bu nedenle tüm boyutların [-1,0; 1,0] aralığında bir değere sahip olduğu garanti edilir. Aksi takdirde l2Normalize seçeneğini kullanın. Boolean False

Verileri hazırlama

Resim Yerleştirici, resimleri barındıran tarayıcı tarafından desteklenen tüm biçimlerde yerleştirebilir. 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.

Resim Yerleştirici embed() ve embedForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacısını engeller. Video karelerinden özellik vektörleri ayıklamak istiyorsanız her yerleştirme ana ileti dizisini engeller. embed() ve embedForVideo() yöntemlerini başka bir iş parçacığında çalıştıracak web işçileri uygulayarak bunu önleyebilirsiniz.

Görevi çalıştırma

Görüntü Yerleştirici, çıkarım tetiklemek için embed() (çalışma modu image ile) ve embedForVideo() (çalışma modu video ile) yöntemlerini kullanır. Image Embedder API, giriş resminin yerleştirme vektörlerini döndürür.

Aşağıdaki kodda, işleme işleminin görev modeliyle nasıl yürütüleceği gösterilmektedir:

Resim

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

Video

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

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

Resim Yerleştirici görevi, çıkarım çalıştırıldığında giriş resmi veya çerçevenin yerleştirme vektörlerini içeren bir ImageEmbedderResult nesnesi döndürür.

Aşağıda, bu görevin çıkış verilerine örnek verilmiştir:

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

Bu sonuç, aşağıdaki resim yerleştirilerek elde edilmiştir:

Egzotik bir kedinin orta plan çekimi

ImageEmbedder.cosineSimilarity işlevini kullanarak iki yerleştirmenin anlamsal benzerliğini karşılaştırabilirsiniz. Örnek için aşağıdaki koda bakın.

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

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