Giới thiệu

AI Study Buddy là một ứng dụng web cách mạng, biến ghi chú thụ động thành trải nghiệm học tập thú vị và đa phương tiện. Nó giải quyết vấn đề phổ biến của tài liệu học tập một chiều bằng cách tự động chuyển đổi bất kỳ ghi chú văn bản nào thành hai công cụ học tập mạnh mẽ:

• Bản đồ tư duy trực quan: Một bản đồ tư duy đầy màu sắc được tạo ra bởi AI, tổ chức các khái niệm chính và thể hiện mối quan hệ của chúng một cách nhanh chóng.
• Lời tường thuật âm thanh: Một tóm tắt ngắn gọn được phát âm cho phép học tập không cần tay và củng cố thông tin.

Bằng cách kích thích nhiều giác quan cùng một lúc, AI Study Buddy giúp cải thiện khả năng hiểu biết, ghi nhớ, và làm cho việc học trở nên chủ động và thú vị hơn cho sinh viên và những người học suốt đời.

Khám Phá Ứng Dụng

• 📱 Xem trong AI Studio
• 💻 Kho lưu trữ GitHub: MakendranG/AI-Study-Buddy
• 🎬 Video Demo:

Tính Năng Chính

• Chuyển Đổi Văn Bản Thành Bản Đồ Tư Duy: Tải lên ghi chú của bạn và xem chúng biến thành một bản đồ tư duy có cấu trúc.
• Phát lại Âm Thanh Tương Tác: Điều khiển phát, tạm dừng và dừng cho phần tường thuật được tạo ra bởi AI.
• Trình Xem Hình Ảnh Toàn Màn Hình: Nhấp vào bản đồ tư duy để xem ở độ phân giải cao với modal lightbox.
• Thiết kế Responsive: Hoạt động liền mạch trên cả desktop và thiết bị di động.

Cách Tôi Sử Dụng Google AI Studio

Ứng dụng tận dụng khả năng đa phương tiện mạnh mẽ của Google AI Studio thông qua một quy trình AI phức tạp gồm hai bước:

Tổng Quan Kiến Trúc

Bước 1: Phân Tích & Cấu Trúc Nội Dung

• Sử dụng Gemini 2.5 Flash với chế độ JSON và cấu trúc phản hồi nghiêm ngặt.
• Phân tích ghi chú của người dùng và tạo ra đầu ra có cấu trúc bao gồm:
  • mindMapPrompt: Mô tả chi tiết cho việc tạo hình ảnh.
  • narrationScript: Tóm tắt tối ưu từ 100-150 từ cho âm thanh.

Bước 2: Tạo Hình Ảnh

• mindMapPrompt được chuyển đến mô hình Imagen 4.
• Tạo ra bản đồ tư duy chất lượng cao, có liên quan dưới dạng hình ảnh JPEG mã hóa base64.
• Tạo ra các hình ảnh trực quan đầy màu sắc và được tổ chức tốt của nội dung.

Bước 3: Tích Hợp Frontend

• Frontend React hiển thị nội dung đã tạo.
• Web Speech API cung cấp khả năng phát âm thanh bản địa.
• Các điều khiển trạng thái quản lý vòng đời tổng hợp âm thanh.

Tính Năng Đa Phương Tiện

🎨 Xử Lý Hình Ảnh (Imagen 4)

• Chuyển Đổi Văn Bản Thành Hình Ảnh: Chuyển đổi các lời nhắc có cấu trúc thành bản đồ tư duy sống động.
• Đầu Ra Chất Lượng Cao: Tạo ra các công cụ trực quan chuyên nghiệp và chi tiết.
• Hiển Thị Tương Tác: Trình xem modal toàn màn hình cho việc kiểm tra chi tiết.

🔊 Xử Lý Âm Thanh (Gemini + Web Speech API)

• Tóm Tắt Nội Dung: Gemini 2.5 Flash tạo ra các kịch bản ngắn gọn, tối ưu hóa cho âm thanh.
• Chuyển Đổi Văn Bản Thành Giọng Nói: Sử dụng Web Speech API của trình duyệt để phát âm rõ ràng.
• Điều Khiển Phát Lại: Chức năng phát, tạm dừng và dừng với quản lý trạng thái.

🧠 Hiểu Biết Văn Bản (Gemini 2.5 Flash)

• Phân Tích Thông Minh: Trích xuất các khái niệm và mối quan hệ từ ghi chú không có cấu trúc.
• Đầu Ra Có Cấu Trúc: Sử dụng chế độ JSON cho các phản hồi đáng tin cậy, có thể phân tích.
• Xử Lý Hai Mục Đích: Tối ưu hóa đồng thời cho đầu ra hình ảnh và âm thanh.

Tại Sao Những Tính Năng Này Tăng Cường Trải Nghiệm Người Dùng:

• Học Tập Đa Giác Quan: Kích thích phong cách học trực quan, thính giác và viết/đọc.
• Cải Thiện Khả Năng Ghi Nhớ: Nghiên cứu cho thấy học đa phương tiện có thể tăng khả năng ghi nhớ thông tin lên đến 400%.
• Khả Năng Truy Cập: Cung cấp tùy chọn cho các sở thích học tập và khuyết tật khác nhau.
• Học Tập Chủ Động: Biến việc xem lại ghi chú thụ động thành một trải nghiệm tương tác thú vị.
• Tính Di Động: Phát thanh âm cho phép học tập trong khi di chuyển hoặc tập thể dục.

Đổi Mới Kỹ Thuật:

• Tích Hợp Mượt Mà: Tất cả các tính năng đa phương tiện hoạt động cùng nhau mà không cần can thiệp của người dùng.
• Xử Lý Thời Gian Thực: Thời gian tạo nhanh cho phản hồi ngay lập tức.
• Xử Lý Lỗi: Các phương pháp dự phòng mạnh mẽ đảm bảo trải nghiệm người dùng mượt mà.
• Thiết Kế Responsive: Các tính năng đa phương tiện thích ứng với các kích thước và thiết bị màn hình khác nhau.

AI Study Buddy chứng minh sức mạnh thực sự của khả năng đa phương tiện của Google AI Studio bằng cách tạo ra một giải pháp thực tiễn, hấp dẫn giúp việc học trở nên hiệu quả và dễ tiếp cận hơn cho mọi người.

---

Công Nghệ Sử Dụng

• Google Gemini 2.5 Flash (phân tích văn bản)
• Google Imagen 4 (tạo hình ảnh)
• React 19 + TypeScript
• Tailwind CSS
• Web Speech API
• Triển khai trên Cloud Run