ใน ep นี้เราจะเรียนรู้การสร้าง Image Classification แบบ Multi-class Classification จำแนกรูปภาพ ด้วย TensorFlow.js โดยใช้โมเดลสำเร็จรูป MobileNet ซึ่งเป็นโมเดลขนาดเล็ก ไม่ใช้ Memory มาก เหมาะสำหรับรันบน Web Browser และ อุปกรณ์ขนาดเล็ก ด้วยภาษา JavaScript

MobileNet คืออะไร

MobileNet Architecture. Credit https://towardsdatascience.com/review-mobilenetv1-depthwise-separable-convolution-light-weight-model-a382df364b69
MobileNet Architecture. Credit https://towardsdatascience.com/review-mobilenetv1-depthwise-separable-convolution-light-weight-model-a382df364b69

MobileNet คือ โมเดลขนาดเล็ก ที่ทำงานได้เร็ว Latency ต่ำ ใช้พลังงานในการประมวลผลไม่มาก ถูกออกแบบมาสำหรับงานที่มีทรัพยากรจำกัด MobileNet สามารถใช้งานได้ทั้ง Classification, Detection, Embedding และ Segmentation เหมือนกับโมเดลที่เป็นที่นิยมอื่น ๆ เช่น ResNet, Inception, U-Net

timing of MobileNetV2 vs MobileNetV3 using TF-Lite on the large core of Pixel 1 phone. Credit https://github.com/tensorflow/models/tree/master/research/slim/nets/mobilenet
timing of MobileNetV2 vs MobileNetV3 using TF-Lite on the large core of Pixel 1 phone. Credit https://github.com/tensorflow/models/tree/master/research/slim/nets/mobilenet

MobileNet อาจจะมีความแม่นยำน้อยกว่าโมเดลเต็มรูปแบบที่เป็นที่นิยม แต่ก็แลกมากับ Latency ที่น้อยลง และขนาดที่เล็กลงมาก ส่งผลให้ใช้การประมวลผลน้อยลงด้วย

ซึ่งผู้ออกแบบได้สร้าง Hyperparameter พิเศษ ให้เราปรับจูน Trade-off ตรงนี้ได้อย่างสะดวกมากขึ้นด้วย

TensorFlow.js Code Example

เริ่มต้นด้วยใส่ Code ด้านล่าง ไว้ระหว่าง HTML tag head และ body โค้ดนี้เป็นการ Load TensorFlow.js และ โหลดโมเดล MobileNet ที่ใช้ในการทำ Image Classification

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"> </script> 

กำหนด image รูปภาพ Input และ div ข้อความ Output

    <img id="img" src="img/img01.jpg"></img>
    <div id="output" style="font-family:courier;font-size:24px;height:300px"></div>

ใน JavaScript ให้ getElementById ของ 2 Element ด้านบนมาเก็บไว้ก่อน

    const img = document.getElementById('img');
    const outp = document.getElementById('output');

เราจะได้ mobilenet ขึ้นมา สั่งให้โหลด model แล้วใช้ model ในการ classify รูป img ที่ต้องการ

    mobilenet.load().then(model => {
        model.classify(img).then(predictions => {
        ...
        });
    });

จะได้ predictions เป็น array ระบุความน่าจะเป็นของ Class ต่าง ๆ topk 3 อันดับแรก Default รูปแบบด้านล่าง

[{
  className: "Egyptian cat",
  probability: 0.8380282521247864
}, {
  className: "tabby, tabby cat",
  probability: 0.04644153267145157
}, {
  className: "Siamese cat, Siamese",
  probability: 0.024488523602485657
}]

เรามาเริ่มกันเลยดีกว่า

10g_mobilenet.html

Inference

เก้าอี้พับ

Result of MobileNet Image Classification - Folding Chair. Credit https://www.ikea.com/th/en/p/nisse-folding-chair-black-30162208/
Result of MobileNet Image Classification – Folding Chair. Credit https://www.ikea.com/th/en/p/nisse-folding-chair-black-30162208/

จะเห็นว่าโมเดล classify ได้ เก้าอี้พับ folding chair ถึง 91.3%

แร็กเก็ต ไม้เทนนิส และลูกเทนนิส

Result of MobileNet Image Classification - Racket and Tennis Ball. Credit https://commons.wikimedia.org/wiki/File:Tennis_racket_and_ball.JPG
Result of MobileNet Image Classification – Racket and Tennis Ball. Credit https://commons.wikimedia.org/wiki/File:Tennis_racket_and_ball.JPG

โมเดล classify ได้แร็กเก็ต ไม้เทนนิส racket, racquet 91.5% และ มีลูกเทนนิส tennis ball อยู่ด้วย 3.4%

Credit

แชร์ให้เพื่อน:

Surapong Kanoktipsatharporn on Linkedin
Surapong Kanoktipsatharporn
CTO at Bua Labs
The ultimate test of your knowledge is your capacity to convey it to another.

Published by Surapong Kanoktipsatharporn

The ultimate test of your knowledge is your capacity to convey it to another.