♻️ WasteAI Detector

Aplikasi deteksi sampah real-time berbasis kamera menggunakan Claude Vision API. Mengklasifikasikan sampah menjadi Organik, Anorganik, dan B3 (termasuk alat medis).

Fitur

• 📷 Live camera detection (kamera depan/belakang)
• 🤖 AI-powered dengan Claude Vision
• 📊 Confidence score visual
• 💡 Tips pembuangan yang benar
• ⚡ Auto-deteksi setiap 3 detik
• 📱 Responsive (mobile & desktop)
• 🚀 Siap deploy ke Vercel

---

🚀 Setup Lokal

1. Prasyarat

• Node.js 18+ → https://nodejs.org
• Akun Anthropic → https://console.anthropic.com
• Optional: Groq, Claude, or Gemini

2. Install dependencies

npm install

3. Buat file .env.local

cp .env.local.example .env.local

Edit .env.local dan isi dengan API key kamu:

ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxxxxxxxxx

4. Jalankan server development

npm run dev

Buka http://localhost:3000 di browser.

⚠️ HTTPS diperlukan untuk kamera di production. Di localhost, browser otomatis mengizinkan kamera.

---

🌐 Deploy ke Vercel

Cara 1: Via Vercel CLI (Recommended)

# Install Vercel CLI
npm i -g vercel

# Login
vercel login

# Deploy
vercel

# Atau langsung ke production
vercel --prod

Cara 2: Via GitHub

1. Push project ke GitHub
2. Buka https://vercel.com/new
3. Import repository
4. Tambahkan Environment Variable:
   • Key: ANTHROPIC_API_KEY
   • Value: sk-ant-xxxx...
5. Klik Deploy

🔑 PENTING: Jangan pernah commit .env.local ke GitHub! File .gitignore sudah mengecualikannya.

---

📁 Struktur Project

waste-detector/
├── app/
│   ├── api/detect/route.ts   ← API endpoint Claude Vision
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/
│   ├── WasteDetector.tsx     ← Komponen utama + kamera
│   └── ResultCard.tsx        ← Tampilan hasil deteksi
├── lib/
│   ├── useCamera.ts          ← Custom hook kamera
│   └── types.ts              ← TypeScript types
├── .env.local                ← API key (jangan di-commit!)
└── package.json

---

🔧 Konfigurasi

Edit components/WasteDetector.tsx:

const DETECT_INTERVAL_MS = 3000; // Interval auto-deteksi (ms)

---

💡 Cara Penggunaan

1. Buka aplikasi di browser
2. Klik "Nyalakan Kamera"
3. Izinkan akses kamera di browser
4. Deteksi Manual: Klik "Deteksi Sekali" untuk scan satu kali
5. Auto Deteksi: Klik "Auto Deteksi" untuk scan otomatis tiap 3 detik
6. Arahkan kamera ke sampah → hasil muncul di panel kanan