Web için önemli nokta algılama rehberi

MediaPipe Poz İşaretçisi görevi, bir görüntüdeki insan vücuduna ait önemli noktaları tespit etmenizi ya da videosunu izleyin. Bu görevi vücutla ilgili önemli konumları belirlemek, duruşunuzu analiz etmek, ve hareketleri kategorilere ayırabilirsiniz. Bu görev, makine öğrenimi (ML) modellerini kullanır. tek resim veya videoyla çalışır. Görev, görüntüdeki vücut duruşunda önemli noktaları gösterir koordinatlarla ve 3 boyutlu dünya koordinatlarında gösterir.

Bu talimatlar, web ve JavaScript için Poz İşaretçisi'nin nasıl kullanılacağını göstermektedir. Ö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

Poz İşaretçisi için örnek kodu, bu özelliğin tam bir uygulamasını sağlar: görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize ve kendi poz işaretleyici uygulamanızı geliştirmeye başladınız. Bu dosyaları görüntüleyebilir, çalıştırabilir Poz İşaretçisi örnek kodunu düzenleyin yalnızca web tarayıcınızı kullanarak.

Kurulum

Bu bölümde, geliştirme ortamınızı kurmaya yönelik temel adımlar açıklanmaktadır. özellikle de Poz İşaretçisi'ni kullanabilirsiniz. Şu konularda genel bilgi için: dahil olmak üzere web ve JavaScript geliştirme ortamınızı daha fazla bilgi için Web için kurulum kılavuzu.

JavaScript paketleri

Poz İşaretçisi kodu MediaPipe @mediapipe/tasks-vision üzerinden kullanılabilir NPM paketi. Şunları yapabilirsiniz: platformdaki talimatları uygulayarak bu kitaplıkları bulup indirin Kurulum kılavuzu.

Gerekli paketleri NPM üzerinden 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 aşağıdaki kodu <head> bölümüne ekleyin ve etiketini ekleyin:

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

MediaPipe Pose İşaretçisi görevi, bu görevi görebilir. Poz İşaretleyici için mevcut 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

Poz İşaretçisi createFrom...() işlevlerinden birini kullanarak çı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çenekleriyle Poz İşaretçisi. 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:

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

Yapılandırma seçenekleri

Bu görev, Web ve JavaScript için aşağıdaki yapılandırma seçeneklerine sahiptir uygulamalar:

Seçenek Adı Açıklama Değer Aralığı Varsayılan Değer
runningMode 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
numPoses tarafından algılanabilecek maksimum poz sayısı Poz İşaretçisi. Integer > 0 1
minPoseDetectionConfidence Poz algılamanın olması için gereken minimum güven puanı kabul edilir. Float [0.0,1.0] 0.5
minPosePresenceConfidence Pozlamanın minimum güven puanı puanının yüksek olması gerekir. Float [0.0,1.0] 0.5
minTrackingConfidence Poz izleme için minimum güven puanı kabul edilir. Float [0.0,1.0] 0.5
outputSegmentationMasks Poz İşaretçisi'nin algılanan öğe için bir segmentasyon maskesi verip vermediği poz verin. Boolean False

Verileri hazırlama

Poz İşaretçisi, resimlerdeki pozları 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. Videolarda önemli pozlar oluşturmak için zaman damgasını kullanarak her seferinde bir kareyi hızlı bir şekilde işlemek için API'yi karenin yerini belirler.

Görevi çalıştırma

Poz İşaretçisi, detect() (koşu modu IMAGE ile) ve Tetiklenecek detectForVideo() (çalışma modu VIDEO ile) yöntemi çıkarımlar. Görev verileri işler, duruşları belirginleştirmeye çalışır ve sonuçları bildirir.

Poz İşaretçisi detect() ve detectForVideo() yöntemlerine yapılan çağrılar çalıştırılır uyumlu bir şekilde çalışır ve kullanıcının araya sokacağı ileti dizisini engeller. Pozlar algılandığında cihaz kamerasından video karelerinde her algılama ileti dizisi. detect() öğesini çalıştırmak üzere web çalışanlarını uygulayarak bunu önleyebilirsiniz ve detectForVideo() yöntem başka bir ileti dizisinde.

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 poseLandmarkerResult = poseLandmarker.detect(image);

Video

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Poz İşaretçisi görevini yürütmeye ilişkin daha kapsamlı bir uygulama için bkz. kod örneği hakkında daha fazla bilgi edinin.

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

Poz İşaretçisi, her algılama için bir poseLandmarkerResult nesnesi döndürür. gerekir. Sonuç nesnesi, her poz yer işaretinin koordinatlarını içerir.

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

Çıkış, hem normalleştirilmiş koordinatlar (Landmarks) hem de dünya içeriyor koordinatları (WorldLandmarks) girin.

Çıkış şu normalleştirilmiş koordinatları içerir (Landmarks):

  • x ve y: Önemli nokta koordinatları: resim genişliği (x) ve yüksekliği (y).

  • z: Yer işareti derinliği; kalçaların orta noktasına kadar gelen derinliği kaynak. Değer ne kadar küçükse önemli nokta kameraya o kadar yakındır. İlgili içeriği oluşturmak için kullanılan z büyüklüğü, x ile hemen hemen aynı ölçeği kullanır.

  • visibility: Önemli noktanın resimde görünür olma olasılığı.

Çıkış şu dünya koordinatlarını içerir (WorldLandmarks):

  • x, y ve z: Metre cinsinden gerçek 3 boyutlu koordinatlar kalçanın orta noktasını bulun.

  • visibility: Önemli noktanın resimde görünür olma olasılığı.

Aşağıdaki resimde, görev çıkışının görselleştirmesi gösterilmektedir:

İsteğe bağlı segmentasyon maskesi, her bir pikselin ait olma olasılığını temsil eder. geri bildirim gönderebilirsiniz. Aşağıdaki resimde, Google Etiket Yöneticisi'nin görev çıkışı:

Poz İşaretleyici örnek kodu, daha fazla bilgi edinmek için kod örneği