# google-gemma/gemma-translator architecture

> Architecture diagram of the GitHub repository google-gemma/gemma-translator, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/google-gemma/gemma-translator
- Repository: https://github.com/google-gemma/gemma-translator

## Overview

Gemma Translator is an offline, two-person voice translation kiosk: a user selects languages and records speech, which is transcribed by Moonshine, translated by a local Gemma-compatible model, and optionally spoken in the other lane’s language. The graph also captures settings, audio visualization, and system-volume control. The README documents the LiteRT-LM runtime and TTS capability; excerpts do not show every backend handler or the complete playback path, so those links are limited to documented responsibilities and visible API usage.

Main entry points: [`frontend/src/TranslatorApp.jsx`](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/TranslatorApp.jsx) (Translation workflow), [`backend/server.py`](https://github.com/google-gemma/gemma-translator/blob/main/backend/server.py) (Python API server), [`frontend/src/utils/api.js`](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/api.js) (Translation API client), [`frontend/src/App.jsx`](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/App.jsx) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Kiosk interface"]
  node_app["App shell<br/>[App.jsx]"]
  node_translator["Translation workflow<br/>[TranslatorApp.jsx]"]
  node_lanes["Language lanes<br/>[LanguageLane.jsx]"]
  node_settings["Settings overlay"]
  node_visualizer["Audio visualizer<br/>[Visualizer.jsx]"]
  node_blips["UI sound effects<br/>[audio-blip.js]"]
end

subgraph group_audio["Speech processing"]
  node_recorder["Microphone recorder"]
  node_audiohelpers["Audio preparation<br/>[audioHelpers.js]"]
  node_backend["Python API server<br/>[server.py]"]
  node_moonstt["Moonshine STT"]
  node_moontts["Moonshine TTS"]
end

subgraph group_model["Local translation"]
  node_apiclient["Translation API client<br/>[api.js]"]
  node_llmproxy["LLM proxy<br/>[server.py]"]
  node_gemma["Gemma inference"]
end

subgraph group_device["Device services"]
  node_volume["System audio"]
end

node_user(("Kiosk users"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_translator
node_app -->|"opens"| node_settings
node_translator -->|"renders"| node_lanes
node_translator -->|"captures"| node_recorder
node_recorder -->|"prepares PCM"| node_audiohelpers
node_translator -->|"displays audio"| node_visualizer
node_translator -->|"plays cues"| node_blips
node_translator -->|"requests transcription"| node_apiclient
node_apiclient -->|"posts audio"| node_backend
node_backend -->|"transcribes"| node_moonstt
node_translator -->|"requests translation"| node_apiclient
node_apiclient -->|"proxies request"| node_backend
node_backend -->|"forwards request"| node_llmproxy
node_llmproxy -->|"queries model"| node_gemma
node_translator -->|"requests speech"| node_backend
node_backend -->|"synthesizes speech"| node_moontts
node_settings -->|"controls volume"| node_backend
node_backend -->|"reads or adjusts"| node_volume

click node_app "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/App.jsx"
click node_translator "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/TranslatorApp.jsx"
click node_lanes "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/components/LanguageLane.jsx"
click node_settings "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/components/SettingsOverlay.jsx"
click node_visualizer "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/components/Visualizer.jsx"
click node_recorder "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/hooks/useAudioRecorder.js"
click node_audiohelpers "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/audioHelpers.js"
click node_apiclient "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/api.js"
click node_backend "https://github.com/google-gemma/gemma-translator/blob/main/backend/server.py"
click node_llmproxy "https://github.com/google-gemma/gemma-translator/blob/main/backend/server.py"
click node_blips "https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/audio-blip.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_translator,node_lanes,node_settings,node_visualizer,node_blips,node_user toneBlue
class node_recorder,node_audiohelpers,node_backend,node_moonstt,node_moontts toneAmber
class node_apiclient,node_llmproxy,node_gemma toneMint
class node_volume toneRose
```

## Components

### Kiosk interface

- [App shell](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Translation workflow](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/TranslatorApp.jsx): `frontend/src/TranslatorApp.jsx`
- [Language lanes](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/components/LanguageLane.jsx): `frontend/src/components/LanguageLane.jsx`
- [Settings overlay](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/components/SettingsOverlay.jsx): `frontend/src/components/SettingsOverlay.jsx`
- [Audio visualizer](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/components/Visualizer.jsx): `frontend/src/components/Visualizer.jsx`
- [UI sound effects](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/audio-blip.js): `frontend/src/utils/audio-blip.js`

### Speech processing

- [Microphone recorder](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/hooks/useAudioRecorder.js): `frontend/src/hooks/useAudioRecorder.js`
- [Audio preparation](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/audioHelpers.js): `frontend/src/utils/audioHelpers.js`
- [Python API server](https://github.com/google-gemma/gemma-translator/blob/main/backend/server.py): `backend/server.py`
- **Moonshine STT**
- **Moonshine TTS**

### Local translation

- [Translation API client](https://github.com/google-gemma/gemma-translator/blob/main/frontend/src/utils/api.js): `frontend/src/utils/api.js`
- [LLM proxy](https://github.com/google-gemma/gemma-translator/blob/main/backend/server.py): `backend/server.py`
- **Gemma inference**

### Device services

- **System audio**

### Other components

- **Kiosk users**

## Connections

- Kiosk users → App shell: uses
- App shell → Translation workflow: renders
- App shell → Settings overlay: opens
- Translation workflow → Language lanes: renders
- Translation workflow → Microphone recorder: captures
- Microphone recorder → Audio preparation: prepares PCM
- Translation workflow → Audio visualizer: displays audio
- Translation workflow → UI sound effects: plays cues
- Translation workflow → Translation API client: requests transcription
- Translation API client → Python API server: posts audio
- Python API server → Moonshine STT: transcribes
- Translation workflow → Translation API client: requests translation
- Translation API client → Python API server: proxies request
- Python API server → LLM proxy: forwards request
- LLM proxy → Gemma inference: queries model
- Translation workflow → Python API server: requests speech
- Python API server → Moonshine TTS: synthesizes speech
- Settings overlay → Python API server: controls volume
- Python API server → System audio: reads or adjusts