ZeaVis Edu
Asisten Edukasi Interaktif untuk Deteksi Penyakit Daun Jagung
Computer Vision • EfficientNetV2B0 • Rust ONNX Runtime • Tauri 2 Android
Tentang •
Tim •
Ringkasan •
Cakupan •
Jadwal •
Tech Stack •
Memulai •
Platform •
Dokumentasi
---
## ๐ฝ Tentang
**ZeaVis Edu** adalah aplikasi edukasi berbasis **Computer Vision** yang membantu petani, mahasiswa pertanian, dan penyuluh lapangan mengidentifikasi penyakit daun jagung secara mandiri โ cukup dengan mengunggah foto daun jagung.
Proyek ini merupakan **Capstone Project** dalam program **Pijak ร IBM SkillsBuild** dengan tema **"AI for Smart Education"**, dirancang untuk menjembatani kesenjangan antara pengetahuan teori pertanian dan kebutuhan praktis di lapangan.
---
## ๐ฅ Tim
| NPM | Nama | Learning Path | Peran |
|---|---|---|---|
| APC246D6Y0028 | **Asep Haryana Saputra** | Back-End | Arsitektur sistem, RESTful API, deployment Docker/Cloud, keamanan upload stream |
| APC013D6X0081 | **Selly Supriyatin** | Front-End | UI/UX responsif, mekanisme unggah gambar, modul edukasi (rekomendasi obat & penanganan) |
| APC013D6Y0091 | **Taufik Pathurrohman** | Machine Learning | Data Engineering โ ekstraksi dataset, cleaning, augmentasi gambar |
| APC414D6Y0138 | **Luhung Pandyaska Suyi** | Machine Learning | Model Architecture & Training โ CNN, hyperparameter tuning |
| APC013D6Y0269 | **Ardian** | Machine Learning | Model Evaluation & Deployment Prep โ confusion matrix, konversi ke production-ready |
---
## ๐ Ringkasan Eksekutif
### Masalah
Data BPS menunjukkan penurunan luas panen jagung dari **2.764.366 Ha (2022)** menjadi **2.487.191 Ha (2023)**. Salah satu penyebab utamanya adalah penyakit daun seperti **Hawar Daun**, **Karat Daun**, dan **Bercak Daun Abu-abu** yang menyebabkan nekrosis dan menghambat fotosintesis.
Petani sering kesulitan mengidentifikasi penyakit secara kasat mata dan memiliki **ketergantungan tinggi pada POPT** (Petugas Pengendali Organisme Pengganggu Tumbuhan) akibat minimnya media pembelajaran interaktif.
### Solusi
ZeaVis Edu menggunakan **Computer Vision** sebagai asisten edukasi interaktif:
1. ๐ธ **Unggah** foto daun jagung yang diduga terinfeksi
2. ๐ค **Deteksi otomatis** penyakit oleh model AI (EfficientNetV2B0)
3. ๐ **Dapatkan** informasi detail penyakit, panduan pencegahan, dan rekomendasi obat secara mandiri
### Metode Teknis
| Komponen | Pilihan |
|---|---|
| Arsitektur Model | **EfficientNetV2B0** โ keseimbangan optimal antara akurasi dan efisiensi parameter |
| Metode Pelatihan | **Transfer Learning** pada Google Colab (GPU T4) |
| Sumber Dataset | Kaggle โ [Corn Leaf Disease](https://www.kaggle.com/datasets/ndisan/corn-leaf-disease) |
| Deployment | VPS dengan Docker, ONNX Runtime untuk inferensi real-time |
---
## ๐ฏ Cakupan & Deliverables
### Cakupan
| โ
Dalam Cakupan | โ Di Luar Cakupan |
|---|---|
| Klasifikasi 3 penyakit + 1 daun sehat | Penyakit pada batang atau buah jagung |
| Deteksi berbasis unggah gambar daun | Prediksi tanpa input gambar |
| Rekomendasi obat & penanganan | Diagnosis pengganti ahli/POPT |
| Aplikasi Web + Android (Tauri 2) | Aplikasi iOS |
### 4 Kelas yang Diklasifikasikan
| Label | Nama Ilmiah | Gejala |
|---|---|---|
| **Hawar Daun** | *Northern/Southern Leaf Blight* | Hawar coklat memanjang pada daun |
| **Karat Daun** | *Common Rust* | Bintik coklat kemerahan berbentuk pustula |
| **Bercak Daun** | *Gray Leaf Spot* | Bercak abu-abu memanjang |
| **Daun Sehat** | โ | Tanpa gejala penyakit |
### Deliverables Proyek
| No | Tahapan | Deskripsi |
|---|---|---|
| 1 | **Pengumpulan Data** | Dataset gambar 3 penyakit + 1 daun sehat dari Kaggle beserta pelabelan |
| 2 | **Model ML** | Model Computer Vision terlatih di Google Colab, siap produksi |
| 3 | **UI Antarmuka** | Front-End berbasis React + Vite dengan fitur unggah gambar |
| 4 | **Back-End Integration** | API + ML Service untuk inferensi real-time via Docker |
| 5 | **Prototipe Akhir** | Aplikasi Web + Android (Tauri 2) dengan klasifikasi & modul edukasi (rekomendasi obat & penanganan) |
---
## ๐
Jadwal
| Minggu | Tanggal | Fase | Aktivitas |
|---|---|---|---|
| **1** | 11โ17 Mei 2026 | Inisiasi & Data | Spesifikasi teknis (Asep) โข Dataset dari Kaggle + preprocessing (Taufik) โข Wireframe UI/UX (Selly) |
| **2** | 18โ24 Mei 2026 | Training & Dev Awal | Implementasi EfficientNetV2B0 di Colab (Luhung) โข Slicing UI ke React (Selly) โข Setup server, database, routing API (Asep) |
| **3** | 25โ31 Mei 2026 | Evaluasi & Modul Edukasi | Evaluasi akurasi + konversi model ke ONNX/TFLite (Ardian) โข Halaman edukasi obat & penanganan (Selly) โข RESTful API untuk image upload & inferensi (Asep) |
| **4** | 1โ7 Juni 2026 | Integrasi & Testing | Integrasi penuh Front-End โ API โ Model ML โข Pengujian end-to-end โข Stress testing & error handling (Semua) |
| **5** | 8โ14 Juni 2026 | Deployment & Finalisasi | Deployment ke VPS (Asep) โข Bug fixing & optimalisasi UI/UX (Selly) โข Dokumentasi teknis & materi presentasi (Semua) |
---
## โ ๏ธ Manajemen Risiko
| Risiko | Solusi |
|---|---|
| **Overfitting akibat imbalanced data** | Augmentasi tingkat lanjut (kecerahan, noise, rotasi) + confidence threshold < 75% โ minta user foto ulang |
| **Server downtime / latensi tinggi** | Batasan upload โค 5 MB + kompresi server-side + rate limiting + container Docker isolasi resource |
| **Foto blur / objek bukan daun jagung** | Panduan visual (overlay) pada UI + validasi anomali + disclaimer "alat bantu edukasi, bukan pengganti POPT" |
| **Bottleneck integrasi ML โ API โ UI** | API Contract ketat di minggu ke-1 + integrasi bertahap (CI) mulai minggu ke-3 |
---
## ๐๏ธ Arsitektur Proyek
```
.
โโโ apps/
โ โโโ api/ # Backend Elysia/Bun + Drizzle ORM + PostgreSQL
โ โโโ ml-service/ # Rust/Axum + ONNX Runtime inference engine
โ โโโ tauri/ # Tauri 2 mobile wrapper โ Android APK
โ โโโ web/ # Frontend React + Vite + Tailwind CSS
โโโ Machine_Learning/ # Pipeline dataset, training Colab, ekspor model
โ โโโ README.md # โคท Panduan lengkap pipeline ML
โโโ infra/
โ โโโ README.md # โคท Panduan deployment multi-VPS
โโโ packages/shared/ # Tipe & utilitas TypeScript bersama
โโโ telemetry/ # Submodule โ Prometheus โ ClickHouse pipeline
โโโ docker-compose.yml # Konfigurasi deployment container
โโโ package.json # Root workspace Bun + Moon
โโโ README.md # โคท Anda di sini
```
| Komponen | Teknologi | Dokumentasi |
|---|---|---|
| Web Frontend | React, Vite, Tailwind, Zustand, TanStack Query | `apps/web/` |
| Android App | Tauri 2, Rust, WebView, Deep Link OAuth | `apps/tauri/` |
| API Backend | Bun, Elysia, Drizzle ORM, PostgreSQL | `apps/api/` |
| ML Inference Engine | Rust, Axum, ONNX Runtime | [`apps/ml-service/README.md`](apps/ml-service/README.md) |
| ML Pipeline | Python, TensorFlow/Keras, EfficientNetV2B0 | [`Machine_Learning/README.md`](Machine_Learning/README.md) |
| Infrastruktur | Docker, Coolify, Traefik, Tailscale | [`infra/README.md`](infra/README.md) |
| Telemetry | Prometheus, ClickHouse, Vector, Vue 3 | `telemetry/` |
---
## ๐ ๏ธ Tech Stack
### Frontend & Mobile
React • Vite • TypeScript • React Router • TanStack Query • Zustand • Tailwind CSS
**Tauri 2** (Android) • Rust • WebView • Deep Link OAuth
### Backend API
Bun • Elysia • Drizzle ORM • PostgreSQL • prom-client
### Machine Learning
Python • TensorFlow/Keras • EfficientNetV2B0 • Google Colab (GPU T4)
### Inference Engine
**Rust** • **Axum** • **ONNX Runtime** • TFLite • TensorFlow.js
### DevOps & Infrastruktur
Docker • Docker Compose • Coolify • Traefik • Tailscale • GitHub Actions (CI/CD)
### Observabilitas
Prometheus • Metric Ingester (Go) • Vector • ClickHouse • Query Proxy (Go) • Telemetry UI (Vue 3)
---
## ๐ Memulai
### Prasyarat
- **Bun** โ runtime & package manager
- **Python 3.9โ3.11** โ pipeline ML
- **Rust & Cargo** โ `apps/ml-service` (inference) & `apps/tauri` (Android)
- **Java 21 + Android SDK** โ build Android APK
- **Docker & Docker Compose** โ deployment & telemetry
- **PostgreSQL** โ backend API
### Instalasi
```bash
git clone https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu.git
cd ZeaVis-Edu
bun install
```
### Menjalankan Development
```bash
bun run dev # Semua service (web + api)
cd apps/web && bun run dev # Hanya frontend
cd apps/api && bun run start # Hanya backend API
cd apps/ml-service && cargo run # ML inference engine (port 8000)
cd apps/tauri && bun run tauri dev # Tauri desktop dev
cd apps/tauri && bun run tauri android dev # Tauri Android dev
```
### Environment Variables
Salin `.env.example` ke `.env` dan isi:
| Variable | Keterangan |
|---|---|
| `DATABASE_URL` | URL koneksi PostgreSQL |
| `SESSION_SECRET` | Secret untuk session auth |
| `WEB_APP_URL` | URL frontend (untuk CORS) |
| `ML_SERVICE_URL` | URL layanan inferensi ML |
### Pipeline ML (Ringkasan)
1. Unduh 3 dataset ZIP โ letakkan di `Machine_Learning/`
2. `python preprocessing.py` โ gabungkan & bersihkan dataset
3. Upload `dataset.zip` ke Google Drive
4. Jalankan `notebook.ipynb` di Google Colab (GPU T4)
5. Download `best_model.keras`
6. `python save_model.py` โ TFLite + SavedModel
7. Konversi ke TFJS & ONNX
> ๐ **Panduan lengkap:** [`Machine_Learning/README.md`](Machine_Learning/README.md)
### Deployment
```bash
docker compose up -d # App services
make telemetry-up # Telemetry stack
```
> ๐ **Panduan infrastruktur:** [`infra/README.md`](infra/README.md)
---
## ๐ฑ Platform
ZeaVis Edu tersedia di **dua platform** dari satu codebase:
| Platform | Teknologi | Build |
|---|---|---|
| **Web** | React + Vite โ Static SPA | `bun run build` |
| **Android** | Tauri 2 + Rust โ WebView APK | `cd apps/tauri && bun run tauri android build --apk` |
### Tauri 2 Android
Aplikasi Android membungkus frontend web yang sama dalam **WebView native** menggunakan **Tauri 2**, memberikan akses ke API native Android tanpa menulis ulang UI.
**Fitur Android:**
- **Google OAuth** โ Login via system browser + deep link `zeavisedu://` kembali ke app
- **Kamera** โ Izin `CAMERA` untuk unggah foto daun jagung langsung dari kamera
- **Tauri Plugin Opener** โ Buka URL eksternal di system browser
- **Tauri Plugin Deep Link** โ Tangkap OAuth callback tanpa memerlukan server redirect
**CI/CD Android:**
- GitHub Actions workflow `.github/workflows/android.yml`
- Build otomatis di setiap push/PR ke `main`
- Patch `AndroidManifest.xml` untuk menambahkan izin kamera + intent filter deep link
- APK ditandatangani (signed) via `apksigner` + release ke GitHub Releases
```bash
# Development Android (butuh Android SDK + emulator/device)
cd apps/tauri
bun run tauri android init # Init project Android
bun run tauri android dev # Dev dengan hot reload
bun run tauri android build --apk # Build APK production
# CI/CD โ dijalankan otomatis via GitHub Actions
.github/workflows/android.yml
```
> Konfigurasi: `apps/tauri/tauri.conf.json` • `apps/tauri/gen/android/`
---
## ๐ Dokumentasi
| Dokumen | Isi |
|---|---|
| [`Machine_Learning/README.md`](Machine_Learning/README.md) | Pipeline ML lengkap โ preprocessing, training Colab, ekspor TFLite/TFJS/ONNX |
| [`apps/ml-service/README.md`](apps/ml-service/README.md) | ML Inference Service โ setup, endpoint API, konfigurasi |
| [`infra/README.md`](infra/README.md) | Arsitektur multi-VPS โ diagram, GitHub Secrets, port, metrics flow |
| [`METRICS.md`](METRICS.md) | Daftar lengkap metrik Prometheus |
| `telemetry/` (submodule) | Source code telemetry stack |
---
## ๐ง Troubleshooting
| Masalah | Solusi |
|---|---|
| `bun install` gagal | `bun --version` โ pastikan โฅ 1.x |
| API perlu database | Isi `DATABASE_URL` di root `.env` |
| ML service gagal muat model | `ls Machine_Learning/model/model.onnx` โ jalankan pipeline ML jika belum ada |
| Docker Compose gagal | `docker network create app-shared-net` |
| Konversi TFJS gagal | `export PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION=python` |
---
## ๐ Daftar Pustaka
1. Prayogi, A. et al. *"Klasifikasi Penyakit Daun Jagung Menggunakan CNN"* โ [SISTEMATIS](https://ejournal.rizaniamedia.com/index.php/sistematis/article/view/87/49)
2. Nugroho, A. et al. *"Deteksi Penyakit Daun Jagung dengan Deep Learning"* โ [MIND Journal](https://ejurnal.itenas.ac.id/index.php/mindjournal/article/view/14032/4209)
3. Ramadhan, F. et al. *"Identifikasi Penyakit Jagung Berbasis Citra Digital"* โ [Informa](https://www.informa.poltekindonusa.ac.id/index.php/informa/article/view/199/170)
4. Corteva Agriscience. *"Kenali Ragam Jenis Penyakit Jagung dan Cara Mengatasinya"* โ [corteva.com](https://www.corteva.com/id/berita/Kenali-Ragam-Jenis-Penyakit-Jagung-dan-Cara-Mengatasinya.html)
---
Capstone Project โข Pijak ร IBM SkillsBuild โข AI for Smart Education
ยฉ 2026 ZeaVis Edu Team