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

1. Başlamadan önce

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

Nesne algılama, MediaPipe Solutions'un sunduğu çeşitli makine öğrenimi görüntüleme görevlerinden biridir. MediaPipe Tasks, Android, Python ve web'de kullanılabilir.

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

Neler öğreneceksiniz?

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

Ne oluşturacaksınız?

• Köpeklerin varlığını 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.

İhtiyacınız olanlar

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

2. Hazırlanın

Bu kod laboratuvarında,kodunuz tarayıcınızda kod yazmanıza ve geliştirirken sonuçları kontrol etmenize olanak tanıyan sosyal bir geliştirme ortamı olan CodePen'de çalıştırılır.

Kurulum için aşağıdaki adımları uygulayın:

1. CodePen hesabınızda bu CodePen'e gidin. Bu kodu, kendi nesne algılama aracınızı oluşturmak için başlangıç noktası olarak kullanırsınız.
2. Başlangıç kodunun kopyasını oluşturmak için CodePen'in alt kısmındaki gezinme menüsünde Çatal'ı tıklayın.

3. JS sekmesinde genişletici oku tıklayın ve ardından JavaScript düzenleyiciyi artır'ı seçin. Bu kod laboratuvarındaki çalışmayı yalnızca JS sekmesinde düzenleyeceğiniz için HTML veya CSS sekmelerini görmenize gerek yoktur.

Başlatıcı uygulamayı inceleme

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

Not: Bu eğitimde daha genel amaçlı bir nesne algılayıcıyla web uygulaması oluşturmak istiyorsanız Modeller bölümüne bakın.

2. JS sekmesinde, kodda birkaç yorum olduğunu fark edin. Örneğin, 15. satırda aşağıdaki 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'i npm ile veya tercih ettiğiniz paket yöneticisi ya da CDN ile kullanabilirsiniz. Yüklemeniz gereken gerekli paket hakkında daha fazla bilgi için JavaScript paketleri bölümüne bakın.

2. Nesne algılayıcı ve çalışma modu 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ığınızda "IMAGE" değerine, videoda nesne algıladığınızda "VIDEO" değerine ayarlanan 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) ikili dosyasının konumunu belirtir.

ObjectDetector.createFromOptions() yöntemi, nesne algılayıcıyı oluşturur. Algılama için kullanılan modelin yolunu sağlamanız 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 bölümüne bakın.

scoreThreshold mülkü 0.3 değerine ayarlanmış. Bu, modelin% 30 veya daha yüksek bir güven düzeyiyle 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 ilk oluşturulduğunda ayarlanır. Bu ve diğer seçenekleri daha sonra dilediğiniz gibi değiştirebilirsiniz.

5. Resimlerde tahmin çalıştırma

• Resimlerle ilgili tahminler yürütmek için handleClick() işlevine gidin ve ardından 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ışma modunun resimler için ayarlandığından emin olur.

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 engelleyici olduğundan ana iş parçacığında çalıştırıldığında kullanıcı arayüzünü engeller.

Aşağıdaki kod snippet'inde, bu görevin çıkış verilerine ait 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. Nesne algılama sonuçlarını görüntülemek için displayImageDetections() işlevinin gövdesine 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 ve ardından algılanan her nesneyi vurgulamak için <p> etiketleri oluşturup gösterir.

Uygulamayı test etme

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

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

1. Tahminleri görüntülemek için önizleme bölmesinde her resmi tıklayın. Bir sınır kutusu, modelin güven düzeyiyle birlikte köpeğin adını gösterir.
2. Bir sınır kutusu yoksa Chrome Geliştirici Araçları'nı açın ve ardından Konsol panelinde hata olup olmadığını kontrol edin veya herhangi bir şeyi atlamadığınızdan emin olmak için önceki adımları gözden geçirin.

6. Canlı web kamerası videosunda tahmin 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ış verileri veya tam bir video üzerinde çıkarım çalıştırıp çalıştırmadığını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. Bu nedenle, zaman damgası olarak mevcut zamanı iletirsiniz.

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 ve işlevin 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 ve ardından algılanan her nesneyi vurgulamak için <p> etiketleri oluşturup gösterir.

Uygulamayı test etme

Canlı nesne algılamayı test etmek için modelin eğitildiği köpeklerden birinin resmine sahip olmanız gerekir.

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öpeğin resmini web kameranızın önünde tutun. Bir sınır kutusu, köpeğin adını ve modelin güven düzeyini gösterir.
5. Bir sınır kutusu yoksa Chrome Geliştirici Araçları'nı açın ve ardından Konsol panelinde hata olup olmadığını kontrol edin veya herhangi 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'deki uygulamanın tamamlanmış sürümüne göz atı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