Deploy Audio8 TTS Preview with official adapter

.dockerignore

@@ -0,0 +1,10 @@
+.git
+.DS_Store
+.venv
+.uv-cache
+**/__pycache__
+**/*.pyc
+**/.pytest_cache
+outputs
+*.wav
+!examples/*.wav

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+examples/en_female_clara.wav filter=lfs diff=lfs merge=lfs -text
+examples/en_female_iris.wav filter=lfs diff=lfs merge=lfs -text
+examples/en_male_arthur.wav filter=lfs diff=lfs merge=lfs -text
+examples/zh_en_female_sophie.wav filter=lfs diff=lfs merge=lfs -text
+examples/zh_female_mia.wav filter=lfs diff=lfs merge=lfs -text
+examples/zh_male_ben.wav filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+.venv/
+.uv-cache/
+**/__pycache__/
+**/*.pyc
+outputs/

Dockerfile

@@ -0,0 +1,79 @@
+FROM lmsysorg/sglang:v0.5.8-cu129-amd64-runtime@sha256:85feb856fb76c986cc31001b438d9d243c805378a9e63254fdaaf6cb1740d332
+
+USER root
+
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends curl git libsndfile1 && \
+    rm -rf /var/lib/apt/lists/* && \
+    mkdir -p /home/user/app /models /opt/sglang-omni /opt/audio8-tts /tmp/audio8-flashinfer && \
+    chown -R 1000:1000 /home/user /models /tmp/audio8-flashinfer
+
+WORKDIR /home/user/app
+
+ARG SGLANG_OMNI_REVISION=68a572348837f7b004857b4b07993c20ade4c017
+ARG AUDIO8_TTS_REVISION=2b2946e7f046bce0a840c7bb3e6e40687eff3f5b
+
+RUN git init /opt/sglang-omni && \
+    git -C /opt/sglang-omni remote add origin https://github.com/sgl-project/sglang-omni.git && \
+    git -C /opt/sglang-omni fetch --depth 1 origin "${SGLANG_OMNI_REVISION}" && \
+    git -C /opt/sglang-omni checkout --detach FETCH_HEAD && \
+    git init /opt/audio8-tts && \
+    git -C /opt/audio8-tts remote add origin https://github.com/Audio8-AI/Audio8_TTS.git && \
+    git -C /opt/audio8-tts fetch --depth 1 origin "${AUDIO8_TTS_REVISION}" && \
+    git -C /opt/audio8-tts checkout --detach FETCH_HEAD && \
+    rm -rf /opt/sglang-omni/.git /opt/audio8-tts/.git
+
+RUN pip install --no-cache-dir \
+      "accelerate==1.14.0" \
+      "av==17.1.0" \
+      "fastapi==0.139.0" \
+      "huggingface-hub==0.36.2" \
+      "httpx==0.28.1" \
+      "librosa==0.11.0" \
+      "msgpack==1.2.1" \
+      "numba==0.63.1" \
+      "python-multipart==0.0.32" \
+      "qwen-vl-utils==0.0.11" \
+      "soundfile==0.13.1" \
+      "transformers==4.57.1" \
+      "typer==0.26.8" \
+      "uvicorn==0.49.0" \
+      "xxhash==3.8.0" \
+      "pyzmq==27.1.0"
+
+ENV PYTHONPATH=/opt/sglang-omni
+
+RUN /opt/audio8-tts/sglang_omni/scripts/install_adapter.sh /opt/sglang-omni && \
+    python3 /opt/audio8-tts/sglang_omni/scripts/verify_install.py
+
+COPY --chown=1000:1000 app.py ./app.py
+COPY --chown=1000:1000 static ./static
+COPY --chown=1000:1000 examples ./examples
+COPY --chown=1000:1000 assets ./assets
+COPY --chown=1000:1000 scripts ./scripts
+
+RUN chmod +x ./scripts/*.sh
+
+USER 1000
+
+ARG MODEL_REPO=Audio8/Audio8-TTS-Preview-0.6b
+ARG MODEL_REVISION=1b17c91db5f4dccb6914aa4aa5cb0e56661a6c17
+RUN python3 -c "from huggingface_hub import snapshot_download; snapshot_download(repo_id='${MODEL_REPO}', revision='${MODEL_REVISION}', local_dir='/models/audio8-tts-0.6b')" && \
+    python3 /opt/audio8-tts/sglang_omni/scripts/verify_install.py --model-path /models/audio8-tts-0.6b
+
+ENV HOME=/home/user \
+    HF_HOME=/home/user/.cache/huggingface \
+    MODEL_PATH=/models/audio8-tts-0.6b \
+    PORT=7860 \
+    BACKEND_HOST=127.0.0.1 \
+    BACKEND_PORT=8010 \
+    AUDIO8_TTS_MEM_FRACTION_STATIC=0.60 \
+    AUDIO8_TTS_MAX_RUNNING_REQUESTS=8 \
+    AUDIO8_TTS_DISABLE_CUDA_GRAPH=1 \
+    AUDIO8_TTS_VERIFY_FAST_KV=1 \
+    FLASHINFER_WORKSPACE_BASE=/tmp/audio8-flashinfer \
+    PYTHONUNBUFFERED=1
+
+EXPOSE 7860
+
+CMD ["/home/user/app/scripts/start.sh"]

README.md

@@ -1,10 +1,41 @@
 ---
-title: Audio8 TTS Preview 0.6b
-emoji: 🦀
-colorFrom: blue
-colorTo: indigo
+title: Audio8 TTS Preview 0.6B
+colorFrom: red
+colorTo: gray
 sdk: docker
-pinned: false
+app_port: 7860
+models:
+  - Audio8/Audio8-TTS-Preview-0.6b
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Audio8 TTS Preview 0.6B
+
+Multilingual text-to-speech and zero-shot voice cloning for
+[`Audio8/Audio8-TTS-Preview-0.6b`](https://huggingface.co/Audio8/Audio8-TTS-Preview-0.6b).
+The service uses the official Audio8 adapter with SGLang Omni 0.1.0 and
+SGLang 0.5.8.
+
+## API
+
+```bash
+curl -sS \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "model": "audio8/tts-0.6b",
+    "input": "Audio8 generates this sentence with the reference voice.",
+    "response_format": "wav",
+    "temperature": 0.8,
+    "top_p": 0.95,
+    "top_k": 50,
+    "references": [{
+      "audio_path": "https://example.com/reference.wav",
+      "text": "The exact transcript spoken in the reference audio."
+    }]
+  }' \
+  https://audio8-audio8-tts-preview-0-6b.hf.space/v1/audio/speech \
+  -o audio8-clone.wav
+```
+
+Use reference voices only with the speaker's permission and disclose synthetic
+audio where appropriate.

app.py

@@ -0,0 +1,301 @@
+from __future__ import annotations
+
+import asyncio
+import os
+import tempfile
+import time
+from pathlib import Path
+from typing import Annotated
+
+import httpx
+from fastapi import FastAPI, File, Form, HTTPException, Request, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, JSONResponse, Response
+from fastapi.staticfiles import StaticFiles
+
+
+ROOT = Path(__file__).resolve().parent
+BACKEND_URL = os.getenv("BACKEND_URL", "http://127.0.0.1:8010")
+MAX_UPLOAD_BYTES = 15 * 1024 * 1024
+ALLOWED_AUDIO_SUFFIXES = {".wav", ".mp3", ".flac", ".m4a", ".ogg"}
+GENERATION_LIMIT = asyncio.Semaphore(int(os.getenv("UI_MAX_CONCURRENCY", "4")))
+
+ENGLISH_REFERENCE_TEXT = (
+    "hello nice to meet you, what would you like to talk about todat"
+)
+CHINESE_REFERENCE_TEXT = "你好，我是小周，很高兴认识你"
+
+EXAMPLES = {
+    "clara": {
+        "id": "clara",
+        "name": "Clara",
+        "locale": "English",
+        "tone": "Female",
+        "file": "en_female_clara.wav",
+        "transcript": ENGLISH_REFERENCE_TEXT,
+    },
+    "iris": {
+        "id": "iris",
+        "name": "Iris",
+        "locale": "English",
+        "tone": "Female",
+        "file": "en_female_iris.wav",
+        "transcript": ENGLISH_REFERENCE_TEXT,
+    },
+    "arthur": {
+        "id": "arthur",
+        "name": "Arthur",
+        "locale": "English",
+        "tone": "Male",
+        "file": "en_male_arthur.wav",
+        "transcript": ENGLISH_REFERENCE_TEXT,
+    },
+    "mia": {
+        "id": "mia",
+        "name": "Mia",
+        "locale": "中文",
+        "tone": "女声",
+        "file": "zh_female_mia.wav",
+        "transcript": CHINESE_REFERENCE_TEXT,
+    },
+    "ben": {
+        "id": "ben",
+        "name": "Ben",
+        "locale": "中文",
+        "tone": "男声",
+        "file": "zh_male_ben.wav",
+        "transcript": CHINESE_REFERENCE_TEXT,
+    },
+    "sophie": {
+        "id": "sophie",
+        "name": "Sophie",
+        "locale": "中英双语",
+        "tone": "女声",
+        "file": "zh_en_female_sophie.wav",
+        "transcript": CHINESE_REFERENCE_TEXT,
+    },
+}
+
+app = FastAPI(title="Audio8 TTS Preview 0.6B", version="1.0.0")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+app.mount("/static", StaticFiles(directory=ROOT / "static"), name="static")
+
+
+@app.get("/assets/{asset_name}", include_in_schema=False)
+async def asset(asset_name: str) -> FileResponse:
+    if asset_name != "audio8-logo.jpeg":
+        raise HTTPException(status_code=404, detail="Asset not found")
+    return FileResponse(
+        ROOT / "assets" / asset_name,
+        media_type="image/jpeg",
+        headers={"Cache-Control": "public, max-age=86400"},
+    )
+
+
+async def _backend_status() -> tuple[bool, dict]:
+    try:
+        async with httpx.AsyncClient(timeout=3.0) as client:
+            response = await client.get(f"{BACKEND_URL}/health")
+        payload = response.json()
+        return response.status_code == 200, payload
+    except (httpx.HTTPError, ValueError):
+        return False, {}
+
+
+async def _generate(payload: dict) -> httpx.Response:
+    async with GENERATION_LIMIT:
+        async with httpx.AsyncClient(timeout=httpx.Timeout(600.0)) as client:
+            return await client.post(f"{BACKEND_URL}/v1/audio/speech", json=payload)
+
+
+async def _store_upload(upload: UploadFile) -> Path:
+    suffix = Path(upload.filename or "reference.wav").suffix.lower()
+    if suffix not in ALLOWED_AUDIO_SUFFIXES:
+        raise HTTPException(status_code=400, detail="Unsupported reference audio format")
+
+    descriptor, raw_path = tempfile.mkstemp(prefix="audio8-reference-", suffix=suffix)
+    path = Path(raw_path)
+    total = 0
+    try:
+        with os.fdopen(descriptor, "wb") as output:
+            while chunk := await upload.read(1024 * 1024):
+                total += len(chunk)
+                if total > MAX_UPLOAD_BYTES:
+                    raise HTTPException(
+                        status_code=413,
+                        detail="Reference audio must be 15 MB or smaller",
+                    )
+                output.write(chunk)
+        return path
+    except Exception:
+        path.unlink(missing_ok=True)
+        raise
+    finally:
+        await upload.close()
+
+
+@app.get("/", include_in_schema=False)
+async def index() -> FileResponse:
+    return FileResponse(ROOT / "static" / "index.html")
+
+
+@app.get("/api/examples")
+async def list_examples() -> list[dict]:
+    return [
+        {
+            **example,
+            "audio_url": f"/examples/{example['id']}",
+        }
+        for example in EXAMPLES.values()
+    ]
+
+
+@app.get("/examples/{example_id}", include_in_schema=False)
+async def example_audio(example_id: str) -> FileResponse:
+    example = EXAMPLES.get(example_id)
+    if example is None:
+        raise HTTPException(status_code=404, detail="Voice example not found")
+    return FileResponse(
+        ROOT / "examples" / example["file"],
+        media_type="audio/wav",
+        headers={"Cache-Control": "public, max-age=86400"},
+    )
+
+
+@app.get("/api/status")
+async def api_status() -> dict:
+    ready, details = await _backend_status()
+    return {
+        "state": "ready" if ready else "warming",
+        "model": "Audio8/Audio8-TTS-Preview-0.6b",
+        "engine": "SGLang-Omni 0.1.0 / SGLang 0.5.8",
+        "details": details,
+    }
+
+
+@app.post("/api/generate")
+async def generate_speech(
+    text: Annotated[str, Form()],
+    reference_text: Annotated[str, Form()],
+    example_id: Annotated[str | None, Form()] = None,
+    reference_audio: Annotated[UploadFile | None, File()] = None,
+    temperature: Annotated[float, Form()] = 0.8,
+    top_p: Annotated[float, Form()] = 0.95,
+    top_k: Annotated[int, Form()] = 50,
+    max_new_tokens: Annotated[int, Form()] = 1024,
+) -> Response:
+    text = " ".join(text.split())
+    reference_text = " ".join(reference_text.split())
+    if not text:
+        raise HTTPException(status_code=400, detail="Text must not be empty")
+    if len(text) > 1000:
+        raise HTTPException(status_code=400, detail="Text must be 1000 characters or fewer")
+    if not reference_text:
+        raise HTTPException(status_code=400, detail="Reference transcript is required")
+    if not 0 <= temperature <= 2:
+        raise HTTPException(status_code=400, detail="Temperature must be between 0 and 2")
+    if not 0 < top_p <= 1:
+        raise HTTPException(status_code=400, detail="Top P must be between 0 and 1")
+    if not 1 <= top_k <= 200:
+        raise HTTPException(status_code=400, detail="Top K must be between 1 and 200")
+    if not 32 <= max_new_tokens <= 2048:
+        raise HTTPException(status_code=400, detail="Max tokens must be between 32 and 2048")
+
+    temporary_path: Path | None = None
+    if reference_audio is not None and reference_audio.filename:
+        temporary_path = await _store_upload(reference_audio)
+        reference_path = temporary_path
+    elif example_id and example_id in EXAMPLES:
+        reference_path = ROOT / "examples" / EXAMPLES[example_id]["file"]
+    else:
+        raise HTTPException(status_code=400, detail="Select or upload a reference voice")
+
+    payload = {
+        "model": "audio8/tts-0.6b",
+        "input": text,
+        "response_format": "wav",
+        "max_new_tokens": max_new_tokens,
+        "temperature": temperature,
+        "top_p": top_p,
+        "top_k": top_k,
+        "references": [
+            {
+                "audio_path": str(reference_path),
+                "text": reference_text,
+            }
+        ],
+    }
+
+    started = time.perf_counter()
+    try:
+        response = await _generate(payload)
+    except httpx.ConnectError as exc:
+        raise HTTPException(status_code=503, detail="Model is still warming up") from exc
+    except httpx.TimeoutException as exc:
+        raise HTTPException(status_code=504, detail="Generation timed out") from exc
+    finally:
+        if temporary_path is not None:
+            temporary_path.unlink(missing_ok=True)
+
+    if response.status_code != 200:
+        try:
+            detail = response.json().get("detail", response.text)
+        except ValueError:
+            detail = response.text
+        raise HTTPException(status_code=response.status_code, detail=detail)
+
+    headers = {
+        "Content-Disposition": 'attachment; filename="audio8-clone.wav"',
+        "X-Generation-Duration-Ms": str(round((time.perf_counter() - started) * 1000)),
+    }
+    for name in ("x-prompt-tokens", "x-completion-tokens", "x-engine-time"):
+        if name in response.headers:
+            headers[name] = response.headers[name]
+    return Response(content=response.content, media_type="audio/wav", headers=headers)
+
+
+@app.get("/health")
+async def health() -> JSONResponse:
+    ready, details = await _backend_status()
+    return JSONResponse(
+        status_code=200 if ready else 503,
+        content={"status": "healthy" if ready else "warming", **details},
+    )
+
+
+@app.get("/v1/models")
+async def models_proxy() -> Response:
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        response = await client.get(f"{BACKEND_URL}/v1/models")
+    return Response(
+        content=response.content,
+        status_code=response.status_code,
+        media_type=response.headers.get("content-type", "application/json"),
+    )
+
+
+@app.post("/v1/audio/speech")
+async def speech_proxy(request: Request) -> Response:
+    body = await request.body()
+    async with httpx.AsyncClient(timeout=httpx.Timeout(600.0)) as client:
+        response = await client.post(
+            f"{BACKEND_URL}/v1/audio/speech",
+            content=body,
+            headers={"Content-Type": request.headers.get("content-type", "application/json")},
+        )
+    forwarded_headers = {
+        name: value
+        for name, value in response.headers.items()
+        if name.lower().startswith("x-") or name.lower() == "content-disposition"
+    }
+    return Response(
+        content=response.content,
+        status_code=response.status_code,
+        media_type=response.headers.get("content-type", "application/octet-stream"),
+        headers=forwarded_headers,
+    )

examples/en_female_clara.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b800383f2b92b6660ba32a5751faedfe4c6d2c889b5836a8e3f97e1fbc7b15dc
+size 331854

examples/en_female_iris.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a6ea95ebc3d550724cae89bd4c6d9a33b2c1c9533ca5a542b8756bb31f2e6bc
+size 344142

examples/en_male_arthur.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e52a09743564884880568d7b006b0162a278f12ecef7b1245fc41288805f9745
+size 352334

examples/zh_en_female_sophie.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62957ba17ed84c4b8417aa56848b2dca0726bbe42e6fa5ab937a0c9de0697059
+size 262222

examples/zh_female_mia.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb16d6c65ed49d9a6fe1c9266bec8683a712f66fac7abafac298fa2c5ce12477
+size 286798

examples/zh_male_ben.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62108e35015fd40be5ea54d1c8e77774837f4c472dc3d085fb38c15d8b42b4ce
+size 245838

scripts/run_backend.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+MODEL_PATH="${MODEL_PATH:-/models/audio8-tts-0.6b}"
+ADAPTER_ROOT="${AUDIO8_TTS_ROOT:-/opt/audio8-tts}"
+
+export SGLANG_OMNI_ROOT="${SGLANG_OMNI_ROOT:-/opt/sglang-omni}"
+export PYTHONPATH="${SGLANG_OMNI_ROOT}${PYTHONPATH:+:${PYTHONPATH}}"
+export FLASHINFER_WORKSPACE_BASE="${FLASHINFER_WORKSPACE_BASE:-/tmp/audio8-flashinfer}"
+
+if [[ "${AUDIO8_TTS_VERIFY_FAST_KV:-0}" == "1" ]]; then
+  python3 "${ADAPTER_ROOT}/sglang_omni/scripts/test_fast_kv_cache.py" \
+    --model-path "${MODEL_PATH}" \
+    --batch-size "${AUDIO8_TTS_FAST_KV_TEST_BATCH_SIZE:-2}"
+fi
+
+export MODEL="${MODEL_PATH}"
+export CONFIG="${PIPELINE_CONFIG:-${ADAPTER_ROOT}/sglang_omni/configs/audio8_tts_0_6b.yaml}"
+export MODEL_NAME="${MODEL_NAME:-audio8/tts-0.6b}"
+export HOST="${BACKEND_HOST:-127.0.0.1}"
+export PORT="${BACKEND_PORT:-8010}"
+
+exec "${ADAPTER_ROOT}/sglang_omni/scripts/run_server.sh"

scripts/start.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+/home/user/app/scripts/run_backend.sh &
+backend_pid=$!
+
+cleanup() {
+  kill "${backend_pid}" 2>/dev/null || true
+}
+trap cleanup EXIT INT TERM
+
+# Expose the UI immediately while the model initializes in the background.
+exec uvicorn app:app --host 0.0.0.0 --port "${PORT:-7860}" --workers 1

static/app.js

@@ -0,0 +1,323 @@
+const state = {
+  examples: [],
+  selectedExample: null,
+  source: "library",
+  activePreview: null,
+  resultUrl: null,
+  uploadUrl: null,
+};
+
+const textPresets = {
+  zh: "今天想和你分享一个好消息，Audio8 现在可以用更高效的方式生成自然流畅的语音。",
+  en: "Every voice carries a story. With Audio8, that story can travel across languages and reach more people.",
+  ja: "今日は穏やかな一日ですね。新しい音声技術について、ゆっくりお話ししましょう。",
+  es: "Cada voz tiene una historia, y hoy podemos compartirla de una forma más natural y cercana.",
+};
+
+const elements = {
+  form: document.querySelector("#generationForm"),
+  voiceLibrary: document.querySelector("#voiceLibrary"),
+  uploadPanel: document.querySelector("#uploadPanel"),
+  referenceAudio: document.querySelector("#referenceAudio"),
+  referenceText: document.querySelector("#referenceText"),
+  uploadTitle: document.querySelector("#uploadTitle"),
+  uploadPreview: document.querySelector("#uploadPreview"),
+  speechText: document.querySelector("#speechText"),
+  characterCount: document.querySelector("#characterCount"),
+  consent: document.querySelector("#consent"),
+  generateButton: document.querySelector("#generateButton"),
+  runtimeStatus: document.querySelector("#runtimeStatus"),
+  runtimeLabel: document.querySelector("#runtimeLabel"),
+  emptyOutput: document.querySelector("#emptyOutput"),
+  loadingOutput: document.querySelector("#loadingOutput"),
+  loadingTitle: document.querySelector("#loadingTitle"),
+  elapsedTime: document.querySelector("#elapsedTime"),
+  resultOutput: document.querySelector("#resultOutput"),
+  resultBadge: document.querySelector("#resultBadge"),
+  resultAudio: document.querySelector("#resultAudio"),
+  resultWaveform: document.querySelector("#resultWaveform"),
+  generationTime: document.querySelector("#generationTime"),
+  audioDuration: document.querySelector("#audioDuration"),
+  downloadButton: document.querySelector("#downloadButton"),
+  errorOutput: document.querySelector("#errorOutput"),
+  errorMessage: document.querySelector("#errorMessage"),
+};
+
+function refreshIcons() {
+  if (window.lucide) {
+    window.lucide.createIcons({ attrs: { "stroke-width": 1.8 } });
+  }
+}
+
+function formatDuration(seconds) {
+  if (!Number.isFinite(seconds)) return "--";
+  return seconds < 60 ? `${seconds.toFixed(1)}s` : `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`;
+}
+
+async function drawWaveform(url, canvas, color = "#8a8780") {
+  const response = await fetch(url);
+  if (!response.ok) return;
+  const data = await response.arrayBuffer();
+  const context = new AudioContext();
+  try {
+    const buffer = await context.decodeAudioData(data.slice(0));
+    const samples = buffer.getChannelData(0);
+    const width = canvas.width;
+    const height = canvas.height;
+    const blocks = Math.min(120, Math.max(36, Math.floor(width / 8)));
+    const blockSize = Math.max(1, Math.floor(samples.length / blocks));
+    const peaks = [];
+    for (let block = 0; block < blocks; block += 1) {
+      let peak = 0;
+      const start = block * blockSize;
+      const end = Math.min(samples.length, start + blockSize);
+      for (let index = start; index < end; index += 1) {
+        peak = Math.max(peak, Math.abs(samples[index]));
+      }
+      peaks.push(peak);
+    }
+    const maxPeak = Math.max(...peaks, 0.001);
+    const draw = canvas.getContext("2d");
+    draw.clearRect(0, 0, width, height);
+    draw.fillStyle = color;
+    const barWidth = Math.max(2, width / blocks - 3);
+    peaks.forEach((peak, index) => {
+      const normalized = peak / maxPeak;
+      const barHeight = Math.max(3, normalized * height * 0.86);
+      const x = index * (width / blocks) + 1;
+      draw.fillRect(x, (height - barHeight) / 2, barWidth, barHeight);
+    });
+  } finally {
+    await context.close();
+  }
+}
+
+function stopPreview() {
+  if (!state.activePreview) return;
+  state.activePreview.audio.pause();
+  state.activePreview.audio.currentTime = 0;
+  state.activePreview.button.innerHTML = '<i data-lucide="play" aria-hidden="true"></i>';
+  state.activePreview.button.setAttribute("aria-label", "Play voice sample");
+  state.activePreview = null;
+  refreshIcons();
+}
+
+function selectExample(example) {
+  state.selectedExample = example;
+  elements.referenceText.value = example.transcript;
+  document.querySelectorAll(".voice-option").forEach((option) => {
+    const selected = option.dataset.exampleId === example.id;
+    option.classList.toggle("selected", selected);
+    option.setAttribute("aria-checked", String(selected));
+  });
+}
+
+function createVoiceOption(example, index) {
+  const option = document.createElement("div");
+  option.className = "voice-option";
+  option.dataset.exampleId = example.id;
+  option.setAttribute("role", "radio");
+  option.setAttribute("aria-checked", "false");
+  option.tabIndex = 0;
+
+  const play = document.createElement("button");
+  play.type = "button";
+  play.className = "voice-play";
+  play.setAttribute("aria-label", `Play ${example.name} voice sample`);
+  play.innerHTML = '<i data-lucide="play" aria-hidden="true"></i>';
+
+  const meta = document.createElement("div");
+  meta.className = "voice-meta";
+  meta.innerHTML = `<strong>${example.name}</strong><span>${example.locale} / ${example.tone}</span>`;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = 360;
+  canvas.height = 56;
+  canvas.setAttribute("aria-hidden", "true");
+
+  option.append(play, meta, canvas);
+  option.addEventListener("click", () => selectExample(example));
+  option.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      selectExample(example);
+    }
+  });
+
+  const audio = new Audio(example.audio_url);
+  play.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (state.activePreview?.audio === audio && !audio.paused) {
+      stopPreview();
+      return;
+    }
+    stopPreview();
+    selectExample(example);
+    audio.play();
+    play.innerHTML = '<i data-lucide="square" aria-hidden="true"></i>';
+    play.setAttribute("aria-label", `Stop ${example.name} voice sample`);
+    state.activePreview = { audio, button: play };
+    refreshIcons();
+  });
+  audio.addEventListener("ended", stopPreview);
+
+  drawWaveform(example.audio_url, canvas, index === 0 ? "#e64b2f" : "#8a8780").catch(() => {});
+  return option;
+}
+
+async function loadExamples() {
+  const response = await fetch("/api/examples");
+  if (!response.ok) throw new Error("Could not load reference voices");
+  state.examples = await response.json();
+  state.examples.forEach((example, index) => {
+    elements.voiceLibrary.append(createVoiceOption(example, index));
+  });
+  if (state.examples.length) selectExample(state.examples[0]);
+  refreshIcons();
+}
+
+function setSource(source) {
+  state.source = source;
+  stopPreview();
+  document.querySelectorAll(".source-tab").forEach((tab) => {
+    const active = tab.dataset.source === source;
+    tab.classList.toggle("active", active);
+    tab.setAttribute("aria-selected", String(active));
+  });
+  elements.voiceLibrary.hidden = source !== "library";
+  elements.uploadPanel.hidden = source !== "upload";
+  if (source === "library" && state.selectedExample) {
+    elements.referenceText.value = state.selectedExample.transcript;
+  }
+}
+
+function showOutput(mode) {
+  elements.emptyOutput.hidden = mode !== "empty";
+  elements.loadingOutput.hidden = mode !== "loading";
+  elements.resultOutput.hidden = mode !== "result";
+  elements.errorOutput.hidden = mode !== "error";
+  elements.resultBadge.hidden = mode !== "result";
+}
+
+async function updateStatus() {
+  try {
+    const response = await fetch("/api/status", { cache: "no-store" });
+    const payload = await response.json();
+    const ready = payload.state === "ready";
+    elements.runtimeStatus.classList.toggle("ready", ready);
+    elements.runtimeLabel.textContent = ready ? "Model ready" : "Warming up";
+  } catch {
+    elements.runtimeStatus.classList.remove("ready");
+    elements.runtimeLabel.textContent = "Connecting";
+  }
+}
+
+function setGenerating(generating) {
+  elements.generateButton.disabled = generating || !elements.consent.checked;
+  elements.consent.disabled = generating;
+  elements.speechText.disabled = generating;
+  elements.referenceText.disabled = generating;
+}
+
+async function submitGeneration(event) {
+  event.preventDefault();
+  if (!elements.consent.checked) return;
+  if (state.source === "upload" && !elements.referenceAudio.files.length) {
+    showOutput("error");
+    elements.errorMessage.textContent = "Choose a reference audio file first.";
+    return;
+  }
+
+  const formData = new FormData(elements.form);
+  if (state.source === "library") {
+    formData.delete("reference_audio");
+    formData.set("example_id", state.selectedExample?.id || "");
+  }
+
+  showOutput("loading");
+  setGenerating(true);
+  const started = performance.now();
+  const phases = ["Encoding reference voice", "Generating acoustic tokens", "Decoding 44.1 kHz audio"];
+  let phase = 0;
+  const ticker = window.setInterval(() => {
+    const elapsed = (performance.now() - started) / 1000;
+    elements.elapsedTime.textContent = `${elapsed.toFixed(1)}s`;
+    const nextPhase = Math.min(phases.length - 1, Math.floor(elapsed / 8));
+    if (nextPhase !== phase) {
+      phase = nextPhase;
+      elements.loadingTitle.textContent = phases[phase];
+    }
+  }, 100);
+
+  try {
+    const response = await fetch("/api/generate", { method: "POST", body: formData });
+    if (!response.ok) {
+      const payload = await response.json().catch(() => ({}));
+      throw new Error(typeof payload.detail === "string" ? payload.detail : "The model could not generate audio.");
+    }
+
+    const blob = await response.blob();
+    if (state.resultUrl) URL.revokeObjectURL(state.resultUrl);
+    state.resultUrl = URL.createObjectURL(blob);
+    elements.resultAudio.src = state.resultUrl;
+    elements.downloadButton.href = state.resultUrl;
+    const serverMs = Number(response.headers.get("x-generation-duration-ms"));
+    const durationMs = Number.isFinite(serverMs) ? serverMs : performance.now() - started;
+    elements.generationTime.textContent = formatDuration(durationMs / 1000);
+    await drawWaveform(state.resultUrl, elements.resultWaveform, "#e64b2f");
+    showOutput("result");
+    elements.resultAudio.play().catch(() => {});
+  } catch (error) {
+    elements.errorMessage.textContent = error.message || "Unexpected generation error";
+    showOutput("error");
+  } finally {
+    window.clearInterval(ticker);
+    elements.loadingTitle.textContent = phases[0];
+    setGenerating(false);
+  }
+}
+
+document.querySelectorAll(".source-tab").forEach((tab) => {
+  tab.addEventListener("click", () => setSource(tab.dataset.source));
+});
+
+document.querySelectorAll(".text-presets button").forEach((button) => {
+  button.addEventListener("click", () => {
+    elements.speechText.value = textPresets[button.dataset.preset];
+    elements.speechText.dispatchEvent(new Event("input"));
+    elements.speechText.focus();
+  });
+});
+
+elements.referenceAudio.addEventListener("change", () => {
+  const file = elements.referenceAudio.files[0];
+  if (!file) return;
+  if (state.uploadUrl) URL.revokeObjectURL(state.uploadUrl);
+  state.uploadUrl = URL.createObjectURL(file);
+  elements.uploadPreview.src = state.uploadUrl;
+  elements.uploadPreview.hidden = false;
+  elements.uploadTitle.textContent = file.name;
+});
+
+elements.speechText.addEventListener("input", () => {
+  elements.characterCount.textContent = elements.speechText.value.length;
+});
+
+elements.consent.addEventListener("change", () => {
+  elements.generateButton.disabled = !elements.consent.checked;
+});
+
+elements.resultAudio.addEventListener("loadedmetadata", () => {
+  elements.audioDuration.textContent = formatDuration(elements.resultAudio.duration);
+});
+
+elements.form.addEventListener("submit", submitGeneration);
+
+elements.characterCount.textContent = elements.speechText.value.length;
+refreshIcons();
+loadExamples().catch((error) => {
+  elements.errorMessage.textContent = error.message;
+  showOutput("error");
+});
+updateStatus();
+window.setInterval(updateStatus, 5000);

static/index.html

@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#f4f3ef" />
+    <meta
+      name="description"
+      content="Audio8 TTS Preview 0.6B multilingual voice cloning studio."
+    />
+    <title>Audio8 TTS Preview 0.6B</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+    <script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js" defer></script>
+    <script src="/static/app.js" defer></script>
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="topbar-inner">
+        <a class="brand" href="/" aria-label="Audio8 TTS Preview 0.6B">
+          <img src="/assets/audio8-logo.jpeg" alt="Audio8" />
+          <span class="brand-divider" aria-hidden="true"></span>
+          <span class="brand-product">TTS Preview 0.6B</span>
+        </a>
+        <nav class="top-actions" aria-label="Product links">
+          <a
+            class="icon-link"
+            href="https://huggingface.co/Audio8/Audio8-TTS-Preview-0.6b"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <i data-lucide="box" aria-hidden="true"></i>
+            <span>Model</span>
+          </a>
+          <a class="icon-link" href="/docs" target="_blank">
+            <i data-lucide="code-2" aria-hidden="true"></i>
+            <span>API</span>
+          </a>
+          <div class="runtime-status" id="runtimeStatus" aria-live="polite">
+            <span class="status-dot"></span>
+            <span id="runtimeLabel">Warming up</span>
+          </div>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <section class="title-band">
+        <div>
+          <p class="eyebrow">Audio8 TTS Preview 0.6B</p>
+          <h1>Clone a voice. Generate speech.</h1>
+        </div>
+        <div class="engine-mark">
+          <span>Multilingual</span>
+          <span class="engine-separator">/</span>
+          <span>44.1 kHz</span>
+        </div>
+      </section>
+
+      <section class="studio" aria-label="Voice cloning studio">
+        <form id="generationForm" class="controls-column">
+          <section class="control-section voice-section">
+            <div class="section-heading">
+              <div>
+                <span class="step-index">01</span>
+                <h2>Reference voice</h2>
+              </div>
+              <div class="source-tabs" role="tablist" aria-label="Reference source">
+                <button
+                  class="source-tab active"
+                  type="button"
+                  role="tab"
+                  aria-selected="true"
+                  data-source="library"
+                >
+                  Voices
+                </button>
+                <button
+                  class="source-tab"
+                  type="button"
+                  role="tab"
+                  aria-selected="false"
+                  data-source="upload"
+                >
+                  Upload
+                </button>
+              </div>
+            </div>
+
+            <div id="voiceLibrary" class="voice-library" role="radiogroup"></div>
+
+            <div id="uploadPanel" class="upload-panel" hidden>
+              <label class="upload-target" for="referenceAudio">
+                <i data-lucide="upload" aria-hidden="true"></i>
+                <span>
+                  <strong id="uploadTitle">Choose reference audio</strong>
+                  <small>WAV, MP3, FLAC, M4A or OGG, up to 15 MB</small>
+                </span>
+              </label>
+              <input
+                id="referenceAudio"
+                name="reference_audio"
+                type="file"
+                accept="audio/wav,audio/mpeg,audio/flac,audio/mp4,audio/ogg"
+              />
+              <audio id="uploadPreview" controls hidden></audio>
+            </div>
+
+            <label class="field-label" for="referenceText">
+              Reference transcript
+              <textarea
+                class="reference-transcript"
+                id="referenceText"
+                name="reference_text"
+                rows="2"
+                required
+              ></textarea>
+            </label>
+          </section>
+
+          <section class="control-section text-section">
+            <div class="section-heading">
+              <div>
+                <span class="step-index">02</span>
+                <h2>Speech text</h2>
+              </div>
+              <span class="character-count"><span id="characterCount">0</span>/1000</span>
+            </div>
+            <label class="sr-only" for="speechText">Text to generate</label>
+            <textarea
+              id="speechText"
+              name="text"
+              maxlength="1000"
+              rows="6"
+              required
+            >Every voice carries a story. With Audio8, that story can travel across languages and reach more people.</textarea>
+
+            <div class="text-presets" aria-label="Speech text presets">
+              <button type="button" data-preset="en">English</button>
+              <button type="button" data-preset="zh">中文</button>
+              <button type="button" data-preset="ja">日本語</button>
+              <button type="button" data-preset="es">Español</button>
+            </div>
+
+            <details class="settings">
+              <summary>
+                <span><i data-lucide="sliders-horizontal" aria-hidden="true"></i> Generation settings</span>
+                <i class="chevron" data-lucide="chevron-down" aria-hidden="true"></i>
+              </summary>
+              <div class="settings-grid">
+                <label>
+                  Temperature
+                  <input name="temperature" type="number" min="0" max="2" step="0.05" value="0.8" />
+                </label>
+                <label>
+                  Top P
+                  <input name="top_p" type="number" min="0.05" max="1" step="0.05" value="0.95" />
+                </label>
+                <label>
+                  Top K
+                  <input name="top_k" type="number" min="1" max="200" step="1" value="50" />
+                </label>
+                <label>
+                  Max tokens
+                  <input name="max_new_tokens" type="number" min="32" max="2048" step="32" value="1024" />
+                </label>
+              </div>
+            </details>
+
+            <label class="consent-row">
+              <input id="consent" type="checkbox" required />
+              <span>I have permission to use this reference voice.</span>
+            </label>
+
+            <button id="generateButton" class="generate-button" type="submit" disabled>
+              <i data-lucide="audio-lines" aria-hidden="true"></i>
+              <span>Generate speech</span>
+              <kbd>Audio8</kbd>
+            </button>
+          </section>
+        </form>
+
+        <aside class="output-column" aria-labelledby="outputHeading">
+          <div class="output-heading-row">
+            <div>
+              <span class="step-index">03</span>
+              <h2 id="outputHeading">Generated audio</h2>
+            </div>
+            <span id="resultBadge" class="result-badge" hidden>Ready</span>
+          </div>
+
+          <div id="emptyOutput" class="empty-output">
+            <div class="wave-display" aria-hidden="true">
+              <span></span><span></span><span></span><span></span><span></span>
+              <span></span><span></span><span></span><span></span><span></span>
+              <span></span><span></span><span></span><span></span><span></span>
+            </div>
+            <p>Your generated voice will appear here.</p>
+            <span>WAV / 44.1 kHz</span>
+          </div>
+
+          <div id="loadingOutput" class="loading-output" hidden aria-live="polite">
+            <div class="processing-mark" aria-hidden="true">
+              <span></span><span></span><span></span><span></span><span></span>
+            </div>
+            <strong id="loadingTitle">Encoding reference voice</strong>
+            <span id="elapsedTime">0.0s</span>
+          </div>
+
+          <div id="resultOutput" class="result-output" hidden>
+            <canvas id="resultWaveform" width="960" height="180"></canvas>
+            <audio id="resultAudio" controls></audio>
+            <div class="result-metrics">
+              <div>
+                <span>Generation</span>
+                <strong id="generationTime">--</strong>
+              </div>
+              <div>
+                <span>Audio</span>
+                <strong id="audioDuration">--</strong>
+              </div>
+              <div>
+                <span>Model</span>
+                <strong>Audio8 0.6B</strong>
+              </div>
+            </div>
+            <a id="downloadButton" class="download-button" download="audio8-clone.wav">
+              <i data-lucide="download" aria-hidden="true"></i>
+              Download WAV
+            </a>
+          </div>
+
+          <div id="errorOutput" class="error-output" hidden role="alert">
+            <i data-lucide="circle-alert" aria-hidden="true"></i>
+            <div>
+              <strong>Generation failed</strong>
+              <p id="errorMessage"></p>
+            </div>
+          </div>
+        </aside>
+      </section>
+    </main>
+
+    <footer>
+      <span>Audio8 TTS Preview</span>
+      <span>Use cloned voices with consent and disclose synthetic audio.</span>
+    </footer>
+  </body>
+</html>

static/styles.css

@@ -0,0 +1,971 @@
+:root {
+  color-scheme: light;
+  --ink: #171717;
+  --muted: #6d6a66;
+  --line: #d9d7d1;
+  --line-strong: #b9b6ae;
+  --paper: #ffffff;
+  --ground: #f4f3ef;
+  --soft: #ebe9e3;
+  --accent: #e64b2f;
+  --accent-dark: #bd351f;
+  --green: #16745d;
+  --yellow: #f2c14e;
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--ground);
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  color: var(--ink);
+  background: var(--ground);
+  letter-spacing: 0;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+  letter-spacing: 0;
+}
+
+button,
+a,
+label,
+summary {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+summary:focus-visible,
+[role="radio"]:focus-visible {
+  outline: 3px solid rgba(230, 75, 47, 0.24);
+  outline-offset: 2px;
+}
+
+.topbar {
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.topbar-inner,
+.title-band,
+.studio,
+footer {
+  width: min(1220px, calc(100% - 48px));
+  margin: 0 auto;
+}
+
+.topbar-inner {
+  min-height: 66px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.brand {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.brand img {
+  display: block;
+  width: 142px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.brand-divider {
+  width: 1px;
+  height: 22px;
+  background: var(--line-strong);
+}
+
+.brand-product {
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 700;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-link,
+.runtime-status {
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 11px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #4c4945;
+  font-size: 13px;
+  font-weight: 650;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.icon-link:hover {
+  border-color: var(--line);
+  background: var(--ground);
+}
+
+.icon-link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.runtime-status {
+  border-color: var(--line);
+  background: var(--ground);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 8px;
+  border-radius: 50%;
+  background: var(--yellow);
+  box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.18);
+}
+
+.runtime-status.ready .status-dot {
+  background: var(--green);
+  box-shadow: 0 0 0 3px rgba(22, 116, 93, 0.16);
+}
+
+main {
+  padding-bottom: 40px;
+}
+
+.title-band {
+  min-height: 158px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 32px;
+  padding: 46px 0 28px;
+}
+
+.eyebrow {
+  margin: 0 0 9px;
+  color: var(--accent-dark);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 680px;
+  margin-bottom: 0;
+  font-size: 34px;
+  line-height: 1.1;
+  font-weight: 750;
+}
+
+.engine-mark {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding-bottom: 5px;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.engine-separator {
+  color: var(--accent);
+}
+
+.studio {
+  display: grid;
+  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
+  min-height: 690px;
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: 8px;
+  background: var(--paper);
+  box-shadow: 0 18px 60px rgba(32, 29, 25, 0.07);
+}
+
+.controls-column,
+.output-column {
+  min-width: 0;
+}
+
+.control-section {
+  padding: 28px 30px;
+}
+
+.control-section + .control-section {
+  border-top: 1px solid var(--line);
+}
+
+.section-heading,
+.output-heading-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.section-heading > div:first-child,
+.output-heading-row > div:first-child {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.step-index {
+  color: var(--accent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+h2 {
+  margin-bottom: 0;
+  font-size: 18px;
+  line-height: 1.2;
+  font-weight: 750;
+}
+
+.source-tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 150px;
+  height: 34px;
+  padding: 3px;
+  border-radius: 6px;
+  background: var(--soft);
+}
+
+.source-tab {
+  border: 0;
+  border-radius: 4px;
+  color: var(--muted);
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.source-tab.active {
+  color: var(--ink);
+  background: var(--paper);
+  box-shadow: 0 1px 3px rgba(28, 25, 22, 0.14);
+}
+
+.voice-library {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-bottom: 22px;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.voice-option {
+  position: relative;
+  min-width: 0;
+  height: 104px;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  grid-template-rows: auto 30px;
+  column-gap: 10px;
+  align-items: center;
+  padding: 13px 12px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: var(--paper);
+  cursor: pointer;
+  transition: background 140ms ease, box-shadow 140ms ease;
+}
+
+.voice-option:hover {
+  background: #faf9f6;
+}
+
+.voice-option.selected {
+  z-index: 1;
+  background: #fff8f5;
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+.voice-play {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  grid-row: 1;
+  padding: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--ink);
+  background: var(--paper);
+  cursor: pointer;
+}
+
+.voice-play:hover {
+  color: var(--paper);
+  border-color: var(--ink);
+  background: var(--ink);
+}
+
+.voice-play svg {
+  width: 14px;
+  height: 14px;
+}
+
+.voice-meta {
+  min-width: 0;
+  grid-row: 1;
+}
+
+.voice-meta strong,
+.voice-meta span {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.voice-meta strong {
+  margin-bottom: 3px;
+  font-size: 13px;
+}
+
+.voice-meta span {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.voice-option canvas {
+  width: 100%;
+  height: 28px;
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+.upload-panel {
+  margin-bottom: 20px;
+}
+
+.upload-target {
+  min-height: 108px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 20px;
+  border: 1px dashed var(--line-strong);
+  border-radius: 6px;
+  background: #faf9f6;
+  cursor: pointer;
+}
+
+.upload-target:hover {
+  border-color: var(--accent);
+  background: #fff8f5;
+}
+
+.upload-target svg {
+  width: 22px;
+  height: 22px;
+  color: var(--accent);
+}
+
+.upload-target strong,
+.upload-target small {
+  display: block;
+}
+
+.upload-target strong {
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.upload-target small {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+#referenceAudio {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+#uploadPreview {
+  width: 100%;
+  height: 42px;
+  margin-top: 12px;
+}
+
+.field-label,
+.settings-grid label {
+  display: block;
+  color: #4f4b47;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.field-label input,
+.settings-grid input {
+  width: 100%;
+  height: 42px;
+  margin-top: 8px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  color: var(--ink);
+  background: var(--paper);
+}
+
+.field-label .reference-transcript {
+  min-height: 62px;
+  margin-top: 8px;
+  padding: 10px 12px;
+  resize: vertical;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.field-label input:focus,
+.settings-grid input:focus,
+textarea:focus {
+  border-color: var(--accent);
+  outline: 0;
+  box-shadow: 0 0 0 3px rgba(230, 75, 47, 0.11);
+}
+
+.character-count {
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+}
+
+textarea {
+  width: 100%;
+  min-height: 142px;
+  resize: vertical;
+  display: block;
+  padding: 15px 16px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  color: var(--ink);
+  background: #fdfcf9;
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+.text-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 11px;
+}
+
+.text-presets button {
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  color: #4f4b47;
+  background: var(--paper);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.text-presets button:hover {
+  color: var(--accent-dark);
+  border-color: var(--accent);
+  background: #fff8f5;
+}
+
+.settings {
+  margin-top: 16px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.settings summary {
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #4f4b47;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  list-style: none;
+}
+
+.settings summary::-webkit-details-marker {
+  display: none;
+}
+
+.settings summary span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings summary svg {
+  width: 15px;
+  height: 15px;
+}
+
+.settings .chevron {
+  transition: transform 160ms ease;
+}
+
+.settings[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 4px 0 16px;
+}
+
+.consent-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 18px 0 15px;
+  color: #4f4b47;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.consent-row input {
+  width: 17px;
+  height: 17px;
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.generate-button,
+.download-button {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--paper);
+  background: var(--ink);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.generate-button:hover:not(:disabled),
+.download-button:hover {
+  background: var(--accent-dark);
+}
+
+.generate-button:disabled {
+  color: #a5a29c;
+  background: #dedcd6;
+  cursor: not-allowed;
+}
+
+.generate-button svg,
+.download-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+.generate-button kbd {
+  position: absolute;
+  right: 44px;
+  padding: 3px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.68);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.generate-button {
+  position: relative;
+}
+
+.output-column {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 28px 30px 30px;
+  border-left: 1px solid var(--line-strong);
+  background: #f8f7f3;
+}
+
+.result-badge {
+  padding: 5px 8px;
+  border-radius: 4px;
+  color: var(--green);
+  background: rgba(22, 116, 93, 0.1);
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.empty-output,
+.loading-output {
+  min-height: 400px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.empty-output p {
+  margin: 22px 0 7px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.empty-output > span {
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+}
+
+.wave-display {
+  height: 84px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.wave-display span {
+  width: 4px;
+  border-radius: 2px;
+  background: #cbc8c0;
+}
+
+.wave-display span:nth-child(1),
+.wave-display span:nth-child(15) { height: 16px; }
+.wave-display span:nth-child(2),
+.wave-display span:nth-child(14) { height: 28px; }
+.wave-display span:nth-child(3),
+.wave-display span:nth-child(13) { height: 42px; }
+.wave-display span:nth-child(4),
+.wave-display span:nth-child(12) { height: 25px; }
+.wave-display span:nth-child(5),
+.wave-display span:nth-child(11) { height: 58px; }
+.wave-display span:nth-child(6),
+.wave-display span:nth-child(10) { height: 34px; }
+.wave-display span:nth-child(7),
+.wave-display span:nth-child(9) { height: 70px; }
+.wave-display span:nth-child(8) { height: 48px; background: var(--accent); }
+
+.loading-output strong {
+  margin-top: 22px;
+  font-size: 14px;
+}
+
+.loading-output > span {
+  margin-top: 7px;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+}
+
+.processing-mark {
+  height: 74px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.processing-mark span {
+  width: 5px;
+  height: 32px;
+  border-radius: 3px;
+  background: var(--accent);
+  animation: processing 900ms ease-in-out infinite alternate;
+}
+
+.processing-mark span:nth-child(2) { animation-delay: 120ms; }
+.processing-mark span:nth-child(3) { animation-delay: 240ms; }
+.processing-mark span:nth-child(4) { animation-delay: 360ms; }
+.processing-mark span:nth-child(5) { animation-delay: 480ms; }
+
+@keyframes processing {
+  from { height: 18px; opacity: 0.45; }
+  to { height: 62px; opacity: 1; }
+}
+
+.result-output {
+  flex: 1;
+}
+
+#resultWaveform {
+  width: 100%;
+  height: 180px;
+  display: block;
+  margin: 20px 0 26px;
+  border-bottom: 1px solid var(--line);
+}
+
+#resultAudio {
+  width: 100%;
+  height: 48px;
+}
+
+.result-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin: 24px 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.result-metrics div {
+  min-width: 0;
+  padding: 14px 12px;
+}
+
+.result-metrics div + div {
+  border-left: 1px solid var(--line);
+}
+
+.result-metrics span,
+.result-metrics strong {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.result-metrics span {
+  margin-bottom: 5px;
+  color: var(--muted);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.result-metrics strong {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.error-output {
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 15px;
+  border: 1px solid rgba(189, 53, 31, 0.35);
+  border-radius: 6px;
+  color: #8f2919;
+  background: #fff3ef;
+}
+
+.error-output svg {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+}
+
+.error-output strong {
+  font-size: 13px;
+}
+
+.error-output p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+footer {
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+@media (max-width: 920px) {
+  .studio {
+    grid-template-columns: 1fr;
+  }
+
+  .output-column {
+    min-height: 560px;
+    border-top: 1px solid var(--line-strong);
+    border-left: 0;
+  }
+
+  .voice-library {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .topbar-inner,
+  .title-band,
+  .studio,
+  footer {
+    width: min(100% - 24px, 1220px);
+  }
+
+  .topbar-inner {
+    min-height: 58px;
+    gap: 10px;
+  }
+
+  .brand {
+    gap: 8px;
+  }
+
+  .brand img {
+    width: 100px;
+    height: 34px;
+  }
+
+  .brand-product,
+  .brand-divider,
+  .icon-link span,
+  .runtime-status span:last-child {
+    display: none;
+  }
+
+  .icon-link,
+  .runtime-status {
+    width: 34px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .title-band {
+    min-height: 138px;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 16px;
+    padding: 34px 0 24px;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+
+  .engine-mark {
+    padding: 0;
+  }
+
+  .control-section,
+  .output-column {
+    padding: 23px 18px;
+  }
+
+  .section-heading,
+  .output-heading-row {
+    gap: 12px;
+  }
+
+  .source-tabs {
+    width: 132px;
+  }
+
+  .voice-option {
+    height: 100px;
+    padding: 11px 9px;
+  }
+
+  .settings-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .generate-button kbd {
+    display: none;
+  }
+
+  .empty-output,
+  .loading-output {
+    min-height: 320px;
+  }
+
+  footer {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    padding: 18px 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}