Web için resim yerleştirme rehberi

MediaPipe Image Embedder görevi, iki resmin benzerliğini karşılaştırma gibi makine öğrenimiyle ilgili görüntü işleme görevlerini gerçekleştirmek için görüntü verilerini sayısal bir temsile dönüştürmenize olanak tanır. Bu talimatlarda, Node ve web uygulamaları için Image Embedder'ı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

Image Embedder'ın örnek kodu, bu görevin JavaScript'te eksiksiz bir uygulamasını referansınız için 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 örneğini 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 Image Embedder'ı kullanacak şekilde ayarlamayla ilgili temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri de dahil olmak üzere MediaPipe görevlerini kullanmak için geliştirme ortamınızı ayarlama hakkında genel bilgi edinmek istiyorsanız Web için kurulum kılavuzu başlıklı makaleyi inceleyin.

JavaScript paketleri

Image Embedder kodu, MediaPipe @mediapipe/tasks-vision NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platform Kurulum Kılavuzu'nda verilen bağlantılardan bulup indirebilirsiniz.

Aşağıdaki komutu kullanarak yerel hazırlama 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 üzerinden 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.mjs"
    crossorigin="anonymous"></script>
</head>

Model

MediaPipe Image Embedder görevi, bu görevle uyumlu eğitilmiş bir model gerektirir. Image Embedder için kullanılabilen eğitilmiş modeller hakkında daha fazla bilgi edinmek için görev genel bakışındaki Modeller bölümüne bakın.

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

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

Görevi oluşturma

Model yolu belirtme

createFromModelPath() yöntemini kullanarak varsayılan seçeneklerle 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 Image Embedder 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ö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
running_mode Görevin çalışma modunu ayarlar. İki mod vardır:

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

VIDEO: Bir videonun veya bir kameradan gelen giriş verilerinin canlı yayınındaki kod çözülmüş kareler için 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 yerel bir L2_NORMALIZATION TFLite Op yoksa kullanın. Çoğu durumda bu zaten geçerlidir ve L2 normalleştirme bu nedenle bu seçeneğe gerek kalmadan TFLite çıkarımı aracılığıyla gerçekleştirilir. Boolean False
quantize Döndürülen yerleştirmenin, skaler nicelendirme yoluyla baytlara nicelendirilip nicelendirilmeyeceğini belirtir. Yerleştirmelerin birim norm olduğu varsayılır. Bu nedenle, herhangi bir boyutun değerinin [-1.0, 1.0] aralığında olduğu garanti edilir. Bu durum söz konusu değilse l2Normalize seçeneğini kullanın. Boolean False

Verileri hazırlama

Resim Yerleştirici, resimleri ana makine tarayıcısı tarafından desteklenen herhangi bir biçimde yerleştirebilir. Görev, yeniden boyutlandırma, döndürme ve değer normalleştirme dahil olmak üzere veri girişi ön işlemesini de gerçekleştirir.

embed() ve embedForVideo() yöntemleri için yapılan resim yerleştirme çağrıları eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacığını engeller. Video karelerinden özellik vektörleri çıkarmak 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ımları tetiklemek için embed() (çalıştırma modu image ile) ve embedForVideo() (çalıştırma modu video ile) yöntemlerini kullanır. Image Embedder API, giriş resmi için yerleştirme vektörlerini döndürür.

Aşağıdaki kodda, görevi işleme modelini kullanarak işlemenin 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

Çıkarım çalıştırıldıktan sonra Image Embedder görevi, giriş resmi veya çerçevesi için yerleştirme vektörlerini içeren bir ImageEmbedderResult nesnesi döndürür.

Aşağıda bu görevden elde edilen çıkış verilerine bir ö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 edildi:

Egzotik bir kedinin orta çekim fotoğrafı

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]);

Image Embedder örnek kodu, görevden döndürülen yerleştirme sonuçlarının nasıl görüntüleneceğini gösterir. Ayrıntılar için örneğe bakın.