สร้างเว็บแคมอัจฉริยะด้วย JavaScript ด้วยโมเดลแมชชีนเลิร์นนิงที่ฝึกไว้แล้วล่วงหน้าของ TensorFlow.js

1. ก่อนเริ่มต้น

ปัจจุบันแมชชีนเลิร์นนิงเป็นคำที่ได้รับความนิยมอย่างมาก แอปพลิเคชันของเทคโนโลยีนี้ดูเหมือนจะไม่มีขีดจำกัด และดูเหมือนว่าพร้อมที่จะเข้าถึงเกือบทุกอุตสาหกรรมในอนาคตอันใกล้นี้ หากคุณทำงานเป็นวิศวกรหรือนักออกแบบ ทั้งฟรอนต์เอนด์และแบ็กเอนด์ และคุ้นเคยกับ JavaScript Codelab นี้เขียนขึ้นเพื่อช่วยให้คุณเริ่มต้นเพิ่มแมชชีนเลิร์นนิงลงในทักษะของคุณ

ข้อกำหนดเบื้องต้น

Codelab นี้เขียนขึ้นสำหรับวิศวกรที่มีประสบการณ์และคุ้นเคยกับ JavaScript อยู่แล้ว

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้ทำสิ่งต่อไปนี้

สร้างหน้าเว็บที่ใช้แมชชีนเลิร์นนิงในเว็บเบราว์เซอร์โดยตรงผ่าน TensorFlow.js เพื่อจัดประเภทและตรวจหาออบเจ็กต์ทั่วไป (รวมถึงตรวจหาออบเจ็กต์มากกว่า 1 รายการในครั้งเดียว) จากสตรีมเว็บแคมสด
เพิ่มประสิทธิภาพเว็บแคมทั่วไปเพื่อระบุวัตถุและรับพิกัดของกรอบล้อมรอบสำหรับแต่ละวัตถุที่พบ
ไฮไลต์ออบเจ็กต์ที่พบในวิดีโอสตรีม ดังที่แสดงด้านล่าง

ลองนึกภาพว่าคุณสามารถตรวจจับได้ว่ามีบุคคลอยู่ในวิดีโอหรือไม่ จากนั้นคุณจะนับจำนวนผู้ที่อยู่ในวิดีโอ ณ เวลาใดก็ตามเพื่อประเมินว่าพื้นที่หนึ่งๆ มีผู้คนพลุกพล่านเพียงใดตลอดทั้งวัน หรือส่งการแจ้งเตือนให้ตัวเองเมื่อตรวจพบสุนัขอยู่ในห้องในบ้านขณะที่คุณไม่อยู่บ้าน ซึ่งอาจเป็นห้องที่สุนัขไม่ควรเข้าไป หากทำได้ คุณก็จะสามารถสร้าง Google Nest Cam เวอร์ชันของคุณเองที่จะแจ้งเตือนเมื่อตรวจพบผู้บุกรุก (ไม่ว่าประเภทใด) โดยใช้ฮาร์ดแวร์ที่กำหนดเอง เจ๋งไปเลย ทำได้ยากไหม ไม่ใช่ มาเริ่มแฮ็กกันเลย...

สิ่งที่คุณจะได้เรียนรู้

วิธีโหลดโมเดล TensorFlow.js ที่ฝึกไว้ล่วงหน้า
วิธีดึงข้อมูลจากไลฟ์สดของเว็บแคมและวาดลงใน Canvas
วิธีจัดประเภทเฟรมรูปภาพเพื่อหากรอบล้อมรอบของออบเจ็กต์ที่โมเดลได้รับการฝึกให้จดจำ
วิธีใช้ข้อมูลที่ส่งกลับจากโมเดลเพื่อไฮไลต์ออบเจ็กต์ที่พบ

Codelab นี้มุ่งเน้นที่วิธีเริ่มต้นใช้งานโมเดลที่ฝึกไว้ล่วงหน้าของ TensorFlow.js เราจะไม่ขออธิบายแนวคิดและบล็อกโค้ดที่ไม่เกี่ยวข้องกับ TensorFlow.js และแมชชีนเลิร์นนิง แต่จะให้คุณคัดลอกและวางได้เลย

2. TensorFlow.js คืออะไร

TensorFlow.js เป็นไลบรารีแมชชีนเลิร์นนิงแบบโอเพนซอร์สที่สามารถเรียกใช้ได้ทุกที่ที่ JavaScript ทำงานได้ โดยอิงตามไลบรารี TensorFlow ดั้งเดิมที่เขียนด้วย Python และมีเป้าหมายที่จะสร้างประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์และชุด API นี้ขึ้นมาใหม่สำหรับระบบนิเวศของ JavaScript

ตำแหน่งที่ใช้งานได้

