179 lines
5.0 KiB
Markdown
179 lines
5.0 KiB
Markdown
# English AI Coach
|
|
|
|
English AI Coach ist ein Starterprojekt fuer eine mobile App zum Englischlernen mit KI. Die App hilft Nutzern, kurze englische Saetze zu schreiben, Fehler zu erkennen und Korrekturen mit deutscher Erklaerung zu erhalten.
|
|
|
|
Das Projekt ist bewusst schlank gehalten: React Native, Expo, TypeScript und React Navigation. Es nutzt keine unnoetigen Expo-only Libraries und ist so vorbereitet, dass spaeter lokale KI ueber Ollama, Speech-to-Text, Text-to-Speech und Push Notifications ergaenzt werden koennen.
|
|
|
|
## Features MVP
|
|
|
|
- HomeScreen mit Fortschrittskarte und Mock Daily Reminder
|
|
- Level-Auswahl fuer A1, A2, B1 und B2
|
|
- ChatScreen mit einfacher User- und AI-Nachrichtenansicht
|
|
- AI-Antworten koennen auf dem iPhone vorgelesen werden
|
|
- Mock KI-Service fuer Beispielkorrekturen
|
|
- TypeScript-typisierte Navigation
|
|
- Struktur fuer spaetere Services, Hooks und Utilities
|
|
- Web/PWA-Ausbau vorbereitet ueber Expo Web
|
|
|
|
## Beispiel
|
|
|
|
```text
|
|
User: I go yesterday to work
|
|
|
|
AI Coach:
|
|
Good try. Correct: "I went to work yesterday."
|
|
"Yesterday" braucht Past Tense.
|
|
```
|
|
|
|
## Tech Stack
|
|
|
|
- React Native
|
|
- Expo
|
|
- TypeScript
|
|
- React Navigation
|
|
- Geplant: Ollama API fuer lokale KI
|
|
- Geplant: Speech-to-Text und Text-to-Speech
|
|
- Text-to-Speech mit `expo-speech`
|
|
- Spracheingabe aktuell ueber iPhone-Diktierfunktion in der Tastatur
|
|
- Geplant: Push Notifications fuer Daily Reminder
|
|
|
|
## 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
|
|
|
|
Voraussetzungen:
|
|
|
|
- Node.js
|
|
- npm
|
|
- Expo ueber `npx expo`
|
|
|
|
Abhaengigkeiten installieren:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
Optionale lokale KI-Konfiguration anlegen:
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
In `.env` kannst du dein Ollama-Modell eintragen:
|
|
|
|
```text
|
|
EXPO_PUBLIC_OLLAMA_BASE_URL=http://localhost:11434
|
|
EXPO_PUBLIC_OLLAMA_MODEL=llama3.2
|
|
```
|
|
|
|
Wenn du die App auf einem echten Smartphone mit Expo Go testest, ist `localhost` das Smartphone selbst. Nutze dann die IP deines PCs, zum Beispiel:
|
|
|
|
```text
|
|
EXPO_PUBLIC_OLLAMA_BASE_URL=http://192.168.10.102:11434
|
|
EXPO_PUBLIC_OLLAMA_MODEL=qwen2.5:7b
|
|
```
|
|
|
|
App starten:
|
|
|
|
```bash
|
|
npm run start
|
|
```
|
|
|
|
## Spracheingabe und Vorlesen
|
|
|
|
Vorlesen funktioniert direkt in Expo Go. AI-Antworten werden automatisch ueber den iPhone-Lautsprecher vorgelesen. Im Chat gibt es ausserdem Buttons fuer `Letzte Antwort vorlesen` und `Stop`.
|
|
|
|
Spracheingabe funktioniert aktuell ueber die iPhone-Tastatur:
|
|
|
|
- Chat-Eingabefeld antippen
|
|
- Mikrofon-Symbol auf der iPhone-Tastatur druecken
|
|
- Englisch sprechen
|
|
- Text pruefen und senden
|
|
|
|
Echtes In-App Speech-to-Text mit eigenem Mikrofon-Button ist fuer spaeter geplant. Dafuer braucht die App entweder ein natives iOS-Modul nach `expo prebuild` oder eine Transkriptions-API wie Whisper.
|
|
|
|
iOS Preview starten:
|
|
|
|
```bash
|
|
npm run ios
|
|
```
|
|
|
|
Web Preview starten:
|
|
|
|
```bash
|
|
npm run web
|
|
```
|
|
|
|
Hinweis: Fuer lokale iOS-Simulator-Builds wird macOS mit Xcode benoetigt. Mit Expo Go kann die App auf einem echten Geraet getestet werden.
|
|
|
|
## Ollama Integration
|
|
|
|
Der Chat nutzt `src/services/ollamaClient.ts` fuer echte lokale KI-Antworten. Falls Ollama nicht erreichbar ist, faellt `src/services/mockAiCoach.ts` automatisch auf Beispielantworten zurueck. Die Modell-Konfiguration liegt in `src/config/ai.ts` und liest Werte aus `.env`.
|
|
|
|
Moeglicher lokaler Ablauf:
|
|
|
|
```text
|
|
React Native Chat UI
|
|
-> AI Service
|
|
-> lokale Ollama API
|
|
-> Modell wie llama, qwen oder mistral
|
|
-> Antwort mit Korrektur und Erklaerung
|
|
```
|
|
|
|
Fuer eine PWA oder lokale Web-Version kann die App spaeter im Browser laufen und mit einem lokalen Ollama-Server im Netzwerk verbunden werden.
|
|
|
|
## 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.
|