ลองเล่น face-api.js

ลองเล่น face-api.js

Javascript API สำหรับการตรวจจับ และวิเคราะห์ใบหน้าคน

ปัจจุบันก็มีการพูดถึง AI, Machine Learning, หุ่นยนต์อัจฉริยะ อย่างมากมาย รวมไปถึงสิ่งที่หลายๆคนเคยเห็น ไม่ว่าจะเป็นการแสกนระบุบุคคลของหุ่นยนต์ หรือ คอมพิวเตอร์ตรวจจับเป้าหมายของหน่วยงานลับสุดไฮเทคในภาพยนตร์

ผมเองก็คลั่งไคล้ภาพยนตร์แนวนี้พอสมควร

ซึ่งเมื่อมีโอกาสมาเจอเจ้า face-api.js ก็ขอลองเล่นดูสักหน่อยว่าจะตอบโจทย์ความสนใจของผมได้มากขนาดไหน แล้วจะได้ความรู้ อะไรบ้างจากการลองเล่นครั้งนี้

ลองรู้

เจ้า face-api.js ถูกพัฒนาขึ้นโดยใช้ tensorflow/tfjs-core

ที่เป็น JavaScript library สำหรับฝึกสอน และปรับใช้กับตัวโมเดลในการทำ Machine Learning ซึ่งทำหน้าที่ช่วยในเรื่องการแสดงผลบนเว็บ โดยทำงานภายใต้บราวเซอร์ มาเป็นแกนหลักในการพัฒนา

TenserFlow เป็นไลบรารีที่ใช้ในการพัฒนา Machine Learning ซึ่งได้รับการพัฒนาโดยบริษัทกูเกิล (Google)

ลองเล่น

เริ่มกันแบบง่ายๆ โดยผมจะลองเล่นตามตัวอย่างจากแชนแนล ยูทูป Web Dev Simplified ที่ผมสะดุดตาเจอมาในคลิปนี้

https://www.youtube.com/watch?v=CVClHLwv-4I&feature=youtu.be

ซึ่งเป็นการเขียนโปรแกรมโดยใช้ตัว face-api.js มาเล่นคู่กับกล้องเว็บแคม โดยแสดงผลบนบราวเซอร์

เพื่อเป็นการประหยัดเวลา ทำการโคลนโปรเจคจาก github ของเค้าเลยครับ

git clone https://github.com/WebDevSimplified/Face-Detection-JavaScript

เมื่อเปิดโปรเจคที่โคลนมาเรียบร้อยแล้วจะเห็นได้ว่าข้างในมีไฟล์ตามนี้ ซึ่งผมจะอธิบายหลังจากที่เราลองรันมันแล้วนะครับ

ต่อมาเราจะลองรันแบบประหยัดเวลาโดยใช้ live server เพื่อไว้จำลอง Server ภายในเครื่อง ซึ่งใน VS Code สามารถลงผ่าน Extensions ได้เลย

จากนั้นทำการคลิกขวาที่ไฟล์ index.html ซึ่งเป็นไฟล์แสดงผลหลักของเรา แล้วเลือกไปที่ Open with Live Server (ปกติจะไม่มีตัวเลือกนี้ถ้าเรายังไม่ได้ติดตั้งส่วนเสริม Live Server)

ทา ดาาาาาาาาา!!! บราวเซอร์ของเราจะเปิดขึ้นมาแล้วเริ่มรันโปรเจค

เราจะเห็นหน้าตัวเอง กับ จุดๆเส้นๆ กรอบสี่เหลี่ยม ค่าตัวเลข และตัวหนังสือ ขยับตามใบหน้า อย่างกับหุ่นยนต์หรือ AI ตรวจจับใบหน้าของเราอยู่

สังเกตได้ว่า ตัวหนังสือใต้กรอบรูปบ่งบอกถึงอารมณ์บนใบหน้าของเรา

เรามาดูกันครับว่าโปรแกรมนี้ทำไมถึงบอกอารมณ์บนใบหน้าเราได้

เริ่มกันที่ไฟล์ index.html ซึ่งเป็นไฟล์แสดงผลหลักของเรา

บรรทัดที่ 8–9 นั้น จะเป็นการเรียกใช้งาน face-api จากไฟล์ face-api.min.js และฟังก์ชันการทำงานของโปรแกรมจากไฟล์ script.js

บรรทัดที่ 10–24 เป็นการตั้งค่าสไตล์การแสดงผลขององค์ประกอบ html ตัว body กับ canvas ซึ่ง canvas มันจะถูกสร้างขึ้นจากการทำงานในไฟล์ script.js นั่นเอง

