MediaPipe ile özel nesne algılama web uygulaması oluşturma

1. Başlamadan önce

MediaPipe Çözümleri, makine öğrenimi (ML) çözümlerini uygulamalarınıza uygulamanıza olanak tanır. Kullanıcılara anında, ilgi çekici ve faydalı sonuçlar sunan önceden oluşturulmuş işleme işlem hatlarını yapılandırmanıza olanak tanıyan bir çerçeve sağlar. Hatta varsayılan modelleri güncellemek için bu çözümleri Model Maker ile özelleştirebilirsiniz.

Nesne algılama, MediaPipe Çözümleri'nin sunduğu çeşitli makine öğrenimi vizyonu görevlerinden biridir. MediaPipe Görevleri; Android, Python ve web'de kullanılabilir.

Bu codelab'de, resimlerdeki ve canlı web kamerası videosundaki köpekleri algılamak için bir web uygulamasına nesne algılama özelliği ekleyeceksiniz.

Neler öğreneceksiniz?

• MediaPipe Görevleri ile nesne algılama görevini web uygulamasına dahil etme

Ne oluşturacaksınız?

• Köpeklerin varlığını algılayan bir web uygulaması. Ayrıca, MediaPipe Model Maker ile istediğiniz bir nesne sınıfını algılayacak şekilde modeli özelleştirebilirsiniz.

İhtiyacınız olanlar

• CodePen hesabı
• Web tarayıcısı olan bir cihaz
• JavaScript, CSS ve HTML hakkında temel bilgi

2. Hazırlanın

Bu codelab, kodunuzu CodePen'de çalıştırır. CodePen, tarayıcıda kod yazmanıza ve oluştururken sonuçları kontrol etmenize olanak tanıyan sosyal bir geliştirme ortamıdır.

Kurulum için şu adımları uygulayın:

1. CodePen hesabınızda bu CodePen'e gidin. Bu kodu, kendi nesne dedektörünüzü oluşturmak için başlangıç tabanı olarak kullanırsınız.
2. Başlangıç kodunun bir kopyasını oluşturmak için gezinme menüsünde CodePen'in alt kısmındaki Fork'u tıklayın.

3. JS sekmesinde genişletme okunu tıklayın ve JavaScript düzenleyiciyi büyüt'ü seçin. Bu codelab'de çalışmayı yalnızca JS sekmesinde düzenleyeceksiniz. Bu nedenle HTML veya CSS sekmelerini görmeniz gerekmez.

Başlangıç uygulamasını inceleme

1. Önizleme bölmesinde, iki köpek resmi ve web kameranızı çalıştırma seçeneği olduğunu göreceksiniz. Bu eğitimde kullandığınız model, iki resimde gösterilen üç köpek üzerinde eğitilmiştir.

Not: Bu eğitimde daha genel amaçlı bir nesne algılayıcı içeren bir web uygulaması oluşturmayı tercih ederseniz Modeller bölümüne bakın.

2. JS sekmesinde, kodun tamamında çeşitli yorumlar olduğunu göreceksiniz. Örneğin, 15. satırda şu yorumu bulabilirsiniz:

// Import the required package.

Bu yorumlar, kod snippet'lerini nereye eklemeniz gerektiğini gösterir.

3. MediaPipe tasks-vision paketini içe aktarın ve gerekli değişkenleri ekleyin.

1. JS sekmesinde MediaPipe tasks-vision paketini içe aktarın:

// Import the required package.
​​import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";

Bu kod, paketi içe aktarmak için Skypack içerik yayınlama ağını (CDN) kullanır. Skypack'i CodePen ile kullanma hakkında daha fazla bilgi için Skypack + CodePen başlıklı makaleyi inceleyin.

Projelerinizde Node.js'yi npm ile veya tercih ettiğiniz paket yöneticisi ya da CDN ile kullanabilirsiniz. Yüklemeniz gereken paket hakkında daha fazla bilgi için JavaScript paketleri başlıklı makaleyi inceleyin.

2. Nesne algılayıcı ve çalışma modu için değişkenleri bildirin:

// Create required variables.
let objectDetector = null;
let runningMode = "IMAGE";

runningMode değişkeni, resimlerdeki nesneleri algıladığınızda "IMAGE" değerine, videolardaki nesneleri algıladığınızda ise "VIDEO" değerine ayarlanmış bir dizedir.

