Deploy EG Autonomous TTS Studio app

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.12-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PORT=7860
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY tts_engine.py ./tts_engine.py
+COPY app.py ./app.py
+COPY templates ./templates
+COPY static ./static
+
+RUN mkdir -p /app/generated
+
+EXPOSE 7860
+
+CMD ["sh", "-c", "uvicorn app:app --host 0.0.0.0 --port ${PORT:-7860}"]

README.md

@@ -1,12 +1,117 @@
 ---
-title: Eg Autonomous Tts Studio
-emoji: 👁
-colorFrom: yellow
-colorTo: yellow
-sdk: gradio
-sdk_version: 6.13.0
-app_file: app.py
+title: EG Autonomous TTS Studio
+emoji: "??"
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
 pinned: false
+license: mit
+short_description: Enterprise text-to-speech studio with Translate URL and Edge neural voices.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# EG Autonomous TTS Studio
+
+Production-ready Text-to-Speech Space powered by FastAPI, with a branded web interface and dual synthesis modes:
+
+- `translate`: fast Google Translate TTS URL generation + proxy playback
+- `edge`: high-quality MP3 generation via Microsoft Edge TTS voices
+
+## Features
+
+- Professional EG AUTONOMOUS branded UI
+- Instant audio playback in-browser
+- Language and provider switching
+- Voice catalog loading for Edge TTS
+- Long-text chunking for Translate TTS
+- JSON API output for direct app integration
+
+## Project Structure
+
+- `app.py`: FastAPI application entrypoint
+- `tts_engine.py`: Edge TTS engine helpers and CLI utilities
+- `templates/index.html`: UI template
+- `static/app.css`: branded styles
+- `static/app.js`: frontend logic and API integration
+- `Dockerfile`: Space runtime configuration
+- `requirements.txt`: Python dependencies
+
+## API Endpoints
+
+### Health
+
+`GET /health`
+
+### Bootstrap data
+
+`GET /api/bootstrap`
+
+Returns defaults, providers, and network information for the UI.
+
+### Translate URL
+
+`GET /api/translate-url?text=Hello&tl=en`
+
+Returns:
+- `directUrl`
+- `proxyUrl`
+- `segments`
+
+### Translate audio proxy
+
+`GET /api/translate-audio?text=Hello&tl=en`
+
+Returns playable audio bytes for embedding in `<audio>`.
+
+### Voice catalog (Edge)
+
+`GET /api/voices?filter=en-US`
+
+Returns available voice options filtered by locale or name.
+
+### Synthesize
+
+`POST /api/synthesize`
+
+Translate mode:
+
+```json
+{
+  "provider": "translate",
+  "text": "Hello from EG Autonomous",
+  "lang": "en",
+  "slow": false
+}
+```
+
+Edge mode:
+
+```json
+{
+  "provider": "edge",
+  "text": "Hello from EG Autonomous",
+  "voice": "en-US-AriaNeural",
+  "rate": "+0%",
+  "volume": "+0%",
+  "pitch": "+0Hz"
+}
+```
+
+## Local Development
+
+```bash
+pip install -r requirements.txt
+uvicorn app:app --host 0.0.0.0 --port 7860
+```
+
+Open:
+
+`http://127.0.0.1:7860`
+
+## Deployment Notes (Hugging Face Spaces)
+
+- Space SDK: `docker`
+- Port: `7860`
+- Build source: repository `Dockerfile`
+
+No runtime git clone is required. The repository itself is the deployment source.

app.py

