Ismail/english-ai-coach
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d54aae7bacc48dc36bd5e8dda8c25b2d16d72bd4
english-ai-coach/README.md
Ismail Ali d54aae7bac Add local Whisper speech input
2026-04-28 16:35:59 +02:00

5.9 KiB
Raw Blame History

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

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

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:

npm install

Create optional local AI configuration:

cp .env.example .env

Set your Ollama model in .env:

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:

EXPO_PUBLIC_OLLAMA_BASE_URL=http://192.168.10.102:11434
EXPO_PUBLIC_OLLAMA_MODEL=qwen2.5:7b

Start the app:

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:

npm run stt:start

For Expo Go on iPhone, .env must point to the laptop IP:

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:

$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:

npm run tts:start

For Expo Go on iPhone, .env must point to the laptop IP:

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:

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:

npm run ios

Web Preview starten:

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:

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.