Migrate DramaBox to gradio.Server with a custom HTML/CSS/JS frontend

app.py

@@ -12,8 +12,13 @@ import tempfile
 import time
 
 import gradio as gr
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
+from gradio.data_classes import FileData
 import spaces
 
+
 # Local src import.
 sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), "src"))
 from inference_server import TTSServer  # noqa: E402
@@ -164,149 +169,59 @@ EXAMPLES: list[tuple[str, str, str]] = [
 ]
 
 
+app = Server()
+
+# Serve static voice files and images
+app.mount("/assets", StaticFiles(directory="assets"), name="assets")
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
+
+
+@app.api()
 @spaces.GPU(duration=60)
-def on_generate(prompt: str, audio_ref, cfg: float, stg: float, dur_mult: float,
-                gen_dur: float, ref_dur: float, seed: int):
+def generate_audio(
+    prompt: str,
+    audio_ref: FileData | None,
+    cfg: float,
+    stg: float,
+    dur_mult: float,
+    gen_dur: float,
+    ref_dur: float,
+    seed: int
+) -> FileData:
     if not prompt or not prompt.strip():
         raise gr.Error("Prompt is empty.")
+    
     t0 = time.time()
-    ref_path = audio_ref if audio_ref and os.path.exists(str(audio_ref)) else None
+    ref_path = audio_ref.path if audio_ref and audio_ref.path and os.path.exists(audio_ref.path) else None
+    
     output = tempfile.mktemp(suffix=".wav", prefix="dramabox_")
     tts.generate_to_file(
         prompt=prompt,
         output=output,
         voice_ref=ref_path,
-        cfg_scale=cfg, stg_scale=stg,
-        duration_multiplier=dur_mult, seed=int(seed),
+        cfg_scale=cfg,
+        stg_scale=stg,
+        duration_multiplier=dur_mult,
+        seed=int(seed),
         gen_duration=float(gen_dur),
         ref_duration=float(ref_dur),
     )
     elapsed = time.time() - t0
     logging.info(f"Generated in {elapsed:.2f}s -> {output}")
-    return output
-
-
-# ── UI ──────────────────────────────────────────────────────────────────────
-_BANNER_CSS = """
-.prompt-box textarea { font-size: 14px !important; line-height: 1.5 !important; }
-.ltx-banner {
-    background: linear-gradient(90deg, #1a1f3a 0%, #2a1f3a 100%);
-    border-left: 4px solid #ff6b35;
-    padding: 10px 16px;
-    margin: 0 0 12px 0;
-    border-radius: 6px;
-    color: #e8e8f0;
-    font-size: 13px;
-    line-height: 1.5;
-}
-.ltx-banner a { color: #ff9a6c; font-weight: 600; text-decoration: none; }
-.ltx-banner a:hover { text-decoration: underline; }
-.ltx-banner strong { color: #ffffff; }
-"""
-
-with gr.Blocks(
-    title="DramaBox — Expressive TTS",
-    theme=gr.themes.Default(),
-    css=_BANNER_CSS,
-    analytics_enabled=False,
-) as app:
-    gr.Markdown("# 🎭 DramaBox — Expressive TTS with Voice Cloning")
-    gr.HTML(
-        '<div class="ltx-banner">'
-        '🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2">LTX-2</a> by '
-        '<a href="https://huggingface.co/Lightricks">Lightricks</a>. '
-        '<strong>DramaBox</strong> is <strong>Resemble AI\'s</strong> expressive TTS, '
-        'trained on top of the LTX-2.3 audio branch under the LTX-2 Community License. '
-        'Huge thanks to the Lightricks team for open-sourcing the base.'
-        '</div>'
-    )
-    gr.Markdown(
-        "Write a scene prompt, optionally upload a 10-second voice reference, "
-        "and generate. Audio is automatically watermarked with "
-        "[Resemble Perth](https://github.com/resemble-ai/Perth).\n\n"
-        "**Tips:** put dialogue inside `\"double quotes\"`, scene directions outside. "
-        "Phonetic sounds (`\"Hahaha\"`, `\"Mmmm\"`, `\"Ugh\"`) go inside quotes; named "
-        "actions (`She sighs.`, `He clears his throat.`) go outside."
-    )
-
-    with gr.Row():
-        with gr.Column(scale=3):
-            prompt_box = gr.Textbox(
-                label="Scene prompt",
-                placeholder=EXAMPLES[0][2],
-                lines=6, elem_classes=["prompt-box"],
-            )
-            audio_ref = gr.Audio(
-                label="Voice reference (optional, 10+ seconds)",
-                type="filepath",
-            )
-            gen_btn = gr.Button("Generate", variant="primary", size="lg")
-
-        with gr.Column(scale=2):
-            with gr.Accordion("Inference settings", open=False):
-                cfg_slider = gr.Slider(1.0, 10.0, value=2.5, step=0.5, label="CFG scale")
-                stg_slider = gr.Slider(0.0, 5.0, value=1.5, step=0.5, label="STG scale")
-                dur_slider = gr.Slider(0.8, 2.0, value=1.1, step=0.05,
-                                       label="Duration × (only used when target duration = 0)")
-                gen_dur_slider = gr.Slider(0.0, 60.0, value=0.0, step=1.0,
-                                           label="Target duration (s) — 0 = auto from prompt; "
-                                                 "set higher (≥20s) for long-form music or scenes")
-                ref_dur_slider = gr.Slider(3.0, 30.0, value=10.0, step=1.0,
-                                           label="Reference duration (s) — how many seconds of the "
-                                                 "uploaded voice reference the model conditions on")
-                seed_input = gr.Number(value=42, label="Seed", precision=0)
-            audio_out = gr.Audio(label="Generated audio", type="filepath")
-            with gr.Accordion("Prompt writing guide", open=False):
-                gr.Markdown(
-                    "**Structure:** `<speaker description>, \"<dialogue>\" <action> \"<more dialogue>\"`\n\n"
-                    "**Inside quotes** (model speaks them):\n"
-                    "- Dialogue: `\"Hello, how are you?\"`\n"
-                    "- Phonetic sounds: `\"Hahaha\"`, `\"Hehehe\"`, `\"Mmmmm\"`, `\"Ugh\"`, `\"Argh\"`\n\n"
-                    "**Outside quotes** (stage directions):\n"
-                    "- `She sighs deeply.`, `He gulps nervously.`, `A long pause.`\n"
-                    "- `Her voice cracks.`, `He clears his throat.`\n\n"
-                    "**Avoid inside quotes:** Ahem, Pfft, Sigh, Gasp, Cough — the model speaks them literally."
-                )
-
-    gen_btn.click(
-        on_generate,
-        inputs=[prompt_box, audio_ref, cfg_slider, stg_slider,
-                dur_slider, gen_dur_slider, ref_dur_slider, seed_input],
-        outputs=[audio_out],
-    )
-
-    # Click-to-generate example table. Each row preloads a paired voice
-    # reference + prompt and runs the model immediately.
-    gr.Examples(
-        label="🎬 Click any row to generate a sample",
-        examples=[
-            # rows tagged "30s •" force a 30-second target duration; the rest
-            # use the prompt-driven auto estimate (gen_dur = 0).
-            [name, prompt, voice_path, 2.5, 1.5, 1.1,
-             30.0 if name.startswith("30s") else 0.0, 10.0, 42]
-            for name, voice_path, prompt in EXAMPLES
-        ],
-        example_labels=[name for name, _, _ in EXAMPLES],
-        inputs=[gr.Textbox(visible=False, label="Scene"),
-                prompt_box, audio_ref,
-                cfg_slider, stg_slider, dur_slider, gen_dur_slider,
-                ref_dur_slider, seed_input],
-        outputs=[audio_out],
-        fn=lambda _name, prompt, ref, cfg, stg, dur, gen_dur, ref_dur, seed: on_generate(
-            prompt, ref, cfg, stg, dur, gen_dur, ref_dur, seed),
-        cache_examples=False,
-        run_on_click=True,
-        examples_per_page=20,
-    )
+    return FileData(path=output)
 
 
 if __name__ == "__main__":