เนื่องจาก JavaScript สามารถพกพาได้ คุณจึงเขียนได้ในภาษาเดียวและใช้แมชชีนเลิร์นนิงในแพลตฟอร์มต่อไปนี้ทั้งหมดได้อย่างง่ายดาย

ฝั่งไคลเอ็นต์ในเว็บเบราว์เซอร์โดยใช้ JavaScript แบบเดิม
ฝั่งเซิร์ฟเวอร์และแม้แต่อุปกรณ์ IoT เช่น Raspberry Pi ที่ใช้ Node.js
แอปบนเดสก์ท็อปที่ใช้ Electron
แอปที่มากับอุปกรณ์เคลื่อนที่ที่ใช้ React Native

นอกจากนี้ TensorFlow.js ยังรองรับแบ็กเอนด์หลายรายการภายในแต่ละสภาพแวดล้อมเหล่านี้ (สภาพแวดล้อมฮาร์ดแวร์จริงที่สามารถดำเนินการได้ เช่น CPU หรือ WebGL) "แบ็กเอนด์" ในบริบทนี้ไม่ได้หมายถึงสภาพแวดล้อมฝั่งเซิร์ฟเวอร์ แต่แบ็กเอนด์สำหรับการดำเนินการอาจเป็นฝั่งไคลเอ็นต์ใน WebGL เป็นต้น เพื่อให้มั่นใจในความเข้ากันได้และยังคงให้การทำงานเป็นไปอย่างรวดเร็ว ปัจจุบัน TensorFlow.js รองรับรายการต่อไปนี้

การดำเนินการ WebGL ในกราฟิกการ์ดของอุปกรณ์ (GPU) - นี่เป็นวิธีที่เร็วที่สุดในการดำเนินการโมเดลขนาดใหญ่ (ขนาดมากกว่า 3 MB) ด้วยการเร่งความเร็ว GPU
การดำเนินการ Web Assembly (WASM) ใน CPU - เพื่อปรับปรุงประสิทธิภาพ CPU ในอุปกรณ์ต่างๆ รวมถึงโทรศัพท์มือถือรุ่นเก่าด้วย วิธีนี้เหมาะกับโมเดลขนาดเล็ก (ขนาดน้อยกว่า 3 MB) ซึ่งทำงานบน CPU ด้วย WASM ได้เร็วกว่า WebGL เนื่องจากค่าใช้จ่ายในการอัปโหลดเนื้อหาไปยังหน่วยประมวลผลกราฟิก
การดำเนินการ CPU - ควรใช้การดำเนินการนี้หากไม่มีสภาพแวดล้อมอื่นๆ วิธีนี้ช้าที่สุดใน 3 วิธี แต่ก็พร้อมให้บริการคุณเสมอ

หมายเหตุ: คุณสามารถเลือกบังคับใช้แบ็กเอนด์ใดแบ็กเอนด์หนึ่งได้หากทราบว่าจะใช้อุปกรณ์ใด หรือจะปล่อยให้ TensorFlow.js ตัดสินใจให้คุณก็ได้หากไม่ได้ระบุ

พลังพิเศษฝั่งไคลเอ็นต์

การเรียกใช้ TensorFlow.js ในเว็บเบราว์เซอร์บนเครื่องไคลเอ็นต์อาจมีประโยชน์หลายประการที่ควรพิจารณา

ความเป็นส่วนตัว

คุณฝึกและจัดประเภทข้อมูลในเครื่องไคลเอ็นต์ได้โดยไม่ต้องส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ของบุคคลที่สาม บางครั้งคุณอาจต้องดำเนินการดังกล่าวเพื่อปฏิบัติตามกฎหมายท้องถิ่น เช่น GDPR หรือเมื่อประมวลผลข้อมูลใดๆ ที่ผู้ใช้อาจต้องการเก็บไว้ในเครื่องของตนและไม่ส่งไปยังบุคคลที่สาม

ความเร็ว

เนื่องจากคุณไม่ต้องส่งข้อมูลไปยังเซิร์ฟเวอร์ระยะไกล การอนุมาน (การจัดประเภทข้อมูล) จึงทำได้เร็วขึ้น และที่ดียิ่งกว่านั้นคือคุณมีสิทธิ์เข้าถึงเซ็นเซอร์ของอุปกรณ์โดยตรง เช่น กล้อง ไมโครโฟน GPS ตัวตรวจวัดความเร่ง และอื่นๆ หากผู้ใช้ให้สิทธิ์เข้าถึงแก่คุณ

การเข้าถึงและการขยายขนาด

