Web için resim yerleştirme rehberi

MediaPipe Görüntü Yerleştirme görevi, iki görüntünün benzerliğini karşılaştırmak 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ürmenizi sağlar. Bu talimatlar Resim Yerleştirme aracını nasıl kullanacağınızı gösterir. Düğüm ve web uygulamaları için.

Özellikler, modeller ve yapılandırma seçenekleri hakkında daha fazla bilgi Bu görev hakkında daha fazla bilgi için Genel Bakış'ı inceleyin.

Kod örneği

Resim Yerleştirme örnek kodu, bu resmin görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize kendi resim yerleştirme uygulamanızı oluşturmaya başlayın. Bu projeleri görüntüleyebilir, çalıştırabilir, değerini değiştirin ve Resim Yerleştirme örnek kodu yalnızca web tarayıcınızı kullanarak.

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 Yerleştirme 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 @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:

<!-- 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ştirme görevi bu görevi görebilir. Görüntü Yerleştirme için eğitilmiş modellerle ilgili 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

Model yolu belirtme

createFromModelPath() aracını kullanarak varsayılan seçeneklerle görev oluşturabilirsiniz. yöntem:

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 aşağıdakileri kullanabilirsiniz: createFromModelBuffer() yöntem:

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 Resim Yerleştirme görevi, değeri ayarlamak için createFromOptions işlevini kullanır. düşünmelisiniz. createFromOptions işlevi, yapılandırma seçenekleri. Daha fazla bilgi için yapılandırma seçenekleri için Yapılandırma seçenekleri başlıklı makaleye bakın.

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

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çeneklerini içerir:

Seçenek Adı Açıklama Değer Aralığı Varsayılan Değer
running_mode Görev için çalışma modunu ayarlar. İki tür modlar:

. IMAGE: Tek resimli giriş modu.
.
. VIDEO: Bir karedeki kodu çözülmüş karelere ilişkin mod kameradan alınan video veya giriş verileri gibi bir yayın paylaşabilir.		 {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 model zaten yerel bir öğe içermiyorsa kullanın L2_NORMALIZATION TFLite Op. Çoğu durumda bu zaten böyledir Böylece L2 normalleştirmesi, herhangi bir gerek kalmadan TFLite çıkarımıyla gerçekleştirilir bu seçeneği belirleyin. Boolean False
quantize Döndürülen yerleştirmenin skaler nicelemedir. Yerleştirmelerin dolaylı olarak birim normları Bu nedenle, tüm boyutların [-1,0, 1,0] aralığında bir değere sahip olması garanti edilir. Tekliflerinizi otomatikleştirmek ve optimize etmek için l2Normalize seçeneğini kullanın. Boolean False

Verileri hazırlama

Resim Yerleştirme aracı, 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 Yerleştirme embed() ve embedForVideo() yöntemlerine yapılan çağrılar çalıştırıldı senkronize edin ve kullanıcı arayüzü ileti dizisini engelleyin. Bir tablodaki dosyaları özellik vektörleri içeriyorsa her bir yerleştirme, ana iş parçacığını engeller. Web çalışanlarını, embed() ve Başka bir ileti dizisinde embedForVideo() yöntem.

Görevi çalıştırma

Resim Yerleştirme aracı, embed() (çalışma modu image ile) ve Tetiklenecek embedForVideo() (çalışma modu video ile) yöntemi çıkarımlar. Image Yerleşik API, giriş resmi.

Aşağıdaki kod, işlemin 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, Görüntü Yerleştirme görevi Girişin yerleştirme vektörlerini içeren ImageEmbedderResult nesnesi resim veya çerçeveyi seçin.

Aşağıda, bu görevdeki çı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 resmin yerleştirilmesiyle elde edildi:

İki yerleştirmenin anlamsal benzerliğini ImageEmbedder.cosineSimilarity işlevi. Aşağıdaki kodu inceleyerek örneğine bakalım.

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

Resim Yerleştirme örnek kodu, yerleşik öğenin nasıl görüntüleneceğini gösterir daha fazla bilgi edinmek için kod örneği inceleyebilirsiniz.