-    # HF Spaces routes external traffic to container port 7860 by default.
-    # Defaulting to 7861 caused the gateway to return 500 for every external request.
     port = int(os.environ.get("GRADIO_SERVER_PORT", "7860"))
-    app.queue(max_size=10).launch(
-        server_name="0.0.0.0", server_port=port,
-        share=os.environ.get("GRADIO_SHARE", "0") == "1",
-        ssr_mode=False,                       # Gradio 5 SSR + ZeroGPU fork has known race conditions
-        show_api=False,                       # don't auto-derive Python schemas (caused bool-iter / dict-cache crashes)
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=port,
+        show_error=True
     )
+

index.html

@@ -0,0 +1,1588 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🎭 DramaBox — Expressive TTS with Voice Cloning</title>
+    
+    <!-- Meta tags for premium look and SEO -->
+    <meta name="description" content="Generate highly expressive speech with voice cloning. Powered by LTX-2.3 and Resemble Perth watermarking.">
+    <meta name="theme-color" content="#0d0f17">
+    
+    <!-- Google Fonts: Outfit and Inter -->
+    <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=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    
+    <style>
+        :root {
+            --bg-color: #080a10;
+            --panel-bg: rgba(18, 22, 38, 0.7);
+            --border-color: rgba(255, 255, 255, 0.08);
+            --text-primary: #f1f3f9;
+            --text-secondary: #9aa0b9;
+            --accent-orange: #ff6b35;
+            --accent-orange-glow: rgba(255, 107, 53, 0.4);
+            --accent-purple: #8b5cf6;
+            --accent-purple-glow: rgba(139, 92, 246, 0.4);
+            --accent-green: #10b981;
+            --radius-lg: 16px;
+            --radius-md: 10px;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            font-family: 'Inter', sans-serif;
+            min-height: 100vh;
+            line-height: 1.6;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Animated glowing background patterns */
+        body::before {
+            content: '';
+            position: absolute;
+            top: -20%;
+            left: -10%;
+            width: 60%;
+            height: 60%;
+            background: radial-gradient(circle, var(--accent-orange-glow) 0%, transparent 70%);
+            z-index: -1;
+            filter: blur(100px);
+            pointer-events: none;
+            opacity: 0.6;
+        }
+
+        body::after {
+            content: '';
+            position: absolute;
+            bottom: -10%;
+            right: -10%;
+            width: 50%;
+            height: 50%;
+            background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 75%);
+            z-index: -1;
+            filter: blur(100px);
+            pointer-events: none;
+            opacity: 0.4;
+        }
+
+        header {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 30px 20px 10px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        h1 {
+            font-family: 'Outfit', sans-serif;
+            font-size: 2.8rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, #ffffff 40%, #ff8e53 70%, #d49aff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 8px;
+            letter-spacing: -1px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .subtitle {
+            font-size: 1.1rem;
+            color: var(--text-secondary);
+            font-weight: 400;
+            max-width: 600px;
+            margin-bottom: 20px;
+        }
+
+        .ltx-banner {
+            background: linear-gradient(90deg, rgba(26, 31, 58, 0.8) 0%, rgba(42, 31, 58, 0.8) 100%);
+            border-left: 4px solid var(--accent-orange);
+            border-radius: var(--radius-md);
+            padding: 12px 20px;
+            color: #e8e8f0;
+            font-size: 0.9rem;
+            max-width: 900px;
+            margin: 0 auto 30px auto;
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            border-right: 1px solid var(--border-color);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            text-align: left;
+        }
+
+        .ltx-banner a {
+            color: #ff9a6c;
+            font-weight: 600;
+            text-decoration: none;
+            transition: var(--transition);
+        }
+
+        .ltx-banner a:hover {
+            text-decoration: underline;
+            color: #ffffff;
+        }
+
+        .ltx-banner strong {
+            color: #ffffff;
+        }
+
+        main {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 20px 60px 20px;
+            display: grid;
+            grid-template-columns: 1.2fr 1fr;
+            gap: 30px;
+        }
+
+        @media (max-width: 992px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+            h1 {
+                font-size: 2.2rem;
+            }
+        }
+
+        .panel {
+            background: var(--panel-bg);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            padding: 30px;
+            backdrop-filter: blur(16px);
+            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            transition: var(--transition);
+        }
+
+        .panel:hover {
+            border-color: rgba(255, 255, 255, 0.12);
+        }
+
+        .panel-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.4rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: #ffffff;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-label {
+            font-size: 0.85rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-secondary);
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .form-label .label-info {
+            font-size: 0.8rem;
+            color: var(--accent-orange);
+            text-transform: none;
+            font-weight: normal;
+        }
+
+        .textarea-custom {
+            width: 100%;
+            background: rgba(8, 10, 16, 0.6);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 16px;
+            color: var(--text-primary);
+            font-family: 'Inter', sans-serif;
+            font-size: 0.95rem;
+            line-height: 1.5;
+            resize: vertical;
+            min-height: 150px;
+            outline: none;
+            transition: var(--transition);
+        }
+
+        .textarea-custom:focus {
+            border-color: var(--accent-orange);
+            box-shadow: 0 0 15px rgba(255, 107, 53, 0.15);
+            background: rgba(8, 10, 16, 0.85);
+        }
+
+        /* Drag & Drop Audio Upload Uploader */
+        .upload-container {
+            border: 2px dashed rgba(255, 255, 255, 0.15);
+            border-radius: var(--radius-md);
+            padding: 24px;
+            text-align: center;
+            cursor: pointer;
+            background: rgba(255, 255, 255, 0.02);
+            transition: var(--transition);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            min-height: 120px;
+        }
+
+        .upload-container:hover, .upload-container.dragover {
+            border-color: var(--accent-purple);
+            background: rgba(139, 92, 246, 0.05);
+        }
+
+        .upload-icon {
+            font-size: 2rem;
+            color: var(--text-secondary);
+            transition: var(--transition);
+        }
+
+        .upload-container:hover .upload-icon {
+            transform: translateY(-4px);
+            color: var(--accent-purple);
+        }
+
+        .upload-text {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .upload-text strong {
+            color: var(--text-primary);
+        }
+
+        .hidden-input {
+            display: none;
+        }
+
+        .uploaded-file-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(139, 92, 246, 0.1);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+            padding: 10px 16px;
+            border-radius: var(--radius-md);
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        .uploaded-file-details {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .clear-upload {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            padding: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .clear-upload:hover {
+            color: #ffffff;
+            transform: scale(1.1);
+        }
+
+        /* Sliders / Advanced Settings */
+        .accordion-btn {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 12px 18px;
+            color: var(--text-primary);
+            font-weight: 600;
+            font-size: 0.9rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            transition: var(--transition);
+            width: 100%;
+            outline: none;
+        }
+
+        .accordion-btn:hover {
+            background: rgba(255, 255, 255, 0.06);
+            border-color: rgba(255, 255, 255, 0.15);
+        }
+
+        .accordion-icon {
+            font-size: 0.8rem;
+            transition: var(--transition);
+        }
+
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+            padding: 0 4px;
+        }
+
+        .accordion-content.open {
+            max-height: 500px;
+            margin-top: 15px;
+        }
+
+        .slider-group {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .slider-header {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .slider-val {
+            color: var(--text-primary);
+            font-weight: 700;
+        }
+
+        input[type="range"] {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 3px;
+            outline: none;
+            transition: var(--transition);
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: var(--accent-orange);
+            cursor: pointer;
+            box-shadow: 0 0 10px var(--accent-orange-glow);
+            transition: var(--transition);
+        }
+
+        input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+            background: #ffffff;
+        }
+
+        .seed-input-container {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .input-number {
+            flex: 1;
+            background: rgba(8, 10, 16, 0.6);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 10px;
+            color: var(--text-primary);
+            font-family: inherit;
+            outline: none;
+            transition: var(--transition);
+        }
+
+        .input-number:focus {
+            border-color: var(--accent-orange);
+        }
+
+        .btn-icon {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            color: var(--text-primary);
+            height: 42px;
+            width: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .btn-icon:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        /* Generate Button */
+        .btn-primary {
+            background: linear-gradient(135deg, var(--accent-orange) 0%, #ff8e53 100%);
+            border: none;
+            border-radius: var(--radius-md);
+            color: #ffffff;
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.1rem;
+            font-weight: 700;
+            padding: 16px;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
+            margin-top: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
+            filter: brightness(1.05);
+        }
+
+        .btn-primary:active:not(:disabled) {
+            transform: translateY(0);
+        }
+
+        .btn-primary:disabled {
+            background: #252836;
+            color: #636882;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        /* Right Panel: Output & Controls */
+        .output-card {
+            background: rgba(8, 10, 16, 0.4);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 200px;
+            position: relative;
+            gap: 16px;
+        }
+
+        .output-empty {
+            color: var(--text-secondary);
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .output-empty-icon {
+            font-size: 2.5rem;
+            opacity: 0.5;
+        }
+
+        /* Beautiful Custom Audio Player */
+        .custom-player {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .visualizer-container {
+            width: 100%;
+            height: 60px;
+            background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, rgba(255, 107, 53, 0.05) 100%);
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid rgba(255, 255, 255, 0.03);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .visualizer-wave {
+            display: flex;
+            align-items: center;
+            gap: 3px;
+            height: 100%;
+        }
+
+        .wave-bar {
+            width: 3px;
+            height: 8px;
+            background: var(--accent-purple);
+            border-radius: 1px;
+            transition: var(--transition);
+        }
+
+        .custom-player.playing .wave-bar {
+            animation: bounce 1.2s infinite ease-in-out alternate;
+        }
+
+        /* Animation for visualizer bars */
+        @keyframes bounce {
+            0% { height: 8px; }
+            100% { height: 40px; }
+        }
+
+        .wave-bar:nth-child(2n) { background: var(--accent-orange); animation-delay: 0.15s; }
+        .wave-bar:nth-child(3n) { animation-delay: 0.3s; }
+        .wave-bar:nth-child(4n) { animation-delay: 0.45s; }
+        .wave-bar:nth-child(5n) { background: var(--accent-purple); animation-delay: 0.6s; }
+
+        .player-controls {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            width: 100%;
+        }
+
+        .play-btn {
+            background: #ffffff;
+            border: none;
+            color: var(--bg-color);
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+            flex-shrink: 0;
+        }
+
+        .play-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
+        }
+
+        .time-slider-container {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .time-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-family: monospace;
+            min-width: 35px;
+        }
+
+        .extra-player-controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+            padding-top: 14px;
+        }
+
+        .volume-container {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            max-width: 120px;
+        }
+
+        .volume-icon {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .speed-control {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .speed-btn {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            color: var(--text-secondary);
+            font-size: 0.75rem;
+            font-weight: 600;
+            padding: 4px 8px;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .speed-btn.active, .speed-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+            border-color: rgba(255, 255, 255, 0.25);
+        }
+
+        .btn-download {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            color: #ffffff;
+            font-size: 0.85rem;
+            font-weight: 600;
+            padding: 8px 16px;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: var(--transition);
+        }
+
+        .btn-download:hover {
+            background: #ffffff;
+            color: var(--bg-color);
+            transform: translateY(-1px);
+        }
+
+        /* Queue & Status Indicator */
+        .status-container {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            padding: 12px 18px;
+            border-radius: var(--radius-md);
+            border: 1px solid transparent;
+            display: none; /* Shown dynamically */
+        }
+
+        .status-container.success {
+            background: rgba(16, 185, 129, 0.1);
+            border-color: rgba(16, 185, 129, 0.2);
+            color: var(--accent-green);
+        }
+
+        .status-container.info {
+            background: rgba(139, 92, 246, 0.1);
+            border-color: rgba(139, 92, 246, 0.2);
+            color: #a78bfa;
+        }
+
+        .status-container.error {
+            background: rgba(239, 68, 68, 0.1);
+            border-color: rgba(239, 68, 68, 0.2);
+            color: #f87171;
+        }
+
+        .spinner {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            border-top: 2px solid currentColor;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Examples Section */
+        .examples-section {
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+
+        .examples-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .examples-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            max-height: 380px;
+            overflow-y: auto;
+            padding-right: 4px;
+        }
+
+        /* Custom scrollbar for examples */
+        .examples-list::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .examples-list::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 3px;
+        }
+
+        .examples-list::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+        }
+
+        .example-item {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            text-align: left;
+        }
+
+        .example-item:hover {
+            background: rgba(255, 255, 255, 0.06);
+            border-color: rgba(255, 255, 255, 0.15);
+            transform: translateX(2px);
+        }
+
+        .example-item.active {
+            border-color: var(--accent-orange);
+            background: rgba(255, 107, 53, 0.04);
+        }
+
+        .example-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .example-name {
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: #ffffff;
+        }
+
+        .example-badges {
+            display: flex;
+            gap: 6px;
+        }
+
+        .badge {
+            font-size: 0.7rem;
+            font-weight: 700;
+            padding: 2px 6px;
+            border-radius: 4px;
+            text-transform: uppercase;
+        }
+
+        .badge-male { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+        .badge-female { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
+        .badge-long { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
+
+        .example-preview {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* Prompt Writing Guide Styles */
+        .guide-container {
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            padding-top: 24px;
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+
+        .guide-header {
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: #ffffff;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            user-select: none;
+        }
+
+        .guide-body {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            line-height: 1.5;
+        }
+
+        .guide-body.open {
+            max-height: 400px;
+            margin-top: 10px;
+        }
+
+        .guide-section-title {
+            color: #ffffff;
+            font-weight: 600;
+            margin-bottom: 2px;
+            font-size: 0.85rem;
+        }
+
+        .guide-list {
+            padding-left: 18px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>🎭 DramaBox</h1>
+        <div class="subtitle">Expressive TTS with Voice Cloning</div>
+        <div class="ltx-banner">
+            🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by 
+            <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>. 
+            <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS, 
+            trained on top of the LTX-2.3 audio branch under the LTX-2 Community License. 
+            Huge thanks to the Lightricks team for open-sourcing the base.
+        </div>
+    </header>
+
+    <main>
+        <!-- Left Panel: Form Inputs -->
+        <section class="panel">
+            <div class="panel-title">
+                <span>🪄</span> Voice Generator
+            </div>
+
+            <!-- Scene Prompt Input -->
+            <div class="form-group">
+                <div class="form-label">
+                    <span>Scene Prompt</span>
+                    <span class="label-info">Put speech in "quotes", directions outside</span>
+                </div>
+                <textarea 
+                    id="scene-prompt" 
+                    class="textarea-custom" 
+                    placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
+                ></textarea>
+            </div>
+
+            <!-- Voice Reference Uploader -->
+            <div class="form-group">
+                <div class="form-label">
+                    <span>Voice Reference (Optional)</span>
+                    <span>10+ seconds recommended</span>
+                </div>
+                
+                <div id="dropzone" class="upload-container">
+                    <span class="upload-icon">📤</span>
+                    <div class="upload-text">
+                        <strong>Click to upload</strong> or drag & drop<br>
+                        <span>Supports MP3, WAV, M4A, etc.</span>
+                    </div>
+                </div>
+                <input type="file" id="audio-file" class="hidden-input" accept="audio/*">
+            </div>
+
+            <!-- Inference Settings Accordion -->
+            <div>
+                <button type="button" class="accordion-btn" id="accordion-toggle">
+                    <span>⚙️ Advanced Settings</span>
+                    <span class="accordion-icon" id="accordion-arrow">▼</span>
+                </button>
+                
+                <div class="accordion-content" id="accordion-panel">
+                    <!-- CFG Scale -->
+                    <div class="slider-group">
+                        <div class="slider-header">
+                            <span>CFG Scale</span>
+                            <span class="slider-val" id="val-cfg">2.5</span>
+                        </div>
+                        <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
+                    </div>
+
+                    <!-- STG Scale -->
+                    <div class="slider-group">
+                        <div class="slider-header">
+                            <span>STG Scale</span>
+                            <span class="slider-val" id="val-stg">1.5</span>
+                        </div>
+                        <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
+                    </div>
+
+                    <!-- Duration Multiplier -->
+                    <div class="slider-group">
+                        <div class="slider-header">
+                            <span>Duration Multiplier</span>
+                            <span class="slider-val" id="val-dur">1.10</span>
+                        </div>
+                        <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
+                    </div>
+
+                    <!-- Target Duration -->
+                    <div class="slider-group">
+                        <div class="slider-header">
+                            <span>Target Duration (s) — 0 = Auto</span>
+                            <span class="slider-val" id="val-gendur">0.0</span>
+                        </div>
+                        <input type="range" id="gendur" min="0.0" max="60.0" step="1.0" value="0.0">
+                    </div>
+
+                    <!-- Reference Duration -->
+                    <div class="slider-group">
+                        <div class="slider-header">
+                            <span>Reference Duration (s)</span>
+                            <span class="slider-val" id="val-refdur">10.0</span>
+                        </div>
+                        <input type="range" id="refdur" min="3.0" max="30.0" step="1.0" value="10.0">
+                    </div>
+
+                    <!-- Seed Input -->
+                    <div class="form-group">
+                        <span class="form-label">Generation Seed</span>
+                        <div class="seed-input-container">
+                            <input type="number" id="seed" class="input-number" value="42">
+                            <button type="button" id="btn-random-seed" class="btn-icon" title="Randomize Seed">🎲</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Generate Button -->
+            <button id="btn-generate" class="btn-primary">
+                <span>⚡</span> Generate Speech
+            </button>
+        </section>
+
+        <!-- Right Panel: Output & Examples -->
+        <section class="panel">
+            <div class="panel-title">
+                <span>🔊</span> Output Room
+            </div>
+
+            <!-- Status Indicator -->
+            <div id="status-box" class="status-container">
+                <div class="spinner"></div>
+                <span id="status-text">Connecting to DramaBox engine...</span>
+            </div>
+
+            <!-- Output Container -->
+            <div class="output-card">
+                <audio id="audio-element" style="display:none;"></audio>
+                
+                <!-- Empty State -->
+                <div id="output-empty-state" class="output-empty">
+                    <span class="output-empty-state-icon" style="font-size: 3rem;">🎛️</span>
+                    <p>Enter a prompt and hit generate to voice your script</p>
+                </div>
+
+                <!-- Custom Elegant Audio Player (Initially hidden) -->
+                <div id="custom-player" class="custom-player" style="display: none;">
+                    <div class="visualizer-container">
+                        <div class="visualizer-wave">
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                            <span class="wave-bar"></span>
+                        </div>
+                    </div>
+                    
+                    <div class="player-controls">
+                        <button type="button" id="player-play" class="play-btn">▶</button>
+                        <div class="time-slider-container">
+                            <span id="player-current-time" class="time-label">00:00</span>
+                            <input type="range" id="player-progress" min="0" max="100" value="0">
+                            <span id="player-duration" class="time-label">00:00</span>
+                        </div>
+                    </div>
+
+                    <div class="extra-player-controls">
+                        <!-- Volume -->
+                        <div class="volume-container">
+                            <span class="volume-icon">🔊</span>
+                            <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
+                        </div>
+
+                        <!-- Speed Controls -->
+                        <div class="speed-control">
+                            <button type="button" class="speed-btn" data-speed="0.8">0.8x</button>
+                            <button type="button" class="speed-btn active" data-speed="1.0">1.0x</button>
+                            <button type="button" class="speed-btn" data-speed="1.2">1.2x</button>
+                            <button type="button" class="speed-btn" data-speed="1.5">1.5x</button>
+                        </div>
+
+                        <!-- Download Link -->
+                        <a id="player-download" class="btn-download" href="#" download="dramabox_voice.wav">
+                            <span>📥</span> Download
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Example Section -->
+            <div class="examples-section">
+                <div class="examples-title">
+                    <span>🎬</span> Quick Demos
+                </div>
+                <div class="examples-list" id="examples-container">
+                    <!-- Loaded dynamically in JavaScript -->
+                </div>
+            </div>
+
+            <!-- Prompt Writing Guide -->
+            <div class="guide-container">
+                <div class="guide-header" id="guide-toggle">
+                    <span>📖 Prompt Writing Guide</span>
+                    <span class="accordion-icon" id="guide-arrow">▼</span>
+                </div>
+                
+                <div class="guide-body" id="guide-body">
+                    <div>
+                        <div class="guide-section-title">Structure Pattern</div>
+                        <p><code>&lt;speaker description&gt;, "&lt;dialogue&gt;" &lt;action&gt; "&lt;more dialogue&gt;"</code></p>
+                    </div>
+                    <div>
+                        <div class="guide-section-title">Inside Double Quotes (Spoken)</div>
+                        <ul class="guide-list">
+                            <li>Standard speech dialogue: <code>"Hello, how are you today?"</code></li>
+                            <li>Phonetic sounds and laughs: <code>"Hahaha"</code>, <code>"Hehehe"</code>, <code>"Mmmmm"</code>, <code>"Ugh"</code>, <code>"Argh"</code></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <div class="guide-section-title">Outside Double Quotes (Stage Directions)</div>
+                        <ul class="guide-list">
+                            <li>Physical movements and breaths: <code>She sighs deeply.</code>, <code>He gulps nervously.</code>, <code>A long pause.</code></li>
+                            <li>Voice adjustments: <code>Her voice cracks.</code>, <code>He clears his throat.</code></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <div class="guide-section-title">Common Pitfalls</div>
+                        <p>Avoid putting explicit words like <i>Sigh</i>, <i>Cough</i>, or <i>Gasp</i> inside quotes. The model will literally pronounce them. Put them outside quotes as directions!</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Connect Gradio Client via Module Script -->
+    <script type="module">
+        import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+        // Examples Dataset
+        const EXAMPLES = [
+            {
+                name: "Villain monologue",
+                gender: "male",
+                badge: "Male voice",
+                voice: "/assets/voices/male_harvey_keitel.mp3",
+                prompt: 'A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing." His voice rises with fury, "Kneel, or be destroyed where you stand!"',
+                duration: 0.0
+            },
+            {
+                name: "Talk-show host wheeze-laugh",
+                gender: "male",
+                badge: "Wheeze laugh",
+                voice: "/assets/voices/male_conan.mp3",
+                prompt: 'A talk show host gasps with shock, "No! You did NOT just say that!" He bursts into uncontrollable laughter, "Hahaha! Oh my god, oh my god!" He wheezes, "I cannot, I literally cannot breathe right now!"',
+                duration: 0.0
+            },
+            {
+                name: "Tender goodnight whisper",
+                gender: "female",
+                badge: "Whisper",
+                voice: "/assets/voices/female_shadowheart.wav",
+                prompt: 'A woman speaks tenderly, "It has been a long day, my love." She whispers, "Close your eyes. I am right here." She hums quietly, "Mmmm-mmm. Sleep now."',
+                duration: 0.0
+            },
+            {
+                name: "Old-school radio anchor",
+                gender: "male",
+                badge: "Anchor",
+                voice: "/assets/voices/male_old_movie.wav",
+                prompt: 'A radio host clears his throat, "Excuse me, pardon that." He settles into a warm, professional tone, "Good evening everyone, and welcome back to the show. We have got a wonderful lineup tonight."',
+                duration: 0.0
+            },
+            {
+                name: "Catgirl uncontrollable giggling",
+                gender: "female",
+                badge: "Giggling",
+                voice: "/assets/voices/female_american.wav",
+                prompt: 'A playful girl already mid-giggle, "Hehehe, oh my gosh you should see your face!" She gasps for air between giggles, "Oh my, hehe, oh my, I cannot stop!" She tries to compose herself, "Ahhhhh okay okay okay, I will stop, I promise."',
+                duration: 0.0
+            },
+            {
+                name: "Hero stammering courage",
+                gender: "male",
+                badge: "Heroic",
+                voice: "/assets/voices/male_arnie.mp3",
+                prompt: 'A young warrior speaks with a trembling voice, "I... I do not know if I can do this." He takes a shaky breath, "But someone has to try." His voice steadies with growing fire, "No more running. I WILL fight!"',
+                duration: 0.0
+            },
+            {
+                name: "Exhausted dad, fraying patience",
+                gender: "male",
+                badge: "Frustrated",
+                voice: "/assets/voices/male_petergriffin.wav",
+                prompt: 'An exhausted father speaks with fraying patience, "Sweetie, daddy is asking very nicely." He sighs deeply, "Ohhhh my goodness." He puts on an overly cheerful voice, "Hey buddy! Look at the shiny thing!" Then he laughs helplessly, "Hahaha, I am losing my mind."',
+                duration: 0.0
+            },
+            {
+                name: "Smug-confident announcer",
+                gender: "male",
+                badge: "Announcer",
+                voice: "/assets/voices/male_samuel_j.mp3",
+                prompt: 'A confident announcer speaks proudly, "And now, the moment you have all been waiting for." He chuckles knowingly, "Heheh, trust me, this one is going to blow you away."',
+                duration: 0.0
+            },
+            {
+                name: "30s • Villain soliloquy",
+                gender: "male",
+                badge: "30s clip",
+                voice: "/assets/voices/male_harvey_keitel.mp3",
+                prompt: 'A shadowy villain stands at the edge of his throne room, gazing into the dark. He speaks with slow, measured menace, "So, the little hero has come to finish me, has he?" He chuckles low and humourless, "Hehe, oh how delightfully predictable you mortals are." His voice hardens into ice, "I have lived ten thousand years. I have seen empires rise and fall like the tide." He scoffs, "And you think you, with your borrowed sword and your trembling hands, will be the one to end me?" A long pause. He whispers, almost tenderly, "I will give you a single chance to turn around and walk away." Then his voice rises with crushing finality, "Choose, child. The door behind you, or the grave at your feet."',
+                duration: 30.0
+            },
+            {
+                name: "30s • Late-night radio monologue",
+                gender: "male",
+                badge: "30s clip",
+                voice: "/assets/voices/male_old_movie.wav",
+                prompt: 'A radio host clears his throat softly into the microphone in the late hours of the night. He settles into a warm, smoky tone, "Good evening, dear listeners, and welcome back to the After Hours Hour." He sighs contentedly, "Mmm, what a night it has been. The rain is tapping at my window like an old friend." He chuckles softly, "Heheh, you know the kind of friend, the one that always shows up unannounced." His voice drops, intimate, "I want you to lean back, wherever you are. Pour yourself something warm." He pauses, breath audible, "Tonight we are going to talk about love, and loss, and the songs that hold us together." A smile in his voice, "And I have got the perfect record cued up to start us off, so stay right where you are."',
+                duration: 30.0
+            },
+            {
+                name: "30s • Bedtime story",
+                gender: "female",
+                badge: "30s clip",
+                voice: "/assets/voices/female_shadowheart.wav",
+                prompt: 'A mother sits at the edge of her child\'s bed in the dim glow of a single lamp. She speaks softly, "Once upon a time, in a kingdom by the sea, there lived a small dragon named Pip." She lowers her voice playfully, "Now Pip was not like the other dragons. Pip was afraid of fire." She smiles warmly, "Mmm, can you imagine? A dragon who was afraid of his own breath?" A gentle pause, "But Pip had something the other dragons did not have. Pip had courage in his heart." She hums softly, "Mmmmm. And one cold winter night, when the village below ran out of warmth..." Her voice drops to a whisper, "Pip closed his eyes, took a deep, deep breath, and remembered who he was."',
+                duration: 30.0
+            }
+        ];
+
+        let client = null;
+        let selectedAudioFile = null;
+        let selectedAudioFilename = "";
+
+        // Elements
+        const statusBox = document.getElementById("status-box");
+        const statusText = document.getElementById("status-text");
+        const btnGenerate = document.getElementById("btn-generate");
+        
+        const scenePrompt = document.getElementById("scene-prompt");
+        const dropzone = document.getElementById("dropzone");
+        const audioFileInput = document.getElementById("audio-file");
+        
+        // Advanced Accordion
+        const accordionToggle = document.getElementById("accordion-toggle");
+        const accordionPanel = document.getElementById("accordion-panel");
+        const accordionArrow = document.getElementById("accordion-arrow");
+        
+        // Sliders
+        const sliderCfg = document.getElementById("cfg");
+        const valCfg = document.getElementById("val-cfg");
+        const sliderStg = document.getElementById("stg");
+        const valStg = document.getElementById("val-stg");
+        const sliderDur = document.getElementById("dur");
+        const valDur = document.getElementById("val-dur");
+        const sliderGenDur = document.getElementById("gendur");
+        const valGenDur = document.getElementById("val-gendur");
+        const sliderRefDur = document.getElementById("refdur");
+        const valRefDur = document.getElementById("val-refdur");
+        
+        const inputSeed = document.getElementById("seed");
+        const btnRandomSeed = document.getElementById("btn-random-seed");
+
+        // Player Elements
+        const audioElement = document.getElementById("audio-element");
+        const outputEmptyState = document.getElementById("output-empty-state");
+        const customPlayer = document.getElementById("custom-player");
+        const playerPlay = document.getElementById("player-play");
+        const playerProgress = document.getElementById("player-progress");
+        const playerCurrentTime = document.getElementById("player-current-time");
+        const playerDuration = document.getElementById("player-duration");
+        const playerVolume = document.getElementById("player-volume");
+        const playerDownload = document.getElementById("player-download");
+        const speedButtons = document.querySelectorAll(".speed-btn");
+
+        // Guide Accordion
+        const guideToggle = document.getElementById("guide-toggle");
+        const guideBody = document.getElementById("guide-body");
+        const guideArrow = document.getElementById("guide-arrow");
+
+        // Status Updater
+        function updateStatus(message, type = "info", showLoading = true) {
+            statusBox.style.display = "flex";
+            statusBox.className = `status-container ${type}`;
+            statusText.innerText = message;
+            
+            const spinner = statusBox.querySelector(".spinner");
+            if (showLoading) {
+                spinner.style.display = "block";
+            } else {
+                spinner.style.display = "none";
+            }
+        }
+
+        function hideStatus() {
+            statusBox.style.display = "none";
+        }
+
+        // Initialize Gradio JS Client
+        async function connectClient() {
+            try {
+                updateStatus("Connecting to DramaBox server...", "info");
+                client = await Client.connect(window.location.origin);
+                updateStatus("Engine connected and ready", "success", false);
+                setTimeout(hideStatus, 3000);
+            } catch (err) {
+                console.error(err);
+                updateStatus("Engine connection failed. Please reload.", "error", false);
+            }
+        }
+
+        // Accordion Management
+        accordionToggle.addEventListener("click", () => {
+            const isOpen = accordionPanel.classList.toggle("open");
+            accordionArrow.innerText = isOpen ? "▲" : "▼";
+        });
+
+        guideToggle.addEventListener("click", () => {
+            const isOpen = guideBody.classList.toggle("open");
+            guideArrow.innerText = isOpen ? "▲" : "▼";
+        });
+
+        // Sliders Realtime Output updates
+        sliderCfg.addEventListener("input", (e) => valCfg.innerText = parseFloat(e.target.value).toFixed(1));
+        sliderStg.addEventListener("input", (e) => valStg.innerText = parseFloat(e.target.value).toFixed(1));
+        sliderDur.addEventListener("input", (e) => valDur.innerText = parseFloat(e.target.value).toFixed(2));
+        sliderGenDur.addEventListener("input", (e) => valGenDur.innerText = parseFloat(e.target.value).toFixed(1));
+        sliderRefDur.addEventListener("input", (e) => valRefDur.innerText = parseFloat(e.target.value).toFixed(1));
+
+        // Seed Randomizer
+        btnRandomSeed.addEventListener("click", () => {
+            const randomSeed = Math.floor(Math.random() * 99999999);
+            inputSeed.value = randomSeed;
+            btnRandomSeed.style.transform = "rotate(360deg)";
+            setTimeout(() => btnRandomSeed.style.transform = "none", 400);
+        });
+
+        // Uploader Handlers
+        dropzone.addEventListener("click", () => audioFileInput.click());
+        
+        dropzone.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            dropzone.classList.add("dragover");
+        });
+        
+        dropzone.addEventListener("dragleave", () => {
+            dropzone.classList.remove("dragover");
+        });
+        
+        dropzone.addEventListener("drop", (e) => {
+            e.preventDefault();
+            dropzone.classList.remove("dragover");
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleUploadedFile(files[0]);
+            }
+        });
+
+        audioFileInput.addEventListener("change", (e) => {
+            if (e.target.files.length > 0) {
+                handleUploadedFile(e.target.files[0]);
+            }
+        });
+
+        function handleUploadedFile(file) {
+            selectedAudioFile = file;
+            selectedAudioFilename = file.name;
+            renderUploadedUI(file.name);
+        }
+
+        function renderUploadedUI(filename) {
+            dropzone.innerHTML = `
+                <div class="uploaded-file-info">
+                    <div class="uploaded-file-details">
+                        <span>🎵</span>
+                        <span style="word-break: break-all; text-align: left;">${filename}</span>
+                    </div>
+                    <button type="button" class="clear-upload" id="btn-clear-upload" title="Remove voice file">✕</button>
+                </div>
+            `;
+            document.getElementById("btn-clear-upload").addEventListener("click", (e) => {
+                e.stopPropagation();
+                clearUploadedFile();
+            });
+        }
+
+        function clearUploadedFile() {
+            selectedAudioFile = null;
+            selectedAudioFilename = "";
+            audioFileInput.value = "";
+            dropzone.innerHTML = `
+                <span class="upload-icon">📤</span>
+                <div class="upload-text">
+                    <strong>Click to upload</strong> or drag & drop<br>
+                    <span>Supports MP3, WAV, M4A, etc.</span>
+                </div>
+            `;
+        }
+
+        // Fetch Example voice and load it into file variable
+        async function loadExampleVoice(voicePath, originalFilename) {
+            try {
+                updateStatus("Cloning example voice reference...", "info");
+                const response = await fetch(voicePath);
+                if (!response.ok) throw new Error("Failed to fetch audio resource.");
+                
+                const blob = await response.blob();
+                selectedAudioFile = new File([blob], originalFilename, { type: blob.type || "audio/mpeg" });
+                selectedAudioFilename = originalFilename;
+                
+                renderUploadedUI(originalFilename);
+                updateStatus("Voice reference loaded successfully", "success", false);
+                setTimeout(hideStatus, 2000);
+            } catch (err) {
+                console.error(err);
+                updateStatus("Could not fetch the example voice reference.", "error", false);
+            }
+        }
+
+        // Populate Examples in dynamic Grid
+        const examplesContainer = document.getElementById("examples-container");
+        EXAMPLES.forEach((ex, idx) => {
+            const item = document.createElement("div");
+            item.className = "example-item";
+            
+            const isLong = ex.name.startsWith("30s");
+            const badgeHtml = `
+                <span class="badge ${ex.gender === "male" ? "badge-male" : "badge-female"}">${ex.gender}</span>
+                ${isLong ? '<span class="badge badge-long">30s scenes</span>' : ''}
+            `;
+
+            item.innerHTML = `
+                <div class="example-header">
+                    <span class="example-name">${ex.name}</span>
+                    <div class="example-badges">${badgeHtml}</div>
+                </div>
+                <div class="example-preview">${ex.prompt}</div>
+            `;
+
+            item.addEventListener("click", () => {
+                // Highlight example
+                document.querySelectorAll(".example-item").forEach(el => el.classList.remove("active"));
+                item.classList.add("active");
+
+                // Populate Fields
+                scenePrompt.value = ex.prompt;
+                sliderGenDur.value = ex.duration;
+                valGenDur.innerText = ex.duration.toFixed(1);
+
+                // Extrapolate simple voice name
+                const filename = ex.voice.substring(ex.voice.lastIndexOf('/') + 1);
+                loadExampleVoice(ex.voice, filename);
+            });
+
+            examplesContainer.appendChild(item);
+        });
+
+        // HTML5 Audio Custom Player controls
+        let isAudioLoaded = false;
+        
+        function setupAudioElement(src) {
+            audioElement.src = src;
+            audioElement.load();
+            isAudioLoaded = true;
+            
+            outputEmptyState.style.display = "none";
+            customPlayer.style.display = "flex";
+            
+            // Set Player Initial state
+            playerPlay.innerText = "▶";
+            customPlayer.classList.remove("playing");
+            playerProgress.value = 0;
+            
+            // Download button URL update
+            playerDownload.href = src;
+        }
+
+        audioElement.addEventListener("loadedmetadata", () => {
+            playerDuration.innerText = formatTime(audioElement.duration);
+        });
+
+        audioElement.addEventListener("timeupdate", () => {
+            if (audioElement.duration) {
+                const percent = (audioElement.currentTime / audioElement.duration) * 100;
+                playerProgress.value = percent;
+                playerCurrentTime.innerText = formatTime(audioElement.currentTime);
+            }
+        });
+
+        audioElement.addEventListener("ended", () => {
+            playerPlay.innerText = "▶";
+            customPlayer.classList.remove("playing");
+            playerProgress.value = 0;
+            playerCurrentTime.innerText = "00:00";
+        });
+
+        playerPlay.addEventListener("click", () => {
+            if (!isAudioLoaded) return;
+            
+            if (audioElement.paused) {
+                audioElement.play();
+                playerPlay.innerText = "⏸";
+                customPlayer.classList.add("playing");
+            } else {
+                audioElement.pause();
+                playerPlay.innerText = "▶";
+                customPlayer.classList.remove("playing");
+            }
+        });
+
+        playerProgress.addEventListener("input", (e) => {
+            if (!isAudioLoaded || !audioElement.duration) return;
+            const newTime = (e.target.value / 100) * audioElement.duration;
+            audioElement.currentTime = newTime;
+        });
+
+        playerVolume.addEventListener("input", (e) => {
+            audioElement.volume = e.target.value;
+        });
+
+        speedButtons.forEach(btn => {
+            btn.addEventListener("click", () => {
+                speedButtons.forEach(b => b.classList.remove("active"));
+                btn.classList.add("active");
+                audioElement.playbackRate = parseFloat(btn.dataset.speed);
+            });
+        });
+
+        function formatTime(secs) {
+            const minutes = Math.floor(secs / 60);
+            const seconds = Math.floor(secs % 60);
+            const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+            const returnedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+            return `${returnedMinutes}:${returnedSeconds}`;
+        }
+
+        // Action Trigger: Generator Click
+        btnGenerate.addEventListener("click", async () => {
+            const promptVal = scenePrompt.value.trim();
+            if (!promptVal) {
+                updateStatus("Please write a scene prompt first.", "error", false);
+                return;
+            }
+
+            if (!client) {
+                updateStatus("DramaBox engine is still connecting, please wait.", "error", false);
+                return;
+            }
+
+            // Gather values
+            const cfg = parseFloat(sliderCfg.value);
+            const stg = parseFloat(sliderStg.value);
+            const durMult = parseFloat(sliderDur.value);
+            const genDur = parseFloat(sliderGenDur.value);
+            const refDur = parseFloat(sliderRefDur.value);
+            const seed = parseInt(inputSeed.value);
+
+            try {
+                // UI Disable State
+                btnGenerate.disabled = true;
+                btnGenerate.innerHTML = `<div class="spinner"></div> Generating Voice...`;
+                updateStatus("Preparing models & queue slot...", "info");
+
+                let uploadedFileData = null;
+                if (selectedAudioFile) {
+                    uploadedFileData = handle_file(selectedAudioFile);
+                }
+
+                // Call Gradio queued api
+                const predictResponse = await client.predict("/generate_audio", {
+                    prompt: promptVal,
+                    audio_ref: uploadedFileData,
+                    cfg: cfg,
+                    stg: stg,
+                    dur_mult: durMult,
+                    gen_dur: genDur,
+                    ref_dur: refDur,
+                    seed: seed
+                });
+
+                if (predictResponse && predictResponse.data && predictResponse.data.length > 0) {
+                    const audioUrl = predictResponse.data[0].url;
+                    setupAudioElement(audioUrl);
+                    updateStatus("Speech generation complete!", "success", false);
+                    setTimeout(hideStatus, 3000);
+                } else {
+                    throw new Error("No output returned from the generation server.");
+                }
+
+            } catch (err) {
+                console.error(err);
+                updateStatus(err.message || "Speech generation failed. Please try again.", "error", false);
+            } finally {
+                btnGenerate.disabled = false;
+                btnGenerate.innerHTML = `<span>⚡</span> Generate Speech`;
+            }
+        });
+
+        // Auto Connect on Load
+        connectClient();
+    </script>
+</body>
+</html>