เพียงคลิกเดียว ทุกคนทั่วโลกก็สามารถคลิกลิงก์ที่คุณส่ง เปิดหน้าเว็บในเบราว์เซอร์ และใช้ประโยชน์จากสิ่งที่คุณสร้างขึ้นได้ ไม่จำเป็นต้องตั้งค่า Linux ที่ซับซ้อนฝั่งเซิร์ฟเวอร์ด้วยไดรเวอร์ CUDA และอื่นๆ อีกมากมายเพียงเพื่อใช้ระบบแมชชีนเลิร์นนิง

ค่าใช้จ่าย

การไม่มีเซิร์ฟเวอร์หมายความว่าสิ่งเดียวที่คุณต้องจ่ายคือ CDN เพื่อโฮสต์ไฟล์ HTML, CSS, JS และโมเดล ต้นทุนของ CDN ถูกกว่าการเปิดเซิร์ฟเวอร์ (อาจมีกราฟิกการ์ดติดอยู่) ตลอด 24 ชั่วโมงมาก

ฟีเจอร์ฝั่งเซิร์ฟเวอร์

การใช้ประโยชน์จากการติดตั้งใช้งาน TensorFlow.js ใน Node.js จะช่วยให้ใช้ฟีเจอร์ต่อไปนี้ได้

รองรับ CUDA อย่างเต็มรูปแบบ

ในฝั่งเซิร์ฟเวอร์ คุณต้องติดตั้งไดรเวอร์ NVIDIA CUDA เพื่อให้ TensorFlow ทำงานร่วมกับการ์ดกราฟิกได้ (ต่างจากในเบราว์เซอร์ที่ใช้ WebGL ซึ่งไม่ต้องติดตั้ง) แต่การรองรับ CUDA อย่างเต็มรูปแบบจะช่วยให้คุณใช้ความสามารถในระดับล่างของกราฟิกการ์ดได้อย่างเต็มที่ ซึ่งจะช่วยให้การฝึกและเวลาในการอนุมานเร็วขึ้น ประสิทธิภาพเทียบเท่ากับการใช้งาน TensorFlow ใน Python เนื่องจากทั้ง 2 อย่างใช้แบ็กเอนด์ C++ เดียวกัน

ขนาดโมเดล

สำหรับโมเดลที่ล้ำสมัยจากการวิจัย คุณอาจต้องทำงานกับโมเดลขนาดใหญ่มาก ซึ่งอาจมีขนาดเป็นกิกะไบต์ ปัจจุบันโมเดลเหล่านี้ยังไม่สามารถเรียกใช้ในเว็บเบราว์เซอร์ได้เนื่องจากข้อจำกัดของการใช้หน่วยความจำต่อแท็บเบราว์เซอร์ หากต้องการเรียกใช้โมเดลขนาดใหญ่เหล่านี้ คุณสามารถใช้ Node.js ในเซิร์ฟเวอร์ของคุณเองโดยมีข้อกำหนดด้านฮาร์ดแวร์ที่คุณต้องการเพื่อเรียกใช้โมเดลดังกล่าวอย่างมีประสิทธิภาพ

IOT

Node.js รองรับคอมพิวเตอร์แบบแผงวงจรเดี่ยวที่ได้รับความนิยม เช่น Raspberry Pi ซึ่งหมายความว่าคุณสามารถเรียกใช้โมเดล TensorFlow.js บนอุปกรณ์ดังกล่าวได้ด้วย

ความเร็ว

Node.js เขียนด้วย JavaScript ซึ่งหมายความว่า Node.js จะได้รับประโยชน์จากการคอมไพล์แบบทันที ซึ่งหมายความว่าคุณอาจเห็นประสิทธิภาพเพิ่มขึ้นบ่อยครั้งเมื่อใช้ Node.js เนื่องจากระบบจะเพิ่มประสิทธิภาพในขณะรันไทม์ โดยเฉพาะอย่างยิ่งสำหรับการประมวลผลล่วงหน้าใดๆ ที่คุณอาจทำ ตัวอย่างที่ยอดเยี่ยมของเรื่องนี้ดูได้ในกรณีศึกษานี้ ซึ่งแสดงให้เห็นว่า Hugging Face ใช้ Node.js เพื่อเพิ่มประสิทธิภาพโมเดลการประมวลผลภาษาธรรมชาติเป็น 2 เท่าได้อย่างไร

ตอนนี้คุณเข้าใจพื้นฐานของ TensorFlow.js, ตำแหน่งที่สามารถเรียกใช้ และประโยชน์บางอย่างแล้ว มาเริ่มทำสิ่งที่มีประโยชน์ด้วยกันเลย

3. โมเดลที่ฝึกไว้ล่วงหน้า

