🌿 KomposVision

Smart Composting & Waste Classification Assistant

KomposVision is an offline-first mobile app that classifies waste in real time on the device and helps users track compost batches and learn sustainable practices. The final mobile app lives in komposvision_final/ and runs fully on-device — no network required.

🏆 1st Place — IYREF 2026 (Integrated Youth Renewable Energy Festival)

Features · Engineering Highlights · Architecture · Quick Start · Roadmap

---

📖 Table of Contents

• About the Project
• Features
• Engineering Highlights
• Architecture
• Tech Stack
• Project Structure
• Quick Start
• Environment Variables
• API Documentation
• Roadmap
• Running Tests
• Deployment
• Contributing
• Team
• License

---

🎯 About the Project

KomposVision helps households and communities compost smarter by combining:

• Real-time on-device computer vision that classifies waste as organic vs inorganic
• Sorting guidance so only compostable material goes into the pile
• Offline-first progress tracking for compost batches and activities
• Guided learning via a materials guide and a local composting assistant

Everything in the mobile app runs on the device — inference, storage, and guidance all work with zero connectivity. An optional FastAPI backend exists for shared/online scenarios but is not required.

---

✨ Features

📷 Real-time Waste Classification

Point the camera at waste and get live, on-device results:

• Organic vs inorganic classification rendered directly over the camera feed
• Per-object confidence, updated continuously as you move the camera
• Runs entirely on-device with TensorFlow Lite — no network, no upload

🗂️ Offline-first by Design

• All data persisted locally with WatermelonDB (SQLite over JSI)
• Full functionality with zero connectivity

📈 Compost Progress Tracking

• Save a scan as a compost batch
• Log materials, activities, and progress over time
• Review composition summaries and history

📚 Materials Guide

• Practical do/don't guidance on what to compost and how

💬 Offline Chat Assistant

• Rule-based composting Q&A that uses your local batch context — works offline

---

🛠️ Engineering Highlights

The scan screen is the technical centerpiece — a fully on-device, real-time inference pipeline:

• 100% on-device inference. No frames or images ever leave the phone.
• Worklet-based frame processing. Camera frames are processed in a worklet; the YOLO11 decode + Non-Maximum Suppression run inside the worklet, so raw TypedArray/ArrayBuffer tensors are never serialized across the JS bridge — only the final ≤20 plain detection objects cross to the JS thread via runOnJS.
• Stable frame-callback identity. The TFLite model is held in a Synchronizable container so the frame callback keeps a stable identity when the model finishes loading — avoiding Android view re-attach (addViewAt) crashes.
• GPU resize to 640×640 RGB float32 via react-native-vision-camera-resizer before inference.
• Offline-first persistence with WatermelonDB (reactive SQLite over JSI).
• New Architecture + Hermes, NativeWind v4 styling, Expo Router file-based navigation.

---

🏗️ Architecture

┌──────────────────────────────────────────────────────────────┐
│              Expo React Native App (offline-first)           │
│           Tabs: Scan · Progress · Materials · Chat           │
└───────────────────────────────┬──────────────────────────────┘
                                │
          ┌─────────────────────┴─────────────────────┐
          ▼                                            ▼
┌────────────────────────────┐            ┌────────────────────────────┐
│  Real-time Vision (TFLite) │            │  Local Storage             │
│  on-device, in a worklet   │            │  WatermelonDB (SQLite/JSI) │
│                            │            │  batches · scans ·         │
│  organic / inorganic       │            │  activities · materials ·  │
│  live overlay              │            │  profiles                  │
└──────────────┬─────────────┘            └────────────────────────────┘
               │ capture snapshot
               ▼
┌────────────────────────────┐
│  Result + Compost Advisor  │  ──►  saved to WatermelonDB
│  organic/inorganic summary │
│  + sorting guidance        │
└────────────────────────────┘

              (optional — the app does not require it)
┌──────────────────────────────────────────────────────────────┐
│   KomposVision Online Backend — FastAPI + Supabase + Gemini   │
└──────────────────────────────────────────────────────────────┘

Vision Pipeline

Camera frame (YUV)
   │   react-native-vision-camera frame processor (worklet)
   ▼
Resize → 640×640 RGB float32          (vision-camera-resizer, GPU)
   │
   ▼
