[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"article-doc:docs\u002Fguides\u002F4.live-translation":3},"---\ntitle: Build Live Translation\ndescription: Bilingual \u002F translated caption UI.\n---\nBuild a bilingual caption UI that shows source text and translation side by side.\n\n::callout{icon=\"i-lucide-triangle-alert\" color=\"amber\"}\nReal-time `translate_to` is **not currently enabled** for external sessions. The public realtime gateway forwards `language` but does not forward `translate_to`, so a `session.update` with that field has no effect.\n::\n\n## Layout\n\n```\n┌──────────────────────────────────────────┐\n│ Source                                   │\n│ The weather is nice today                │\n│ ───────────────────────────────          │\n│ Translation                              │\n│ The weather is nice today                │\n└──────────────────────────────────────────┘\n```\n\n## Implementation\n\n```javascript\nws.onmessage = (event) => {\n  const data = JSON.parse(event.data);\n\n  if (data.type === 'conversation.item.input_audio_transcription.completed') {\n    const entry = document.createElement('div');\n    entry.className = 'translation-entry';\n\n    \u002F\u002F Source text\n    const source = document.createElement('div');\n    source.className = 'source-text';\n    source.textContent = data.text;\n    entry.appendChild(source);\n\n    \u002F\u002F Translation (if available in the event)\n    if (data.translation) {\n      const translated = document.createElement('div');\n      translated.className = 'translated-text';\n      translated.textContent = data.translation;\n      entry.appendChild(translated);\n    }\n\n    container.appendChild(entry);\n    container.scrollTop = container.scrollHeight;\n  }\n};\n```\n\n## CSS\n\n```css\n.translation-entry {\n  margin: 0.5em 0;\n  padding: 0.5em;\n  border-left: 3px solid #4f46e5;\n}\n.source-text {\n  font-weight: 500;\n}\n.translated-text {\n  margin-top: 0.25em;\n  opacity: 0.85;\n  font-style: italic;\n}\n```\n\n## Language switching\n\nWhen the user switches the source language, update the session:\n\n```javascript\nfunction switchLanguage(lang) {\n  ws.send(JSON.stringify({\n    type: 'session.update',\n    language: lang,\n  }));\n}\n```\n\nNew utterances after the switch use the new source language.\n\n## Related\n\n- [Live Translation](\u002Fdocs\u002Fconcepts\u002Flive-translation) — translation concepts\n- [Realtime Translation](\u002Fdocs\u002Frealtime\u002Frealtime-translation) — API details\n- [Build a Stable Caption UI](\u002Fdocs\u002Fguides\u002Fstable-caption-ui) — caption UI patterns\n",1790059118952]