Baian - A Smarter Way to Learn Arabic

Overview

Baian is a comprehensive Arabic learning platform that combines modern technology with traditional language education methods. The platform consists of two main components:

• Mobile App (baian/) - A React Native application for interactive Arabic learning with letterboard, conversation practice, and speech recognition
• Backend API (backend/) - Python-based server providing AI-powered Arabic learning assistance, speech synthesis, and pronunciation assessment

Features

🔤 Arabic Letterboard

• Interactive grid of all Arabic letters (28 letters)
• Audio pronunciation for each letter
• Curated word lists with transliteration and English meanings
• Built-in quizzes for vocabulary practice

🗣️ Conversation Scenarios

• Restaurant Ordering (Easy): Practice ordering food in Arabic
• Friend Chat (Medium): Casual conversations with Arabic-speaking friends
• Business Meeting (Hard): Professional Arabic communication

🎯 Interactive Learning

• Voice recording and pronunciation practice
• AI-powered feedback on Arabic speech
• Personalized learning paths and progress tracking
• Daily challenges and exercises

🤖 AI-Powered Features

• Real-time Arabic speech recognition
• Azure Speech Services integration
• Pronunciation accuracy scoring
• Cultural appropriateness feedback

🎨 Modern User Interface

• Clean, intuitive design following modern UX principles
• Dark/light theme support
• Responsive layouts for all screen sizes
• Accessibility features for inclusive learning

Project Structure

Baian/
├── src/                   # React Native mobile app source
│   ├── components/        # Reusable UI components
│   │   ├── ArabicLetterboard.tsx  # Arabic letter grid component
│   │   └── TTSButton.tsx  # Text-to-speech button for Arabic
│   ├── screens/           # App screens and navigation
│   │   ├── DashboardScreen.tsx    # Main dashboard with letterboard
│   │   └── WelcomeScreen.tsx      # Welcome screen with Arabic branding
│   ├── data/              # App data and configurations
│   │   └── scenarios.ts   # Arabic conversation scenarios
│   ├── constants/         # App constants and themes
│   │   └── theme.ts       # Arabic-themed colors and styling
│   └── utils/             # Utility functions
├── backend/               # Python Flask API server
│   ├── main.py           # Main server with Arabic endpoints
│   └── requirements.txt   # Python dependencies
├── package.json          # React Native dependencies
└── README.md

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Python 3.8+
• Expo CLI (for mobile development)

Mobile App Setup

1. Navigate to the mobile app directory:

   cd baian

2. Install dependencies:

   npm install

3. Start the Expo development server:

   npx expo start

4. Run on device:

   • Install Expo Go app on your mobile device
   • Scan the QR code displayed in the terminal

API Endpoints

The backend provides these Arabic-specific endpoints:

• GET /api/letters - Get all Arabic letters with metadata
• GET /api/letters/{id}/words - Get 10 words for a specific letter
• GET /api/quiz/{letter_id} - Get quiz questions for a letter
• POST /api/synthesize-arabic - Generate Arabic speech audio
• POST /api/analyze-arabic-speech - Analyze Arabic pronunciation

Backend API Setup

1. Navigate to the backend directory:

   cd backend

2. Create a virtual environment (recommended):

   python -m venv venv
   # On Windows:
   venv\Scripts\activate
   # On macOS/Linux:
   source venv/bin/activate

3. Install Python dependencies:

   pip install -r requirements.txt

4. Configure environment variables: Create a .env file in the backend directory:

   AZURE_OPENAI_KEY=your_openai_key
   AZURE_OPENAI_ENDPOINT=your_openai_endpoint
   AZURE_OPENAI_VERSION=2023-05-15
   AZURE_SPEECH_KEY=your_speech_key
   AZURE_SPEECH_REGION=your_speech_region
   IP_ADDRESS=your_local_ip_address

5. Run the Flask server:

   python main.py

Technology Stack

Frontend

• React Native - Cross-platform mobile development
• React - Web application framework
• TypeScript - Type-safe JavaScript development
• Tailwind CSS - Utility-first CSS framework

Backend

• Python Flask - Lightweight web framework
• Azure OpenAI - AI-powered learning assistance
• Azure Speech Services - Speech recognition and synthesis

Development Tools

• Expo - React Native development platform
• Vite - Fast web development build tool
• ESLint - Code quality and consistency

Contributing

We welcome contributions to make Baian even better! Please feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, questions, or feedback:

• Create an issue in this repository
• Contact the development team
• Check our documentation

New Features in Baian

🆕 Arabic Letterboard

• Interactive 28-letter Arabic alphabet grid
• Tap any letter to hear pronunciation
• View curated words starting with each letter
• Take quizzes to test your knowledge

🆕 Arabic Conversation Practice

• Restaurant scenario: Order food in Arabic
• Friend chat: Casual Arabic conversations
• Business meeting: Professional Arabic communication

🆕 Enhanced Speech Recognition

• Arabic-specific pronunciation assessment
• Cultural appropriateness feedback
• Real-time transcription and analysis

---

Baian - Making Arabic learning smarter, more accessible, and more engaging for everyone. 🌟

بيان - طريقة أذكى لتعلم العربية 📚