TensorFlow.js มีโมเดลแมชชีนเลิร์นนิง (ML) ที่ฝึกไว้ล่วงหน้าหลากหลายรูปแบบ โมเดลเหล่านี้ได้รับการฝึกโดยทีม TensorFlow.js และรวมอยู่ในคลาสที่ใช้งานง่าย ซึ่งเป็นวิธีที่ยอดเยี่ยมในการเริ่มต้นใช้งานแมชชีนเลิร์นนิง คุณสามารถนำเข้าโมเดลที่ผ่านการฝึกมาแล้วเป็นจุดเริ่มต้นแทนการสร้างและฝึกโมเดลเพื่อแก้ปัญหา

คุณดูรายการโมเดลที่ฝึกไว้ล่วงหน้าซึ่งใช้งานง่ายได้ที่หน้าโมเดลสำหรับ JavaScript ใน TensorFlow.js นอกจากนี้ คุณยังรับโมเดล TensorFlow ที่แปลงแล้วซึ่งใช้ได้ใน TensorFlow.js จากที่อื่นๆ ได้ด้วย เช่น TensorFlow Hub

เหตุใดฉันจึงควรใช้โมเดลที่ผ่านการฝึกมาก่อน

การเริ่มต้นด้วยโมเดลยอดนิยมที่ผ่านการฝึกมาก่อนมีประโยชน์หลายประการหากตรงกับกรณีการใช้งานที่คุณต้องการ เช่น

ไม่จำเป็นต้องรวบรวมข้อมูลการฝึกด้วยตนเอง การเตรียมข้อมูลในรูปแบบที่ถูกต้องและการติดป้ายกำกับเพื่อให้ระบบแมชชีนเลิร์นนิงใช้เรียนรู้ได้อาจต้องใช้เวลานานและมีค่าใช้จ่ายสูง
ความสามารถในการสร้างต้นแบบไอเดียอย่างรวดเร็วโดยใช้ต้นทุนและเวลาที่ลดลง
ไม่จำเป็นต้อง "ประดิษฐ์ล้อใหม่" ในเมื่อโมเดลที่ผ่านการฝึกมาก่อนอาจดีพอที่จะทำสิ่งที่คุณต้องการได้ ซึ่งจะช่วยให้คุณมุ่งเน้นไปที่การใช้ความรู้ที่โมเดลให้ไว้เพื่อนำไอเดียสร้างสรรค์ไปใช้
การใช้การวิจัยที่ทันสมัย โมเดลที่ได้รับการฝึกไว้ล่วงหน้ามักอิงตามงานวิจัยยอดนิยม ซึ่งจะช่วยให้คุณได้รู้จักโมเดลดังกล่าว พร้อมทั้งทำความเข้าใจประสิทธิภาพของโมเดลในโลกแห่งความเป็นจริง
ใช้งานง่ายและมีเอกสารประกอบมากมาย เนื่องจากโมเดลดังกล่าวได้รับความนิยม
ความสามารถ การเรียนรู้แบบโอน โมเดลที่ผ่านการฝึกมาก่อนบางโมเดลมีความสามารถในการเรียนรู้แบบถ่ายโอน ซึ่งเป็นการนำข้อมูลที่ได้เรียนรู้จากงานแมชชีนเลิร์นนิงหนึ่งไปใช้กับตัวอย่างที่คล้ายกันอีกตัวอย่างหนึ่ง ตัวอย่างเช่น โมเดลที่ได้รับการฝึกให้จดจำแมวในตอนแรกสามารถฝึกใหม่ให้จดจำสุนัขได้ หากคุณให้ข้อมูลการฝึกใหม่แก่โมเดล วิธีนี้จะเร็วกว่าเนื่องจากคุณไม่ต้องเริ่มจากผืนผ้าใบเปล่า โมเดลสามารถใช้สิ่งที่ได้เรียนรู้ไปแล้วเพื่อจดจำแมว จากนั้นจึงจดจำสิ่งใหม่ๆ ได้ เนื่องจากสุนัขก็มีตาและหูเช่นกัน ดังนั้นหากโมเดลรู้วิธีค้นหาฟีเจอร์เหล่านั้นอยู่แล้ว เราก็มาถึงครึ่งทางแล้ว ฝึกโมเดลอีกครั้งด้วยข้อมูลของคุณเองได้เร็วขึ้นมาก

COCO-SSD คืออะไร

COCO-SSD คือชื่อของโมเดล ML การตรวจจับออบเจ็กต์ที่ผ่านการฝึกมาก่อนซึ่งคุณจะใช้ใน Codelab นี้ โดยมีจุดประสงค์เพื่อระบุตำแหน่งและระบุออบเจ็กต์หลายรายการในรูปภาพเดียว กล่าวคือ โมเดลนี้จะช่วยให้คุณทราบกรอบล้อมรอบของออบเจ็กต์ที่ได้รับการฝึกให้ค้นหา เพื่อให้คุณทราบตำแหน่งของออบเจ็กต์นั้นในรูปภาพที่คุณแสดงต่อโมเดล ตัวอย่างแสดงในรูปภาพด้านล่าง

