ในบทความ ep นี้เราจะสอน หลักการทำ AI ตรวจจับวัตถุ Object Detection การตรวจจับวัตถุในรูปภาพ ด้วย TensorFlow.js โดยใช้โมเดลสำเร็จรูป COCO-SSD ซึ่งเป็นโมเดลขนาดเล็ก ไม่กิน Memory มาก เหมาะสำหรับรันบน Web Browser และ อุปกรณ์ขนาดเล็ก พัฒนาด้วยภาษา JavaScript
Object Detection คืออะไร
Object Detection การตรวจจับวัตถุ คือ เทคโนโลยีในทางคอมพิวเตอร์ หลักการที่เกี่ยวกับ Computer Vision และ Image Processing ที่ใช้ในงาน AI ตรวจจับวัตถุชนิดที่กำหนด เช่น มนุษย์ รถยนต์ อาคาร ที่อยู่ในรูปภาพ หรือวิดีโอ
งาน Object Detection การตรวจจับวัตถุในรูปภาพ สามารถเจาะลึกลงไปได้อีกหลายแขนง เช่น การทำ Face Detection ตรวจจับหน้าคน Pedestrian Detection ตรวจจับคนเดินถนน สามารถประยุกต์ใช้ได้หลากหลาย เช่น ใช้ในงานรักษาความปลอดภัย และรถยนต์ไร้คนขับ เป็นต้น
Object Detection คือ AI ตรวจจับวัตถุ ในงานทางด้าน Computer Vision ที่จะจำแนก และตรวจจับวัตถุที่อยู่ในรูป การตรวจจับ มาร์กจุด มาร์กพื้นที่ โดยหลักการ สามารถทำได้หลายวิธี การทำมาร์กพื้นที่ที่นิยมได้แก่ วาดกล่องรอบวัตถุ (Bounding Box) หรือ ถมสีให้ทุก Pixel ของวัตถุนั้น (เรียกว่า Segmentation)
COCO-SSD คืออะไร
COCO-SSD คือ โมเดลสำหรับ AI ตรวจจับวัตถุ Object Detection ที่จะตรวจหา และจำแนก วัตถุทั้งหมดทุกชิ้น ที่อยู่ภายในภาพ 1 ภาพ
โมเดลที่เราจะใช้นี้คือ โมเดล COCO-SSD เวอร์ชันที่ถูกแปลง เพื่อมาให้ใช้กับ TensorFlow.js ผ่าน Tensorflow object detection API
โมเดลนี้จะตรวจจับวัตถุ จำนวน 90 Class ตามใน COCO Dataset ซึ่งเป็น Dataset ขนาดใหญ่ ที่ใช้ในการ Object Detection, Segmentation, และ Captioning
SSD ย่อมาจาก Single Shot MultiBox Detection
TensorFlow.js Code Example
เริ่มต้นด้วยใส่ Code ด้านล่าง ไว้ระหว่าง HTML tag head และ body โค้ดนี้เป็นการโหลด TensorFlow.js และ โหลดโมเดล coco-ssd ที่ใช้ในการทำ Object Detection
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script> กำหนด image รูปภาพ Input (ซ่อนไว้ก่อน), canvas สำหรับวาดรูปและ Bounding Box และ div ข้อความ Output
<div id="output"></div>
<canvas id="canvas" width="320" height="320"></canvas>
<img id="canvasimg" src="img/img01.jpg" styel="display:none;"/>ใน JavaScript ให้ getElementById ของ 3 Element ด้านบนมาเก็บไว้ก่อน
var canvas = document.getElementById("canvas");
var img = document.getElementById("canvasimg");
const outp = document.getElementById('output');ดึง context จาก canvas แล้วนำรูปที่ซ่อนไว้มาวาดลงไป
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0); เราจะได้ cocoSsd ขึ้นมา สั่งให้โหลด model แล้วใช้ model ในการ detect รูป img ที่ต้องการ โดยเราสามารถกำหนด maxNumBoxes จำนวนกล่องสูงสุดได้ Default = 20
cocoSsd.load().then(model => {
model.detect(img).then(predictions => {
...
});
});จะได้ predictions เป็น array ระบุ class , bbox และ score ความน่าจะเป็นของ Object ที่พบ ดังรูปแบบด้านล่าง
[{
bbox: [x, y, width, height],
class: "person",
score: 0.8380282521247864
}, {
bbox: [x, y, width, height],
class: "kite",
score: 0.74644153267145157
}]เรามาเริ่มกันเลยดีกว่า
10i_object-detection-coco-ssd.html
Inference
เมื่อโหลดหน้าเว็บเสร็จเรียบร้อย ให้กดปุ่ม F12 เพื่อเปิด Console ดู log
เก้าอี้พับ
จะเห็นว่า AI โมเดล classify ได้ว่าเป็น Object เก้าอี้พับ folding chair และ detect ขอบเขตของเก้าอี้พับได้อย่างแม่นยำ
แร็กเก็ต ไม้เทนนิส และลูกเทนนิส
จะเห็นว่า AI โมเดล classify ได้ว่ามี 2 Object คือ ไม้เทนนิส tennis racket และ ลูกเทนนิส sport ball และ detect ขอบเขตของทั้ง 2 Object ได้อย่างแม่นยำ
Credit
- https://www.coursera.org/learn/browser-based-models-tensorflow
- https://js.tensorflow.org/api/latest/
- https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd
- https://github.com/tensorflow/models/tree/master/research/object_detection
