Upload 5 files

.gitignore

@@ -0,0 +1,7 @@
+venv/
+__pycache__/
+*.pyc
+*.pyo
+.DS_Store
+.env
+server.log

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.11-slim
+
+# Hugging Face Spaces best practice: run as a non-root user (uid 1000)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /home/user/app
+
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+COPY --chown=user . .
+
+# The app reads PORT from the environment; keep it aligned with app_port in README.
+ENV PORT=8765
+EXPOSE 8765
+
+CMD ["python3", "app.py"]

app.py

@@ -0,0 +1,1042 @@
+#!/usr/bin/env python3
+"""
+Voice AI Demo — Fully Configurable ASR / LLM / TTS
+===================================================
+A real-time voice AI demo where ALL three services (ASR, LLM, TTS) are
+freely configurable via OpenAI-compatible endpoints.
+
+Compatible with:
+  - Alibaba Cloud Model Studio (Bailian / DashScope)
+  - OpenAI
+  - Any OpenAI-compatible API
+
+Architecture:
+  User Speech → ASR (/audio/transcriptions) → LLM (chat) → TTS (/audio/speech) → Playback
+
+Languages are defined in config.json — add, remove, or edit freely.
+"""
+
+import json
+import os
+import sys
+import tempfile
+from pathlib import Path
+from typing import Optional
+
+import httpx
+import uvicorn
+from fastapi import FastAPI, HTTPException, UploadFile, File, Form
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, JSONResponse, Response, StreamingResponse
+from pydantic import BaseModel
+
+# ============================================================
+# Configuration
+# ============================================================
+
+CONFIG_PATH = Path(__file__).parent / "config.json"
+
+
+def _env(*names):
+    """Return the first non-empty environment variable among `names`."""
+    for n in names:
+        v = os.environ.get(n)
+        if v:
+            return v.strip()
+    return None
+
+
+def _strip_placeholder(value):
+    """Treat template placeholders like <your-api-key> as empty/unset."""
+    if isinstance(value, str) and "<" in value and ">" in value:
+        return ""
+    return value
+
+
+def apply_env_overrides(cfg):
+    """Let environment variables (e.g. Hugging Face Space Secrets) override
+    config.json. Env vars always win, so real keys never need to be committed.
+
+    Recognised vars:
+      ASR_BASE_URL / ASR_API_KEY / ASR_MODEL / ASR_MODE
+      LLM_BASE_URL / LLM_API_KEY / LLM_MODEL
+      TTS_BASE_URL / TTS_API_KEY / TTS_MODEL / TTS_VOICE
+      DASHSCOPE_API_KEY (or MAAS_API_KEY) — shared fallback key for all three
+    """
+    shared_key = _env("DASHSCOPE_API_KEY", "MAAS_API_KEY")
+
+    # First, scrub committed placeholders so the app doesn't treat them as real.
+    for svc in ("asr", "llm", "tts"):
+        s = cfg.setdefault(svc, {})
+        s["base_url"] = _strip_placeholder(s.get("base_url", ""))
+        s["api_key"] = _strip_placeholder(s.get("api_key", ""))
+
+    asr = cfg["asr"]
+    asr["base_url"] = _env("ASR_BASE_URL") or asr.get("base_url", "")
+    asr["api_key"] = _env("ASR_API_KEY") or shared_key or asr.get("api_key", "")
+    asr["model"] = _env("ASR_MODEL") or asr.get("model", "")
+    asr["mode"] = _env("ASR_MODE") or asr.get("mode", "api")
+
+    llm = cfg["llm"]
+    llm["base_url"] = _env("LLM_BASE_URL") or llm.get("base_url", "")
+    llm["api_key"] = _env("LLM_API_KEY") or shared_key or llm.get("api_key", "")
+    llm["model"] = _env("LLM_MODEL") or llm.get("model", "")
+
+    tts = cfg["tts"]
+    tts["base_url"] = _env("TTS_BASE_URL") or tts.get("base_url", "")
+    tts["api_key"] = _env("TTS_API_KEY") or shared_key or tts.get("api_key", "")
+    tts["model"] = _env("TTS_MODEL") or tts.get("model", "")
+    tts["voice"] = _env("TTS_VOICE") or tts.get("voice", "default")
+
+    return cfg
+
+
+def load_config():
+    with open(CONFIG_PATH, "r") as f:
+        cfg = json.load(f)
+    return apply_env_overrides(cfg)
+
+
+def save_config(cfg):
+    """Persist config to disk. On read-only / ephemeral filesystems (some Space
+    setups), persistence is skipped — the in-memory config still applies for the
+    session, and secrets supplied via env vars are re-applied on every reload."""
+    try:
+        with open(CONFIG_PATH, "w") as f:
+            json.dump(cfg, f, indent=2, ensure_ascii=False)
+    except OSError as e:
+        print(f"[config] Could not persist config.json (continuing in-memory): {e}")
+
+
+CONFIG = load_config()
+
+# ============================================================
+# App Setup
+# ============================================================
+
+app = FastAPI(title="Voice AI Demo")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ============================================================
+# API Models
+# ============================================================
+
+class ChatRequest(BaseModel):
+    messages: list[dict]
+    language: str = ""
+    stream: bool = True
+
+
+class TTSRequest(BaseModel):
+    text: str
+    language: str = ""
+    voice: Optional[str] = None
+
+
+class ConfigUpdate(BaseModel):
+    asr_mode: Optional[str] = None           # "api" or "local"
+    asr_base_url: Optional[str] = None
+    asr_api_key: Optional[str] = None
+    asr_model: Optional[str] = None
+    llm_base_url: Optional[str] = None
+    llm_api_key: Optional[str] = None
+    llm_model: Optional[str] = None
+    tts_base_url: Optional[str] = None
+    tts_api_key: Optional[str] = None
+    tts_model: Optional[str] = None
+    tts_voice: Optional[str] = None
+
+
+# ============================================================
+# Helper: resolve current language config
+# ============================================================
+
+def get_lang_config(lang_id: str) -> dict:
+    """Find language config by id. Falls back to first language."""
+    for lc in CONFIG.get("languages", []):
+        if lc["id"] == lang_id:
+            return lc
+    langs = CONFIG.get("languages", [])
+    return langs[0] if langs else {}
+
+
+# ============================================================
+# API Routes — ASR
+# ============================================================
+
+_local_whisper = None
+
+
+@app.post("/api/asr")
+async def transcribe_audio(audio: UploadFile = File(...), language: str = Form(default="auto")):
+    """
+    Transcribe audio. Two modes:
+      - mode=api  → POST to OpenAI-compatible /audio/transcriptions
+      - mode=local → use local Whisper model (requires faster-whisper or openai-whisper)
+    """
+    asr_cfg = CONFIG.get("asr", {})
+    mode = asr_cfg.get("mode", "api")
+
+    audio_bytes = await audio.read()
+
+    if mode == "api":
+        return await _asr_via_api(audio_bytes, audio.filename, language, asr_cfg)
+    else:
+        return await _asr_via_local(audio_bytes, audio.filename, language, asr_cfg)
+
+
+async def _asr_via_api(audio_bytes: bytes, filename: str, language: str, asr_cfg: dict):
+    """Call ASR API. Supports DashScope MaaS (qwen3-asr-flash) and OpenAI-compatible."""
+    import base64 as b64
+
+    base_url = asr_cfg.get("base_url", "").rstrip("/")
+    api_key = asr_cfg.get("api_key", "")
+    model = asr_cfg.get("model", "whisper-large-v3")
+
+    if not base_url or not api_key:
+        raise HTTPException(status_code=400, detail="ASR API not configured. Set ASR Base URL and API Key in Settings.")
+
+    headers = {"Authorization": f"Bearer {api_key}"}
+
+    try:
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            if "maas.aliyuncs.com" in base_url:
+                # === DashScope MaaS: qwen3-asr-flash via multimodal endpoint ===
+                if not model or model == "whisper-large-v3":
+                    model = "qwen3-asr-flash"
+
+                # Determine audio MIME type
+                suffix = os.path.splitext(filename or "audio.webm")[1] or ".webm"
+                mime_map = {".webm": "audio/webm", ".wav": "audio/wav", ".mp3": "audio/mpeg",
+                            ".ogg": "audio/ogg", ".m4a": "audio/mp4", ".flac": "audio/flac"}
+                mime = mime_map.get(suffix, "audio/webm")
+
+                # Encode audio as base64 data URI
+                audio_b64 = b64.b64encode(audio_bytes).decode()
+                data_uri = f"data:{mime};base64,{audio_b64}"
+
+                payload = {
+                    "model": model,
+                    "input": {
+                        "messages": [
+                            {
+                                "role": "user",
+                                "content": [{"audio": data_uri}]
+                            }
+                        ]
+                    }
+                }
+                if language and language != "auto":
+                    payload["parameters"] = {"asr_options": {"language": language}}
+
+                from urllib.parse import urlparse
+                parsed = urlparse(base_url)
+                asr_endpoint = f"{parsed.scheme}://{parsed.netloc}/api/v1/services/aigc/multimodal-generation/generation"
+
+                resp = await client.post(asr_endpoint, headers={**headers, "Content-Type": "application/json"}, json=payload)
+                if resp.status_code != 200:
+                    raise HTTPException(status_code=resp.status_code, detail=f"ASR API error: {resp.text[:500]}")
+                result = resp.json()
+                # Extract text from multimodal response
+                choices = result.get("output", {}).get("choices", [])
+                if choices:
+                    content = choices[0].get("message", {}).get("content", [])
+                    if isinstance(content, list):
+                        text = " ".join(c.get("text", "") for c in content if "text" in c)
+                    elif isinstance(content, str):
+                        text = content
+                    else:
+                        text = ""
+                else:
+                    text = result.get("output", {}).get("text", "")
+
+                return {
+                    "text": text.strip(),
+                    "language": language if language != "auto" else "auto",
+                    "confidence": 0.0,
+                }
+            else:
+                # === Standard OpenAI-compatible /audio/transcriptions ===
+                suffix = os.path.splitext(filename or "audio.webm")[1] or ".webm"
+                fname = f"audio{suffix}"
+                files = {"file": (fname, audio_bytes, "audio/webm")}
+                data = {"model": model}
+                if language and language != "auto":
+                    data["language"] = language
+
+                resp = await client.post(
+                    f"{base_url}/audio/transcriptions",
+                    headers=headers,
+                    files=files,
+                    data=data,
+                )
+                if resp.status_code != 200:
+                    raise HTTPException(status_code=resp.status_code, detail=f"ASR API error: {resp.text[:300]}")
+                result = resp.json()
+                return {
+                    "text": result.get("text", "").strip(),
+                    "language": result.get("language", language if language != "auto" else "unknown"),
+                    "confidence": 0.0,
+                }
+    except httpx.ConnectError:
+        raise HTTPException(status_code=502, detail=f"Cannot connect to ASR endpoint: {base_url}")
+    except Exception as e:
+        if isinstance(e, HTTPException):
+            raise
+        raise HTTPException(status_code=500, detail=f"ASR failed: {str(e)}")
+
+
+async def _asr_via_local(audio_bytes: bytes, filename: str, language: str, asr_cfg: dict):
+    """Use a local Whisper model."""
+    global _local_whisper
+    suffix = os.path.splitext(filename or "audio.webm")[1] or ".webm"
+    with tempfile.NamedTemporaryFile(suffix=suffix, delete=False) as tmp:
+        tmp.write(audio_bytes)
+        tmp_path = tmp.name
+
+    try:
+        if _local_whisper is None:
+            model_size = asr_cfg.get("model_size", "large-v3")
+            try:
+                from faster_whisper import WhisperModel
+                print(f"[ASR] Loading faster-whisper {model_size}...")
+                _local_whisper = WhisperModel(model_size, device="auto", compute_type="int8")
+            except ImportError:
+                import whisper
+                print(f"[ASR] Loading openai-whisper...")
+                _local_whisper = whisper.load_model("large")
+
+        lang_hint = None if language == "auto" else language
+
+        if hasattr(_local_whisper, 'transcribe'):
+            segments, info = _local_whisper.transcribe(tmp_path, language=lang_hint, beam_size=5)
+            text = " ".join(seg.text.strip() for seg in segments)
+            return {"text": text.strip(), "language": info.language, "confidence": getattr(info, 'language_probability', 0.0)}
+        else:
+            result = _local_whisper.transcribe(tmp_path, language=lang_hint)
+            return {"text": result["text"].strip(), "language": result.get("language", "unknown"), "confidence": 0.0}
+    finally:
+        os.unlink(tmp_path)
+
+
+# ============================================================
+# API Routes — LLM Chat (OpenAI-compatible)
+# ============================================================
+
+@app.post("/api/chat")
+async def chat(req: ChatRequest):
+    """Chat with any OpenAI-compatible LLM endpoint. Supports streaming."""
+    llm_cfg = CONFIG.get("llm", {})
+    base_url = llm_cfg.get("base_url", "").rstrip("/")
+    api_key = llm_cfg.get("api_key", "")
+    model = llm_cfg.get("model", "qwen-plus")
+
+    if not base_url or not api_key:
+        raise HTTPException(status_code=400, detail="LLM not configured. Set Base URL and API Key in Settings.")
+
+    # Build messages with system prompt from language config
+    lang_cfg = get_lang_config(req.language)
+    system_prompt = lang_cfg.get("system_prompt", "You are a helpful assistant. Keep responses concise (2-4 sentences) as they will be spoken aloud.")
+    messages = [{"role": "system", "content": system_prompt}] + req.messages
+
+    payload = {
+        "model": model,
+        "messages": messages,
+        "stream": req.stream,
+        "max_tokens": llm_cfg.get("max_tokens", 512),
+        "temperature": llm_cfg.get("temperature", 0.7),
+    }
+    headers = {
+        "Authorization": f"Bearer {api_key}",
+        "Content-Type": "application/json",
+    }
+
+    if req.stream:
+        async def generate():
+            async with httpx.AsyncClient(timeout=60.0) as client:
+                async with client.stream("POST", f"{base_url}/chat/completions", headers=headers, json=payload) as resp:
+                    if resp.status_code != 200:
+                        body = await resp.aread()
+                        yield f"data: {json.dumps({'error': body.decode()[:500]})}\n\n"
+                        return
+                    async for line in resp.aiter_lines():
+                        if line.startswith("data: "):
+                            yield line + "\n\n"
+        return StreamingResponse(generate(), media_type="text/event-stream")
+    else:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            resp = await client.post(f"{base_url}/chat/completions", headers=headers, json=payload)
+            if resp.status_code != 200:
+                raise HTTPException(status_code=resp.status_code, detail=resp.text[:500])
+            return resp.json()
+
+
+# ============================================================
+# API Routes — TTS (DashScope native + OpenAI-compatible)
+# ============================================================
+
+def _is_dashscope_maas(url: str) -> bool:
+    """Check if the URL points to a DashScope MaaS instance (native TTS format)."""
+    return "maas.aliyuncs.com" in url
+
+
+def _dashscope_tts_url(base_url: str) -> str:
+    """Derive the DashScope native TTS path from the MaaS base URL."""
+    from urllib.parse import urlparse
+    parsed = urlparse(base_url)
+    return f"{parsed.scheme}://{parsed.netloc}/api/v1/services/aigc/multimodal-generation/generation"
+
+
+# Map language id → language_type for DashScope TTS
+_LANG_TYPE_MAP = {
+    "english": "English", "en": "English",
+    "chinese": "Chinese", "zh": "Chinese",
+    "japanese": "Japanese", "ja": "Japanese",
+    "spanish": "Spanish", "es": "Spanish",
+    "yoruba": "Auto", "yo": "Auto",
+}
+
+
+@app.post("/api/tts")
+async def text_to_speech(req: TTSRequest):
+    """
+    Synthesize speech. Supports two formats:
+      - DashScope MaaS (auto-detected): native /multimodal-generation/generation
+      - Other endpoints: OpenAI-compatible POST /audio/speech
+
+    Model resolution order:
+      1. Language-specific tts_model from languages config
+      2. Global tts.model
+      3. Default: qwen3-tts-flash (DashScope) or tts-1 (OpenAI)
+    """
+    tts_cfg = CONFIG.get("tts", {})
+    base_url = tts_cfg.get("base_url", "").strip().rstrip("/")
+    api_key = tts_cfg.get("api_key", "").strip()
+
+    # Resolve model: per-language override or global
+    lang_cfg = get_lang_config(req.language)
+    model = lang_cfg.get("tts_model", "").strip() or tts_cfg.get("model", "").strip()
+
+    if not base_url or not api_key:
+        return JSONResponse(status_code=200, content={
+            "status": "tts_not_configured",
+            "message": "TTS not configured. Set TTS Base URL and API Key in Settings.",
+            "text": req.text,
+        })
+
+    voice = req.voice or tts_cfg.get("voice", "default")
+    speed = tts_cfg.get("speed", 1.0)
+
+    try:
+        if _is_dashscope_maas(base_url):
+            # === DashScope Native TTS Format ===
+            tts_endpoint = _dashscope_tts_url(base_url)
+            if not model:
+                model = "qwen3-tts-flash"
+            lang_type = _LANG_TYPE_MAP.get(req.language, "Auto")
+
+            payload = {
+                "model": model,
+                "input": {
+                    "text": req.text,
+                    "voice": voice if voice != "default" else "Cherry",
+                    "language_type": lang_type,
+                }
+            }
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                resp = await client.post(
+                    tts_endpoint,
+                    headers={
+                        "Authorization": f"Bearer {api_key}",
+                        "Content-Type": "application/json",
+                    },
+                    json=payload,
+                )
+                if resp.status_code != 200:
+                    return JSONResponse(status_code=200, content={
+                        "status": "tts_error",
+                        "message": f"TTS {resp.status_code}: {resp.text[:500]}",
+                        "text": req.text,
+                    })
+
+                data = resp.json()
+                audio_url = data.get("output", {}).get("audio", {}).get("url")
+                if not audio_url:
+                    # Check for base64 data (SSE streaming mode)
+                    audio_data = data.get("output", {}).get("audio", {}).get("data")
+                    if audio_data:
+                        import base64 as b64
+                        return Response(content=b64.b64decode(audio_data), media_type="audio/wav")
+                    return JSONResponse(status_code=200, content={
+                        "status": "tts_error",
+                        "message": "No audio in TTS response",
+                        "text": req.text,
+                    })
+
+                # Download audio from the temporary URL
+                audio_resp = await client.get(audio_url)
+                if audio_resp.status_code != 200:
+                    return JSONResponse(status_code=200, content={
+                        "status": "tts_error",
+                        "message": f"Failed to download audio: {audio_resp.status_code}",
+                        "text": req.text,
+                    })
+                ct = audio_resp.headers.get("content-type", "audio/wav")
+                return Response(content=audio_resp.content, media_type=ct)
+        else:
+            # === OpenAI-compatible TTS Format ===
+            if not model:
+                model = "tts-1"
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                resp = await client.post(
+                    f"{base_url}/audio/speech",
+                    headers={
+                        "Authorization": f"Bearer {api_key}",
+                        "Content-Type": "application/json",
+                    },
+                    json={
+                        "model": model,
+                        "input": req.text,
+                        "voice": voice,
+                        "speed": speed,
+                        "response_format": "mp3",
+                    },
+                )
+                if resp.status_code != 200:
+                    return JSONResponse(status_code=200, content={
+                        "status": "tts_error",
+                        "message": f"TTS {resp.status_code}: {resp.text[:500]}",
+                        "text": req.text,
+                    })
+                return Response(
+                    content=resp.content,
+                    media_type=resp.headers.get("content-type", "audio/mpeg"),
+                )
+
+    except httpx.ConnectError:
+        return JSONResponse(status_code=200, content={
+            "status": "tts_connection_error",
+            "message": f"Cannot connect to TTS: {base_url}",
+            "text": req.text,
+        })
+    except Exception as e:
+        return JSONResponse(status_code=200, content={
+            "status": "tts_error",
+            "message": f"TTS error: {str(e)}",
+            "text": req.text,
+        })
+
+
+# ============================================================
+# API Routes — Config & Languages
+# ============================================================
+
+@app.get("/api/languages")
+async def get_languages():
+    """Return configured languages for the UI switcher."""
+    return CONFIG.get("languages", [])
+
+
+@app.get("/api/config")
+async def get_config():
+    """Get current config (with keys masked)."""
+    cfg = load_config()
+
+    def mask(key_val):
+        if not key_val:
+            return "(not set)"
+        return "***" + key_val[-4:] if len(key_val) > 4 else "***"
+
+    return {
+        "asr": {
+            "mode": cfg.get("asr", {}).get("mode", "api"),
+            "base_url": cfg.get("asr", {}).get("base_url", ""),
+            "api_key_masked": mask(cfg.get("asr", {}).get("api_key", "")),
+            "model": cfg.get("asr", {}).get("model", ""),
+        },
+        "llm": {
+            "base_url": cfg.get("llm", {}).get("base_url", ""),
+            "api_key_masked": mask(cfg.get("llm", {}).get("api_key", "")),
+            "model": cfg.get("llm", {}).get("model", ""),
+        },
+        "tts": {
+            "base_url": cfg.get("tts", {}).get("base_url", ""),
+            "api_key_masked": mask(cfg.get("tts", {}).get("api_key", "")),
+            "model": cfg.get("tts", {}).get("model", ""),
+            "voice": cfg.get("tts", {}).get("voice", "default"),
+        },
+        "tts_configured": bool(cfg.get("tts", {}).get("base_url") and cfg.get("tts", {}).get("api_key")),
+        "asr_configured": bool(cfg.get("asr", {}).get("mode") == "local" or (cfg.get("asr", {}).get("base_url") and cfg.get("asr", {}).get("api_key"))),
+    }
+
+
+@app.post("/api/config")
+async def update_config(req: ConfigUpdate):
+    """Update config. Only updates provided fields."""
+    cfg = load_config()
+
+    # ASR
+    asr = cfg.setdefault("asr", {})
+    if req.asr_mode is not None:
+        asr["mode"] = req.asr_mode
+    if req.asr_base_url is not None:
+        asr["base_url"] = req.asr_base_url
+    if req.asr_api_key is not None:
+        asr["api_key"] = req.asr_api_key
+    if req.asr_model is not None:
+        asr["model"] = req.asr_model
+
+    # LLM
+    llm = cfg.setdefault("llm", {})
+    if req.llm_base_url is not None:
+        llm["base_url"] = req.llm_base_url
+    if req.llm_api_key is not None:
+        llm["api_key"] = req.llm_api_key
+    if req.llm_model is not None:
+        llm["model"] = req.llm_model
+
+    # TTS
+    tts = cfg.setdefault("tts", {})
+    if req.tts_base_url is not None:
+        tts["base_url"] = req.tts_base_url
+    if req.tts_api_key is not None:
+        tts["api_key"] = req.tts_api_key
+    if req.tts_model is not None:
+        tts["model"] = req.tts_model
+    if req.tts_voice is not None:
+        tts["voice"] = req.tts_voice
+
+    save_config(cfg)
+    global CONFIG
+    CONFIG = cfg
+    return {"status": "ok"}
+
+
+# ============================================================
+# Frontend — HTML
+# ============================================================
+
+HTML_PAGE = r"""<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Voice AI Demo</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--accent:#6C5CE7;--accent2:#00CEC9;--bg:#0a0a14;--surface:rgba(255,255,255,0.06);--text:#e8e8f0;--text2:#8888a8;--danger:#ff6b6b}
+body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;user-select:none}
+
+.app{display:flex;flex-direction:column;height:100vh;position:relative}
+
+.bg-gradient{position:fixed;inset:0;z-index:0;
+  background:radial-gradient(ellipse at 50% 30%,rgba(108,92,231,0.12) 0%,transparent 60%),
+             radial-gradient(ellipse at 80% 80%,rgba(0,206,201,0.06) 0%,transparent 40%)}
+
+/* === Top Bar === */
+.topbar{position:relative;z-index:10;display:flex;align-items:center;padding:16px 24px;gap:12px;flex-wrap:wrap}
+.lang-switch{margin-left:auto;display:flex;gap:4px;background:var(--surface);border-radius:20px;padding:3px}
+.lang-btn{padding:6px 16px;border-radius:17px;border:none;font-size:13px;font-weight:500;cursor:pointer;color:var(--text2);background:transparent;transition:all .25s}
+.lang-btn.active{background:var(--accent);color:#fff}
+.status-badges{display:flex;gap:6px;align-items:center}
+.badge{font-size:10px;padding:3px 10px;border-radius:12px;font-weight:600;letter-spacing:.3px}
+.badge.off{background:rgba(255,107,107,0.15);color:var(--danger)}
+.badge.on{background:rgba(0,206,201,0.15);color:var(--accent2)}
+.gear{width:36px;height:36px;border-radius:50%;border:none;background:var(--surface);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
+.gear:hover{background:rgba(255,255,255,0.12);color:var(--text)}
+.gear svg{width:18px;height:18px}
+
+/* === Center Stage === */
+.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:5}
+.orb-wrap{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center}
+.orb{width:120px;height:120px;border-radius:50%;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1)}
+.orb::before,.orb::after{content:'';position:absolute;inset:0;border-radius:50%;animation:orbPulse 3s ease-in-out infinite}
+.orb::before{inset:-20px;border:1.5px solid rgba(108,92,231,0.2);animation-delay:.5s}
+.orb::after{inset:-40px;border:1px solid rgba(108,92,231,0.1);animation-delay:1s}
+.orb-inner{position:absolute;inset:0;border-radius:50%;
+  background:radial-gradient(circle at 35% 35%,rgba(108,92,231,0.9),rgba(0,206,201,0.6));
+  box-shadow:0 0 60px rgba(108,92,231,0.4),0 0 120px rgba(108,92,231,0.15);
+  animation:orbFloat 4s ease-in-out infinite}
+.orb-wrap.listening .orb-inner{background:radial-gradient(circle at 35% 35%,#ff6b6b,#ee5a24);box-shadow:0 0 60px rgba(255,107,107,0.5),0 0 120px rgba(255,107,107,0.2)}
+.orb-wrap.listening .orb::before{border-color:rgba(255,107,107,0.3);animation:orbRipple 1.2s ease-out infinite}
+.orb-wrap.listening .orb::after{border-color:rgba(255,107,107,0.15);animation:orbRipple 1.2s ease-out infinite .4s}
+.orb-wrap.thinking .orb-inner{background:radial-gradient(circle at 35% 35%,#f9ca24,#f0932b);box-shadow:0 0 60px rgba(249,202,36,0.4);animation:orbSpin 2s linear infinite}
+.orb-wrap.thinking .orb::before{border-color:rgba(249,202,36,0.3);animation:orbSpin 3s linear infinite reverse}
+.orb-wrap.speaking .orb-inner{background:radial-gradient(circle at 35% 35%,var(--accent2),#00b894);box-shadow:0 0 60px rgba(0,206,201,0.5),0 0 120px rgba(0,206,201,0.2)}
+.orb-wrap.speaking .orb::before{border-color:rgba(0,206,201,0.3);animation:orbRipple 1.5s ease-out infinite}
+.state-label{margin-top:28px;font-size:13px;font-weight:500;color:var(--text2);letter-spacing:1px;text-transform:uppercase;transition:all .3s;min-height:20px;text-align:center}
+
+/* === Transcript === */
+.transcript{position:relative;z-index:5;width:100%;max-width:560px;margin:0 auto;padding:0 24px;flex-shrink:0}
+.msg-scroll{max-height:35vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent;padding-bottom:8px}
+.msg{padding:10px 16px;margin-bottom:8px;border-radius:12px;font-size:14px;line-height:1.6;animation:msgIn .4s ease}
+.msg.user{background:rgba(108,92,231,0.15);border-left:3px solid var(--accent);color:#c8c0f8}
+.msg.assistant{background:var(--surface);border-left:3px solid var(--accent2);color:#c0f0ee}
+.msg .role{font-size:11px;font-weight:600;opacity:.5;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
+
+/* === Bottom Bar === */
+.bottombar{position:relative;z-index:10;padding:16px 24px 24px;display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto;width:100%}
+.text-input{flex:1;background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:12px 20px;font-size:14px;color:var(--text);outline:none;font-family:inherit;transition:border-color .2s}
+.text-input::placeholder{color:var(--text2)}
+.text-input:focus{border-color:var(--accent)}
+.mic-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
+  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 20px rgba(108,92,231,0.3)}
+.mic-btn:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(108,92,231,0.4)}
+.mic-btn:active{transform:scale(0.95)}
+.mic-btn.recording{background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 4px 20px rgba(255,107,107,0.4);animation:micPulse 1.5s infinite}
+.mic-btn svg{width:24px;height:24px;fill:#fff}
+.mic-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
+.send-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--surface);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
+.send-btn:hover{background:rgba(255,255,255,0.1);color:var(--text)}
+.send-btn svg{width:20px;height:20px;fill:currentColor}
+
+/* === Settings Modal === */
+.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:100;display:none;align-items:center;justify-content:center}
+.modal-bg.open{display:flex}
+.modal{background:#1a1a2e;border:1px solid rgba(255,255,255,0.08);border-radius:16px;width:92%;max-width:480px;max-height:85vh;overflow-y:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
+.modal h2{font-size:18px;font-weight:600;margin-bottom:20px}
+.modal h3{font-size:12px;font-weight:600;margin:22px 0 10px;text-transform:uppercase;letter-spacing:.5px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.06)}
+.modal h3.asr{color:#fd79a8}
+.modal h3.llm{color:var(--accent)}
+.modal h3.tts{color:var(--accent2)}
+.field{margin-bottom:12px}
+.field label{display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:4px}
+.field input,.field select{width:100%;padding:9px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;font-size:13px;color:var(--text);outline:none;font-family:inherit}
+.field input:focus,.field select:focus{border-color:var(--accent)}
+.field input::placeholder{color:rgba(255,255,255,0.2)}
+.field select{appearance:none;cursor:pointer}
+.field select option{background:#1a1a2e;color:var(--text)}
+.field .hint{font-size:11px;color:var(--text2);margin-top:3px}
+.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}
+.btn{padding:10px 22px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit}
+.btn-p{background:var(--accent);color:#fff}
+.btn-p:hover{background:#5a4bd6}
+.btn-s{background:rgba(255,255,255,0.06);color:var(--text);border:1px solid rgba(255,255,255,0.1)}
+
+/* === Toast === */
+.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(30,30,50,0.95);border:1px solid rgba(255,255,255,0.1);color:var(--text);padding:10px 24px;border-radius:10px;font-size:13px;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none}
+.toast.show{opacity:1}
+
+@keyframes orbPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.7}}
+@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
+@keyframes orbRipple{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
+@keyframes orbSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
+@keyframes micPulse{0%,100%{box-shadow:0 4px 20px rgba(255,107,107,0.4)}50%{box-shadow:0 4px 32px rgba(255,107,107,0.6)}}
+@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+</style>
+</head>
+<body>
+<div class="bg-gradient"></div>
+<div class="app">
+
+  <!-- Top Bar -->
+  <div class="topbar">
+    <div class="lang-switch" id="langSwitch"><!-- filled dynamically --></div>
+    <div class="status-badges">
+      <span class="badge off" id="asrBadge">ASR</span>
+      <span class="badge off" id="llmBadge">LLM</span>
+      <span class="badge off" id="ttsBadge">TTS</span>
+    </div>
+    <button class="gear" onclick="openSettings()" title="Settings">
+      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14,12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4,2.81a.47.47 0 00-.48-.41h-3.84a.47.47 0 00-.47.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33a.49.49 0 00-.59.22L2.74,8.87a.49.49 0 00.12.61l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s.02.64.07.94l-2.03,1.58a.49.49 0 00-.12.61l1.92,3.32c.12.22.37.29.59.22l2.39-.96c.5.38,1.03.7,1.62.94l.36,2.54c.05.24.24.41.48.41h3.84c.24,0,.44-.17.47-.41l.36-2.54c.59-.24,1.13-.56,1.62-.94l2.39.96c.22.08.47,0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61L19.14,12.94zM12,15.6A3.6,3.6 0 1115.6,12,3.6,3.6 0 0112,15.6z"/></svg>
+    </button>
+  </div>
+
+  <!-- Center Stage -->
+  <div class="stage">
+    <div class="orb-wrap" id="orbWrap">
+      <div class="orb"><div class="orb-inner"></div></div>
+    </div>
+    <div class="state-label" id="stateLabel">Tap mic or type to begin</div>
+  </div>
+
+  <!-- Transcript -->
+  <div class="transcript">
+    <div class="msg-scroll" id="chatArea"></div>
+  </div>
+
+  <!-- Bottom Input -->
+  <div class="bottombar">
+    <input class="text-input" id="textInput" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendText()">
+    <button class="mic-btn" id="micBtn" onclick="toggleRecord()">
+      <svg viewBox="0 0 24 24"><path d="M12,14c1.66,0,3-1.34,3-3V5c0-1.66-1.34-3-3-3S9,3.34,9,5v6C9,12.66,10.34,14,12,14zM17.3,11c0,3-2.54,5.1-5.3,5.1S6.7,14,6.7,11H5c0,3.41,2.72,6.23,6,6.72V21h2v-3.28c3.28-.49,6-3.31,6-6.72H17.3z"/></svg>
+    </button>
+    <button class="send-btn" onclick="sendText()">
+      <svg viewBox="0 0 24 24"><path d="M2.01,21L23,12L2.01,3L2,10l15,2l-15,2z"/></svg>
+    </button>
+  </div>
+</div>
+
+<!-- Settings Modal -->
+<div class="modal-bg" id="modalBg">
+  <div class="modal">
+    <h2>Settings</h2>
+
+    <!-- ASR -->
+    <h3 class="asr">ASR — Speech Recognition</h3>
+    <div class="field">
+      <label>Mode</label>
+      <select id="cfgAsrMode">
+        <option value="api">Remote API (OpenAI-compatible)</option>
+        <option value="local">Local Whisper</option>
+      </select>
+      <div class="hint">API mode: DashScope MaaS auto-detected, or any OpenAI-compatible /audio/transcriptions. Local: Whisper on this machine.</div>
+    </div>
+    <div class="field"><label>Base URL</label><input id="cfgAsrUrl" placeholder="https://dashscope.aliyuncs.com/compatible-mode/v1"><div class="hint">OpenAI-compatible endpoint. Model Studio, OpenAI, Groq, etc.</div></div>
+    <div class="field"><label>API Key</label><input type="password" id="cfgAsrKey" placeholder="sk-..."></div>
+    <div class="field"><label>Model</label><input id="cfgAsrModel" placeholder="qwen3-asr-flash"></div>
+
+    <!-- LLM -->
+    <h3 class="llm">LLM — Language Model</h3>
+    <div class="field"><label>Base URL</label><input id="cfgLlmUrl" placeholder="https://dashscope.aliyuncs.com/compatible-mode/v1"><div class="hint">Any OpenAI-compatible chat endpoint.</div></div>
+    <div class="field"><label>API Key</label><input type="password" id="cfgLlmKey" placeholder="sk-..."></div>
+    <div class="field"><label>Model</label><input id="cfgLlmModel" placeholder="qwen-plus"></div>
+
+    <!-- TTS -->
+    <h3 class="tts">TTS — Text to Speech</h3>
+    <div class="field"><label>Base URL</label><input id="cfgTtsUrl" placeholder="https://dashscope.aliyuncs.com/compatible-mode/v1"><div class="hint">DashScope MaaS auto-detected (native format). Also supports OpenAI /audio/speech.</div></div>
+    <div class="field"><label>API Key</label><input type="password" id="cfgTtsKey" placeholder="sk-..."></div>
+    <div class="field"><label>Model</label><input id="cfgTtsModel" placeholder="qwen3-tts-flash"><div class="hint">Per-language override available in config.json → languages[].tts_model</div></div>
+    <div class="field"><label>Voice</label><input id="cfgTtsVoice" placeholder="default"></div>
+
+    <div class="modal-actions">
+      <button class="btn btn-s" onclick="closeSettings()">Cancel</button>
+      <button class="btn btn-p" onclick="saveSettings()">Save</button>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+let currentLang='',isRecording=false,mediaRecorder=null,audioChunks=[],chatHistory=[];
+let languages=[];
+const $=s=>document.querySelector(s),$$=s=>document.querySelectorAll(s);
+
+function setState(s,label){
+  const o=$('#orbWrap');o.className='orb-wrap'+(s?' '+s:'');
+  $('#stateLabel').textContent=label||'';
+}
+
+// === Dynamic Language Switcher ===
+async function initLanguages(){
+  try{
+    const r=await fetch('/api/languages');languages=await r.json();
+  }catch(e){languages=[{id:'default',label:'Default'}]}
+  if(!languages.length)languages=[{id:'default',label:'Default'}];
+  currentLang=languages[0].id;
+  renderLangSwitch();
+}
+
+function renderLangSwitch(){
+  const wrap=$('#langSwitch');wrap.innerHTML='';
+  languages.forEach(l=>{
+    const btn=document.createElement('button');
+    btn.className='lang-btn'+(l.id===currentLang?' active':'');
+    btn.dataset.lang=l.id;
+    btn.textContent=l.label;
+    btn.onclick=()=>switchLang(l.id);
+    wrap.appendChild(btn);
+  });
+}
+
+function switchLang(id){
+  currentLang=id;
+  $$('.lang-btn').forEach(b=>b.classList.toggle('active',b.dataset.lang===id));
+  chatHistory=[];$('#chatArea').innerHTML='';
+  setState('','Tap mic or type to begin');
+}
+
+// === Recording ===
+async function toggleRecord(){isRecording?stopRec():startRec()}
+async function startRec(){
+  try{
+    const s=await navigator.mediaDevices.getUserMedia({audio:true});
+    mediaRecorder=new MediaRecorder(s,{mimeType:'audio/webm;codecs=opus'});
+    audioChunks=[];
+    mediaRecorder.ondataavailable=e=>{if(e.data.size>0)audioChunks.push(e.data)};
+    mediaRecorder.onstop=async()=>{const b=new Blob(audioChunks,{type:'audio/webm'});s.getTracks().forEach(t=>t.stop());await processAudio(b)};
+    mediaRecorder.start();isRecording=true;
+    $('#micBtn').classList.add('recording');setState('listening','Listening...');
+  }catch(e){showToast('Microphone denied')}
+}
+function stopRec(){
+  if(mediaRecorder&&mediaRecorder.state!=='inactive')mediaRecorder.stop();
+  isRecording=false;$('#micBtn').classList.remove('recording');
+}
+
+// === ASR → Chat → TTS ===
+async function processAudio(blob){
+  $('#micBtn').disabled=true;
+  try{
+    setState('thinking','Transcribing...');
+    // Get asr_lang hint from current language config
+    const langCfg=languages.find(l=>l.id===currentLang)||{};
+    const asrLang=langCfg.asr_lang||'auto';
+    const fd=new FormData();fd.append('audio',blob,'rec.webm');fd.append('language',asrLang||'auto');
+    const r=await fetch('/api/asr',{method:'POST',body:fd});
+    if(!r.ok){const e=await r.json();throw new Error(e.detail||'ASR error')}
+    const d=await r.json();
+    if(!d.text){setState('','Could not detect speech');return}
+    addMsg('user',d.text);chatHistory.push({role:'user',content:d.text});
+    await streamChat();
+  }catch(e){setState('','');showToast(e.message)}
+  finally{$('#micBtn').disabled=false}
+}
+
+async function sendText(){
+  const t=$('#textInput').value.trim();if(!t)return;
+  $('#textInput').value='';addMsg('user',t);chatHistory.push({role:'user',content:t});
+  $('#micBtn').disabled=true;
+  try{await streamChat()}catch(e){showToast(e.message)}
+  finally{$('#micBtn').disabled=false}
+}
+
+async function streamChat(){
+  setState('thinking','Thinking...');
+  try{
+    const r=await fetch('/api/chat',{method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({messages:chatHistory,language:currentLang,stream:true})});
+    if(!r.ok){const e=await r.json();throw new Error(e.detail||'Chat failed')}
+    setState('speaking','');
+    const el=addMsg('assistant','');const span=el.querySelector('.mt');let full='';
+    const reader=r.body.getReader(),dec=new TextDecoder();let buf='';
+    while(true){
+      const{done,value}=await reader.read();if(done)break;
+      buf+=dec.decode(value,{stream:true});const lines=buf.split('\n');buf=lines.pop()||'';
+      for(const line of lines){
+        if(!line.startsWith('data: '))continue;const d=line.slice(6).trim();if(d==='[DONE]')continue;
+        try{const p=JSON.parse(d);if(p.error){showToast(p.error.slice(0,80));return}
+          full+=p.choices?.[0]?.delta?.content||'';span.textContent=full;scroll()}catch(e){}
+      }
+    }
+    chatHistory.push({role:'assistant',content:full});setState('','');
+    await autoTTS(full);
+  }catch(e){setState('','');throw e}
+}
+
+// === Auto TTS ===
+async function autoTTS(text){
+  setState('speaking','Synthesizing...');
+  try{
+    const r=await fetch('/api/tts',{method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({text,language:currentLang})});
+    const ct=r.headers.get('content-type')||'';
+    if(ct.startsWith('audio/')){
+      const blob=await r.blob();const url=URL.createObjectURL(blob);const a=new Audio(url);
+      setState('speaking','Speaking...');
+      a.onended=()=>{setState('','');URL.revokeObjectURL(url)};
+      a.onerror=()=>{setState('','');URL.revokeObjectURL(url)};
+      await a.play();
+    }else{
+      const d=await r.json();
+      if(d.status==='tts_not_configured'){setState('','TTS not configured — text only')}
+      else{setState('','');showToast(d.message?.slice(0,80)||'TTS error')}
+    }
+  }catch(e){setState('','');showToast('TTS: '+e.message)}
+}
+
+// === UI helpers ===
+function addMsg(role,text){
+  const c=$('#chatArea'),d=document.createElement('div');d.className='msg '+role;
+  d.innerHTML=`<div class="role">${role==='user'?'You':'AI'}</div><span class="mt">${esc(text)}</span>`;
+  c.appendChild(d);scroll();return d;
+}
+function scroll(){$('#chatArea').scrollTop=$('#chatArea').scrollHeight}
+function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
+function showToast(m){const t=$('#toast');t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),3500)}
+
+// === Settings ===
+async function openSettings(){
+  $('#modalBg').classList.add('open');
+  try{
+    const r=await fetch('/api/config');const c=await r.json();
+    $('#cfgAsrMode').value=c.asr.mode||'api';
+    $('#cfgAsrUrl').value=c.asr.base_url||'';
+    $('#cfgAsrKey').value='';$('#cfgAsrKey').placeholder=c.asr.api_key_masked||'';
+    $('#cfgAsrModel').value=c.asr.model||'';
+    $('#cfgLlmUrl').value=c.llm.base_url||'';
+    $('#cfgLlmKey').value='';$('#cfgLlmKey').placeholder=c.llm.api_key_masked||'';
+    $('#cfgLlmModel').value=c.llm.model||'';
+    $('#cfgTtsUrl').value=c.tts.base_url||'';
+    $('#cfgTtsKey').value='';$('#cfgTtsKey').placeholder=c.tts.api_key_masked||'';
+    $('#cfgTtsModel').value=c.tts.model||'';
+    $('#cfgTtsVoice').value=c.tts.voice||'default';
+    updateBadges(c);
+  }catch(e){}
+}
+function closeSettings(){$('#modalBg').classList.remove('open')}
+
+async function saveSettings(){
+  const b={},v=id=>$('#'+id).value.trim();
+  b.asr_mode=$('#cfgAsrMode').value;
+  b.asr_base_url=v('cfgAsrUrl');if(v('cfgAsrKey'))b.asr_api_key=v('cfgAsrKey');
+  b.asr_model=v('cfgAsrModel');
+  if(v('cfgLlmUrl'))b.llm_base_url=v('cfgLlmUrl');if(v('cfgLlmKey'))b.llm_api_key=v('cfgLlmKey');
+  if(v('cfgLlmModel'))b.llm_model=v('cfgLlmModel');
+  b.tts_base_url=v('cfgTtsUrl')||'';if(v('cfgTtsKey'))b.tts_api_key=v('cfgTtsKey');
+  b.tts_model=v('cfgTtsModel')||'';b.tts_voice=v('cfgTtsVoice')||'default';
+  try{
+    await fetch('/api/config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(b)});
+    showToast('Saved');closeSettings();
+    const r=await fetch('/api/config');updateBadges(await r.json());
+  }catch(e){showToast('Save failed')}
+}
+
+function updateBadges(c){
+  setBadge('#asrBadge',c.asr_configured,'ASR');
+  setBadge('#llmBadge',!!(c.llm&&c.llm.api_key_masked!=='(not set)'),'LLM');
+  setBadge('#ttsBadge',c.tts_configured,'TTS');
+}
+function setBadge(sel,on,label){const b=$(sel);b.className='badge '+(on?'on':'off');b.textContent=label}
+
+// === Init ===
+(async()=>{
+  await initLanguages();
+  try{const r=await fetch('/api/config');updateBadges(await r.json())}catch(e){}
+})();
+</script>
+</body>
+</html>"""
+
+
+@app.get("/", response_class=HTMLResponse)
+async def serve_frontend():
+    return HTML_PAGE
+
+
+# ============================================================
+# Entry Point
+# ============================================================
+
+if __name__ == "__main__":
+    cfg = CONFIG.get("app", {})
+    host = os.environ.get("HOST", cfg.get("host", "0.0.0.0"))
+    port = int(os.environ.get("PORT", cfg.get("port", 8765)))
+
+    print(f"""
+╔══════════════════════════════════════════════════════╗
+║  Voice AI Demo — Fully Configurable                  ║
+║  ────────────────────────────────────────────────── ║
+║  Server: http://{host}:{port:<5}                       ║
+║                                                      ║
+║  All services (ASR/LLM/TTS) are freely configurable  ║
+║  via OpenAI-compatible endpoints.                     ║
+║                                                      ║
+║  Works with:                                         ║
+║  * Alibaba Cloud Model Studio (Bailian / DashScope)   ║
+║  • OpenAI                                            ║
+║  • Any OpenAI-compatible API                         ║
+║                                                      ║
+║  Press Ctrl+C to stop                                ║
+╚══════════════════════════════════════════════════════╝
+    """)
+
+    uvicorn.run(app, host=host, port=port, log_level="info")

