211 lines
5.3 KiB
Markdown
211 lines
5.3 KiB
Markdown
# English AI Coach
|
|
|
|
English AI Coach is a starter project for a mobile AI-based English learning app. It helps users write short English sentences, find mistakes, and get clear corrections in English.
|
|
|
|
The project is intentionally lightweight: React Native, Expo, TypeScript, and React Navigation. It avoids unnecessary Expo-only libraries and is prepared for local AI with Ollama, speech input, text-to-speech, and push notifications.
|
|
|
|
## Features MVP
|
|
|
|
- HomeScreen with progress card and mock daily reminder
|
|
- Level selection for A1, A2, B1, and B2
|
|
- ChatScreen with user and AI messages
|
|
- AI replies can be read aloud on iPhone
|
|
- Ollama integration with offline fallback examples
|
|
- TypeScript-typed navigation
|
|
- Structure for future services, hooks, and utilities
|
|
- Web/PWA path prepared through Expo Web
|
|
|
|
## Beispiel
|
|
|
|
```text
|
|
User: I go yesterday to work
|
|
|
|
AI Coach:
|
|
Good try. Correct: "I went to work yesterday."
|
|
Use the past tense with "yesterday".
|
|
```
|
|
|
|
## Tech Stack
|
|
|
|
- React Native
|
|
- Expo
|
|
- TypeScript
|
|
- React Navigation
|
|
- Ollama API for local AI
|
|
- Text-to-speech with `expo-speech`
|
|
- Speech input currently through iPhone keyboard dictation
|
|
- Planned: in-app speech-to-text
|
|
- Planned: push notifications for daily reminders
|
|
|
|
## Projektstruktur
|
|
|
|
```text
|
|
english-ai-coach/
|
|
├── App.tsx
|
|
├── app.json
|
|
├── package.json
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── ChatBubble.tsx
|
|
│ │ ├── PrimaryButton.tsx
|
|
│ │ └── ProgressCard.tsx
|
|
│ ├── hooks/
|
|
│ │ └── useDailyReminder.ts
|
|
│ ├── navigation/
|
|
│ │ ├── AppNavigator.tsx
|
|
│ │ └── types.ts
|
|
│ ├── screens/
|
|
│ │ ├── ChatScreen.tsx
|
|
│ │ ├── HomeScreen.tsx
|
|
│ │ └── LevelScreen.tsx
|
|
│ ├── services/
|
|
│ │ └── mockAiCoach.ts
|
|
│ ├── theme/
|
|
│ │ └── colors.ts
|
|
│ └── utils/
|
|
│ └── levels.ts
|
|
└── README.md
|
|
```
|
|
|
|
## Installation
|
|
|
|
Requirements:
|
|
|
|
- Node.js
|
|
- npm
|
|
- Expo through `npx expo`
|
|
|
|
Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
Create optional local AI configuration:
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
Set your Ollama model in `.env`:
|
|
|
|
```text
|
|
EXPO_PUBLIC_OLLAMA_BASE_URL=http://localhost:11434
|
|
EXPO_PUBLIC_OLLAMA_MODEL=llama3.2
|
|
```
|
|
|
|
When testing on a real phone with Expo Go, `localhost` means the phone itself. Use your laptop IP instead, for example:
|
|
|
|
```text
|
|
EXPO_PUBLIC_OLLAMA_BASE_URL=http://192.168.10.102:11434
|
|
EXPO_PUBLIC_OLLAMA_MODEL=qwen2.5:7b
|
|
```
|
|
|
|
Start the app:
|
|
|
|
```bash
|
|
npm run start
|
|
```
|
|
|
|
## Speech Input And Playback
|
|
|
|
Playback uses a local MP3 TTS server on the laptop. AI replies are sent to the laptop, converted to an MP3 with a Microsoft neural English voice, and then played on the iPhone. This avoids the robotic iPhone system voice.
|
|
|
|
Start the TTS server in a second terminal:
|
|
|
|
```bash
|
|
npm run tts:start
|
|
```
|
|
|
|
For Expo Go on iPhone, `.env` must point to the laptop IP:
|
|
|
|
```text
|
|
EXPO_PUBLIC_TTS_BASE_URL=http://192.168.10.33:3333
|
|
EXPO_PUBLIC_TTS_VOICE=en-US-JennyNeural
|
|
EXPO_PUBLIC_TTS_RATE=0.88
|
|
EXPO_PUBLIC_TTS_PITCH=+0Hz
|
|
```
|
|
|
|
Useful English voices:
|
|
|
|
- `en-US-JennyNeural`
|
|
- `en-US-AvaNeural`
|
|
- `en-US-EmmaNeural`
|
|
- `en-US-GuyNeural`
|
|
- `en-GB-SoniaNeural`
|
|
- `en-GB-RyanNeural`
|
|
|
|
You can list available voices while the TTS server is running:
|
|
|
|
```text
|
|
http://192.168.10.33:3333/voices
|
|
```
|
|
|
|
The chat has buttons for `Read last answer` and `Stop`.
|
|
|
|
Speech input currently works through the iPhone keyboard:
|
|
|
|
- Tap the chat input field
|
|
- Press the microphone icon on the iPhone keyboard
|
|
- Speak English
|
|
- Review the text and send it
|
|
|
|
Real in-app speech-to-text with a custom microphone button is planned for later. That requires either a native iOS module after `expo prebuild` or a transcription API such as Whisper.
|
|
|
|
iOS Preview starten:
|
|
|
|
```bash
|
|
npm run ios
|
|
```
|
|
|
|
Web Preview starten:
|
|
|
|
```bash
|
|
npm run web
|
|
```
|
|
|
|
Note: local iOS simulator builds require macOS with Xcode. With Expo Go, the app can be tested on a real device.
|
|
|
|
## Ollama Integration
|
|
|
|
The chat uses `src/services/ollamaClient.ts` for real local AI replies. If Ollama is not reachable, `src/services/mockAiCoach.ts` automatically falls back to example replies. Model configuration lives in `src/config/ai.ts` and reads values from `.env`.
|
|
|
|
Local flow:
|
|
|
|
```text
|
|
React Native Chat UI
|
|
-> AI Service
|
|
-> local Ollama API
|
|
-> model such as llama, qwen, or mistral
|
|
-> English-only correction and explanation
|
|
```
|
|
|
|
For a PWA or local web version, the app can later run in the browser and connect to a local Ollama server on the network.
|
|
|
|
## PWA Idee
|
|
|
|
Die Web-Version kann spaeter als PWA erweitert werden:
|
|
|
|
- Auf Home-Bildschirm installieren
|
|
- Lokale Ollama-Verbindung konfigurieren
|
|
- Daily Reminder ueber Web Push pruefen
|
|
- Desktop- und Tablet-Layout optimieren
|
|
|
|
## Roadmap
|
|
|
|
- Chat UI erweitern
|
|
- Mock KI durch echte KI ersetzen
|
|
- Ollama API Client implementieren
|
|
- Level-spezifische Prompts erstellen
|
|
- Fehleranalyse und Vokabeltraining ergaenzen
|
|
- Fortschritt lokal speichern
|
|
- Speech-to-Text hinzufuegen
|
|
- Text-to-Speech fuer Aussprachetraining hinzufuegen
|
|
- Push Notifications fuer taegliche Uebungen einbauen
|
|
- PWA-Ausbau pruefen
|
|
- App Store Release vorbereiten
|
|
|
|
## Ziel
|
|
|
|
Ziel ist ein skalierbares Starterprojekt fuer eine KI-basierte Englischlern-App, die zuerst als mobile Expo-App funktioniert und spaeter lokal mit Ollama oder ueber eine externe KI-API erweitert werden kann.
|