|
1 | | -# PlasticDetect AI (V1) |
| 1 | +# ♻️ PlasticDetect AI |
2 | 2 |
|
3 | | -A mobile-first PWA that identifies plastic waste from a photo using a real |
4 | | -trained MobileNetV2 model running entirely on-device via TensorFlow.js — |
5 | | -no photo ever leaves the phone. |
| 3 | +[](https://www.tensorflow.org/js) |
| 4 | +[](https://teachablemachine.withgoogle.com/) |
| 5 | +[](https://web.dev/progressive-web-apps/) |
| 6 | +[](LICENSE) |
| 7 | + |
| 8 | +An intelligent, privacy-first **Progressive Web Application (PWA)** that detects and classifies plastic waste categories in real-time directly on your mobile device using **TensorFlow.js** and **MobileNetV2**. |
| 9 | + |
| 10 | +--- |
| 11 | + |
| 12 | +## 🌟 Key Features |
| 13 | + |
| 14 | +- 🔒 **100% On-Device & Privacy-Preserving:** AI inference runs entirely client-side in the browser via TensorFlow.js — no images or camera feeds are ever sent to an external server. |
| 15 | +- 🏷️ **9 Plastic Resin Classifications:** Identifies PET, HDPE, PVC, LDPE, PP, PS, PLA, ABS, and PC with real-time confidence scores. |
| 16 | +- 📱 **Mobile-First Progressive Web App (PWA):** Installable on Android & iOS home screens with full offline support enabled by service worker caching. |
| 17 | +- ♻️ **Recycling & Disposal Guide:** Provides recycling recommendations, resin codes, and decomposition insights for detected plastic types. |
| 18 | +- 🌓 **Modern UI:** Responsive design with smooth animations, dark/light theme switching, and live camera / photo upload support. |
| 19 | +- 🛡️ **Heuristic Fallback:** Intelligent fallback mechanism ensuring graceful degradation if WebGL or model initialization fails. |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## 🧠 AI Pipeline & Dataset Curation |
| 24 | + |
| 25 | +1. **Dataset Collection:** |
| 26 | + - Manually curated and labeled image datasets gathered across real-world plastic items, resin codes, packaging materials, and varying lighting conditions. |
| 27 | +2. **Model Training:** |
| 28 | + - Trained via **Google Teachable Machine** using transfer learning on a **MobileNetV2** deep convolutional neural network backbone. |
| 29 | +3. **Model Export & Optimization:** |
| 30 | + - Converted into TensorFlow.js graph model format (`model.json` + binary weights) for fast, hardware-accelerated WebGL inference in mobile browsers. |
| 31 | + |
| 32 | +--- |
| 33 | + |
| 34 | +## 🏗️ Architecture & Tech Stack |
6 | 35 |
|
7 | | -## Run it |
8 | | -```bash |
9 | | -cd plasticdetect-ai |
10 | | -python3 -m http.server 8000 |
11 | | -``` |
12 | | -Open `http://localhost:8000` (camera needs a secure context — localhost is |
13 | | -fine; for phone testing, deploy over HTTPS, e.g. GitHub Pages or Netlify). |
14 | | - |
15 | | -## What's real |
16 | | -- **Classifier**: MobileNetV2 transfer learning, trained via Google Teachable |
17 | | - Machine (9 classes: PET/HDPE/PC/PP/LDPE/ABS/PLA/PS/PVC). Converted to |
18 | | - TensorFlow.js, runs client-side. |
19 | | -- Loads once, cached in memory for the session; service worker caches the |
20 | | - model + tfjs runtime for offline use after first visit. |
21 | | -- Confidence breakdown shown for every class, not just the top prediction. |
22 | | -- Heuristic fallback (color/brightness/texture) only kicks in if the model |
23 | | - or TF.js fails to load — you'll see a banner if that happens. |
24 | | -- Everything else (camera, gallery, history, dark mode, PWA) — fully working. |
25 | | - |
26 | | -## Not yet covered |
27 | | -Mixed / multi-layer plastic — no public labeled dataset exists for this |
28 | | -class; the app's guide/info screens still describe it, but the live |
29 | | -classifier can't predict it (falls into "Unknown" at low confidence instead). |
30 | | - |
31 | | -## Folder structure |
32 | 36 | ``` |
33 | 37 | plasticdetect-ai/ |
34 | | -├── index.html |
35 | | -├── manifest.json / service-worker.js |
36 | | -├── css/styles.css |
| 38 | +├── index.html # Main UI & responsive interface |
| 39 | +├── manifest.json # PWA configuration & app metadata |
| 40 | +├── service-worker.js # Offline caching for assets & model weights |
| 41 | +├── css/ |
| 42 | +│ └── styles.css # Responsive styling & theme variables |
37 | 43 | ├── js/ |
38 | | -│ ├── data.js # plastic knowledge base |
39 | | -│ ├── classifier.js # real model + heuristic fallback |
40 | | -│ ├── model/ # tfjs model.json + weights.bin + class_map.json |
41 | | -│ └── app.js |
| 44 | +│ ├── app.js # UI controller, camera streams & event handling |
| 45 | +│ ├── classifier.js # TensorFlow.js model loader & inference engine |
| 46 | +│ ├── data.js # Plastic resin knowledge base & disposal guide |
| 47 | +│ └── model/ # Trained TF.js model files & class mappings |
| 48 | +│ ├── model.json |
| 49 | +│ ├── weights.bin |
| 50 | +│ └── class_map.json |
| 51 | +└── icons/ # PWA app icons |
| 52 | +``` |
| 53 | + |
| 54 | +| Component | Technology | |
| 55 | +|---|---| |
| 56 | +| **Frontend** | Vanilla JavaScript (ES6+), HTML5, CSS3 | |
| 57 | +| **Machine Learning** | TensorFlow.js, MobileNetV2, Google Teachable Machine | |
| 58 | +| **Offline & Storage** | Service Workers, Cache API, Web Manifest | |
| 59 | +| **Acceleration** | WebGL / GPU-accelerated browser execution | |
| 60 | + |
| 61 | +--- |
| 62 | + |
| 63 | +## 🚀 Quick Start |
| 64 | + |
| 65 | +### 1. Clone the repository |
| 66 | +```bash |
| 67 | +git clone https://github.com/omukinkar18-hub/plasticdetect-ai.git |
| 68 | +cd plasticdetect-ai |
| 69 | +``` |
| 70 | + |
| 71 | +### 2. Run locally |
| 72 | +Start any local HTTP server: |
| 73 | + |
| 74 | +```bash |
| 75 | +# Using Python |
| 76 | +python3 -m http.server 8000 |
| 77 | + |
| 78 | +# Or using Node.js / npx |
| 79 | +npx serve . |
42 | 80 | ``` |
| 81 | + |
| 82 | +Open `http://localhost:8000` in your browser. |
| 83 | + |
| 84 | +> [!NOTE] |
| 85 | +> Accessing the camera requires a secure context (`localhost` or `HTTPS`). For testing on mobile devices, deploy via GitHub Pages or an HTTPS-enabled host. |
| 86 | +
|
| 87 | +--- |
| 88 | + |
| 89 | +## 🤝 Contributing |
| 90 | + |
| 91 | +Contributions, feedback, and dataset expansions are welcome! Feel free to open an issue or submit a pull request. |
| 92 | + |
| 93 | +--- |
| 94 | + |
| 95 | +## 📄 License |
| 96 | + |
| 97 | +This project is open-source and available under the [MIT License](LICENSE). |
0 commit comments