Skip to content

Add web demo for AI Real-Time Translation Bridge - #82

Merged
harpreetTelnyx merged 2 commits into
mainfrom
feat/translation-bridge-web-demo
Jul 30, 2026
Merged

Add web demo for AI Real-Time Translation Bridge#82
harpreetTelnyx merged 2 commits into
mainfrom
feat/translation-bridge-web-demo

Conversation

@harpreetTelnyx

Copy link
Copy Markdown
Collaborator

What this adds

A browser-based demo of the translation engine from the AI Real-Time Translation Bridge example. Same Telnyx AI Inference API, same model, same prompt — just a web UI instead of telephony.

Why

The phone-call sample requires a purchased number, a Call Control application, webhook tunneling (ngrok), and two test phones to see it work. That's a lot of setup before you can verify the translation engine actually works. This web demo lets you see the same translation live in a browser with just an API key — useful for demos, videos, and quick verification.

What's in the PR

File Purpose
demo/app.py Flask backend, /translate calls Telnyx AI Inference (zai-org/GLM-5.1-FP8)
demo/templates/index.html Web UI — dual chat panels (Caller A / Caller B) + live pipeline visualization (Speech → STT → AI Translate → TTS). Vanilla JS, no build step
demo/requirements.txt Flask, requests, python-dotenv
demo/.env.example Needs only TELNYX_API_KEY
demo/README.md Run instructions + mapping table showing how the web demo maps to the phone-call sample

How it maps to the phone-call sample

Phone call sample Web demo
Caller speaks into phone Type in Caller A/B input
Telnyx Call Control webhook /translate endpoint
STT via Telnyx Call Control Simulated (text input)
translate() → AI Inference Same — real API call
TTS played back to caller Translated text appears in panel

The translation engine is identical — same endpoint, same model, same system prompt. The demo just replaces telephony I/O with a web UI.

Languages supported

English, Spanish, French, German, Italian, Portuguese, Hindi, Arabic, Chinese, Japanese, Korean, Russian.

Run locally

cd ai-real-time-translation-bridge-python/demo
cp .env.example .env          # add TELNYX_API_KEY
pip install -r requirements.txt
python app.py                 # open http://127.0.0.1:5001

Get an API key at https://portal.telnyx.com/#/app/ai/keys.

Verification

Tested all three demo turns locally via Playwright:

  • EN → ES: "Hello, how are you today?" → "Hola, ¿cómo estás hoy?" ✓
  • ES → EN: "Estoy muy bien, gracias. ¿Y tú?" → "I'm very well, thank you. And you?" ✓
  • EN → JA: "I would like to book a hotel room for three nights" → "3泊のホテルの部屋を予約したいのですが。" ✓

Notes

  • The phone-call sample (app.py at the example root) is unchanged. This PR only adds a demo/ subdirectory.
  • Default model is zai-org/GLM-5.1-FP8 (Telnyx-hosted, multilingual). Configurable via AI_MODEL in .env.
  • The model is a reasoning model, so translations take ~2-3s per turn. This is expected — the reasoning step happens before the translation is returned.
  • .env is gitignored (confirmed: git check-ignore covers demo/.env).

Browser-based demo of the translation engine — same Telnyx AI Inference
API as the phone-call sample, but with a web UI instead of telephony.

- demo/app.py: Flask backend, /translate calls Telnyx AI Inference
  (model: zai-org/GLM-5.1-FP8, Telnyx-hosted, multilingual)
- demo/templates/index.html: dual chat panels + live pipeline
  visualization (Speech -> STT -> AI Translate -> TTS), vanilla JS
- demo/requirements.txt: Flask, requests, python-dotenv
- demo/.env.example: needs TELNYX_API_KEY only
- demo/README.md: run instructions + mapping to phone-call sample

Supports 12 languages. No phone numbers, no webhooks, no Call Control
setup needed — just an API key and a browser.
Comment thread ai-real-time-translation-bridge-python/demo/app.py Fixed
Comment thread ai-real-time-translation-bridge-python/demo/app.py Fixed
CodeQL flagged two 'Information exposure through an exception' alerts
on the error handlers in /translate. The raw exception message was
interpolated into the JSON response, which could leak stack traces or
internal details to the browser.

Fix: log the full error server-side via print(), return a generic
message to the client. Also update demo/README.md to reflect the
correct default model (zai-org/GLM-5.1-FP8, not moonshotai/Kimi-K2.6).
@harpreetTelnyx
harpreetTelnyx merged commit 1612718 into main Jul 30, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants