{"id":51863447,"url":"https://github.com/alvinnn-r/root-facts-react","last_synced_at":"2026-07-24T12:00:56.563Z","repository":{"id":372153879,"uuid":"1305477346","full_name":"Alvinnn-R/root-facts-react","owner":"Alvinnn-R","description":"An AI-powered web assistant that uses Computer Vision (TensorFlow.js) to detect vegetables via camera and Generative AI (Transformers.js) to generate unique fun facts. Features offline-first PWA support.","archived":false,"fork":false,"pushed_at":"2026-07-19T07:09:44.000Z","size":2125,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-19T09:08:26.610Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alvinnn-R.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-07-19T06:30:27.000Z","updated_at":"2026-07-19T07:09:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Alvinnn-R/root-facts-react","commit_stats":null,"previous_names":["alvinnn-r/root-facts-react"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Alvinnn-R/root-facts-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alvinnn-R%2Froot-facts-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alvinnn-R%2Froot-facts-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alvinnn-R%2Froot-facts-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alvinnn-R%2Froot-facts-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alvinnn-R","download_url":"https://codeload.github.com/Alvinnn-R/root-facts-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alvinnn-R%2Froot-facts-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35841138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-24T02:00:07.870Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-24T12:00:55.583Z","updated_at":"2026-07-24T12:00:56.502Z","avatar_url":"https://github.com/Alvinnn-R.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RootFacts - AI Plant \u0026 Vegetable Fun Facts App\n\n\u003e Submission Proyek Akhir - Belajar Penerapan AI di Aplikasi Web - Dicoding Academy  \n\u003e Jalur: React + Vite\n\n---\n\n## Deskripsi Proyek\n\nRootFacts adalah aplikasi asisten berbasis web yang menggabungkan Computer Vision dan Generative AI untuk mengenali sayuran melalui kamera dan menyajikan fakta menarik secara otomatis.\n\nAplikasi ini memiliki dua fungsionalitas utama:\n\n- **Computer Vision** - Menggunakan kamera untuk mengenali berbagai jenis sayuran secara real-time via TensorFlow.js.\n- **Generative AI** - Setelah sayuran dikenali, menghasilkan fun fact unik dan kreatif menggunakan model Transformers.js (berjalan 100% lokal di browser pengguna).\n\n---\n\n## Tech Stack\n\n| Teknologi | Versi | Fungsi |\n|-----------|-------|--------|\n| React | ^19.2.0 | UI Framework |\n| Vite | ^6.0.7 | Build Tool \u0026 Dev Server |\n| TensorFlow.js | ^4.22.0 | Computer Vision (deteksi sayuran) |\n| TF.js WebGPU Backend | ^4.22.0 | Akselerasi GPU (WebGPU/WebGL) |\n| @huggingface/transformers | ^3.8.1 | Generative AI lokal (fun fact) |\n| vite-plugin-pwa | ^1.0.0 | PWA + Service Worker (Workbox) |\n| lucide-react | ^0.563.0 | Icon library |\n| ESLint | ^9.19.0 | Linter kode |\n\n---\n\n## Fitur yang Diimplementasikan\n\n### Kriteria 1 - Computer Vision (Deteksi Sayuran)\n- [x] Streaming kamera aktif via MediaStream API\n- [x] Model TensorFlow.js berhasil dimuat dengan indikator loading dan persentase\n- [x] Menampilkan label nama sayuran secara otomatis\n- [x] FPS Limit yang dikonfigurasi pada CameraService\n- [x] Backend Adaptif: pengecekan `navigator.gpu` (WebGPU dengan fallback ke WebGL)\n- [x] Manajemen Memori: menggunakan `tf.tidy()` dan `.dispose()` pada setiap siklus prediksi\n- [x] Arsitektur menggunakan React (komponen terstruktur)\n\n### Kriteria 2 - Generative AI (Fun Fact)\n- [x] Prompt AI dinamis berdasarkan label deteksi sayuran\n- [x] Menampilkan teks Fun Fact unik\n- [x] Copy to Clipboard untuk menyalin hasil teks AI\n- [x] Parameter model dikonfigurasi: `temperature`, `max_new_tokens`, `top_p`, `do_sample`\n- [x] Fitur Persona Dinamis: dropdown gaya bahasa untuk mengatur tone fakta (Normal / Lucu / Profesional / Santai)\n- [x] Backend Adaptif untuk Transformers.js (WebGPU ke WebGL fallback)\n\n### Kriteria 3 - Offline Capability \u0026 Deployment\n- [x] Deploy ke Netlify (URL tercantum di `STUDENT.txt`)\n- [x] Web App Manifest lengkap terkonfigurasi di Vite\n- [x] Service Worker via Workbox (Precaching HTML, CSS, JS)\n- [x] Aplikasi dapat diinstal (mendukung PWA)\n- [x] ESLint terkonfigurasi (`eslint-config-dicodingacademy`)\n- [x] Offline AI Model: Precaching file `.json` dan `.bin` model agar dapat berjalan luring sepenuhnya\n\n---\n\n## Panduan Setup \u0026 Menjalankan Proyek\n\n### Prasyarat\n\nPastikan environment lokal memenuhi:\n\n```\nNode.js  : v22.12.0\nnpm      : v11.6.2\nOS       : Windows\n```\n\n---\n\n### Langkah 1 - Instalasi Dependensi\n\nDi terminal proyek, jalankan:\n\n```bash\nnpm install\n```\n\nTunggu hingga semua package terinstall dan folder `node_modules` muncul.\n\n\u003e Catatan: Jangan commit folder `node_modules` ke repository atau menyertakannya dalam ZIP submission.\n\n---\n\n### Langkah 2 - Jalankan Development Server\n\n```bash\nnpm run dev\n```\n\nOutput yang diharapkan:\n\n```\n  VITE v6.x.x  ready in XXX ms\n\n  -\u003e  Local:   http://localhost:3001/\n```\n\nBuka browser dan akses URL lokal tersebut. Gunakan browser seperti Chrome atau Edge untuk kompabilitas WebRTC dan WebGPU terbaik.\n\n---\n\n### Langkah 3 - Struktur Kode\n\nKode logika inti dipisahkan dalam folder `src/services/` menggunakan class service:\n\n#### 1. CameraService (`src/services/CameraService.js`)\nMenangani enumerasi kamera, memulai stream MediaDevices, manajemen frame delay/FPS, dan menghentikan siaran kamera. Menambahkan penanganan fallback untuk mencegah crash pada environment non-HTTPS.\n\n#### 2. DetectionService (`src/services/DetectionService.js`)\nMemuat model TensorFlow.js dan metadatanya. Mengaplikasikan Backend Adaptive dan menjalankan prediksi (menggunakan `tf.tidy()` untuk efisiensi memori) dengan menerima input dari video element kamera.\n\n#### 3. RootFactsService (`src/services/RootFactsService.js`)\nMemuat pipeline Transformers.js (`Xenova/LaMini-Flan-T5-77M`). Mengelola *persona mapping* (mengubah parameter dan prompt teks sesuai *tone* pilihan), lalu menghasilkan teks yang relevan dengan hasil deteksi.\n\n---\n\n### Langkah 4 - Build untuk Production\n\n```bash\nnpm run build\n```\n\nFolder `dist/` akan dibuat. Folder ini berisi aset statis dan konfigurasi PWA yang siap di-deploy ke hosting seperti Netlify.\n\n---\n\n## File Penting\n\n| File | Keterangan |\n|------|-----------|\n| `src/App.jsx` | Root komponen yang menghubungkan semua layanan dan UI |\n| `src/services/CameraService.js` | Logika akses kamera dan FPS |\n| `src/services/DetectionService.js` | Logika TensorFlow.js dan prediksi |\n| `src/services/RootFactsService.js` | Logika Transformers.js dan prompt |\n| `public/model/` | Folder model TF.js (metadata, weights) |\n| `vite.config.js` | Konfigurasi build dan Workbox/PWA caching |\n| `eslint.config.js` | Konfigurasi Linter |\n| `STUDENT.txt` | File wajib yang harus berisi URL hasil deployment |\n\n---\n\n## Target Penilaian\n\n| Kriteria | Target |\n|----------|--------|\n| Deteksi Sayuran (Computer Vision) | Advanced |\n| Generative AI (Fun Fact) | Advanced |\n| Offline Capability \u0026 Deployment | Advanced |\n\n---\n\n## Referensi\n\n- [TensorFlow.js Docs](https://www.tensorflow.org/js)\n- [Transformers.js Docs](https://huggingface.co/docs/transformers.js)\n- [Vite PWA Plugin](https://vite-pwa-org.netlify.app/)\n\n---\n\n*Dibuat untuk keperluan submission Dicoding Academy - Belajar Penerapan AI di Aplikasi Web*\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvinnn-r%2Froot-facts-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvinnn-r%2Froot-facts-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvinnn-r%2Froot-facts-react/lists"}