Hệ Sinh Thái Cá Nhân
Vocab Learning Ecosystem
Hệ sinh thái học từ vựng: Chrome Extension thu thập + AI phân tích + Thú cưng ảo nhắc nhở học + App Mobile.
Tự động hóa quy trình học: bôi đen lưu từ vựng, một chú mèo ảo trên Windows sẽ bật pop-up để kiểm tra bài. Đồng bộ thời gian thực qua Supabase sang app điện thoại.
FlutterDartChrome ExtensionJavaScriptViteSupabaseOpenRouter AIGoogle TTSBackground TasksTauriReact
Điểm nổi bật
Tự động hóa End-to-End
Bôi đen → Context Menu → Lấy nghĩa, ví dụ, audio → Lưu Database.
Tích hợp AI
Sử dụng LLM (OpenRouter) để parse JSON, phân loại tiếng Anh/Nhật.
Android Overlay
Hiển thị flashcard học từ vựng trôi nổi trên Android.
Desktop Virtual Pet
Thú cưng ảo sống trên Taskbar Windows, tự động bật pop-up bài tập.
Đồng bộ Real-time
Lưu trên Chrome, có mặt ngay lập tức trên app qua Supabase.
Vấn đề & Mục tiêu
Quá trình tra từ điển, tìm ví dụ, nghe phát âm và ghi chép lại vào sổ tay tốn quá nhiều thao tác thủ công, dẫn đến lười biếng và bỏ cuộc.
→ Giải pháp Luồng tự động hóa 100%. Bôi đen từ -> "Save vocabulary". Hệ thống dùng AI phân tích, tạo file MP3, lưu lên Supabase và đồng bộ xuống app Flutter / Desktop Pet (Tauri) để nhắc nhở ôn tập chủ động.
Công nghệ
Mobile App (Flutter)
- Flutter & Dart — Cross-platform UI
- flutter_foreground_task — Background processing
- table_calendar — Streak & progress tracking
- just_audio — Audio playback for pronunciation
- flutter_local_notifications — Scheduled reminders
Browser Extension
- Vite + Vanilla JS — Fast extension bundler
- Chrome Context Menus — Seamless browser integration
- OpenRouter API — LLM prompt engineering for JSON extraction
- Google TTS API — Text-to-speech auto-generation
Backend (Supabase)
- Supabase Auth — Secure sign-in across extension & app
- Supabase Storage — Hosting generated MP3 files
Desktop App (Tauri)
- Tauri + Rust — Lightweight desktop framework
- React + Vite — Fast frontend UI
- Lottie Animations — Virtual pet character rendering
Luồng hoạt động (Data Flow)
Toàn bộ quy trình diễn ra trong background chỉ với một click, không làm gián đoạn trải nghiệm đọc của người dùng.
[User Highlights Text in Browser]
│ Right-click -> Save Vocabulary
▼
[Chrome Extension Background Script]
├── 1. Calls OpenRouter API (LLM) -> Generates Meaning, Example, Hiragana
├── 2. Calls Google TTS API -> Downloads MP3 blob for word & example
├── 3. Uploads MP3 to Supabase Storage -> Gets public URLs
└── 4. Upserts all metadata to Supabase Database
│
▼
[Supabase Database & Storage]
│ Real-time Sync / Fetch
├────────────────────────────────┐
▼ ▼
[Flutter Mobile App] [Tauri Desktop App]
├── Word list & calendar ├── Background tracking
├── Pronunciation (just_audio) ├── Lottie virtual pet overlay
└── Android Overlay Window └── Reminds to review vocab
Tính năng chính
Tích hợp API Từ điển & Ngôn ngữ
- Sử dụng API để tự động phát hiện ngôn ngữ (Anh/Nhật).
- Gọi API từ điển để lấy nghĩa chính xác và các ví dụ.
- Lấy dữ liệu phiên âm (Hiragana/Romaji) đối với tiếng Nhật.
- Tích hợp API Text-to-Speech (Google TTS).
Tiện ích mở rộng (Extension)
- Tích hợp Context Menu, chạy ngầm (Background service worker).
- Xử lý lỗi và thông báo (Chrome Notifications).
- Stateful Auth qua chrome.storage.local kết nối Supabase.
Ứng dụng Flutter
- Overlay Window: Học thụ động ngay trên màn hình chính.
- Nghe phát âm chuẩn xác thông qua just_audio.
- Lịch theo dõi tiến độ và Push Notifications.
Desktop Pet (Tauri)
- Thú cưng ảo hiển thị thường trực trên màn hình PC.
- Cửa sổ trong suốt, không viền.
- Tự động nhắc nhở review từ vựng sau khoảng thời gian sử dụng.
Hình ảnh - Chrome Extension
Chrome Extension - Context Menu
Thông báo Windows Toast khi lưu
Hình ảnh - Mobile App
Mobile App - Flash Card
Mobile App - Giao diện chính
Mobile App - Danh sách từ vựng
Hình ảnh - Desktop App
Desktop App - Cài đặt nhắc nhở
Thú cưng ảo & Bài tập nối từ (Overlay)
Popup bài tập nhập Hiragana
Desktop App - Pet nhắc học từ vựng
Desktop App - Ôn tập từ vựng