หากมีสุนัขมากกว่า 1 ตัวในรูปภาพด้านบน คุณจะได้รับพิกัดของกรอบล้อมรอบ 2 กรอบ ซึ่งอธิบายตำแหน่งของสุนัขแต่ละตัว COCO-SSD ได้รับการฝึกมาก่อนแล้วให้จดจำวัตถุทั่วไปในชีวิตประจำวัน 90 รายการ เช่น คน รถยนต์ แมว ฯลฯ

ชื่อนี้มาจากไหน

ชื่อนี้อาจฟังดูแปลก แต่มีที่มาจากคำย่อ 2 คำดังนี้

COCO: หมายถึงข้อเท็จจริงที่ว่าโมเดลได้รับการฝึกในชุดข้อมูล COCO (Common Objects in Context) ซึ่งทุกคนสามารถดาวน์โหลดและนำไปใช้ได้ฟรีเมื่อฝึกโมเดลของตนเอง ชุดข้อมูลมีรูปภาพที่ติดป้ายกำกับกว่า 200,000 รูปภาพซึ่งใช้เพื่อเรียนรู้ได้
SSD (Single Shot MultiBox Detection): หมายถึงส่วนหนึ่งของสถาปัตยกรรมโมเดลที่ใช้ในการติดตั้งใช้งานโมเดล คุณไม่จำเป็นต้องเข้าใจเรื่องนี้สำหรับ Codelab แต่หากสนใจก็ดูข้อมูลเพิ่มเติมเกี่ยวกับ SSD ได้ที่นี่

4. ตั้งค่า

สิ่งที่คุณต้องมี

เว็บเบราว์เซอร์ที่ทันสมัย
ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, JavaScript และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (การดูเอาต์พุตของคอนโซล)

มาเขียนโค้ดกัน

เราได้สร้างเทมเพลตมาตรฐานเพื่อใช้เป็นจุดเริ่มต้นสำหรับ Glitch.com หรือ Codepen.io คุณเพียงแค่โคลนเทมเพลตใดเทมเพลตหนึ่งเป็นสถานะพื้นฐานสำหรับโค้ดแล็บนี้ได้ในคลิกเดียว

ใน Glitch ให้คลิกปุ่ม remix this เพื่อแยกและสร้างชุดไฟล์ใหม่ที่คุณแก้ไขได้

หรือใน Codepen ให้คลิก fork ที่ด้านล่างขวาของหน้าจอ

โครงสร้างที่เรียบง่ายนี้จะให้ไฟล์ต่อไปนี้แก่คุณ

หน้า HTML (index.html)
สไตล์ชีต (style.css)
ไฟล์สำหรับเขียนโค้ด JavaScript (script.js)

เราได้เพิ่มการนำเข้าในไฟล์ HTML สำหรับไลบรารี TensorFlow.js เพื่ออำนวยความสะดวกให้คุณ โดยจะมีลักษณะดังนี้

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

ทางเลือก: ใช้โปรแกรมแก้ไขเว็บที่คุณต้องการหรือทำงานในเครื่อง

หากต้องการดาวน์โหลดโค้ดและทำงานในเครื่องหรือในโปรแกรมแก้ไขออนไลน์อื่น เพียงสร้างไฟล์ 3 ไฟล์ที่มีชื่อตามที่ระบุไว้ข้างต้นในไดเรกทอรีเดียวกัน แล้วคัดลอกและวางโค้ดจาก Boilerplate ของ Glitch ลงในแต่ละไฟล์

5. ป้อนข้อมูลโครงสร้าง HTML

ต้นแบบทั้งหมดต้องมีโครงสร้างพื้นฐานของ HTML คุณจะใช้ข้อมูลนี้เพื่อแสดงผลลัพธ์ของโมเดลแมชชีนเลิร์นนิงในภายหลัง มาตั้งค่ากันเลย

ชื่อของหน้าเว็บ
ข้อความอธิบายบางส่วน
ปุ่มสำหรับเปิดใช้เว็บแคม
แท็กวิดีโอเพื่อแสดงสตรีมจากเว็บแคม

หากต้องการตั้งค่าฟีเจอร์เหล่านี้ ให้เปิด index.html แล้ววางโค้ดต่อไปนี้ทับโค้ดที่มีอยู่

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

ทำความเข้าใจโค้ด

สังเกตสิ่งสำคัญที่คุณเพิ่ม

คุณเพิ่มแท็ก <h1> และแท็ก <p> บางแท็กสำหรับส่วนหัว รวมถึงข้อมูลบางอย่างเกี่ยวกับวิธีใช้หน้าเว็บ ไม่มีอะไรพิเศษ

