AI Sensei is an innovative Next.js application that combines AI technology with immersive 3D visualization to create a unique Japanese language learning experience. Whether you're a beginner or advanced learner, AI Sensei provides real-time translations, grammar breakdowns, and pronunciation guidance with a personalized touch. 📚
- Interactive 3D Teachers: Choose between different 3D teacher models with unique voice and personalities 🧚
- Real-time AI Translation: Powered by OpenAI's GPT for accurate translations and explanations 🔍
- Text-to-Speech: Native Japanese pronunciation using Azure's Speech Services 💬
- Grammar Breakdown: Detailed analysis of sentence structure and usage 👩🏻🏫
- Dual Learning Modes: Switch between formal and casual Japanese 🌊
- Furigana Support: Optional reading aids for kanji characters 🪄
- Frontend: Next.js 14, React Three Fiber, Drei
- 3D Rendering: Three.js
- AI Integration: OpenAI GPT-3.5
- Speech Synthesis: Microsoft Cognitive Services
- State Management: Zustand
- Styling: Tailwind CSS
- Node.js
- npm/yarn/pnpm
- OpenAI API Key
- Azure Speech Services Key
- Clone the repository:
git clone https://github.com/yourusername/ai-sensei.git
cd ai-sensei- Install dependencies:
npm install- 🔔 IMPORTANT: Set up your own environment variables:
Create a .env.local file at the root directory:
OPENAI_API_KEY=your_openai_key
SPEECH_KEY=your_azure_speech_key
SPEECH_REGION=your_azure_region- Start the development server:
npm run devVisit http://localhost:3000 to see the application.
The main interface consists of:
- Teacher Selection: Choose between Nanami and Naoki as your virtual sensei
- Classroom Environment: Select between default and alternative classroom settings
- Learning Mode: Toggle between formal and casual Japanese
- Input Box: Type any English phrase you want to learn in Japanese
- Grammar Board: View detailed breakdowns of sentence structure
- Pronunciation: Listen to native pronunciation with lip-sync animation
Key components:
- Experience.jsx: Main 3D scene setup and rendering
- Teacher.jsx: 3D teacher model with animations and lip-sync
- MessagesList.jsx: Displays conversation history and grammar explanations
- TypingBox.jsx: User input interface
- useAITeacher.js: Central state management with Zustand
Required environment variables:
OPENAI_API_KEY=your_openai_api_key
SPEECH_KEY=your_azure_speech_key
SPEECH_REGION=your_azure_regionContributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenAI for GPT integration
- Microsoft Azure for Speech Services
- Three.js community for 3D rendering support
- Next.js team for the framework