บรรทัดที่ 27 ใน body คือองค์ประกอบที่จะแสดงในรูปแบบ video หรือภาพเคลื่อนไหว โดยตั้งค่าความกว้าง และยาวของภาพเคลื่อนไหวที่จะแสดงผล รวมไปถึงตั้งค่าให้มันทำการเริ่มทำงานเอง(autoplay) แบบไม่แสดงเสียง(muted) เมื่อเริ่มทำงานโปรแกรม ซึ่งเราจะใช้แสดงผลภาพจากเว็บแคมของเรา

ต่อกันที่ไฟล์ script.js ซึ่งมีฟังก์ชันการทำงานของโปรแกรมอยู่ในนี้

บรรทัดที่ 1 ทำการประกาศตัวแปลเพื่ออ้างอิงองค์ประกอบที่จะแสดงในรูปแบบ video หรือภาพเคลื่อนไหวด้วยไอดี(id=“video”) ในไฟล์ index.html ที่เราเรียกไฟล์ script.js นี้ไปทำงานในนั้น

บรรทัดที่ 3–8 เป็นการเรียกใช้งาน หรือโหลดข้อมูลโมเดลที่เราจะใช้ในการอ่านภาพ ซึ่งมันจะทำการโหลดข้อมูลโมเดลมาทั้งหมดก่อนที่จะเริ่มต้นทำงานฟังก์ชัน “startVideo” ซึ่งจะเขียนไว้ในบรรทัดที่ 10–16

• โมเดล Tiny Face Detector ถูกออกแบบมาเพื่อให้สามารถตรวจจับใบหน้าขนาดเล็กได้(รูปที่ไม่ได้ถ่ายเน้นใบหน้าคนเป็นส่วนใหญ่ของภาพ)

• โมเดล 68 Point Face Landmark Detection ถูกออกแบบมาให้สามารถวางจุดทั้งหมด 68 จุด และวิเคราะห์อย่างแม่นยำสำหรับการอ่านองค์ประกอบของใบหน้า เพื่อให้จำแนกส่วนต่างๆได้ เช่น ปาก, ตา, จมูก, คิ้ว, ขอบใบหน้า เป็นต้น

• โมเดล Face Recognition ถูกออกแบบเพื่อให้สามารถวิเคราะห์โครงสร้างรูปร่างลักษณะใบหน้าคนได้จากข้อมูลเวกเตอร์

• โมเดล Face Expression Recognition ออกแบบมาเพื่อการวิเคราะห์อารมณ์จากลักษณะโครงสร้างบนใบหน้าคน

บรรทัดที่ 10–16 เป็นฟังก์ชันเพื่อเรียกใช้ตัวกล้องเว็บแคมบนเครื่องเรา ให้แสดงผลบนองค์ประกอบ video ที่เขียนไว้ในไฟล์ index.html โดย

• เรียกใช้ฟังก์ชัน navigator.getUserMedia เพื่อเรียกใช้งานสื่อในเครื่องผู้ใช้งาน

• จากนั้นก็ผ่านค่าตัวแปร video ที่ได้ถูกอ้างอิงด้วยไอดีไปยังองค์ประกอบ video ในไฟล์ index.html แล้วกำหนดค่าเปล่าๆให้มันก่อน

• จากนั้นก็กำหนดการทำงานให้เป็นการถ่ายทอด โดยที่ตั้งค่าแหล่งข้อมูลของ ตัวแปร video ให้เป็นการถ่ายทอดภาพจากกล้องของผู้ใช้งาน

• ถ้าหากมีข้อผิดพลาดในการทำงานเกิดขึ้นก็ให้มันแสดงออกมาใน log

บรรทัดที่ 18–35 จะเป็นการทำงานของการตรวจวิเคราะห์ใบหน้า และแสดงผลตามที่กำหนดไว้ขณะที่องค์ประกอบ video นั้นกำลังทำการแสดงผล หรือเล่นอยู่ โดยใช้ฟีเจอร์ของตัว face-api

• บรรทัดที่ 19–22 เป็นการสร้างพื้นที่การทำงาน และการแสดงผลของ face-api โดยกำหนดค่าให้มันมีขนาดใหญ่เท่ากับตัวองค์ประกอบ video เต็มๆพอดีกัน เพื่อที่จะได้แสดงผลในสัดส่วนที่เท่ากันตามภาพจากกล้องที่เราเอาไปแสดง

• บรรทัดที่ 24 กับ 34 นั้นจะเป็นการตั้งเวลาให้ทำงาน โปรแกรมที่เขียนภายในนั้นทุกเสี้ยววินาที(100 ms) เพื่อที่จะได้แสดงผลใหม่ให้เร็วนั่นเอง