นอกจากนี้ คุณยังเพิ่มแท็กส่วนที่แสดงพื้นที่ทดลองใช้ได้ด้วย

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

ในตอนแรก คุณจะให้ section มีคลาสเป็น "invisible" เพื่อให้คุณแสดงให้ผู้ใช้เห็นเมื่อโมเดลพร้อมใช้งาน และคลิกปุ่มเปิดใช้เว็บแคมได้อย่างปลอดภัย
คุณเพิ่มปุ่มเปิดใช้เว็บแคม ซึ่งคุณจะจัดรูปแบบใน CSS
นอกจากนี้ คุณยังเพิ่มแท็กวิดีโอซึ่งคุณจะสตรีมอินพุตจากเว็บแคมไปยังแท็กนี้ด้วย คุณจะตั้งค่านี้ในโค้ด JavaScript ในอีกสักครู่

หากคุณดูตัวอย่างเอาต์พุตตอนนี้ เอาต์พุตควรมีลักษณะดังนี้

6. เพิ่มสไตล์

ค่าเริ่มต้นขององค์ประกอบ

ก่อนอื่น มาเพิ่มรูปแบบสำหรับองค์ประกอบ HTML ที่เราเพิ่งเพิ่มเพื่อให้แสดงผลอย่างถูกต้องกัน

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

จากนั้นเพิ่มคลาส CSS ที่มีประโยชน์เพื่อช่วยในสถานะต่างๆ ของอินเทอร์เฟซผู้ใช้ เช่น เมื่อเราต้องการซ่อนปุ่ม หรือทำให้พื้นที่เดโมปรากฏว่าไม่พร้อมใช้งานหากโมเดลยังไม่พร้อม

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

เยี่ยมเลย แค่นี้ก็เรียบร้อย หากเขียนทับสไตล์ด้วยโค้ด 2 ส่วนด้านบนเรียบร้อยแล้ว ตัวอย่างแบบเรียลไทม์ควรมีลักษณะดังนี้

โปรดสังเกตว่าข้อความในพื้นที่การสาธิตและปุ่มไม่พร้อมใช้งาน เนื่องจาก HTML มีการใช้คลาส "invisible" โดยค่าเริ่มต้น คุณจะใช้ JavaScript เพื่อนำคลาสนี้ออกเมื่อโมเดลพร้อมใช้งาน

7. สร้างโครงร่าง JavaScript

การอ้างอิงองค์ประกอบ DOM ที่สำคัญ

ก่อนอื่น ตรวจสอบว่าคุณเข้าถึงส่วนสำคัญของหน้าที่คุณจะต้องแก้ไขหรือเข้าถึงในภายหลังในโค้ดของเราได้

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

ตรวจสอบว่าเว็บแคมรองรับหรือไม่

ตอนนี้คุณสามารถเพิ่มฟังก์ชันการช่วยเหลือบางอย่างเพื่อตรวจสอบว่าเบราว์เซอร์ที่คุณใช้รองรับการเข้าถึงสตรีมจากเว็บแคมผ่าน getUserMedia หรือไม่

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

การดึงข้อมูลสตรีมจากเว็บแคม

จากนั้นให้กรอกโค้ดสำหรับฟังก์ชัน enableCam ที่ว่างเปล่าก่อนหน้านี้ที่เรากำหนดไว้ข้างต้นโดยการคัดลอกและวางโค้ดด้านล่าง

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

สุดท้าย ให้เพิ่มโค้ดชั่วคราวเพื่อให้คุณทดสอบได้ว่าเว็บแคมทำงานหรือไม่

โค้ดด้านล่างจะจำลองว่าโมเดลโหลดแล้วและเปิดใช้ปุ่มกล้องเพื่อให้คุณคลิกได้ คุณจะแทนที่โค้ดทั้งหมดนี้ในขั้นตอนถัดไป ดังนั้นโปรดเตรียมพร้อมที่จะลบโค้ดอีกครั้งในอีกสักครู่

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

เยี่ยมเลย หากเรียกใช้โค้ดและคลิกปุ่มตามที่ปรากฏ คุณควรเห็นข้อความต่อไปนี้

8. การใช้โมเดลแมชชีนเลิร์นนิง

การโหลดโมเดล

ตอนนี้คุณพร้อมที่จะโหลดโมเดล COCO-SSD แล้ว

เมื่อการเริ่มต้นเสร็จสมบูรณ์ ให้เปิดใช้พื้นที่สาธิตและปุ่มในหน้าเว็บ (วางโค้ดนี้ทับโค้ดชั่วคราวที่คุณเพิ่มในขั้นตอนสุดท้าย)

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

