**ผู้จัดทำ:**

1. นายธเนศพล หีบแก้ว (65340500027)

2. นายชยากร ชื่นประเสริฐ (66340500012)

1. ที่มาและแนวคิดของโปรเจค (Project Background and Concept)

โปรเจคนี้เริ่มต้นจากการที่เราอยากลองทำเกมที่ใช้เงามือเป็นคอนเซปหลัก โดยตั้งชื่อว่า **”Put Your Hand Sign!”** แนวคิดคือ การทำมือให้เกิดเงาแบบต่างๆ ตามโจทย์ที่ปรากฏบนหน้าจอ โดยมีเป้าหมายเพื่อให้ระบบ Computer Vision ตรวจจับและตรวจความถูกต้องของเงาได้รวดเร็ว จนสามารถนำมาแข่งกันได้ว่าใครทำตามโจทย์ได้เร็วกว่ากัน

2. รูปแบบการเล่นและกติกา (Gameplay and Rules)

ตัวเกมถูกออกแบบมาให้เป็นการแข่งขันระหว่างผู้เล่น 2 ฝ่ายแบบ Real-time โดยมีกติกาที่เข้าใจง่ายและเน้นความรวดเร็ว:

เป้าหมายหลัก: ผู้เล่นทั้งสองฝ่าย (Player 1 และ Player 2) จะเห็นโจทย์ท่าทางเงามือเดียวกันบนหน้าจอ (เช่น “Bird” หรือ “Dog” เป็นต้น)

การแข่งขัน: ผู้เล่นจะต้องยื่นมือเข้าหน้ากล้องเพื่อทำเงามือเลียนแบบโจทย์ให้ถูกต้องและ “เร็วกว่า” อีกฝ่าย

การตัดสินและคะแนน: ระบบประมวลผลผ่าน AI แบบ Real-time หากใครทำท่าทางได้ถูกต้องตรงกับโจทย์เป็นคนแรก จะถือเป็นผู้ชนะในรอบนั้นและได้ 1 คะแนน จากนั้นระบบจะเปลี่ยนโจทย์เป็นท่าต่อไปทันที

3. ขั้นตอนการดำเนินงานอย่างละเอียด (Methodology)

3.1 การเก็บข้อมูลและการเตรียมชุดข้อมูล (Data Collection & Pre-processing)

อุปสรรคที่ใหญ่ที่สุดของการทำเงามือคือ “สภาพแสง” ที่ไม่คงที่ เราจึงใช้เทคนิคการประมวลผลภาพผ่าน OpenCV ตั้งแต่ขั้นตอนการเก็บ Dataset เพื่อควบคุมปัจจัยรบกวน

การทำ Binary Thresholding: เราแปลงภาพจากกล้องให้เป็นสีขาว-ดำทันที ช่วยตัดสัญญาณรบกวนจากสีผิว พื้นหลัง และเงาสะท้อนที่ไม่จำเป็นออกไป ทำให้ AI โฟกัสเฉพาะ “โครงร่าง” (Contour) ของเงามือเท่านั้น

Dataset Classes: เราทำการรวบรวมข้อมูลถ่ายภาพทั้งหมด 10 Classes โดยแบ่งเป็นสัตว์ 7 ชนิด (เช่น นก สุนัข ช้าง) และท่าค้อน-กรรไกร-กระดาษ 3 ท่า

การจัดการและ Label ข้อมูลด้วย Roboflow: หลังจากได้ภาพจำนวนหนึ่ง เรานำภาพทั้งหมดอัปโหลดเข้าสู่แพลตฟอร์ม **Roboflow** ในหน้าต่างนี้ เราได้ทำการตีกรอบ (Bounding Box) ล้อมรอบบริเวณเงามือในแต่ละภาพอย่างละเอียด และกำหนดชื่อคลาส การตีกรอบที่แม่นยำมีความสำคัญมากเพราะจะส่งผลโดยตรงต่อความสามารถของโมเดล เมื่อ Label เสร็จสิ้น Roboflow จะช่วยจัดการแบ่งชุดข้อมูล (Train, Validation, Test) และ Export ออกมา

3.2 การฝึกสอนโมเดล (Model Training)

เราเลือกใช้โมเดล **YOLO26** ซึ่งเป็นสถาปัตยกรรมที่โดดเด่นเรื่องความเร็วในการประมวลผลแบบ Real-time โดยใช้ทรัพยากรของ **Google Colab** ในการฝึกสอนโมเดล

