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

1. Başlamadan önce

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

Nesne algılama, MediaPipe Solutions'ın sunduğu çeşitli makine öğrenimi vizyon görevlerinden biridir. MediaPipe Görevleri Android, Python ve web'de kullanılabilir.

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

Neler öğreneceksiniz?

• MediaPipe Tasks ile bir web uygulamasına nesne algılama görevi ekleme.

Neler oluşturacaksınız?

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

Gerekenler

• CodePen hesabı
• Web tarayıcısı olan bir cihaz
• Temel JavaScript, CSS ve HTML bilgisi

2. Hazırlanın

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

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

1. CodePen hesabınızda bu CodePen'e gidin. Kendi nesne algılayıcınızı oluşturmak için bu kodu başlangıç tabanı olarak kullanırsınız.
2. Başlangıç kodunun bir kopyasını oluşturmak için gezinme menüsündeki CodePen'in alt kısmında Fork'u (Çatal) tıklayın.

3. JS sekmesinde, genişletici okunu tıklayın ve ardından JavaScript düzenleyicisini büyüt'ü seçin. Bu codelab'de yalnızca JS sekmesindeki çalışmaları düzenlersiniz. Bu nedenle, HTML veya CSS sekmelerini görmeniz gerekmez.

Başlangıç uygulamasını inceleyin

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

Not: Bu eğiticide, daha genel amaçlı bir nesne algılayıcısına sahip bir web uygulaması oluşturmak isterseniz Modeller'e bakın.

2. JS sekmesinde, kod boyunca birkaç yorum bulunduğuna dikkat edin. Örneğin, 15. satırda aşağıdaki yorumu bulabilirsiniz:

// Import the required package.

Bu yorumlar, kod snippet'lerini nereye eklemeniz gerektiğini belirtir.

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 bölümüne bakın.

Projelerinizde, Node.js'yi npm veya paket yöneticisi ya da tercih ettiğiniz CDN ile kullanabilirsiniz. Yüklemeniz gereken gerekli paket hakkında daha fazla bilgi için JavaScript paketlerine bakın.

2. Nesne algılayıcı ve çalışan mod için değişkenler tanımlayın:

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

runningMode değişkeni, resimlerde nesne algıladığında "IMAGE" değerine veya videoda nesne tespit ettiğinizde "VIDEO" değerine ayarlanan bir dizedir.

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

• Nesne algılayıcıyı başlatmak için JS sekmesinde 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) ikili programının konumunu belirtir.

ObjectDetector.createFromOptions() yöntemi, nesne algılayıcıyı örneklendirir. Algılama için kullanılan modelin yolunu belirtmeniz gerekir. Bu durumda, köpek algılama modeli Cloud Storage'da barındırılır.

Not: Daha genel amaçlı bir nesne algılama modeli kullanmak istiyorsanız Modeller konusuna bakın.

scoreThreshold özelliği, 0.3 değerine ayarlandı. Bu, modelin% 30 veya daha yüksek bir güven düzeyiyle algılanan herhangi bir nesne için sonuç döndürdüğü anlamına gelir. Bu eşiği, uygulamanızın ihtiyaçlarına uyacak şekilde ayarlayabilirsiniz.

runningMode özelliği, ObjectDetector nesnesi başlatıldıktan sonra ayarlanır. Daha sonra gerektiğinde bunu ve diğer seçenekleri değiştirebilirsiniz.

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

• Görsellerde tahmin çalıştırmak için handleClick() işlevine gidin ve ardından aşağıdaki kodu işlevin gövdesine 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 resimler için çalışma modunun 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 engellediği için ana iş parçacığında çalıştırıldığında kullanıcı arayüzünü engeller.

Aşağıdaki kod snippet'i, bu görevdeki çıkış verilerinin bir örneğini içerir:

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, görüntülerde algılanan nesnelerin üzerinde sınırlayıcı kutuları görüntüler. Önceki tüm vurgulamaları kaldırır ve 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, kaydedildikten sonra önizleme bölmesi otomatik olarak yenilenir. Otomatik kayıt etkinleştirilmişse uygulamanız muhtemelen zaten yenilenmiş demektir, ancak tekrar yenilemek iyi bir fikirdir.

Uygulamayı test etmek için şu adımları uygulayın:

1. Önizleme bölmesinde, tahminleri görüntülemek için her bir resmi tıklayın. Sınırlayıcı kutu, köpeğin adını modelin güven düzeyiyle birlikte gösterir.
2. Sınırlayıcı kutu yoksa Chrome Geliştirici Araçları'nı açın, ardından Konsol panelinde hata olup olmadığını kontrol edin veya hiçbir şeyi atlamadığınızdan emin olmak için önceki adımları inceleyin.

6. Canlı bir web kamerası videosunda tahmin çalıştırma

Nesneleri algılama

• Canlı bir web kamerası videosunda nesneleri algılamak için predictWebcam() işlevine gidin ve ardından aşağıdaki kodu işlevin gövdesine 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ış verileri veya videonun tamamı üzerinde çıkarım yapmanızdan bağımsız olarak 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, böylece zaman damgası olarak geçerli saati geçirirsiniz.

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

• Algılama sonuçlarını işlemek ve görüntülemek için displayVideoDetections() işlevine gidin, ardından aşağıdaki kodu işlevin gövdesine 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 vurgulamaları kaldırır ve ardından algılanan her nesneyi vurgulamak için <p> etiketleri oluşturur ve gösterir.

Uygulamayı test etme

Canlı nesne algılamayı test etmek için, modelin eğitildiği köpeklerden birinin görüntüsünün kullanılması faydalı olur.

Uygulamayı test etmek için şu 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öpeğin 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österir.
5. Sınırlayıcı kutu yoksa Chrome Geliştirici Araçları'nı açın, ardından Konsol panelinde hata olup olmadığını kontrol edin veya hiçbir şeyi atlamadığınızdan emin olmak için önceki adımları inceleyin.

7. Tebrikler

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

Daha fazla bilgi

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