179 lines
4.7 KiB
Markdown
179 lines
4.7 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 works directly in Expo Go. AI replies are read aloud through the iPhone speaker. The chat also 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.
|