ทำ Machine learning application บนหน้า front end ด้วย Angular และ TensorflowJS


ทำ Machine learning application บนหน้า front end ด้วย Angular และ TensorflowJS

ด้วย TensorFlow JS ทำให้เราสามารถใช้งาน Machine learning application บนฝั่ง frontend ได้ ไหนจะสามารถทำนายผลได้เร็ว และมี latency ที่ต่ำมากๆ อีก ในบทความนี้ เราจะมาแสดงวิธีการ Deploy car damage detection applications ที่ใช้ custom model ซึ่ง train ด้วย AutoML vision บน Google Cloud


Car damage detection applications เป็นโปรแกรมตรวจหาบริเวณที่มีรอยขีดข่วนบนพื้นผิวรถยนต์ดังภาพด้านล่าง ในที่นี้เราสร้าง Object detect model ขึ้นมาใช้ทำนายผล

AutoML Vision คืออะไร และทำงานอย่างไร?

AutoML เป็น service ที่ช่วยให้เรา train custom machine learning model ได้ง่ายๆ โดยตัว AutoML vision จะเป็นตัวที่ train โมเดลสำหรับการทำนายผลบนรูปภาพ แบ่งออกได้เป็น 2 service ย่อย ได้แก่ AutoML Vision Classification กับ AutoML Vision Object Detection ในแง่การใช้งานไม่ซับซ้อน เพียงนำเข้า dataset ที่เป็นรูปภาพกับ label ก็สามารถ train custom model ของเราเองได้ทันที ในการสร้าง car damage detection model เราใช้ AutoML Vision Object Detection.

ในจังหวะที่เราสั่ง train โมเดล เราจะพบหน้าต่างที่ให้เราเลือกว่าเราจะให้โมเดลนั้น host บนระบบ cloud หรือว่าจะ download โมเดลของเราออกมา ซึ่งเราจะต้องเลือกเป็นอย่างหลัง หรืออีกชื่อว่าเป็นโหมด Edge

เสร็จแล้วเราจึงนำ dataset เข้าไป train โมเดล โดยในภาพตัวอย่างด้านล่างเป็นภาพรถที่มีรอยขีดข่วน และเราทำการ label พื้นที่ที่มีรอยขีดข่วน

นอกจากนี้ AutoML Vision ยังมีเครื่องมือสำหรับประเมินที่จัดแสดง metric ในรูปแบบ Dashboard ที่บ่งบอกว่าโมเดลดีหรือไม่ ขอยกตัวอย่าง metric ชื่อ IoU (Intersection over Union) เป็น metric ที่บ่งบอกความแม่นยำ โดยการหาอัตราส่วนของการ intersects ของพื้นที่ที่โมเดลทำนายต่อพื้นที่ที่ label ไว้

หากโมเดลของเรามีค่า IoU มากกว่า 0.5 ถือว่าเป็นโมเดลที่ดี

การ test model และการ export

บนหน้า console ของ AutoML vision จะมีแถบชื่อ “Test & Use” เป็นพื้นที่ให้เราทดลองอัพโหลดรูปภาพขึ้นไปให้โมเดลลองทำนายได้ เมื่อพบว่าโมเดลของเราเป็นที่น่าพอใจแล้ว เราจึงจะ export โมเดลของเราในขั้นตอนต่อไป

ในแถบ “Test & Use” จะแสดงปุ่ม export โมเดลใน package แบบต่างๆ ดังภาพ ในที่นี้เราเลือก package สำหรับ TensorflowJS

เสร็จเรียบร้อยเราจะได้ออกมาเป็น Layer model ดังภาพด้านล่าง ซึ่งพร้อมนำไปใช้กับ TensorflowJS แล้ว

ขั้นตอนแบบ step-by-step ในการเตรียม project บน Angular

1. สร้าง angular project ด้วยคำสั่ง ng new <project_name>

2. สั่ง npm install @tensorflow/tfjs-automl
@tensorflow/tfjs-backend-webgl
@tensorflow/tfjs-backend-cpu

3. สร้าง component ด้วยคำสั่ง ng generate component car-predict

    4. เตรียมหน้าเว็บใน car-predict.component.html ส่วนแสดงผลรูปภาพ และผลการทำนาย > ส่วนรับไฟล์เข้า และปุ่มทำนาย

    5. แก้ไข car-predict.component.ts นำเข้า Dependency ที่จำเป็น

    สร้าง method สำหรับการนำเข้าโมเดล

    สร้าง method สำหรับการทำนาย

    Note: คำอธิบาย parameter option ของ method detect.

    Score -- ขอบเขตคะแนนความแม่นยำที่เรายอมรับได้ (มากกว่า 0.5 เพียงพอที่จะบอกว่าเป็นผลที่ดี)

    Iou -- ขอบเขตของอัตราส่วนพื้นที่ซ้อนทับกันของผลทำนายด้วยกันเอง

    Topk -- จำนวนของผลทำนายที่มากที่สุดที่ยอมรับได้

    6. ลอง Serve เว็บบนเครื่องของเรา ng serve เพื่อดูผล

    เรียบร้อยแล้วสำหรับการทำ machine learning application บนหน้า front end ด้วย Angular และ TensorflowJS สำหรับท่านที่ทำตามขั้นตอนแล้วติดขัด หรือท่านที่ต้องการโค้ดตัวอย่างสามารถเข้าไปดูโค้ดของเราได้ที่ลิงค์ด้านล่างนี้เลยครับ

    code: https://github.com/G-Thanakit/...

    Written by Thanakit Gowitwanich (Data Engineer)

    Cloud Ace Thailand

    Make It Now!

    หากคุณสนต้องการคำปรึกษา Cloud Ace Thailand พร้อมให้บริการที่จะสนับสนุนคุณตั้งแต่ การให้คำปรึกษา จนถึงการออกแบบระบบ ติดตั้งระบบ ย้ายระบบ ในฐานะ Google Cloud Partner ที่มีความเชี่ยวชาญ และได้รับรางวัล Service partner of the year ในปี 2019

    ติดต่อเรา

    E. th_sales@cloud-ace.com

    .