เมื่อเพิ่มโค้ดด้านบนและรีเฟรช Live View แล้ว คุณจะเห็นว่าหลังจากโหลดหน้าเว็บแล้วไม่กี่วินาที (ขึ้นอยู่กับความเร็วของเครือข่าย) ปุ่มเปิดใช้เว็บแคมจะปรากฏขึ้นโดยอัตโนมัติเมื่อโมเดลพร้อมใช้งาน แต่คุณยังวางทับฟังก์ชัน predictWebcam ด้วย ดังนั้นตอนนี้จึงถึงเวลาที่จะกำหนดค่านี้อย่างเต็มที่ เนื่องจากโค้ดของเราจะยังไม่ทำอะไรในตอนนี้

ไปที่ขั้นตอนถัดไปกันเลย

การจัดประเภทเฟรมจากเว็บแคม

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

จากนั้นโมเดลจะแยกวิเคราะห์ผลลัพธ์และวาดแท็ก <p> ที่พิกัดที่ส่งกลับมา และตั้งค่าข้อความเป็นป้ายกำกับของออบเจ็กต์ หากมีความเชื่อมั่นในระดับหนึ่ง

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

การเรียกที่สำคัญจริงๆ ในโค้ดใหม่นี้คือ model.detect()

โมเดลที่สร้างไว้ล่วงหน้าทั้งหมดสำหรับ TensorFlow.js มีฟังก์ชันลักษณะนี้ (ชื่ออาจเปลี่ยนแปลงไปตามโมเดลแต่ละรายการ โปรดดูรายละเอียดในเอกสารประกอบ) ซึ่งจะทำการอนุมานแมชชีนเลิร์นนิงจริง

การอนุมานเป็นเพียงการรับอินพุตบางอย่างและเรียกใช้ผ่านโมเดลแมชชีนเลิร์นนิง (ซึ่งโดยพื้นฐานแล้วคือการดำเนินการทางคณิตศาสตร์จำนวนมาก) จากนั้นจึงแสดงผลลัพธ์บางอย่าง โมเดลที่สร้างไว้ล่วงหน้าของ TensorFlow.js จะส่งการคาดการณ์ในรูปแบบออบเจ็กต์ JSON เพื่อให้ใช้งานได้ง่าย

ดูรายละเอียดทั้งหมดของฟังก์ชันการคาดคะเนนี้ได้ในเอกสารของ GitHub สำหรับโมเดล COCO-SSD ที่นี่ ฟังก์ชันนี้ทำงานหนักมากอยู่เบื้องหลัง โดยสามารถรับออบเจ็กต์ "คล้ายรูปภาพ" เป็นพารามิเตอร์ได้ เช่น รูปภาพ วิดีโอ Canvas และอื่นๆ การใช้โมเดลที่สร้างไว้ล่วงหน้าจะช่วยประหยัดเวลาและความพยายามได้มาก เนื่องจากคุณไม่จำเป็นต้องเขียนโค้ดนี้ด้วยตนเองและสามารถใช้งานได้ทันที

การเรียกใช้โค้ดนี้ควรให้ภาพที่มีลักษณะดังนี้

สุดท้ายนี้ นี่คือตัวอย่างโค้ดที่ตรวจหาออบเจ็กต์หลายรายการพร้อมกัน

ไชโย คุณคงนึกออกแล้วว่าการนำเทคโนโลยีอย่างนี้มาสร้างอุปกรณ์อย่าง Nest Cam โดยใช้โทรศัพท์เครื่องเก่าเพื่อแจ้งเตือนเมื่อเห็นสุนัขบนโซฟาหรือแมวบนเก้าอี้จะง่ายเพียงใด หากพบปัญหาเกี่ยวกับโค้ด โปรดตรวจสอบเวอร์ชันสุดท้ายที่ใช้งานได้ที่นี่เพื่อดูว่าคุณคัดลอกข้อมูลไม่ถูกต้องหรือไม่

9. ขอแสดงความยินดี

ยินดีด้วย คุณได้เริ่มต้นใช้งาน TensorFlow.js และแมชชีนเลิร์นนิงในเว็บเบราว์เซอร์แล้ว ตอนนี้ก็ถึงตาคุณแล้วที่จะนำจุดเริ่มต้นเล็กๆ นี้ไปต่อยอดให้กลายเป็นผลงานที่สร้างสรรค์ คุณจะสร้างอะไร

สรุป

ใน Codelab นี้ เราจะทำสิ่งต่อไปนี้

ดูประโยชน์ของการใช้ TensorFlow.js แทน TensorFlow รูปแบบอื่นๆ
เรียนรู้สถานการณ์ที่คุณอาจต้องการเริ่มต้นด้วยโมเดลแมชชีนเลิร์นนิงที่ผ่านการฝึกมาแล้ว
สร้างหน้าเว็บที่ใช้งานได้อย่างเต็มรูปแบบซึ่งสามารถจัดประเภทออบเจ็กต์ได้แบบเรียลไทม์โดยใช้เว็บแคม ซึ่งรวมถึง
การสร้างโครงสร้าง HTML สำหรับเนื้อหา
การกำหนดรูปแบบสำหรับองค์ประกอบและคลาส HTML
การตั้งค่าโครงสร้าง JavaScript เพื่อโต้ตอบกับ HTML และตรวจหาเว็บแคม
การโหลดโมเดล TensorFlow.js ที่ผ่านการฝึกมาก่อน
ใช้โมเดลที่โหลดไว้เพื่อทำการจัดประเภทสตรีมจากเว็บแคมอย่างต่อเนื่องและวาดกรอบล้อมรอบวัตถุในรูปภาพ

ขั้นตอนถัดไป

แชร์ผลงานของคุณกับเรา คุณสามารถขยายสิ่งที่สร้างขึ้นสำหรับโค้ดแล็บนี้ไปยังกรณีการใช้งานครีเอทีฟโฆษณาอื่นๆ ได้อย่างง่ายดาย เราขอแนะนำให้คุณคิดนอกกรอบและแฮ็กต่อไปหลังจากที่ทำเสร็จแล้ว

ดูออบเจ็กต์ทั้งหมดที่โมเดลนี้จดจำได้ แล้วคิดว่าคุณจะใช้ความรู้นั้นเพื่อดำเนินการได้อย่างไร คุณจะนำไอเดียสร้างสรรค์ใดมาใช้ได้บ้างโดยต่อยอดจากสิ่งที่คุณสร้างในวันนี้

(คุณอาจเพิ่มเลเยอร์ฝั่งเซิร์ฟเวอร์อย่างง่ายเพื่อส่งการแจ้งเตือนไปยังอุปกรณ์อื่นเมื่อตรวจพบออบเจ็กต์ที่คุณเลือก โดยใช้ WebSockets ซึ่งเป็นวิธีที่ยอดเยี่ยมในการรีไซเคิลสมาร์ทโฟนเครื่องเก่าและมอบจุดประสงค์ใหม่ให้ ความเป็นไปได้นั้นไร้ขีดจำกัด)

แท็กเราบนโซเชียลมีเดียโดยใช้แฮชแท็ก #MadeWithTFJS เพื่อให้โปรเจ็กต์ของคุณมีโอกาสได้แสดงในบล็อก TensorFlow หรือแม้แต่จัดแสดงในกิจกรรม TensorFlow ในอนาคต

สร้างเว็บแคมอัจฉริยะด้วย JavaScript ด้วยโมเดลแมชชีนเลิร์นนิงที่ฝึกไว้แล้วล่วงหน้าของ TensorFlow.js

1. ก่อนเริ่มต้น

ข้อกำหนดเบื้องต้น

สิ่งที่คุณจะสร้าง

สิ่งที่คุณจะได้เรียนรู้

2. TensorFlow.js คืออะไร

ตำแหน่งที่ใช้งานได้

พลังพิเศษฝั่งไคลเอ็นต์

ความเป็นส่วนตัว

ความเร็ว

การเข้าถึงและการขยายขนาด

ค่าใช้จ่าย

ฟีเจอร์ฝั่งเซิร์ฟเวอร์

รองรับ CUDA อย่างเต็มรูปแบบ

ขนาดโมเดล

IOT

ความเร็ว

3. โมเดลที่ฝึกไว้ล่วงหน้า

เหตุใดฉันจึงควรใช้โมเดลที่ผ่านการฝึกมาก่อน

COCO-SSD คืออะไร

ชื่อนี้มาจากไหน

4. ตั้งค่า

สิ่งที่คุณต้องมี

มาเขียนโค้ดกัน

index.html

ทางเลือก: ใช้โปรแกรมแก้ไขเว็บที่คุณต้องการหรือทำงานในเครื่อง

5. ป้อนข้อมูลโครงสร้าง HTML

index.html

ทำความเข้าใจโค้ด

index.html

6. เพิ่มสไตล์

ค่าเริ่มต้นขององค์ประกอบ

style.css

style.css

7. สร้างโครงร่าง JavaScript

การอ้างอิงองค์ประกอบ DOM ที่สำคัญ

script.js

ตรวจสอบว่าเว็บแคมรองรับหรือไม่

script.js

การดึงข้อมูลสตรีมจากเว็บแคม

script.js

script.js

8. การใช้โมเดลแมชชีนเลิร์นนิง

การโหลดโมเดล

script.js

9. ขอแสดงความยินดี

สรุป

ขั้นตอนถัดไป

Codelab ของ TensorFlow.js เพิ่มเติมเพื่อเจาะลึก

เว็บไซต์ที่ควรดู