How zackakil/immersive-language-learning-with-live-api works
Immersive Language Learning is a browser-based roleplay practice app backed by a FastAPI service and Gemini Live. A learner moves from the welcome screen to choosing a mission, languages, and a learning mode, then practices in a live audio conversation and receives a completion score and feedback. The browser streams media through the service to Gemini and renders conversation updates. The README also describes optional bot protection, rate limiting, and BigQuery metrics. Some backend and UI excerpts are partial, so uncertain internal connections are omitted.
Main entry points: app-root.js App navigation · view-chat.js Roleplay session · main.py HTTP and WebSocket service · geminilive.js Live API client
Components 21
Learning experience
- App navigation
src/components/app-root.js - Welcome screen
src/components/view-splash.js - Mission selection
src/components/view-missions.js - Mission catalog
src/data/missions.json - Roleplay session
src/components/view-chat.js - Session results
src/components/view-summary.js - Prompt text
src/components/text-cycler.js - Live transcript
src/components/live-transcript.js - Audio visualizer
src/components/audio-visualizer.js
Live interaction
- Live API client
src/lib/gemini-live/geminilive.js - Media streaming
src/lib/gemini-live/mediaUtils.js
Application service
- HTTP and WebSocket service
server/main.py - Gemini session
server/gemini_live.py - Configuration helpers
server/config_utils.py - Request fingerprint
server/fingerprint.py
Trust and metrics
- reCAPTCHA validator
server/recaptcha_validator.py - Event tracking
server/simple_tracker.py
Other components
- Learner
- reCAPTCHA Enterprise
- BigQuery
- Gemini Live API
Connections 21
- Learner → App navigation: uses
README.md - App navigation → Welcome screen: shows
src/components/app-root.js - App navigation → Mission selection: shows
src/components/app-root.js - App navigation → Roleplay session: shows
src/components/app-root.js - App navigation → Session results: shows
src/components/app-root.js - Mission selection → Mission catalog: loads
src/components/view-missions.js - Roleplay session → Live API client: configures
src/components/view-chat.js - Roleplay session → Media streaming: uses
src/components/view-chat.js - Roleplay session → Live transcript: updates
src/components/view-chat.js - Roleplay session → Audio visualizer: connects
src/components/view-chat.js - Roleplay session → Session results: provides results
- App navigation → Prompt text: uses
src/components/app-root.js - Live API client → HTTP and WebSocket service: authenticates
src/lib/gemini-live/geminilive.js - Live API client → HTTP and WebSocket service: streams WebSocket
README.md - Media streaming → Live API client: sends audio
src/lib/gemini-live/mediaUtils.js - HTTP and WebSocket service → Gemini session: starts session
server/main.py - Gemini session → Gemini Live API: streams conversation
README.md - HTTP and WebSocket service → reCAPTCHA validator: validates token
server/main.py - reCAPTCHA validator → reCAPTCHA Enterprise: assesses token
server/recaptcha_validator.py - HTTP and WebSocket service → Event tracking: records events
README.md - Event tracking → BigQuery: writes metrics
server/simple_tracker.py