用 TensorFlow.js COCO-SSD 辨識圖片物件

用 TensorFlow.js COCO-SSD 辨識圖片物件
用 TensorFlow.js COCO-SSD 辨識圖片物件

本篇要解決的問題

幾年前有寫了一篇〈ML5.js 神經網路 開發圖像辨識〉,是辨識圖片裡的物件,最近跟朋友設計一個活動,是需要判斷照片中的人數,ML5 有點不夠用,問了 ChatGPT 後,知道了 Tensorflow.js 裡,有一個 COCO-SSD 的模型,官方的說明 是「在單一影像中定位及辨識多個物件」,實際用起來後,也真的覺得好用,除了可以把人辨識出來,還可以給在照片上的範圍。

本篇主要參考的來源,是 官方說明文件、ChatGPT 的回答。

最後完成的 Demo:

https://letswritetw.github.io/letswrite-coco-ssd


基本使用

官方文件的使用教學很基本,就是我們用 img src 把圖檔放上去後,再用 COCO-SSD 這個模型來進行辨識,程式碼如下:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script>

<img id="img" src="cat.jpg"/>

<script>
  const img = document.getElementById('img');
  cocoSsd.load().then(model => {
    // detect objects in the image.
    model.detect(img).then(predictions => {
      console.log('Predictions: ', predictions);
    });
  });
</script>

進階用法

這邊 August 因為跟朋友設計的活動,是要讓參加活動的人,自己拍照後上傳,所以不能像官方的範例一樣,直接就能取得圖片。

以下程式碼使用 Vue.js 來實作。

HTML

HTML 的部份,我們放一個上傳檔案的按鈕,跟要在照片上標出辨識範圍的 canvas:

<input
    type="file" ref="photo"
    accept="image/*"
    @change="photoHandler"/>

<canvas id="canvas"></canvas>

accept 限制使用者只能上傳圖片。

ref="photo" 是要在 Vue.js 裡能抓到使用者選擇的 file。

photoHandler 就是稍後要寫在 Vue.js 的 method。

Vue.js / JavaScript

因為 model 載入要時間,如果不想每次都載入,就要把 model 存在 data。

辨識的結果也需要存在 data,才好把結果呈現在畫面上。

data() {
  return {
    result: null,
    modal: null
  }
}

methods 先來處理使用者選擇了圖片檔:

async photoHandler() {
  const file = this.$refs.photo.files[0];
  if (!file) return;

  // 載入 COCO-SSD 模型
  this.model = this.model || await cocoSsd.load();

  const imageElement = document.createElement('img');
  imageElement.src = URL.createObjectURL(file);

  imageElement.onload = async () => {

    this.result = await this.model.detect(imageElement);

    // 在照片上標出範圍
    this.drawBox(imageElement, this.result);

    // 清除暫時創建的圖檔 URL
    URL.revokeObjectURL(imageElement.src);

  };
}

COCO-SSD 辨識的結果,會是一個陣列,像這樣:

[
  {
    "bbox": [
      244.66079431772232,
      405.9116929471493,
      304.8147379755974,
      786.6561211645603
    ],
    "class": "person",
    "score": 0.9971041083335876
  },
  ...
]

bbox 是辨識出的範圍。

class 是辨識結果,score 是信心值,愈接近 1 就愈準。

我們在照片用 COCO-SSD 辨識完後,執行了 drawBox,主要是標出照片裡 COCO-SSD 辨識的物件。

async drawBox(imageElement, predictions) {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  // 設定畫布大小與圖片一致
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;

  // 畫圖片到畫布上
  context.drawImage(imageElement, 0, 0, canvas.width, canvas.height);

  for (let prediction of predictions) {
    const [x, y, width, height] = prediction.bbox;
    const text = `${prediction.class} (${(prediction.score * 100).toFixed(2)}%)`;

    // 畫框
    context.strokeStyle = 'yellow';
    context.lineWidth = 8;
    context.strokeRect(x, y, width, height);

    // 設定字體樣式
    context.font = '28px Arial';
    context.fillStyle = 'yellow';

    // 量測文字寬度與高度
    const textWidth = context.measureText(text).width;
    const textHeight = 28 * 1.5;
    const padding = 8;

    // 畫白色背景框,包含 padding
    context.fillStyle = 'white';
    context.fillRect(x - padding, y - 20 - textHeight - padding, textWidth + padding * 2, textHeight + padding * 2);

    // 畫文字
    context.fillStyle = 'black'; // 文字顏色
    context.fillText(text, x + padding / 2, y - 10 - textHeight / 2);
  }

}

辨識範例、原始碼

我們來試一下結果,以下圖片是在可商用的素材網 Pixabay 上下載的。

先來辨識一群人:

辨識一群人
辨識一群人

接著來辨識動物:

辨識動物
辨識動物

神奇的是,把柯基辨識成 Teddy Bear 了 XD。

最後來辨識物品:

辨識物品
辨識物品

雖然相機、滑鼠、茶杯都沒辨識到,不過還行,免費的就不要求了。

最後再次附上 Demo,也附上 Demo 的原始碼,取用前麻煩多多分享本篇,你的小小舉動,對本站都是大大的鼓勵。

Demo:

https://letswritetw.github.io/letswrite-coco-ssd

原始碼:

https://github.com/letswritetw/letswrite-coco-ssd

Summary
用 TensorFlow.js COCO-SSD 辨識圖片物件
Article Name
用 TensorFlow.js COCO-SSD 辨識圖片物件
Description
學習如何使用 Tensorflow.js 的 COCO-SSD 模型在網頁上進行圖片物件辨識,包括基本使用方法、進階應用及實作範例,輕鬆辨識圖片中的人數和物件。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言