TrashSeeker

เจ้าของผลงานเล่าไว้แบบนี้

Web-based waste monitoring system using TrashTrack API and AI object detection https://lostinyss.github.io/trash-seeker/ # TrashSeeker เว็บแอปสำหรับติดตามและตรวจจับขยะจากกล้องในหลายสถานที่ โดยเชื่อมต่อกับ TrashTrack API และโมเดล YOLO ## ความสามารถหลัก - เข้าสู่ระบบด้วยบัญชีสาธิต - เพิ่ม แก้ไข ลบ และค้นหาสถานที่ - เพิ่ม แก้ไข ลบ และค้นหากล้อง - รองรับ URL รูปภาพและ RTSP ผ่าน Backend Proxy - สแกนกล้องรายตัวหรือทุกกล้องในสถานที่ - แสดงภาพผลตรวจจับพร้อมกรอบจาก AI - แสดงสถานะ พบขยะ ไม่พบขยะ หรือข้อผิดพลาด - เชิญและนำสมาชิกออกจากสถานที่ - นับถอยหลังเพื่อสแกนอัตโนมัติทุก 10 นาที ## เทคโนโลยี - Next.js / Vinext - React และ TypeScript - TrashTrack FastAPI - YOLO Object Detection - Cloudflare Workers ## เริ่มใช้งานในเครื่อง ต้องติดตั้ง Node.js 22.13 ขึ้นไป จากนั้นรันคำสั่ง: ```bash npm install npm run dev ``` เปิดเว็บไซต์ที่ `http://localhost:3001` และเปิด TrashTrack API ที่ `http://127.0.0.1:8080` ## ตั้งค่า API สร้างไฟล์ `.env.local` แล้วระบุ URL ของ TrashTrack API: ```env NEXT_PUBLIC_TRASHTRACK_API_URL=http://127.0.0.1:8080 ``` เมื่อเผยแพร่เว็บไซต์ ต้องเปลี่ยนค่านี้เป็น HTTPS URL ของ API ที่ออนไลน์อยู่ เนื่องจากเว็บไซต์ออนไลน์ไม่สามารถเรียก `127.0.0.1` หรือ IP ภายในบ้านได้ ## สถานะโปรเจกต์ โปรเจกต์นี้เป็น Portfolio MVP ข้อมูลสถานที่ กล้อง และสมาชิกยังเป็นข้อมูลสาธิตในหน่วยความจำ ระบบ Login และการสแกนตามเวลาแบบ Server ยังไม่ได้เชื่อมฐานข้อมูลจริง ## เว็บไซต์ออนไลน์ GitHub Pages: `https://lostinyss.github.io/trash-seeker/` ทุกครั้งที่ Push ไปยัง Branch `main` ระบบ GitHub Actions จะ Build และเผยแพร่เว็บไซต์ใหม่ให้อัตโนมัติ ## ผู้พัฒนา กิตติกร มานิมนต์ — ออกแบบและพัฒนาเว็บแอป พร้อมนำ T

โดย Lostinyss · ดูโพสต์ต้นทาง