config.json

@@ -0,0 +1,42 @@
+{
+  "languages": [
+    {
+      "id": "english",
+      "label": "English",
+      "asr_lang": null,
+      "system_prompt": "You are a helpful and friendly AI assistant. Be warm, natural, and keep responses concise (2-4 sentences max) since they will be spoken aloud. Speak naturally as if having a real conversation.",
+      "tts_model": ""
+    },
+    {
+      "id": "yoruba",
+      "label": "Yoruba",
+      "asr_lang": "yo",
+      "system_prompt": "You are a helpful AI assistant that converses in Yoruba. Understand the user's Yoruba input, respond in Yoruba naturally. Keep responses concise (2-4 sentences max) since they will be spoken aloud. Be warm and culturally appropriate.",
+      "tts_model": ""
+    }
+  ],
+  "asr": {
+    "mode": "api",
+    "base_url": "",
+    "api_key": "sk-secret9999",
+    "model": "qwen3-asr-flash"
+  },
+  "llm": {
+    "base_url": "",
+    "api_key": "sk-secret9999",
+    "model": "qwen-plus",
+    "max_tokens": 512,
+    "temperature": 0.7
+  },
+  "tts": {
+    "base_url": "",
+    "api_key": "sk-secret9999",
+    "model": "qwen3-tts-flash",
+    "voice": "Serena",
+    "speed": 1.0
+  },
+  "app": {
+    "host": "0.0.0.0",
+    "port": 8765
+  }
+}

requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.115.0
+uvicorn==0.30.6
+httpx==0.27.2
+python-multipart==0.0.12
+pydantic>=2.0