4. Nesne algılayıcıyı başlatma

• Nesne algılayıcıyı başlatmak için JS sekmesindeki ilgili yorumdan sonra aşağıdaki kodu ekleyin:

// Initialize the object detector.
async function initializeObjectDetector() {
  const visionFilesetResolver = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );
  objectDetector = await ObjectDetector.createFromOptions(visionFilesetResolver, {
    baseOptions: {
      modelAssetPath: "https://storage.googleapis.com/mediapipe-assets/dogs.tflite"
    },
    scoreThreshold: 0.3,
    runningMode: runningMode
  });
}
initializeObjectDetector();

FilesetResolver.forVisionTasks() yöntemi, görev için WebAssembly (Wasm) ikilisinin konumunu belirtir.

ObjectDetector.createFromOptions() yöntemi, nesne dedektörünü başlatır. Algılama için kullanılan modele bir yol sağlamanız gerekir. Bu örnekte, köpek algılama modeli Cloud Storage'da barındırılıyor.

Not: Daha genel amaçlı bir nesne algılama modeli kullanmak istiyorsanız Modeller bölümüne bakın.

scoreThreshold özelliği, 0.3 değerine ayarlanmış. Bu, modelin% 30 veya daha yüksek bir güven düzeyinde algılanan tüm nesneler için sonuç döndürdüğü anlamına gelir. Bu eşiği uygulamanızın ihtiyaçlarına göre ayarlayabilirsiniz.

runningMode özelliği, ObjectDetector nesnesi başlatıldığında ayarlanır. Bu ve diğer seçenekleri daha sonra gerektiği gibi değiştirebilirsiniz.

5. Görüntülerde tahmin çalıştırma

• Resimlerde tahmin çalıştırmak için handleClick() işlevine gidin ve işlevin gövdesine aşağıdaki kodu ekleyin:

// Verify object detector is initialized and choose the correct running mode.
if (!objectDetector) {
    alert("Object Detector still loading. Please try again");
    return;
  }

  if (runningMode === "VIDEO") {
    runningMode = "IMAGE";
    await objectDetector.setOptions({ runningMode: runningMode });
  }

Bu kod, nesne algılayıcının başlatılıp başlatılmadığını belirler ve çalıştırma modunun görüntüler için ayarlanmasını sağlar.

Nesneleri algılama

• Resimlerdeki nesneleri algılamak için handleClick() işlevinin gövdesine aşağıdaki kodu ekleyin:

// Run object detection.
  const detections = objectDetector.detect(event.target);

Not: objectDetector.detect() yöntemi engelleme yaptığından ana iş parçacığında çalıştırıldığında kullanıcı arayüzünü engeller.

Aşağıdaki kod snippet'inde bu görevden elde edilen çıkış verilerine dair bir örnek verilmiştir:

ObjectDetectionResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : aci
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : tikka

Tahminleri işleme ve görüntüleme

1. handleClick() işlevinin gövdesinin sonunda displayImageDetections() işlevini çağırın:

// Call the displayImageDetections() function.
displayImageDetections(detections, event.target);

2. displayImageDetections() işlevinin gövdesine, nesne algılama sonuçlarını görüntülemek için aşağıdaki kodu ekleyin:

// Display object detection results.
  
  const ratio = resultElement.height / resultElement.naturalHeight;

  for (const detection of result.detections) {
    // Description text
    const p = document.createElement("p");
    p.setAttribute("class", "info");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    // Positioned at the top-left of the bounding box.
    // Height is that of the text.
    // Width subtracts text padding in CSS so that it fits perfectly.
    p.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px; " +
      "width: " +
      (detection.boundingBox.width * ratio - 10) +
      "px;";
    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px;" +
      "width: " +
      detection.boundingBox.width * ratio +
      "px;" +
      "height: " +
      detection.boundingBox.height * ratio +
      "px;";

    resultElement.parentNode.appendChild(highlighter);
    resultElement.parentNode.appendChild(p);
  }

Bu işlev, resimlerde algılanan nesnelerin üzerinde sınırlayıcı kutular gösterir. Önceki tüm vurgulamaları kaldırır, ardından algılanan her nesneyi vurgulamak için <p> etiketleri oluşturup görüntüler.

Uygulamayı test etme

