🎓 AI Learning Studio — AI Digital Learning Content Platform
A production-ready MVP platform that helps teachers and students create smart learning content using AI. Just upload documents, and the system automatically generates slides, podcasts, minigames, and a Q&A chatbot in minutes.
This is a comprehensive Multimodal RAG (Retrieval-Augmented Generation) AI Agent system, designed with a microservices architecture and fully deployed using Docker.
The project is divided into 2 main processing streams:
- Chatbot for Students: A virtual assistant for direct learning support. The system uses an Advanced RAG Pipeline (Semantic Chunking, Hybrid Search, Re-ranking) to extract knowledge from documents (PDF, Word, Excel) and answer student questions with high accuracy (citations included).
- AI Worker Service: The heart of the system, processing complex background tasks coordinated by FastAPI and managed via MongoDB. This module handles multimodal inputs (Whisper STT, OCR), combines web search (Tavily, SerpAPI) to automate the creation of visual learning materials: Lecture Slides, Podcasts, Minigames, and Video/Infographics.
🛠 Core Technologies: FastAPI, Next.js 14, MongoDB, ChromaDB (Vector Store), and an advanced AI model ecosystem (Gemini, OpenAI, Groq).
Key Features
- 📊 Automatic Slide Generation: Creates
.pptx lecture slides from learning materials automatically.
- 🎙️ Podcast Script Generation: Creates structured speaker/timeline scripts with TTS support.
- 🎮 Minigame/Quiz Generation: Interactive content (MCQ, fill-in-the-blank, flashcards, matching).
- 🤖 Advanced RAG Chatbot: Semantic Q&A based on documents using Hybrid Search (Vector + BM25) and FlashRank Re-ranking for superior accuracy.
- 🧩 Semantic Chunking: Intelligent document splitting by semantic context rather than token limits, preserving context.
- 🏁 Daily Goals: Automatically tracks learning progress based on schedules with real-time completion percentages.
- 🧭 Smart Web Search: Mascot and Chatbot can search the Web (Tavily/Google Search/SerpAPI) to supplement knowledge.
- 🎥 YouTube Interactive Lesson: Creates lessons from YouTube videos using SerpAPI for fast transcript extraction and interactive questions.
- 🎤 Multimodal Speech-to-Text: Supports Whisper (Local) or Groq Cloud (High speed).
- 🔊 Text-to-Speech: Natural Vietnamese voice conversion.
- 💻 Premium AI Terminal: A beautiful macOS-like console interface to track AI processing progress.
- 📐 3D Mascot Assistant: An interactive 3D virtual assistant integrated with Three.js.
Note: MongoDB uses MongoDB Atlas via MONGO_URI
- Online Web Search: Integrated web search page for quick information gathering (websites, news, images, videos, books) to help users synthesize information faster.
1. Technologies Used
Frontend
| Technology | Description |
|---|
| Next.js 14 | Primary frontend framework with App Router |
| React 18 | Component-based UI building |
| TypeScript | Frontend type safety |
| Tailwind CSS v4 | Utility-first CSS system |
| Framer Motion | Animations and UI interactions |
| Lucide React | Primary icon set |
| React Markdown + Remark GFM | Markdown rendering in UI |
| Three.js + React Three Fiber + Drei | 3D components and interactive mascot |
Backend & AI
| Technology | Description |
|---|
| Python 3.11+ | Primary language for backend and AI pipeline |
| FastAPI | REST API framework |
| Pydantic / pydantic-settings | Validation schema and application configuration |
| Motor / PyMongo | MongoDB connection and operations |
| ChromaDB | Vector database for local embeddings |
| FlashRank | Re-ranker model for RAG accuracy optimization |
| BM25 (Rank-BM25) | Keyword search algorithm combined with Vector Search |
| OpenAI API | Content generation, embeddings, and fallback model |
Google Gemini (google-genai) | Primary LLM (supports API key rotation) |
| Groq API | High-speed cloud Speech-to-Text |
| SerpAPI | Fast YouTube transcript and metadata extraction |
| Docling / PyPDF / python-docx / pandas / openpyxl / Pillow | Multi-format document processing |
| python-pptx | Automatic PowerPoint slide generation |
| Tavily Search / DuckDuckGo Search / Google Books API | Web and book search |
| Playwright | Browser automation (NotebookLM flow) |
Data, Queues and Storage
| Technology | Description |
|---|
| MongoDB | Primary business database |
| Redis | Broker and result backend for Celery |
| Celery | Background task processing |
| Flower | Celery worker monitoring |
| MinIO | S3-compatible object storage for local environment |
| Cloudflare R2 | Production object storage for file uploads and generated content |
| Boto3 | MinIO / Cloudflare R2 integration |
DevOps, Testing and Release
| Technology | Description |
|---|
| Docker / Docker Compose | Deployment, CI smoke test, and service packaging |
| GitHub Actions | CI/CD pipeline |
| GHCR | Publish frontend and backend container images |
| Vitest + Testing Library + jsdom | Frontend unit / integration testing |
| Pytest | Backend testing |
| ESLint | Frontend code quality checks |
Safe CI/CD Trigger (no .env commit)
When you need to trigger the CI/CD pipeline for deployment, you can commit safe documentation or code changes (e.g., README) instead of environment files.
- Do not commit secret files:
.env, .env.prod, backend/.env, frontend/.env.local.
- Only commit safe changes (docs/code) to trigger the workflow.
- Production secrets should be configured via GitHub Secrets or server env.
Example commit to trigger the pipeline:
git add README.md
git commit -m "docs: trigger CI/CD deploy"
git push
2. Overall Architecture
2.1 Components
frontend/ — AI Learning Studio UI (dashboard, upload, materials, slides, podcast, minigame, chatbot)backend/ — REST API, business logic, ingestion pipeline, RAG pipeline- Redis — Message broker for Celery tasks
- Celery Worker — Background task execution (generate slides, podcast, minigame)
- Celery Flower — Monitoring UI for Celery tasks
- MinIO / Cloudflare R2 — Object storage for files (uploads, generated content)
- MongoDB — Business data storage (metadata, chunks, generated content, sessions, games)
- ChromaDB — Vector store for semantic search
- OpenAI — For embeddings and generation (if API key available)
- Whisper/Groq — For Speech-to-Text in chatbot
2.2 Core Processing Flow
flowchart LR
A[Upload Document] --> B[Text Extraction]
B --> C[Cleaning & Semantic Chunking]
C --> D[Generate Embeddings]
D --> E[Save to ChromaDB + MongoDB]
E --> F[Hybrid Search: Vector + BM25]
F --> G[FlashRank Re-ranking]
G --> H{Content Generation}
H --> I[📊 Slides]
H --> J[🎙️ Podcast]
H --> K[🎮 Minigame]
H --> L[🤖 RAG Chatbot]
- User enters or uploads learning material (PDF/DOCX/TXT/MD).
- Backend reads and extracts text.
- Content cleaning.
- Chunking.
- Create embeddings for each chunk.
- Save vectors to ChromaDB.
- Save metadata/chunks to MongoDB.
- Retrieval by query.
- Use retrieved context to generate slides, podcast scripts, minigames, and chatbot answers with citations.
2.3 Entity Relationship Diagram (ERD)
3. Directory Structure
AI-FOR-EDUCATION/
├─ backend/ ← Server Source (FastAPI + AI Pipeline)
│ ├─ app/ ← Main application logic
│ │ ├─ ai/ ← AI modules (RAG, Chatbot, Embeddings,...)
│ │ │ ├─ chatbot/ ← C