Hugging Face's logo

Spaces:
ResembleAI
/
Dramabox
Running on Zero

App Files Community
3
Dramabox / index.html
akhaliq's picture
akhaliq HF Staff
Migrate DramaBox to gradio.Server with a custom HTML/CSS/JS frontend
00b19ca
raw
history blame
59.3 kB
<!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>