CodePen'de kodunuzda değişiklik yaptığınızda, kaydetme işlemiyle birlikte önizleme bölmesi otomatik olarak yenilenir. Otomatik kaydetme etkinse uygulamanız büyük olasılıkla yenilenmiştir ancak tekrar yenilemeniz önerilir.

Uygulamayı test etmek için aşağıdaki adımları uygulayın:

1. Önizleme bölmesinde, tahminleri görüntülemek için her resmi tıklayın. Sınırlayıcı kutu, modelin güven düzeyini gösteren köpeğin adını gösteriyor.
2. Sınırlayıcı kutu yoksa Chrome Geliştirici Araçları'nı açın ve Konsol panelinde hata olup olmadığını kontrol edin veya önceki adımları inceleyerek herhangi bir şeyi atlamadığınızdan emin olun.

6. Canlı web kamerası videosunda tahminler yürütme

Nesneleri algılama

• Canlı web kamerası videosundaki nesneleri algılamak için predictWebcam() işlevine gidin ve işlevin gövdesine aşağıdaki kodu ekleyin:

// Run video object detection.
  // If image mode is initialized, create a classifier with video runningMode.
  if (runningMode === "IMAGE") {
    runningMode = "VIDEO";
    await objectDetector.setOptions({ runningMode: runningMode });
  }
  let nowInMs = performance.now();

  // Detect objects with the detectForVideo() method.
  const result = await objectDetector.detectForVideo(video, nowInMs);

  displayVideoDetections(result.detections);

Video için nesne algılama, akış verilerinde veya tam bir videoda çıkarım yapmanıza bakılmaksızın aynı yöntemleri kullanır. detectForVideo() yöntemi, fotoğraflar için kullanılan detect() yöntemine benzer ancak geçerli kareyle ilişkili zaman damgası için ek bir parametre içerir. İşlev, algılamayı canlı olarak gerçekleştirir. Bu nedenle, geçerli saati zaman damgası olarak iletirsiniz.

Tahminleri işleme ve görüntüleme

• Algılama sonuçlarını işlemek ve görüntülemek için displayVideoDetections() Functions'a gidin, ardından Functions'ın gövdesine aşağıdaki kodu ekleyin:

//  Display video object detection results.
  for (let child of children) {
    liveView.removeChild(child);
  }
  children.splice(0);

  // Iterate through predictions and draw them to the live view.
  for (const detection of result.detections) {
    const p = document.createElement("p");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    p.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px; " +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;";

    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px;" +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;" +
      "height: " +
      detection.boundingBox.height +
      "px;";

    liveView.appendChild(highlighter);
    liveView.appendChild(p);

    // Store drawn objects in memory so that they're queued to delete at next call.
    children.push(highlighter);
    children.push(p);
  }
}

Bu kod, önceki tüm vurgulamaları kaldırır, ardından algılanan her nesneyi vurgulamak için <p> etiketleri oluşturup görüntüler.

Uygulamayı test etme

Canlı nesne algılamayı test etmek için modelin eğitildiği köpeklerden birinin resmini kullanabilirsiniz.

Uygulamayı test etmek için aşağıdaki adımları uygulayın:

1. Köpek fotoğraflarından birini telefonunuza indirin.
2. Önizleme bölmesinde Web kamerasını etkinleştir'i tıklayın.
3. Tarayıcınız, web kamerasına erişim izni vermenizi isteyen bir iletişim kutusu gösterirse izin verin.
4. Telefonunuzdaki köpek resmini web kameranızın önünde tutun. Sınırlayıcı kutu, köpeğin adını ve modelin güven düzeyini gösteriyor.
5. Sınırlayıcı kutu yoksa Chrome Geliştirici Araçları'nı açın ve Konsol panelinde hata olup olmadığını kontrol edin veya önceki adımları inceleyerek herhangi bir şeyi atlamadığınızdan emin olun.

7. Tebrikler

Tebrikler! Resimlerdeki nesneleri algılayan bir web uygulaması oluşturdunuz. Daha fazla bilgi edinmek için CodePen'de uygulamanın tamamlanmış sürümüne bakın.

Daha fazla bilgi

• Web için nesne algılama
• MediaPipe Studio
• MediaPipe Model Maker
• MediaPipe Model Maker ile özel nesne algılama modeli eğitme
• TensorFlow.js kullanarak tarayıcıda özel nesne algılama