231 lines
5.9 KiB
Markdown
231 lines
5.9 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
|
|
|
|
Speech input can run through local Whisper on the laptop. The iPhone records audio, sends it to the local STT server, Whisper transcribes it to English text, and the app sends that text to Ollama automatically.
|
|
|
|
Start the STT server in a third terminal:
|
|
|
|
```bash
|
|
npm run stt:start
|
|
```
|
|
|
|
For Expo Go on iPhone, `.env` must point to the laptop IP:
|
|
|
|
```text
|
|
EXPO_PUBLIC_STT_BASE_URL=http://192.168.10.33:3334
|
|
```
|
|
|
|
The default local Whisper model is `tiny.en`. It is downloaded on first use and then runs locally without API costs. You can change it with:
|
|
|
|
```powershell
|
|
$env:STT_MODEL="base.en"; npm run stt:start
|
|
```
|
|
|
|
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.
|