• บรรทัดที่ 25–27 จะเป็นการเรียกใช้ ฟีเจอร์จาก face-api ต่างๆซึ่งในโค๊ดนั้นจะใช้การตรวจจับทุกสิ่งที่มีโครงสร้างเป็นใบหน้าคน ที่อยู่บนแหล่งข้อมูล video ซึ่งก็คือภาพจากเว็บแคมนั่นเอง โดยที่ทำงานบนฟีเจอร์ตรวจจับใบหน้าขนาดเล็กจากแหล่งข้อมูลได้(detectAllFaces) แล้วถ้าตรวจจับได้ ให้ทำการวิเคราะห์ใบหน้านั้นด้วยการใช้จุดบ่งชี้บนใบหน้า(withFaceLandmarks) และการวิเคราะห์อารมณ์จากใบหน้านั้นๆ(withFaceExpressions)

• บรรทัดที่ 29–33 เป็นการวาดผลลัพธ์แบบ 2 มิติออกมาบน canvas ที่กำหนดเอาไว้ซึ่งก็คือพื้นที่แสดงภาพจากเว็บแคมทั้งหมด โดยที่ให้วาดแสดงกรอบตัวจับใบหน้า, แสดงจุด เส้นบ่งชี้บนใบหน้า และ แสดงอารมณ์(ตัวหนังสือ)

ลองตามใจอยาก

ผมว่าจะสรุปจบบล็อกนี้แล้ว แต่ไปสะดุดตาเห็นว่าใน โฟลเดอร์ที่เก็บไฟล์โมเดลของตัว face-api ไว้มีสิ่งนี้อยู่

เจ้า face-api สามารถวิเคราะห์อายุ กับเพศได้ด้วย ลองดูสักหน่อยว่ามันดีขนาดไหน

ย่อๆเลยนะครับ ผมได้ทำการ

• ใส่ไฟล์โมเดลสำหรับการวิเคราะห์อายุ และเพศนี่ไปไว้ในโฟลเดอร์โมเดล

• เปลี่ยนการทำการในไฟล์ script.js โดยเรียกใช้โมเดลสำหรับการวิเคราะห์อายุ และเพศ

แล้วเรียกใช้มัน(withAgeAndGender)แทนการวิเคราะห์อารมณ์บนใบหน้า

จากนั้นก็ให้วาดแสดงผลลัพธ์ทั้งอายุ(ปี) และเพศออกมา

แล้วก็รันผ่าน live server ดูเช่นเดิม

ผลลัพธ์ที่ได้ออกมาดูจะคลาดเคลื่อนไปหน่อยครับ

ผมอายุ 24 ปีแล้ว แต่ตอนเล่นนั้นตัวเลขดิ้นไปมาอยู่แถวๆ 17–21 ปี

ซึ่งแน่นอนว่ามันคลาดเคลื่อนทั้งที่มาจาก

• ประสิทธิภาพของตัว face-api.js เนื่องมากจากจุดประสงค์การพัฒนานั้นเน้นเพื่อให้สามารถรันบนบราวเซอร์ได้ดี จึงมีข้อจำกัดในการตั้งค่าของตัวโมเดล

• ความคมชัดของภาพ และประสิทธิภาพของกล้องเว็บแคมเครื่องผู้ใช้งาน

ตัวที่ผมลองเล่นเรื่องอายุ และเพศนี้สามารถดู หรือโคลนไปลองเล่นต่อได้จาก

https://github.com/JPatchara/PlayAroundWith-Face-API-JS

ลองสรุป

หากใครสนใจจะนำเจ้า face-api.js ซึ่งตัวมันเองสามารถรองรับการใช้งานผ่าน NodeJS ไปประยุกต์ใช้สร้างโปรเจคเจ๋งๆ หรือปรับใช้เพื่อการเก็บข้อมูลจากรูปภาพ ก็สามารถลองศึกษาต่อได้ที่

https://github.com/justadudewhohacks/face-api.js

และลองเล่นตัวเดโม ฟีเจอร์หลักๆทั้งหมดของ face-api.js ได้ที่

https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection

คีย์เวิร์ด เพื่อการศึกษาประโยชน์ และขอบเขตของสิ่งนี้:

Computer Vision, Image recognition, Face Detection, Image Processing

อ้างอิง:

https://github.com/justadudewhohacks/face-api.js

https://github.com/tensorflow/tfjs-core

https://www.tensorflow.org

https://itnext.io/face-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07

https://www.youtube.com/watch?v=CVClHLwv-4I&feature=youtu.be