@@ -0,0 +1,476 @@
+from __future__ import annotations
+
+from datetime import datetime, timezone
+from pathlib import Path
+import socket
+import time
+from urllib.parse import quote, urlencode
+from urllib.request import Request, urlopen
+from uuid import uuid4
+
+from fastapi import FastAPI, HTTPException, Query, Request as FastApiRequest
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, Response
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel, Field
+
+from tts_engine import DEFAULT_TEXT, DEFAULT_VOICE, get_voices, synthesize_to_file
+
+
+APP_DIR = Path(__file__).resolve().parent
+GENERATED_DIR = APP_DIR / "generated"
+STATIC_DIR = APP_DIR / "static"
+TEMPLATE_DIR = APP_DIR / "templates"
+INDEX_FILE = TEMPLATE_DIR / "index.html"
+
+GENERATED_DIR.mkdir(parents=True, exist_ok=True)
+
+MAX_TEXT_LENGTH = 3000
+TRANSLATE_MAX_CHARS = 180
+DEFAULT_TRANSLATE_LANG = "en"
+VOICE_CACHE_TTL_SECONDS = 900
+
+TRANSLATE_LANGUAGES = [
+    {"code": "en", "label": "English"},
+    {"code": "ar", "label": "Arabic"},
+    {"code": "vi", "label": "Vietnamese"},
+    {"code": "ja", "label": "Japanese"},
+    {"code": "ko", "label": "Korean"},
+    {"code": "zh-CN", "label": "Chinese (Simplified)"},
+    {"code": "fr", "label": "French"},
+]
+
+VOICE_CACHE: dict[str, dict[str, object]] = {}
+
+app = FastAPI(title="EG Autonomous TTS Studio", version="3.0.0")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=False,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+
+class SynthesizeRequest(BaseModel):
+    provider: str = Field(default="translate", pattern="^(translate|edge)$")
+    text: str = Field(..., min_length=1, max_length=MAX_TEXT_LENGTH)
+    voice: str = Field(default=DEFAULT_VOICE, min_length=1)
+    rate: str = Field(default="+0%")
+    volume: str = Field(default="+0%")
+    pitch: str = Field(default="+0Hz")
+    lang: str = Field(default=DEFAULT_TRANSLATE_LANG, min_length=2, max_length=12)
+    slow: bool = Field(default=False)
+
+
+@app.get("/", response_class=HTMLResponse)
+async def index() -> HTMLResponse:
+    return HTMLResponse(INDEX_FILE.read_text(encoding="utf-8"))
+
+
+@app.get("/health")
+async def health() -> dict[str, str]:
+    return {"status": "ok"}
+
+
+@app.get("/api/defaults")
+async def get_defaults() -> dict[str, object]:
+    return {
+        "text": DEFAULT_TEXT,
+        "provider": "translate",
+        "voice": DEFAULT_VOICE,
+        "rate": "+0%",
+        "volume": "+0%",
+        "pitch": "+0Hz",
+        "lang": DEFAULT_TRANSLATE_LANG,
+        "slow": False,
+        "translateLanguages": TRANSLATE_LANGUAGES,
+    }
+
+
+@app.get("/api/bootstrap")
+async def get_bootstrap_data(request: FastApiRequest) -> dict[str, object]:
+    return {
+        "defaults": await get_defaults(),
+        "providers": (await get_providers())["items"],
+        "network": (await get_network_info(request)),
+    }
+
+
+@app.get("/api/providers")
+async def get_providers() -> dict[str, object]:
+    return {
+        "items": [
+            {
+                "id": "translate",
+                "displayName": "Google Translate TTS URL",
+                "description": "Generate direct and proxied translate_tts URLs for instant playback.",
+            },
+            {
+                "id": "edge",
+                "displayName": "Edge TTS Engine",
+                "description": "Generate MP3 audio with edge-tts through the internal synthesis engine.",
+            },
+        ]
+    }
+
+
+@app.get("/api/network")
+async def get_network_info(request: FastApiRequest) -> dict[str, object]:
+    host_header = request.headers.get("host", "")
+    current_host = host_header.split(":", 1)[0] if host_header else request.url.hostname or "127.0.0.1"
+    current_port = request.url.port or 7860
+    lan_urls = build_lan_urls_(current_port)
+
+    return {
+        "ok": True,
+        "host": current_host,
+        "port": current_port,
+        "localUrl": f"http://127.0.0.1:{current_port}",
+        "currentUrl": str(request.base_url).rstrip("/"),
+        "lanUrls": lan_urls,
+        "lanEnabledHint": f"python -m uvicorn app:app --host 0.0.0.0 --port {current_port}",
+        "isLocalRequest": current_host in {"127.0.0.1", "localhost", "0.0.0.0"},
+    }
+
+
+@app.get("/api/voices")
+async def list_voice_catalog(filter: str | None = None) -> dict[str, object]:
+    voices = await get_cached_voices_(filter)
+    return {
+        "items": [
+            {
+                "name": voice["ShortName"],
+                "locale": voice["Locale"],
+                "gender": voice["Gender"],
+                "friendlyName": voice.get("FriendlyName", voice["ShortName"]),
+            }
+            for voice in voices
+        ]
+    }
+
+
+@app.get("/api/translate-url")
+async def get_translate_url(
+    request: FastApiRequest,
+    text: str | None = Query(default=None),
+    q: str | None = Query(default=None),
+    lang: str | None = Query(default=None),
+    tl: str | None = Query(default=None),
+    slow: bool = Query(default=False),
+) -> JSONResponse:
+    normalized_text = normalize_text_(text or q or "")
+    if not normalized_text:
+        raise HTTPException(status_code=400, detail="Text is required.")
+
+    resolved_lang = normalize_lang_(lang or tl or DEFAULT_TRANSLATE_LANG)
+    segments = build_translate_segments_(normalized_text, resolved_lang, slow, request)
+
+    return JSONResponse(
+        {
+            "ok": True,
+            "provider": "translate",
+            "text": normalized_text,
+            "lang": resolved_lang,
+            "slow": slow,
+            "directUrl": segments[0]["directUrl"],
+            "proxyUrl": segments[0]["proxyUrl"],
+            "segments": segments,
+            "chunkCount": len(segments),
+        }
+    )
+
+
+@app.get("/api/translate-audio")
+async def proxy_translate_audio(
+    text: str | None = Query(default=None),
+    q: str | None = Query(default=None),
+    lang: str | None = Query(default=None),
+    tl: str | None = Query(default=None),
+    slow: bool = Query(default=False),
+) -> Response:
+    normalized_text = normalize_text_(text or q or "")
+    if not normalized_text:
+        raise HTTPException(status_code=400, detail="Text is required.")
+    if len(normalized_text) > TRANSLATE_MAX_CHARS:
+        raise HTTPException(
+            status_code=400,
+            detail="Text is too long for a single translate_tts request. Use /api/synthesize for segmented playback.",
+        )
+
+    resolved_lang = normalize_lang_(lang or tl or DEFAULT_TRANSLATE_LANG)
+    direct_url = build_translate_tts_url_(normalized_text, resolved_lang, slow)
+    audio_bytes, content_type = fetch_remote_audio_(direct_url)
+
+    return Response(
+        content=audio_bytes,
+        media_type=content_type or "audio/mpeg",
+        headers={"Cache-Control": "public, max-age=3600"},
+    )
+
+
+@app.post("/api/synthesize")
+async def synthesize_audio(payload: SynthesizeRequest, request: FastApiRequest) -> dict[str, object]:
+    text = normalize_text_(payload.text)
+    if not text:
+        raise HTTPException(status_code=400, detail="Text is required.")
+
+    if payload.provider == "translate":
+        segments = build_translate_segments_(text, normalize_lang_(payload.lang), payload.slow, request)
+        return {
+            "ok": True,
+            "provider": "translate",
+            "text": text,
+            "lang": normalize_lang_(payload.lang),
+            "slow": payload.slow,
+            "audioUrl": segments[0]["proxyUrl"],
+            "directUrl": segments[0]["directUrl"],
+            "proxyUrl": segments[0]["proxyUrl"],
+            "segments": segments,
+            "chunkCount": len(segments),
+        }
+
+    file_name = datetime.now(timezone.utc).strftime("%Y%m%d%H%M%S") + "-" + uuid4().hex + ".mp3"
+    output_path = GENERATED_DIR / file_name
+
+    await synthesize_to_file(
+        text=text,
+        output=output_path,
+        voice=payload.voice.strip(),
+        rate=payload.rate.strip(),
+        volume=payload.volume.strip(),
+        pitch=payload.pitch.strip(),
+    )
+
+    audio_url = str(request.url_for("get_audio_file", file_name=file_name))
+    return {
+        "ok": True,
+        "provider": "edge",
+        "audioUrl": audio_url,
+        "downloadUrl": audio_url,
+        "fileName": file_name,
+        "contentType": "audio/mpeg",
+        "voice": payload.voice.strip(),
+        "rate": payload.rate.strip(),
+        "volume": payload.volume.strip(),
+        "pitch": payload.pitch.strip(),
+        "textLength": len(text),
+    }
+
+
+@app.get("/audio/{file_name}", name="get_audio_file")
+async def get_audio_file(file_name: str) -> FileResponse:
+    if "/" in file_name or "\\" in file_name:
+        raise HTTPException(status_code=400, detail="Invalid file name.")
+
+    file_path = GENERATED_DIR / file_name
+    if not file_path.is_file():
+        raise HTTPException(status_code=404, detail="Audio file not found.")
+
+    return FileResponse(file_path, media_type="audio/mpeg", content_disposition_type="inline")
+
+
+def build_translate_segments_(
+    text: str,
+    lang: str,
+    slow: bool,
+    request: FastApiRequest,
+) -> list[dict[str, object]]:
+    chunks = split_text_into_chunks_(text, TRANSLATE_MAX_CHARS)
+    segments: list[dict[str, object]] = []
+
+    for index, chunk in enumerate(chunks, start=1):
+        direct_url = build_translate_tts_url_(chunk, lang, slow)
+        proxy_url = str(
+            request.url_for("proxy_translate_audio")
+            .include_query_params(text=chunk, lang=lang, slow=str(slow).lower())
+        )
+        segments.append(
+            {
+                "index": index,
+                "text": chunk,
+                "directUrl": direct_url,
+                "proxyUrl": proxy_url,
+            }
+        )
+
+    return segments
+
+
+def build_translate_tts_url_(text: str, lang: str, slow: bool) -> str:
+    params = {
+        "ie": "UTF-8",
+        "q": text,
+        "tl": lang,
+        "client": "tw-ob",
+    }
+    if slow:
+        params["ttsspeed"] = "0.24"
+
+    return "https://translate.google.com/translate_tts?" + urlencode(params, quote_via=quote)
+
+
+def split_text_into_chunks_(text: str, max_length: int) -> list[str]:
+    normalized = normalize_text_(text)
+    if not normalized:
+        return []
+
+    paragraphs = normalized.split("\n")
+    chunks: list[str] = []
+
+    for paragraph in paragraphs:
+        sentences = split_sentences_(paragraph)
+        buffer = ""
+
+        for sentence in sentences:
+            part = sentence.strip()
+            if not part:
+                continue
+
+            if len(part) > max_length:
+                if buffer:
+                    chunks.append(buffer)
+                    buffer = ""
+                chunks.extend(split_long_part_(part, max_length))
+                continue
+
+            if not buffer:
+                buffer = part
+                continue
+
+            candidate = buffer + " " + part
+            if len(candidate) <= max_length:
+                buffer = candidate
+                continue
+
+            chunks.append(buffer)
+            buffer = part
+
+        if buffer:
+            chunks.append(buffer)
+
+    return chunks
+
+
+def split_sentences_(text: str) -> list[str]:
+    sentences: list[str] = []
+    current = []
+    punctuation = {".", "!", "?", ";", ":"}
+
+    for char in text:
+        current.append(char)
+        if char in punctuation:
+            sentences.append("".join(current).strip())
+            current = []
+
+    if current:
+        sentences.append("".join(current).strip())
+
+    return [sentence for sentence in sentences if sentence]
+
+
+def split_long_part_(text: str, max_length: int) -> list[str]:
+    words = [word for word in text.split() if word]
+    pieces: list[str] = []
+    buffer = ""
+
+    for word in words:
+        if len(word) > max_length:
+            if buffer:
+                pieces.append(buffer)
+                buffer = ""
+            for start in range(0, len(word), max_length):
+                pieces.append(word[start : start + max_length])
+            continue
+
+        candidate = word if not buffer else buffer + " " + word
+        if len(candidate) <= max_length:
+            buffer = candidate
+            continue
+
+        pieces.append(buffer)
+        buffer = word
+
+    if buffer:
+        pieces.append(buffer)
+
+    return pieces
+
+
+def fetch_remote_audio_(url: str) -> tuple[bytes, str]:
+    request = Request(
+        url,
+        headers={
+            "User-Agent": "Mozilla/5.0",
+            "Referer": "https://translate.google.com/",
+            "Accept": "audio/mpeg,audio/*;q=0.9,*/*;q=0.8",
+        },
+    )
+
+    try:
+        with urlopen(request, timeout=20) as response:
+            content_type = response.headers.get_content_type() or "audio/mpeg"
+            return response.read(), content_type
+    except Exception as error:
+        raise HTTPException(status_code=502, detail=f"Could not fetch translate_tts audio: {error}") from error
+
+
+def normalize_text_(value: str) -> str:
+    text = str(value or "").replace("\x00", "").replace("\r\n", "\n")
+    text = "\n".join(line.strip() for line in text.split("\n"))
+    text = text.strip()
+    return text[:MAX_TEXT_LENGTH]
+
+
+def normalize_lang_(value: str) -> str:
+    lang = str(value or DEFAULT_TRANSLATE_LANG).strip()
+    if not lang:
+        return DEFAULT_TRANSLATE_LANG
+    return lang[:12]
+
+
+async def get_cached_voices_(keyword: str | None) -> list[dict[str, object]]:
+    cache_key = (keyword or "").strip().lower()
+    cached = VOICE_CACHE.get(cache_key)
+    now = time.time()
+
+    if cached and now - float(cached["timestamp"]) < VOICE_CACHE_TTL_SECONDS:
+        return cached["voices"]  # type: ignore[return-value]
+
+    voices = await get_voices(keyword)
+    VOICE_CACHE[cache_key] = {
+        "timestamp": now,
+        "voices": voices,
+    }
+    return voices
+
+
+def build_lan_urls_(port: int) -> list[str]:
+    urls: list[str] = []
+    candidates = {"127.0.0.1"}
+
+    try:
+        hostname = socket.gethostname()
+        for result in socket.getaddrinfo(hostname, None, family=socket.AF_INET):
+            ip = result[4][0]
+            if ip:
+                candidates.add(ip)
+    except Exception:
+        pass
+
+    try:
+        udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+        udp_socket.connect(("8.8.8.8", 80))
+        candidates.add(udp_socket.getsockname()[0])
+        udp_socket.close()
+    except Exception:
+        pass
+
+    for ip in sorted(candidates):
+        if ip.startswith("127."):
+            continue
+        urls.append(f"http://{ip}:{port}")
+
+    return urls
+

