Little Listeners
En interaktiv barnapplikation med AI-driven storytelling, röstsyntes, 3D-avatarer och ljudböcker.
Översikt
Little Listeners är en barnvänlig plattform som kombinerar:
- 3D-avatar med realtids-lipsync och animationer (BabylonJS)
- AI-genererade berättelser med multi-turn konversation (GPT-4o-mini)
- Text-to-speech med röstkloning (Orpheus TTS)
- Röstinteraktion med intent-analys
- Ljudboksläsare med synkroniserade bildtexter
- Röstträning för personliga röster
Projektstruktur
little_listeners/
├── frontend/ # Produktfrontend (Next.js 16, React 19, BabylonJS)
├── admin/ # Admin/Studio för röstträning (Vite, React 18)
├── backend/ # TTS API-server (FastAPI, Python)
└── venv/ # Python virtual environment
Funktioner
1. Ljudboksläsning
| Funktion |
Beskrivning |
| Biblioteksöversikt |
Carousel-vy med swipe-navigering |
| Progress-sparning |
Automatisk sparning var 5:e sekund |
| Bildtextsynkronisering |
Word-level highlighting via Whisper |
| Co-reader |
Spontana kommentarer under läsning |
| Läsläge |
Avatar-animation anpassad för bokläsning |
2. Interaktivt berättelseläge (Story Mode)
| Funktion |
Beskrivning |
| AI-generering |
Multi-turn konversation med GPT-4o-mini |
| Intent-analys |
Förståelse av användarens avsikt |
| Session-persistens |
Sparas i localStorage |
| Recap-generering |
Sammanfattning av tidigare berättelse |
| Gentle steering |
Mjuka förslag för att hålla berättelsen igång |
| Idle Director |
Intelligenta systemförslag vid inaktivitet |
3. Text-to-Speech
| Funktion |
Beskrivning |
| Orpheus TTS |
20+ röster på 8 språk |
| Streaming |
Real-time audio chunks |
| Voice cloning |
Zero-shot kloning från röstprov |
| Word alignment |
Whisper-baserad ordsynkronisering |
| Staging intents |
Automatiska animationstriggers |
4. Röstinteraktion
| Funktion |
Beskrivning |
| Speech-to-text |
Browser Web Speech API |
| Intent routing |
Prioriterad analys av användarens tal |
| Voice triggers |
Röstaktiverade val i HUD |
| Listening indicator |
Visuell feedback när appen lyssnar |
5. 3D-Avatar (BabylonJS)
| Funktion |
Beskrivning |
| 8 animationer |
Idle, Greeting, Reaction, Reading, Talking (x3), BookSelected |
| Realtids-lipsync |
Intensity-baserad munrörelse |
| Mouth morphing |
open_smile, open shapes |
| Blinking |
State machine för naturlig blinkning |
| Kameraanimationer |
Dynamiska positioner för läsning vs idle |
6. Användarprofil
| Spårad data |
Beskrivning |
| Namn |
Hämtas via introduktionsflöde |
| Intressen |
Historik över ämnen och böcker |
| Läshistorik |
Vilka böcker som lästs |
| Berättelser |
Skapade AI-berättelser |
| Progress |
Position per ljudbok |
| Statistik |
Röst- vs klick-interaktioner, verbositet |
7. Röstträning (Admin)
| Funktion |
Beskrivning |
| Profilskapande |
Namn, språk, baspersonlighet |
| Guidad inspelning |
Transkript-baserade prompts |
| Progress |
Minst 50 inspelningar krävs |
| Training jobs |
GPU-baserad finjustering |
| Statusövervakning |
Polling av träningsstatus |
8. Voice Cloning (Admin)
| Funktion |
Beskrivning |
| Provuppladdning |
Fil eller direktinspelning |
| Auto-transkribering |
Whisper-baserad |
| Zero-shot |
Kloning från ett enda prov |
| Förhandsvisning |
Spela upp resultat direkt |
Teknisk arkitektur
Frontend (Next.js)
Sidor:
- / - Huvudapplikation med avatar och interaktion
- /admin - Enkel admin för TTS-test och röstträning
- /stream-test - Test av streaming TTS-pipeline
API Routes:
- POST /api/tts - Proxy till Orpheus API
- POST /api/tts/stream - Streaming TTS
- GET /api/proxy-audio - Audio-proxy för externa filer
Huvudkomponenter:
- AvatarScene - BabylonJS 3D-rendering med animationer
- AudioPlayer - Uppspelningskontroller med progress
- AudioBookLibrary - Bokbibliotek med carousel
- Captions - Synkroniserade bildtexter
- InteractionHUD - Overlay för röstval
Custom Hooks:
- useSmartTTS - Streaming TTS med Web Audio API
- useSpeechRouter - Routing av röstinput
- useStorySession - AI-berättelsemotor
- useCoReader - Spontana interjections
- useIdleDirector - Systemåtgärder vid inaktivitet
- useInteraction - Röst/touch-prompts
Backend (FastAPI)
Inference-lägen:
1. API Mode (standard) - Remote Orpheus container
2. Local Mode - Direkt PyTorch-modell
Services:
- TranscriptionService - Whisper.cpp transkribering
- OrpheusAPIClient - Orpheus API wrapper
- OrpheusEngine - Lokal modellinferens
- OllamaClient - LLM för textomskrivning
- SpeechProcessingPipeline - Integrerat workflow
- VoiceSampleManager - Röstprover för kloning
- VoiceProfileManager - Träningsprofiler
Integrationer
| Tjänst |
Användning |
| OpenAI GPT-4o-mini |
Berättelsegenerering, intent-analys |
| Orpheus TTS |
Text-to-speech (API eller lokal) |
| Whisper.cpp |
Taligenkänning och alignment |
| Ollama |
Textomskrivning |
| HuggingFace |
Modellnedladdning |
API-endpoints
Audio Processing
| Endpoint |
Metod |
Beskrivning |
/api/transcriptions |
POST |
Ladda upp och transkribera audio |
/api/pipeline/process |
POST |
Transkribering + omskrivning + TTS |
/api/pipeline/synthesize-from-text |
POST |
Direkt text-to-speech |
Voice Management
| Endpoint |
Metod |
Beskrivning |
/api/voices |
GET |
Lista tillgängliga röster |
/api/voice-samples |
GET |
Lista röstprover |
/api/voice-samples |
POST |
Ladda upp röstprov |
/api/voice-profiles |
GET |
Lista röstprofiler |
/api/voice-profiles |
POST |
Skapa ny profil |
Training
| Endpoint |
Metod |
Beskrivning |
/api/voice-profiles/{id}/next-transcript |
GET |
Nästa träningsprompt |
/api/voice-profiles/{id}/save-recording |
POST |
Spara inspelning |
/api/voice-profiles/{id}/train |
POST |
Starta träning |
/api/voice-profiles/{id}/training-status |
GET |
Träningsstatus |
Health
| Endpoint |
Metod |
Beskrivning |
/api/health |
GET |
Hälsokontroll |
Tillgängliga röster
| Språk |
Röster |
| Engelska |
tara, leah, jess, leo, dan, mia, zac, zoe |
| Franska |
pierre, amelie, marie |
| Tyska |
jana, thomas, max |
| Spanska |
javi, sergio, maria |
| Italienska |
pietro, giulia, carlo |
| Koreanska |
유나, 준서 |
| Hindi |
ऋतिका |
| Mandarin |
长乐, 白芷 |
Installation
Krav
- Python 3.11+
- Node.js 20+
- CUDA 12.4-kompatibel GPU
Backend
python -m venv venv
source venv/bin/activate
cd backend
pip install -r requirements.txt
Frontend
cd frontend
npm install
npm run build # För produktion
Admin
cd admin
npm install
Starta tjänsterna
Utveckling
# Alla tjänster
./start_all.sh
# Individuellt
cd backend && ./start_backend.sh # Port 8002
cd frontend && PORT=3011 npm run dev # Port 3011
cd admin && npm run dev # Port 5173
Produktion (systemd)
Service-filer finns i projektroten:
- little-listeners-backend.service
- little-listeners-frontend.service
# Installera
sudo cp little-listeners-*.service /etc/systemd/system/
sudo systemctl daemon-reload
# Aktivera vid boot
sudo systemctl enable little-listeners-backend
sudo systemctl enable little-listeners-frontend
# Starta
sudo systemctl start little-listeners-backend
sudo systemctl start little-listeners-frontend
# Status
sudo systemctl status little-listeners-backend
sudo systemctl status little-listeners-frontend
Caddy (reverse proxy)
Konfiguration: Caddyfile.kozmo
| URL |
Tjänst |
Port |
| kozmo.se |
Frontend |
3011 |
| kozmo.se/api |
Backend |
8002 |
| kozmo.se/docs |
Backend docs |
8002 |
sudo cp Caddyfile.kozmo /etc/caddy/Caddyfile
sudo systemctl reload caddy
Datalagring
Frontend (localStorage)
| Nyckel |
Innehåll |
ll_user_profile_v1 |
Användarprofil |
ll_story_session_v1 |
Berättelsesession |
Backend (filsystem)
backend/
├── output/ # Genererade TTS-filer
├── media/
│ ├── voice_samples/ # Uppladdade röstprover
│ └── transcriptions/ # Transkriptionsresultat
└── models_cache/ # HuggingFace modell-cache
Miljövariabler
Backend (backend/.env):
# API
API_PREFIX=/api
DEBUG=false
# Inference
INFERENCE_MODE=api # eller "local"
API_URL=http://127.0.0.1:5005/v1/audio/speech
API_TIMEOUT=120
# Modeller
MODEL_NAME=canopylabs/orpheus-3b-0.1-ft
VOICE_CLONING_MODEL=canopylabs/orpheus-tts-0.1-pretrained
# Ollama
OLLAMA_BASE_URL=http://localhost:11434
OLLAMA_MODEL=mistral
# CORS
ALLOWED_ORIGINS=*
Licens
Proprietär - Alla rättigheter förbehållna.