AI Smart Waste Sorter

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

https://ai-wast-sorter.vercel.app # AI Smart Waste Sorter ระบบ AI แยกขยะอัจฉริยะด้วยกล้องมือถือ (Web Application) สร้างด้วย Next.js, Tailwind CSS และ TensorFlow.js ## 🚀 ฟีเจอร์หลัก - **Real-time Scanning**: ใช้กล้องหลังมือถือสแกนขยะได้ทันที - **AI Classification**: ระบุประเภทขยะด้วย TensorFlow.js (ทำงานบนเบราว์เซอร์ 100%) - **2 โหมดการใช้งาน**: โหมดทั่วไป (4 ประเภท) และ โหมดโรงเรียน (3 ประเภท) - **Mobile-First Design**: ออกแบบ UI ให้รองรับหน้าจอมือถือ ## 📂 โครงสร้างโปรเจกต์ - `src/pages/`: หน้าเว็บหลัก (`index.jsx`, `scan.jsx`, `info.jsx`) - `src/components/`: คอมโพเนนต์ UI (`CameraFeed.jsx`, `ModeSelector.jsx`, `ResultCard.jsx`) - `src/utils/ai-model.js`: ไฟล์จำลอง/โหลด AI Model ของ TensorFlow.js ## 🛠️ การติดตั้งและการรันโปรเจกต์ เนื่องจากโปรเจกต์นี้สร้างขึ้นมาเป็นโครงสร้างไฟล์ คุณสามารถนำไปใช้กับเครื่องที่มี Node.js ได้ดังนี้: 1. เปิด Terminal ในโฟลเดอร์โปรเจกต์ (`ai-waste-sorter`) 2. รันคำสั่งติดตั้ง Dependencies: ```bash npm install ``` 3. รันโหมด Development: ```bash npm run dev ``` 4. เปิดเบราว์เซอร์ไปที่ `http://localhost:3000` *หมายเหตุ: เพื่อให้กล้องมือถือทำงานได้ คุณต้องเข้าเว็บผ่านโปรโตคอล `https://` หรือรันผ่าน `localhost`* ## 🌐 ขั้นตอนการ Push ขึ้น GitHub เพื่อ Deploy บน Vercel โปรเจกต์นี้ตั้งค่า `vercel.json` มาให้พร้อมสำหรับการ Deploy ไปยัง Vercel: 1. สมัครและเข้าสู่ระบบ [GitHub](https://github.com/) 2. สร้าง Repository ใหม่บน GitHub 3. เปิด Terminal ในโฟลเดอร์โปรเจกต์ และอัปโหลดโค้ด: ```bash git init git add . git commit -m "Initial commit: AI Waste S

โดย sumatchaya268-sys · ดูโพสต์ต้นทาง