requirements.txt

@@ -0,0 +1,3 @@
+edge-tts>=6.1,<8
+fastapi>=0.111,<1
+uvicorn[standard]>=0.30,<1

static/app.css

@@ -0,0 +1,446 @@
+:root {
+  --bg-main: #020a1e;
+  --bg-secondary: #041634;
+  --panel: rgba(7, 26, 58, 0.72);
+  --panel-strong: rgba(10, 34, 73, 0.85);
+  --line: rgba(106, 183, 255, 0.24);
+  --text: #e9f4ff;
+  --muted: #9ebbd8;
+  --accent: #23c3ff;
+  --accent-strong: #005eff;
+  --success: #26e2c2;
+  --radius: 22px;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  color: var(--text);
+  font-family: "Manrope", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(circle at 20% -10%, rgba(35, 195, 255, 0.25), transparent 38%),
+    radial-gradient(circle at 95% 4%, rgba(0, 94, 255, 0.28), transparent 34%),
+    linear-gradient(150deg, var(--bg-main) 0%, var(--bg-secondary) 100%);
+  position: relative;
+  overflow-x: hidden;
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+body::before {
+  background:
+    linear-gradient(120deg, transparent 0%, rgba(35, 195, 255, 0.08) 35%, transparent 70%),
+    repeating-linear-gradient(
+      0deg,
+      rgba(90, 152, 211, 0.05) 0,
+      rgba(90, 152, 211, 0.05) 1px,
+      transparent 1px,
+      transparent 28px
+    );
+}
+
+body::after {
+  background: radial-gradient(circle at 50% 100%, rgba(80, 172, 255, 0.18), transparent 45%);
+}
+
+.shell {
+  width: min(1200px, calc(100% - 30px));
+  margin: 0 auto;
+  padding: 28px 0 56px;
+  position: relative;
+  z-index: 1;
+}
+
+.hero {
+  margin-bottom: 24px;
+}
+
+.brand-banner {
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+  border: 1px solid rgba(126, 202, 255, 0.32);
+  box-shadow: var(--shadow);
+  min-height: 240px;
+}
+
+.brand-art {
+  width: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.brand-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(to bottom, rgba(1, 10, 28, 0.08), rgba(1, 10, 28, 0.44)),
+    radial-gradient(circle at 50% 34%, rgba(216, 243, 255, 0.18), transparent 40%);
+}
+
+.hero-copy {
+  margin-top: 18px;
+  max-width: 760px;
+}
+
+.eyebrow,
+.panel-kicker {
+  margin: 0 0 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: #9fd8ff;
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.hero h1,
+.panel-head h2,
+.lower-panel h3 {
+  margin: 0;
+  font-family: "Orbitron", "Manrope", sans-serif;
+}
+
+.hero h1 {
+  font-size: clamp(2rem, 5.2vw, 3.6rem);
+  line-height: 1.07;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: 0 0 20px rgba(35, 195, 255, 0.4);
+}
+
+.intro {
+  margin: 14px 0 0;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.76;
+}
+
+code {
+  padding: 0.14rem 0.42rem;
+  border-radius: 7px;
+  background: rgba(116, 180, 255, 0.16);
+  border: 1px solid rgba(116, 180, 255, 0.2);
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.panel {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  padding: 22px;
+  backdrop-filter: blur(9px);
+}
+
+.lower-panel {
+  margin-top: 20px;
+  background: var(--panel-strong);
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.panel-head h2 {
+  font-size: 1.2rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.status-pill,
+.summary-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  font-size: 0.84rem;
+  font-weight: 700;
+}
+
+.status-pill {
+  color: #002539;
+  background: linear-gradient(120deg, var(--success), #8dfff1);
+}
+
+.summary-badge {
+  color: #d0e9ff;
+  background: rgba(35, 195, 255, 0.18);
+  border: 1px solid rgba(142, 215, 255, 0.3);
+}
+
+.field {
+  display: grid;
+  gap: 9px;
+  margin-bottom: 16px;
+}
+
+.field span {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  color: #a9d9ff;
+}
+
+.field-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.field-grid-meta {
+  grid-template-columns: 1.1fr 1fr 1fr;
+}
+
+.field-grid-voices {
+  grid-template-columns: 0.84fr 1.16fr;
+}
+
+.field-grid-controls {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.checkbox-field {
+  align-content: end;
+  grid-auto-flow: column;
+  justify-content: start;
+  align-items: center;
+  gap: 9px;
+}
+
+.checkbox-field input {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.checkbox-field span {
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 0.94rem;
+  font-weight: 600;
+  color: #d7edff;
+}
+
+textarea,
+select,
+input[type="text"] {
+  width: 100%;
+  border: 1px solid rgba(128, 195, 255, 0.36);
+  border-radius: 14px;
+  background: rgba(4, 20, 48, 0.74);
+  color: var(--text);
+  padding: 12px 13px;
+  font: inherit;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+textarea::placeholder,
+input[type="text"]::placeholder {
+  color: #82a8cf;
+}
+
+textarea:focus,
+select:focus,
+input[type="text"]:focus {
+  outline: none;
+  border-color: rgba(93, 200, 255, 0.86);
+  box-shadow: 0 0 0 3px rgba(35, 195, 255, 0.2);
+  background: rgba(5, 27, 62, 0.92);
+}
+
+textarea {
+  min-height: 112px;
+  resize: vertical;
+  line-height: 1.62;
+}
+
+button,
+.button-link {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
+}
+
+button:hover,
+.button-link:hover {
+  transform: translateY(-1px);
+}
+
+button:active,
+.button-link:active {
+  transform: translateY(0);
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.action-row button,
+.button-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 20px;
+  border-radius: 999px;
+  font: inherit;
+  font-weight: 800;
+  text-decoration: none;
+  color: #041227;
+  background: linear-gradient(130deg, #97ecff, #1ac8ff 45%, #0f7eff);
+  box-shadow: 0 12px 24px rgba(20, 152, 255, 0.35);
+}
+
+.action-row button.secondary {
+  color: #cce7ff;
+  background: rgba(58, 129, 194, 0.22);
+  border: 1px solid rgba(137, 205, 255, 0.26);
+  box-shadow: none;
+}
+
+.compact-actions {
+  margin-bottom: 16px;
+}
+
+.microcopy,
+.message-box,
+.warnings-box,
+.guide-summary,
+.guide-copy,
+.guide-note {
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.microcopy {
+  margin: 16px 0 0;
+}
+
+.message-box {
+  min-height: 24px;
+  margin: 0 0 14px;
+}
+
+.warnings-box .warning {
+  padding: 10px 13px;
+  border-radius: 14px;
+  background: rgba(9, 31, 67, 0.84);
+  border: 1px solid rgba(126, 200, 255, 0.3);
+}
+
+.warnings-box .warning + .warning {
+  margin-top: 10px;
+}
+
+#player {
+  width: 100%;
+  margin-top: 6px;
+}
+
+.player-actions {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+
+.lower-grid {
+  display: grid;
+  grid-template-columns: 0.95fr 1.05fr;
+  gap: 20px;
+}
+
+.guide-card {
+  padding: 16px;
+  border-radius: 18px;
+  background: rgba(10, 35, 75, 0.74);
+  border: 1px solid rgba(128, 199, 255, 0.26);
+}
+
+.guide-card + .guide-card,
+.guide-card + h3 {
+  margin-top: 14px;
+}
+
+.guide-label {
+  margin: 12px 0 8px;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #95d6ff;
+  font-weight: 700;
+}
+
+.guide-steps,
+.guide-response {
+  margin: 8px 0 0;
+  padding-left: 20px;
+}
+
+.guide-steps li,
+.guide-response li {
+  line-height: 1.6;
+  margin-bottom: 8px;
+}
+
+.provider-panel.hidden,
+.hidden {
+  display: none;
+}
+
+@media (max-width: 980px) {
+  .workspace,
+  .lower-grid,
+  .field-grid-meta,
+  .field-grid-voices,
+  .field-grid-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .shell {
+    width: min(100% - 14px, 1200px);
+    padding-top: 14px;
+  }
+
+  .brand-banner {
+    min-height: 170px;
+  }
+
+  .brand-art {
+    min-height: 170px;
+    object-position: center;
+  }
+
+  .hero h1 {
+    font-size: clamp(1.7rem, 8vw, 2.5rem);
+  }
+}

static/app.js

@@ -0,0 +1,510 @@
+(function () {
+  const state = {
+    defaults: null,
+    providers: [],
+    voices: [],
+    voicesLoaded: false,
+    activeVoiceFilter: "",
+    payload: null,
+    queueIndex: 0,
+  };
+
+  const elements = {
+    form: document.getElementById("tts-form"),
+    providerSelect: document.getElementById("provider-select"),
+    langSelect: document.getElementById("lang-select"),
+    slowInput: document.getElementById("slow-input"),
+    textInput: document.getElementById("text-input"),
+    edgeControls: document.getElementById("edge-controls"),
+    voiceFilterInput: document.getElementById("voice-filter-input"),
+    voiceSelect: document.getElementById("voice-select"),
+    loadVoicesButton: document.getElementById("load-voices-button"),
+    rateInput: document.getElementById("rate-input"),
+    volumeInput: document.getElementById("volume-input"),
+    pitchInput: document.getElementById("pitch-input"),
+    generateButton: document.getElementById("generate-button"),
+    sampleButton: document.getElementById("sample-button"),
+    statusPill: document.getElementById("status-pill"),
+    summaryBadge: document.getElementById("summary-badge"),
+    messageBox: document.getElementById("message-box"),
+    player: document.getElementById("player"),
+    openLink: document.getElementById("open-link"),
+    warningsBox: document.getElementById("warnings-box"),
+    directUrl: document.getElementById("direct-url"),
+    proxyUrl: document.getElementById("proxy-url"),
+    jsonOutput: document.getElementById("json-output"),
+    baseHtmlSnippet: document.getElementById("base-html-snippet"),
+    exampleGetUrl: document.getElementById("example-get-url"),
+    exampleAudioUrl: document.getElementById("example-audio-url"),
+    exampleVoicesUrl: document.getElementById("example-voices-url"),
+    audioTagSnippet: document.getElementById("audio-tag-snippet"),
+    fetchGetSnippet: document.getElementById("fetch-get-snippet"),
+    fetchPostSnippet: document.getElementById("fetch-post-snippet"),
+    translateResponseSnippet: document.getElementById("translate-response-snippet"),
+    edgeResponseSnippet: document.getElementById("edge-response-snippet"),
+    processSummary: document.getElementById("process-summary"),
+  };
+
+  bindEvents();
+  bootstrap();
+
+  function bindEvents() {
+    elements.form.addEventListener("submit", handleSubmit);
+    elements.providerSelect.addEventListener("change", syncProviderMode);
+    elements.loadVoicesButton.addEventListener("click", loadVoices);
+    elements.textInput.addEventListener("input", updateExamples);
+    elements.langSelect.addEventListener("change", updateExamples);
+    elements.providerSelect.addEventListener("change", updateExamples);
+    elements.slowInput.addEventListener("change", updateExamples);
+    elements.voiceSelect.addEventListener("change", updateExamples);
+    elements.rateInput.addEventListener("input", updateExamples);
+    elements.volumeInput.addEventListener("input", updateExamples);
+    elements.pitchInput.addEventListener("input", updateExamples);
+    elements.voiceFilterInput.addEventListener("input", function () {
+      const nextFilter = elements.voiceFilterInput.value.trim() || "en-US";
+      if (nextFilter !== state.activeVoiceFilter) {
+        state.voicesLoaded = false;
+        state.voices = [];
+        renderVoices();
+      }
+    });
+
+    elements.sampleButton.addEventListener("click", function () {
+      if (state.defaults) {
+        elements.textInput.value = state.defaults.text || "";
+      }
+      elements.textInput.focus();
+      updateExamples();
+    });
+
+    elements.player.addEventListener("ended", handlePlayerEnded);
+
+    document.querySelectorAll("[data-copy-target]").forEach(function (button) {
+      button.addEventListener("click", function () {
+        copyField(button.getAttribute("data-copy-target"));
+      });
+    });
+  }
+
+  async function bootstrap() {
+    setStatus("Loading");
+    setMessage("Loading configuration...");
+
+    try {
+      const bootstrapData = await fetchJson("/api/bootstrap");
+      state.defaults = bootstrapData.defaults || {};
+      state.providers = bootstrapData.providers || [];
+      renderLanguages();
+      applyDefaults();
+      setStatus("Ready");
+      setMessage("Enter text and click Generate audio.");
+    } catch (error) {
+      setStatus("Error");
+      setMessage(error.message || "Could not load configuration.");
+    }
+  }
+
+  function renderProviders() {
+    elements.providerSelect.innerHTML = "";
+    state.providers.forEach(function (provider) {
+      const option = document.createElement("option");
+      option.value = provider.id;
+      option.textContent = provider.displayName;
+      elements.providerSelect.appendChild(option);
+    });
+  }
+
+  function renderLanguages() {
+    elements.langSelect.innerHTML = "";
+    (state.defaults.translateLanguages || []).forEach(function (language) {
+      const option = document.createElement("option");
+      option.value = language.code;
+      option.textContent = language.label + " (" + language.code + ")";
+      elements.langSelect.appendChild(option);
+    });
+  }
+
+  function applyDefaults() {
+    renderProviders();
+    elements.providerSelect.value = state.defaults.provider || "translate";
+    elements.langSelect.value = state.defaults.lang || "en";
+    elements.textInput.value = state.defaults.text || "";
+    elements.voiceFilterInput.value = "en-US";
+    elements.rateInput.value = state.defaults.rate || "+0%";
+    elements.volumeInput.value = state.defaults.volume || "+0%";
+    elements.pitchInput.value = state.defaults.pitch || "+0Hz";
+    renderVoices();
+    syncProviderMode();
+    updateExamples();
+  }
+
+  async function loadVoices() {
+    if (state.voicesLoaded && state.activeVoiceFilter === (elements.voiceFilterInput.value.trim() || "en-US")) {
+      renderVoices();
+      return;
+    }
+
+    setMessage("Loading available voices...");
+    elements.loadVoicesButton.disabled = true;
+
+    try {
+      const filter = elements.voiceFilterInput.value.trim() || "en-US";
+      const response = await fetchJson("/api/voices?filter=" + encodeURIComponent(filter));
+      state.voices = response.items || [];
+      state.voicesLoaded = true;
+      state.activeVoiceFilter = filter;
+      renderVoices();
+      setMessage("Loaded " + state.voices.length + " voices.");
+    } catch (error) {
+      state.voices = [];
+      state.voicesLoaded = false;
+      renderVoices();
+      setMessage(error.message || "Could not load voices.");
+    } finally {
+      elements.loadVoicesButton.disabled = false;
+    }
+  }
+
+  function renderVoices() {
+    elements.voiceSelect.innerHTML = "";
+    if (!state.voices.length) {
+      const option = document.createElement("option");
+      option.value = state.defaults ? state.defaults.voice : "en-US-AriaNeural";
+      option.textContent = state.voicesLoaded ? option.value : "Load voices to choose";
+      elements.voiceSelect.appendChild(option);
+      return;
+    }
+
+    state.voices.forEach(function (voice, index) {
+      const option = document.createElement("option");
+      option.value = voice.name;
+      option.textContent = voice.name + " (" + voice.locale + ", " + voice.gender + ")";
+      if (index === 0 || voice.name === (state.defaults && state.defaults.voice)) {
+        option.selected = true;
+      }
+      elements.voiceSelect.appendChild(option);
+    });
+  }
+
+  function syncProviderMode() {
+    const provider = elements.providerSelect.value;
+    elements.edgeControls.classList.toggle("hidden", provider !== "edge");
+    updateExamples();
+    elements.generateButton.disabled = !provider;
+
+    if (provider === "edge" && !state.voicesLoaded) {
+      setMessage("Edge provider selected. Click Load voices when you are ready.");
+    }
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const payload = collectPayload();
+
+    setBusy(true);
+    setStatus("Loading");
+    setMessage("Generating audio...");
+
+    try {
+      const response = await fetch("/api/synthesize", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(body.detail || "Could not generate audio.");
+      }
+
+      state.payload = body;
+      state.queueIndex = 0;
+      renderPayload();
+      setStatus("Ready");
+      setMessage(body.provider === "translate" ? "Translate URL generated successfully." : "Edge MP3 generated successfully.");
+      autoplayFirst();
+    } catch (error) {
+      setStatus("Error");
+      setMessage(error.message || "Could not generate audio.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function collectPayload() {
+    return {
+      provider: elements.providerSelect.value,
+      text: elements.textInput.value.trim(),
+      lang: elements.langSelect.value,
+      slow: elements.slowInput.checked,
+      voice: elements.voiceSelect.value,
+      rate: elements.rateInput.value.trim() || "+0%",
+      volume: elements.volumeInput.value.trim() || "+0%",
+      pitch: elements.pitchInput.value.trim() || "+0Hz",
+    };
+  }
+
+  function renderPayload() {
+    const payload = state.payload || {};
+    const segments = payload.segments || [];
+    const firstSegment = segments[0] || null;
+
+    const directUrl = payload.directUrl || (firstSegment ? firstSegment.directUrl : "");
+    const proxyUrl = payload.proxyUrl || payload.audioUrl || (firstSegment ? firstSegment.proxyUrl : "");
+
+    fillReadonly(elements.directUrl, directUrl);
+    fillReadonly(elements.proxyUrl, proxyUrl);
+    fillReadonly(elements.jsonOutput, JSON.stringify(payload, null, 2));
+
+    if (payload.provider === "translate") {
+      elements.player.src = proxyUrl || directUrl || "";
+      elements.summaryBadge.textContent = segments.length + (segments.length === 1 ? " segment" : " segments");
+      toggleOpenLink(proxyUrl || directUrl);
+      renderWarnings(
+        segments.length > 1
+          ? ["Long text was split into " + segments.length + " Translate segments."]
+          : ["Direct URL and Proxy URL are ready for playback."]
+      );
+    } else {
+      elements.player.src = payload.audioUrl || "";
+      elements.summaryBadge.textContent = "Edge MP3";
+      toggleOpenLink(payload.audioUrl || "");
+      renderWarnings(["MP3 was generated with edge-tts via the internal TTS engine."]);
+    }
+
+    if (elements.player.src) {
+      elements.player.load();
+    }
+
+    updateExamples();
+  }
+
+  function renderWarnings(items) {
+    elements.warningsBox.innerHTML = "";
+    (items || []).forEach(function (item) {
+      const warning = document.createElement("div");
+      warning.className = "warning";
+      warning.textContent = item;
+      elements.warningsBox.appendChild(warning);
+    });
+  }
+
+  function autoplayFirst() {
+    if (!elements.player.src) {
+      return;
+    }
+
+    const promise = elements.player.play();
+    if (promise && typeof promise.catch === "function") {
+      promise.catch(function () {
+        setMessage("Audio is ready. If autoplay is blocked, click Play manually.");
+      });
+    }
+  }
+
+  function handlePlayerEnded() {
+    const payload = state.payload || {};
+    const segments = payload.segments || [];
+
+    if (payload.provider !== "translate" || segments.length <= 1) {
+      return;
+    }
+
+    state.queueIndex += 1;
+    if (state.queueIndex >= segments.length) {
+      return;
+    }
+
+    const next = segments[state.queueIndex];
+    elements.player.src = next.proxyUrl || next.directUrl;
+    elements.player.load();
+    autoplayFirst();
+  }
+
+  function updateExamples() {
+    const payload = collectPayload();
+    const sampleText = payload.text || "Hello from EG Autonomous Studio";
+    const encodedText = encodeURIComponent(sampleText);
+    const encodedLang = encodeURIComponent(payload.lang || "en");
+    const encodedFilter = encodeURIComponent(elements.voiceFilterInput.value.trim() || "en-US");
+    const translateUrl = window.location.origin + "/api/translate-url?text=" + encodedText + "&tl=" + encodedLang;
+    const audioUrl = window.location.origin + "/api/translate-audio?text=" + encodedText + "&tl=" + encodedLang;
+    const voicesUrl = window.location.origin + "/api/voices?filter=" + encodedFilter;
+    const basePlayerId = "ttsPlayer";
+    const selectedVoice = elements.voiceSelect.value || "en-US-AriaNeural";
+
+    fillReadonly(elements.baseHtmlSnippet, '<audio id="' + basePlayerId + '" controls preload="none"></audio>');
+
+    fillReadonly(elements.exampleGetUrl, translateUrl);
+    fillReadonly(elements.exampleAudioUrl, audioUrl);
+    fillReadonly(elements.exampleVoicesUrl, voicesUrl);
+    fillReadonly(
+      elements.audioTagSnippet,
+      '<audio id="' + basePlayerId + '" controls preload="none" src="' + audioUrl + '"></audio>\n' +
+      "<script>\n" +
+      "  const audioPlayer = document.getElementById(\"" + basePlayerId + "\");\n" +
+      "  audioPlayer.play().catch(() => {\n" +
+      "    console.log(\"Autoplay is blocked by the browser; user interaction is required.\");\n" +
+      "  });\n" +
+      "<\\/script>"
+    );
+    fillReadonly(
+      elements.fetchGetSnippet,
+      "const audioPlayer = document.getElementById(\"" + basePlayerId + "\");\n\n" +
+      "// 1) Request playable URLs from the API\n" +
+      "const response = await fetch(\"" + translateUrl + "\");\n" +
+      "const data = await response.json();\n\n" +
+      "// 2) Prefer proxyUrl for stable inline playback\n" +
+      "audioPlayer.src = data.proxyUrl || data.directUrl;\n" +
+      "audioPlayer.load();\n\n" +
+      "// 3) Attempt autoplay, fallback to manual play\n" +
+      "await audioPlayer.play().catch(() => {\n" +
+      "  console.log(\"Autoplay is blocked by the browser; user interaction is required.\");\n" +
+      "});"
+    );
+    fillReadonly(
+      elements.fetchPostSnippet,
+      "const audioPlayer = document.getElementById(\"" + basePlayerId + "\");\n\n" +
+      "// 1) Create MP3 with Edge TTS\n" +
+      "const response = await fetch(\"" + window.location.origin + "/api/synthesize\", {\n" +
+      "  method: \"POST\",\n" +
+      "  headers: { \"Content-Type\": \"application/json\" },\n" +
+      "  body: JSON.stringify(" + JSON.stringify({
+        provider: "edge",
+        text: sampleText,
+        voice: selectedVoice,
+        rate: elements.rateInput.value.trim() || "+0%",
+        volume: elements.volumeInput.value.trim() || "+0%",
+        pitch: elements.pitchInput.value.trim() || "+0Hz",
+      }, null, 2) + ")\n" +
+      "});\n" +
+      "const data = await response.json();\n\n" +
+      "// 2) data.audioUrl is the generated MP3\n" +
+      "audioPlayer.src = data.audioUrl;\n" +
+      "audioPlayer.load();\n\n" +
+      "// 3) Attempt autoplay\n" +
+      "await audioPlayer.play().catch(() => {\n" +
+      "  console.log(\"Autoplay is blocked by the browser; user interaction is required.\");\n" +
+      "});"
+    );
+
+    fillReadonly(
+      elements.translateResponseSnippet,
+      JSON.stringify(
+        {
+          ok: true,
+          provider: "translate",
+          text: sampleText,
+          lang: payload.lang || "en",
+          slow: payload.slow,
+          directUrl: "https://translate.google.com/translate_tts?ie=UTF-8&q=" + encodedText + "&tl=" + (payload.lang || "en") + "&client=tw-ob",
+          proxyUrl: audioUrl,
+          segments: [
+            {
+              index: 1,
+              text: sampleText,
+              directUrl: "https://translate.google.com/translate_tts?ie=UTF-8&q=" + encodedText + "&tl=" + (payload.lang || "en") + "&client=tw-ob",
+              proxyUrl: audioUrl,
+            },
+          ],
+          chunkCount: 1,
+        },
+        null,
+        2
+      )
+    );
+
+    fillReadonly(
+      elements.edgeResponseSnippet,
+      JSON.stringify(
+        {
+          ok: true,
+          provider: "edge",
+          audioUrl: window.location.origin + "/audio/example.mp3",
+          contentType: "audio/mpeg",
+          voice: selectedVoice,
+          rate: elements.rateInput.value.trim() || "+0%",
+          volume: elements.volumeInput.value.trim() || "+0%",
+          pitch: elements.pitchInput.value.trim() || "+0Hz",
+          textLength: sampleText.length,
+        },
+        null,
+        2
+      )
+    );
+
+    fillReadonly(
+      elements.processSummary,
+      "Translate URL mode:\n" +
+      "1) Call GET /api/translate-url to receive directUrl and proxyUrl.\n" +
+      "2) For immediate playback, use /api/translate-audio directly in <audio>.\n" +
+      "3) For JS control, set player.src = data.proxyUrl and call player.play().\n" +
+      "4) Browser autoplay policies may require first-click interaction.\n" +
+      "5) If text is long, iterate over the segments list for sequential playback.\n\n" +
+      "Edge neural mode:\n" +
+      "1) Call GET /api/voices?filter=en-US and choose a voice.\n" +
+      "2) Call POST /api/synthesize with provider=edge and voice parameters.\n" +
+      "3) Server runs the Edge TTS engine and returns audioUrl.\n" +
+      "4) Set audioUrl on your <audio> element, then load() and play().\n" +
+      "5) /audio/{file} is served inline for embedded web playback."
+    );
+  }
+
+  async function fetchJson(url) {
+    const response = await fetch(url);
+    const body = await response.json();
+    if (!response.ok) {
+      throw new Error(body.detail || "Request failed.");
+    }
+    return body;
+  }
+
+  function setBusy(isBusy) {
+    elements.generateButton.disabled = isBusy;
+    elements.generateButton.textContent = isBusy ? "Generating..." : "Generate audio";
+  }
+
+  function setStatus(value) {
+    elements.statusPill.textContent = value;
+  }
+
+  function setMessage(value) {
+    elements.messageBox.textContent = value;
+  }
+
+  function fillReadonly(node, value) {
+    node.value = value || "";
+  }
+
+  function toggleOpenLink(url) {
+    if (!url) {
+      elements.openLink.classList.add("hidden");
+      elements.openLink.href = "#";
+      return;
+    }
+
+    elements.openLink.classList.remove("hidden");
+    elements.openLink.href = url;
+  }
+
+  function copyField(targetId) {
+    const field = document.getElementById(targetId);
+    if (!field || !field.value) {
+      return;
+    }
+
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(field.value).then(function () {
+        setMessage("Copied: " + targetId);
+      });
+      return;
+    }
+
+    field.focus();
+    field.select();
+    document.execCommand("copy");
+    setMessage("Copied: " + targetId);
+  }
+})();

templates/index.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>EG AUTONOMOUS | TTS Command Studio</title>
+    <meta name="description" content="Enterprise-grade text-to-speech dashboard aligned with EG AUTONOMOUS visual identity.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/app.css">
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero hero-brand">
+        <div class="brand-banner">
+          <img class="brand-art" src="/static/eg-autonomous-brand.png" alt="EG AUTONOMOUS brand visual identity">
+          <div class="brand-overlay"></div>
+        </div>
+
+        <div class="hero-copy">
+          <p class="eyebrow">EG Autonomous AI Platform</p>
+          <h1>TTS Command Studio</h1>
+          <p class="intro">
+            Professional text-to-speech generation with production-ready endpoints, dual synthesis providers,
+            and fast API handoff for autonomous systems.
+          </p>
+        </div>
+      </section>
+
+      <section class="workspace">
+        <form id="tts-form" class="panel form-panel">
+          <div class="panel-head">
+            <div>
+              <p class="panel-kicker">Composer</p>
+              <h2>Create audio output</h2>
+            </div>
+            <span id="status-pill" class="status-pill" aria-live="polite">Ready</span>
+          </div>
+
+          <div class="field-grid field-grid-meta">
+            <label class="field">
+              <span>Provider</span>
+              <select id="provider-select"></select>
+            </label>
+
+            <label class="field">
+              <span>Language</span>
+              <select id="lang-select"></select>
+            </label>
+
+            <label class="field checkbox-field">
+              <input id="slow-input" type="checkbox">
+              <span>Slow translate voice</span>
+            </label>
+          </div>
+
+          <label class="field">
+            <span>Text</span>
+            <textarea id="text-input" rows="8" placeholder="Enter the text you want to convert to speech"></textarea>
+          </label>
+
+          <div id="edge-controls" class="provider-panel hidden">
+            <div class="field-grid field-grid-voices">
+              <label class="field">
+                <span>Voice filter</span>
+                <input id="voice-filter-input" type="text" placeholder="en-US">
+              </label>
+
+              <label class="field">
+                <span>Voice</span>
+                <select id="voice-select"></select>
+              </label>
+            </div>
+
+            <div class="action-row compact-actions">
+              <button id="load-voices-button" type="button" class="secondary">Load voices</button>
+            </div>
+
+            <div class="field-grid field-grid-controls">
+              <label class="field">
+                <span>Rate</span>
+                <input id="rate-input" type="text" placeholder="+0%">
+              </label>
+
+              <label class="field">
+                <span>Volume</span>
+                <input id="volume-input" type="text" placeholder="+0%">
+              </label>
+
+              <label class="field">
+                <span>Pitch</span>
+                <input id="pitch-input" type="text" placeholder="+0Hz">
+              </label>
+            </div>
+          </div>
+
+          <div class="action-row">
+            <button id="generate-button" type="submit">Generate audio</button>
+            <button id="sample-button" type="button" class="secondary">Use sample text</button>
+          </div>
+
+          <p class="microcopy">
+            Example direct URL format:
+            <code>https://translate.google.com/translate_tts?ie=UTF-8&q=Hello%20from%20EG%20AUTONOMOUS&tl=en&client=tw-ob</code>
+          </p>
+        </form>
+
+        <section class="panel output-panel">
+          <div class="panel-head">
+            <div>
+              <p class="panel-kicker">Playback</p>
+              <h2>Player and API response</h2>
+            </div>
+            <span id="summary-badge" class="summary-badge">Waiting</span>
+          </div>
+
+          <p id="message-box" class="message-box" aria-live="polite">Enter text and click Generate audio.</p>
+
+          <audio id="player" controls preload="none"></audio>
+
+          <div class="action-row player-actions">
+            <a id="open-link" class="button-link hidden" href="#" target="_blank" rel="noreferrer">Open audio file</a>
+          </div>
+
+          <div id="warnings-box" class="warnings-box"></div>
+
+          <label class="field">
+            <span>Direct URL</span>
+            <textarea id="direct-url" rows="3" readonly></textarea>
+          </label>
+
+          <label class="field">
+            <span>Proxy URL</span>
+            <textarea id="proxy-url" rows="3" readonly></textarea>
+          </label>
+
+          <label class="field">
+            <span>POST /api/synthesize response</span>
+            <textarea id="json-output" rows="10" readonly></textarea>
+          </label>
+        </section>
+      </section>
+
+      <section class="panel lower-panel">
+        <div class="panel-head">
+          <div>
+            <p class="panel-kicker">Developer Toolkit</p>
+            <h2>Ready-to-use API snippets</h2>
+          </div>
+        </div>
+
+        <div class="lower-grid">
+          <div>
+            <h3>Integration modes</h3>
+            <div class="guide-card">
+              <p class="guide-summary">
+                Choose the mode based on your product needs: fast URL playback with Translate or controllable MP3 generation with Edge voices.
+              </p>
+              <p class="guide-label">Translate URL mode</p>
+              <p class="guide-copy">
+                Best for quick playback where your app only needs an instantly playable URL and minimal setup complexity.
+              </p>
+              <ol class="guide-steps">
+                <li>Call <code>GET /api/translate-url</code> or <code>POST /api/synthesize</code> with <code>provider=translate</code>.</li>
+                <li>Read <code>directUrl</code> and <code>proxyUrl</code> from the response.</li>
+                <li>Set <code>proxyUrl</code> as your player source for stable inline playback.</li>
+              </ol>
+            </div>
+
+            <div class="guide-card">
+              <p class="guide-label">Edge neural mode</p>
+              <p class="guide-copy">
+                Best for voice quality and detailed control over voice, rate, volume, and pitch with reusable MP3 output.
+              </p>
+              <ol class="guide-steps">
+                <li>Call <code>GET /api/voices?filter=en-US</code> to fetch available voices.</li>
+                <li>Call <code>POST /api/synthesize</code> with <code>provider=edge</code> and selected voice parameters.</li>
+                <li>Use <code>audioUrl</code> in your player for production playback.</li>
+              </ol>
+            </div>
+          </div>
+
+          <div>
+            <h3>Copy-and-paste snippets</h3>
+            <label class="field">
+              <span>1. Base HTML audio player</span>
+              <textarea id="base-html-snippet" rows="4" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>2. Translate: inline audio playback</span>
+              <textarea id="audio-tag-snippet" rows="6" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>3. Translate: fetch and play</span>
+              <textarea id="fetch-get-snippet" rows="10" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>4. Translate URL example</span>
+              <textarea id="example-get-url" rows="4" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>5. Translate audio endpoint</span>
+              <textarea id="example-audio-url" rows="4" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>6. Edge voices endpoint</span>
+              <textarea id="example-voices-url" rows="3" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>7. Edge synthesize request</span>
+              <textarea id="fetch-post-snippet" rows="16" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>8. Translate response sample</span>
+              <textarea id="translate-response-snippet" rows="10" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>9. Edge response sample</span>
+              <textarea id="edge-response-snippet" rows="10" readonly></textarea>
+            </label>
+
+            <label class="field">
+              <span>10. End-to-end process summary</span>
+              <textarea id="process-summary" rows="10" readonly></textarea>
+            </label>
+
+            <div class="action-row">
+              <button type="button" data-copy-target="base-html-snippet">Copy HTML base</button>
+              <button type="button" data-copy-target="audio-tag-snippet" class="secondary">Copy translate audio</button>
+              <button type="button" data-copy-target="fetch-get-snippet" class="secondary">Copy translate fetch</button>
+              <button type="button" data-copy-target="fetch-post-snippet" class="secondary">Copy edge fetch</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script src="/static/app.js" defer></script>
+  </body>
+</html>

tts_engine.py

@@ -0,0 +1,107 @@
+import argparse
+import asyncio
+from pathlib import Path
+from typing import Any
+
+import edge_tts
+
+
+DEFAULT_TEXT = "Hello. This is the default sample used to validate edge-tts output."
+DEFAULT_VOICE = "en-US-AriaNeural"
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description="Edge TTS test utility.")
+    parser.add_argument("--text", help="Text content to synthesize.")
+    parser.add_argument("--file", type=Path, help="Load synthesis text from a file.")
+    parser.add_argument("--voice", default=DEFAULT_VOICE, help="Edge TTS voice name.")
+    parser.add_argument("--rate", default="+0%", help="Speech rate, for example: +10%%")
+    parser.add_argument("--volume", default="+0%", help="Speech volume, for example: +0%%")
+    parser.add_argument("--pitch", default="+0Hz", help="Speech pitch, for example: +0Hz")
+    parser.add_argument("--output", type=Path, default=Path("output.mp3"), help="Output audio file path.")
+    parser.add_argument("--list-voices", action="store_true", help="List available voices.")
+    parser.add_argument("--filter", help="Filter voices by keyword, for example: en-US")
+    return parser.parse_args()
+
+
+def load_text(args: argparse.Namespace) -> str:
+    if args.text:
+        return args.text.strip()
+    if args.file:
+        return args.file.read_text(encoding="utf-8").strip()
+    return DEFAULT_TEXT
+
+
+async def get_voices(keyword: str | None = None) -> list[dict[str, Any]]:
+    voices = await edge_tts.list_voices()
+    if keyword:
+        keyword = keyword.lower()
+        voices = [
+            voice
+            for voice in voices
+            if keyword in voice["ShortName"].lower() or keyword in voice["Locale"].lower()
+        ]
+
+    return voices
+
+
+async def list_voices(keyword: str | None) -> None:
+    voices = await get_voices(keyword)
+
+    if not voices:
+        print("No matching voice was found.")
+        return
+
+    for voice in voices:
+        print(f'{voice["ShortName"]} | {voice["Locale"]} | {voice["Gender"]}')
+
+
+async def synthesize_to_file(
+    *,
+    text: str,
+    output: Path,
+    voice: str = DEFAULT_VOICE,
+    rate: str = "+0%",
+    volume: str = "+0%",
+    pitch: str = "+0Hz",
+) -> Path:
+    if not text:
+        raise ValueError("Input text cannot be empty.")
+
+    output.parent.mkdir(parents=True, exist_ok=True)
+
+    communicate = edge_tts.Communicate(
+        text=text,
+        voice=voice,
+        rate=rate,
+        volume=volume,
+        pitch=pitch,
+    )
+    await communicate.save(str(output))
+    return output.resolve()
+
+
+async def generate_tts(args: argparse.Namespace) -> None:
+    output_path = await synthesize_to_file(
+        text=load_text(args),
+        output=args.output,
+        voice=args.voice,
+        rate=args.rate,
+        volume=args.volume,
+        pitch=args.pitch,
+    )
+    print(f"Audio file generated: {output_path}")
+    print(f"Voice: {args.voice}")
+
+
+async def async_main() -> None:
+    args = parse_args()
+    if args.list_voices:
+        await list_voices(args.filter)
+        return
+    await generate_tts(args)
+
+
+if __name__ == "__main__":
+    asyncio.run(async_main())
+