TFLite YOLO11 runSync                 (react-native-fast-tflite)
   │   output [1, 4 + numClasses, 8400]
   ▼
Decode + NMS  (inside the worklet; only ≤20 plain boxes cross to JS)
   │
   ▼
Live overlay: organic / inorganic + confidence

---

🧰 Tech Stack

Layer	Technology
Mobile	Expo SDK 54, React Native 0.81, React 19, TypeScript 5.9
UI	NativeWind (Tailwind), Expo Router, React Navigation
Vision (on-device)	TensorFlow Lite · react-native-fast-tflite · react-native-vision-camera · YOLOv11 (organic/inorganic)
Concurrency	react-native-worklets / worklets-core (frame processing + NMS)
Storage	WatermelonDB (SQLite over JSI)
Backend (optional)	FastAPI · Supabase · Gemini API

---

📂 Project Structure

KomposVision/
├── komposvision_final/               # Final mobile app (Expo)
│   ├── app/                          # Screens & routes (Expo Router)
│   ├── assets/                       # Images + TFLite models
│   ├── components/                   # Reusable UI components
│   ├── database/                     # WatermelonDB schema & models
│   ├── services/                     # Vision + composting services
│   └── utils/                        # Helpers & advisors
├── KomposVision_Online_Backend/       # Optional FastAPI backend
└── komposvision-enterprise-frontend/  # Optional web dashboard

---

🚀 Quick Start

Prerequisites

• Node.js v18+
• Expo CLI
• Android Studio or Xcode (real-time camera + TFLite require a native dev build)

1. Install Dependencies

cd komposvision_final
npm install

2. Run the App

npm run start

Camera + TFLite need a development build (they don't run in Expo Go):

npm run android

Android builds require JDK 17 (org.gradle.java.home in android/gradle.properties).

---

🔧 Environment Variables

The mobile app runs fully offline and does not require environment variables.

If you use the optional backend, create KomposVision_Online_Backend/backend/.env with:

Variable	Description
SUPABASE_URL	Supabase project URL
SUPABASE_KEY	Supabase service role key
GEMINI_API_KEY	Gemini API key

---

📚 API Documentation

The mobile app needs no API. When the optional backend is running, FastAPI docs are available at:

http://localhost:8000/docs

Method	Endpoint	Description
GET	/health	Service health check
POST	/scan	Analyze a waste image
POST	/chat	Composting Q&A assistant
GET	/progress	Compost progress summary
GET	/materials	Materials guide

---

🗺️ Roadmap

Planned work, in honest order of maturity:

• On-device C:N (carbon:nitrogen) segmentation — a YOLOv11-seg model is bundled in the app; pixel-level C/N composition and ratio estimation are planned but not yet trained/enabled. The app currently reports organic vs inorganic only.
• Contaminant-class detection — distinguishing specific non-compostables (plastic, metal, glass) beyond the organic/inorganic split.
• Image-from-gallery analysis — re-running inference on a chosen static image (today, analysis is real-time camera only).

---

🧪 Running Tests

No automated tests are configured yet. Linting and type-checking:

cd komposvision_final
npm run lint
npx tsc --noEmit

---

🚢 Deployment

Mobile

cd komposvision_final
eas build -p android

Backend (optional)

cd KomposVision_Online_Backend
uvicorn backend.main:app --reload

---

🤝 Contributing

1. Fork & Branch

git checkout -b feat/your-feature-name

2. Development Workflow

cd komposvision_final
npm run start

3. Code Style

• Keep components small and focused.
• Prefer hooks for stateful logic.
• Match the existing structure in components/, services/, and database/.

4. Commit Convention

Follow Conventional Commits:

feat: add compost batch reminders
fix: handle empty scan results
docs: update vision pipeline diagram

5. Open a Pull Request

• Target the main branch
• Describe what and why
• Reference any related issues

---

👥 Team

KomposVision was built with ❤️ by:

Name	Role
Manta Yuana	Backend & Project Manager
Kadek Pindra	Frontend & Integration
Nova Andini	AI & Data Engineering
Dewa Surya	Frontend & UI/UX Designer

---

📄 License

This project is licensed under the MIT License. See LICENSE for details.

---

Built for sustainable communities · KomposVision