กระบวนการ Training บน Google Colab: เรานำเข้า Dataset ที่เตรียมไว้จาก Roboflow เข้าสู่สภาพแวดล้อมของ Colab การรันบน Colab ทำให้เราสามารถเข้าถึง GPU ประสิทธิภาพสูง ช่วยลดระยะเวลาในการ Train โมเดลได้อย่างมหาศาล

การติดตามผลและการประเมิน:** ระหว่างการเทรน เราติดตามกราฟค่าความคลาดเคลื่อน (Loss) และค่าความแม่นยำ (Accuracy) เพื่อดูว่าโมเดลเรียนรู้และแยกแยะโครงร่างเงามือแต่ละคลาสได้ดีเพียงใด เมื่อความแม่นยำอยู่ในระดับที่น่าพอใจ จึงทำการ Export ไฟล์น้ำหนักโมเดล (Weights) ออกมาใช้งาน

3.3 การพัฒนาส่วนแสดงผลและการสื่อสาร (Web Interface & Communication)

เราใช้ Node.js ร่วมกับ Socket.io เป็นตัวกลางในการสื่อสารระหว่างส่วนประมวลผล AI (Python) และส่วนแสดงผลหน้าเว็บ (Browser)

ระบบการสื่อสาร Real-time: ฝั่ง Client (Python) จะจับภาพจากกล้องและส่งผลลัพธ์การทำนายพร้อมค่าความมั่นใจ (Confidence Score) ส่งมาที่ Server ทันที Server จะทำการตัดสินผู้ชนะและกระจายผลลัพธ์ผ่าน WebSocket (Socket.io) ไปยังหน้าจอของผู้เล่นทั้งสองคนและหน้าจอผู้ชม (Spectator) ทำให้ทุกหน้าจออัปเดตพร้อมกันโดยไม่ต้องกดรีเฟรช

ฐานข้อมูล: ข้อมูลประวัติการแข่งขันและคะแนนจะถูกบันทึกไว้อย่างเป็นระเบียบ ทั้งในระบบ Local (SQLite) และ Cloud (Supabase) เพื่อรองรับการแสดงผล Leaderboard

4. ผลการทดสอบและการวัดผล (Evaluation)

จากการทดสอบระบบในสภาพแวดล้อมจริง เราวัดผลจากความแม่นยำและการตอบสนองของระบบ:

Accuracy: โมเดลมีความแม่นยำสูง สามารถแยกแยะความแตกต่างของเงามือในแต่ละคลาสได้ดีแม้เงามือจะมีการขยับเล็กน้อย

Inference Speed: ความเร็วในการประมวลผลสูงมาก (ระดับมิลลิวินาที) และการส่งข้อมูลผ่าน WebSocket ทำได้รวดเร็วเพียงพอสำหรับการเล่นเกมแนวแข่งขันกันทำความเร็ว

5. สรุปผลและปัญหาที่พบ (Conclusion and Limitations)

อุปสรรคสำคัญที่เจอคือความแตกต่างของโครงสร้างมือของแต่ละคน รวมถึงระยะห่างจากกล้องถึงมือ ซึ่งส่งผลต่อขนาดของเงาบนหน้าจอ วิธีแก้ปัญหาในการเล่นจริงคือการแนะนำตำแหน่งการวางมือที่เหมาะสมให้อยู่ในกรอบที่กำหนดก่อนเริ่มเกม

โปรเจคนี้ทำให้เราเห็นว่าการนำ Computer Vision มาประยุกต์ใช้กับคอนเซปง่ายๆ อย่างเงามือ สามารถสร้างการปฏิสัมพันธ์ที่สนุกและน่าสนใจได้ และยังได้เรียนรู้การจัดการระบบ AI และ Web Server ให้ทำงานร่วมกันได้อย่างสมบูรณ์ในรูปแบบ HRI ที่ใช้งานได้จริง

6. ข้อมูลอ้างอิง (References)

Source Code (GitHub): [Put-Your-Hand-Sign-](https://github.com/Pluem2003/Put-Your-Hand-Sign-)

เทคโนโลยีที่ใช้: YOLO26, Node.js, Socket.io, OpenCV, Roboflow, Google Colab, Supabase

ชุดข้อมูลฝึกสอนโมเดล (Roboflow Dataset): [Hand Shadow Dataset โดย Pluem](https://app.roboflow.com/pluem-0bxuc/hand-shadow)

Dataset อ้างอิงเบื้องต้น: [HaSPeR on Hugging Face](https://huggingface.co/datasets/Starscream-11813/HaSPeR) (สำหรับการศึกษาแนวทางเพิ่มเติม)