🎓 AI Teacher Studio (AI Tutor Pro)

Next-Generation Interactive AI Video Tutoring & Digital Classroom Engine

Experience synchronized video avatars, live dynamic blackboard visualizations, voice-driven Q&A, and structured 10-step pedagogy.

---

🌟 Highlights

AI Teacher Studio transforms traditional asynchronous courses into live, engaging 1-on-1 tutoring sessions. It pairs realistic video avatar presenters with real-time speech synchronization and synchronized digital whiteboard visualizations (including live SQL diagrams, code highlighting, and visual table intersections).

---

✨ Key Features

Feature	Description
🎬 Live Video Avatar Stream	Switch seamlessly between high-definition presenter streams and a 60 FPS kinetic blackboard canvas.
🎙️ Synchronized Voice & Subtitles	Real-time speech synthesis with adjustable playback rates (0.75x–2.0x) and interactive closed captions.
📊 Interactive Digital Blackboard	Live SQL schema join visualizers, syntax callout boxes, and synchronized code walkthroughs.
👩‍🏫 Multi-Persona Faculty	Choose from specialized instructors with unique voices, accents, and emotional delivery styles.
🗣️ Voice-Driven Student Q&A	Ask questions via speech recognition or chat, receiving instant spoken explanations.
⚡ Zero-Cost Video Synthesis	In-browser 60 FPS video export pipeline plus Google Colab SadTalker integration guides.

---

🚀 Getting Started

Prerequisites

• Node.js 18.0 or higher
• npm, yarn, or bun
• A Google Gemini API Key

1. Clone & Install

git clone https://github.com/your-username/ai-teacher-studio.git
cd ai-teacher-studio
npm install

2. Configure Environment

Create a .env file in the root directory:

GEMINI_API_KEY=your_gemini_api_key_here

3. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

---

🛠️ Project Structure

├── server/
│   ├── avatar_service.ts       # Teacher profiles, audio synthesis & Colab pipelines
│   └── gemini.ts               # Gemini API multi-tier fallback orchestration
├── src/
│   ├── components/
│   │   ├── AvatarStage.tsx     # Synchronized video & interactive canvas theater
│   │   ├── AvatarTutorPage.tsx # Digital classroom with side-by-side blackboard
│   │   └── VideoGenerator.tsx  # In-browser WebCodecs video rendering engine
│   ├── types.ts                # Lesson, Persona, and Segment TypeScript types
│   └── App.tsx                 # Core application router and state management
└── server.ts                   # Express + Vite development and production server

---

📜 License

Distributed under the MIT License. See LICENSE for more information.