Web için resim yerleştirme rehberi

MediaPipe Görüntü Yerleştirme görevi, iki görüntünün benzerliğinin karşılaştırılması gibi ML ile ilişkili görüntü işleme görevlerini gerçekleştirmek için görüntü verilerini sayısal bir temsile dönüştürmenizi sağlar. Bu talimatlar, Düğüm ve web uygulamaları için Görüntü Yerleştirme'nin nasıl kullanılacağını gösterir.

Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi için Genel Bakış'a bakın.

Kod örneği

Resim Yerleştirme örnek kodu, size referans olması açısından bu görevin JavaScript'te eksiksiz uygulamasını sağlamaktadır. Bu kod, bu görevi test etmenize ve kendi resim yerleştirme uygulamanızı oluşturmaya başlamanıza yardımcı olur. Resim Yerleştirme ö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ı kurmanın temel adımları açıklanmaktadır. Projelerinizi özel olarak Görüntü Yerleştirme'yi kullanmak için kodlayın. Platform sürümü gereksinimleri de dahil olmak üzere, geliştirme ortamınızı MediaPipe görevlerini kullanmak amacıyla ayarlama hakkında genel bilgiler için Web için kurulum kılavuzuna bakın.

JavaScript paketleri

Görüntü Yerleştirme kodu, MediaPipe @mediapipe/tasks-vision NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platform Kurulum rehberinde sağlanan bağlantılardan bulup indirebilirsiniz.

Aşağıdaki komutu kullanarak gerekli paketleri yerel hazırlık için 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 etikete 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 Görüntü Yerleştirme görevi, bu görevle uyumlu, eğitilmiş bir model gerektirir. Resim Yerleştirme için eğitilmiş modeller hakkında daha fazla bilgi almak isterseniz göreve genel bakış Modeller bölümüne bakın.

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

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

Görevi oluşturma

Model yolu belirtme

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 belirtme

Modeliniz belleğe zaten 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 belirtin

MediaPipe Görüntü Yerleştirme 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 edinmek için Yapılandırma seçenekleri bölümüne bakın.

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

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 modu.

VİDEO: Bir videonun kodu çözülmüş kareleri veya kamera gibi giriş verilerinin canlı yayınındaki 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 zaten yerel bir L2_NORMALIZATION TFLite Op bulunmuyorsa kullanın. Çoğu durumda bu zaten mevcuttur ve L2 normalleştirmesi, bu seçeneğe gerek olmadan TFLite çıkarımıyla yapılır. Boolean False
quantize Döndürülen yerleştirmenin skalar niceleme kullanılarak baytlara dönüştürülüp ölçülmeyeceği. Yerleştirmelerin açıkça birim norm olduğu varsayılır. Bu nedenle her boyut için [-1,0, 1,0] değerinde bir değer olması garanti edilir. Böyle bir durum söz konusu değilse l2Normalize seçeneğini kullanın. Boolean False

Verileri hazırlama

Resim Yerleştirme, ana makine tarayıcısının desteklediği herhangi bir biçimdeki resimleri yerleştirebilir. Görev; yeniden boyutlandırma, döndürme ve değer normalleştirmesi dahil olmak üzere, veri girişi ön işlemesini de yönetir.

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

Görevi çalıştırma

Görüntü Yerleştirici, çıkarımları tetiklemek için embed() (çalışma moduyla image) ve embedForVideo() (çalışma moduyla video) yöntemlerini kullanır. Image Embedder API, giriş görüntüsü için gömme vektörlerini döndürür.

Aşağıdaki kod, işlemenin görev modeliyle nasıl yürütüldüğünü gösterir:

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ığında, Resim Yerleştirme görevi, giriş görüntüsü veya çerçevesi için yerleştirme vektörlerini içeren bir ImageEmbedderResult nesnesi döndürür.

Aşağıda, bu görevden alınan çıkış verilerinin bir örneği gösterilmektedir:

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:

ImageEmbedder.cosineSimilarity işlevini kullanarak iki yerleştirmenin semantik 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]);

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