Spaces:
Running on Zero
Running on Zero
| <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="#07090e"> | |
| <!-- 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: #05060a; | |
| --panel-bg: rgba(11, 14, 23, 0.75); | |
| --sidebar-bg: #0b0e17; | |
| --panel-border: rgba(60, 208, 162, 0.08); | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --accent-mint: #3cd0a2; | |
| --accent-mint-hover: #5fe2b9; | |
| --accent-mint-glow: rgba(60, 208, 162, 0.2); | |
| --accent-dark-slate: #1e293b; | |
| --accent-green: #10b981; | |
| --radius-lg: 18px; | |
| --radius-md: 12px; | |
| --radius-sm: 8px; | |
| --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.5; | |
| overflow: hidden; /* Sidebar controls scrolling */ | |
| position: relative; | |
| } | |
| /* Ambient glowing circles using Resemble AI branding colors */ | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| top: -10%; | |
| left: 10%; | |
| width: 45%; | |
| height: 45%; | |
| background: radial-gradient(circle, var(--accent-mint-glow) 0%, transparent 60%); | |
| z-index: -1; | |
| filter: blur(80px); | |
| pointer-events: none; | |
| opacity: 0.7; | |
| } | |
| body::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5%; | |
| right: 5%; | |
| width: 40%; | |
| height: 40%; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 60%); | |
| z-index: -1; | |
| filter: blur(80px); | |
| pointer-events: none; | |
| opacity: 0.5; | |
| } | |
| /* Base Page Layout */ | |
| .app-layout { | |
| display: flex; | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* ── Collapsible Sidebar ── */ | |
| .sidebar { | |
| width: 360px; | |
| height: 100%; | |
| background-color: var(--sidebar-bg); | |
| border-right: 1px solid var(--panel-border); | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| z-index: 100; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25); | |
| flex-shrink: 0; | |
| } | |
| .sidebar.collapsed { | |
| margin-left: -360px; | |
| transform: translateX(-100%); | |
| } | |
| .sidebar-header { | |
| padding: 20px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| .sidebar-title { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: #ffffff; | |
| letter-spacing: 0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .sidebar-close-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4px; | |
| } | |
| .sidebar-close-btn:hover { | |
| color: #ffffff; | |
| transform: scale(1.1); | |
| } | |
| .sidebar-scrollable { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| /* Scrollbar styles for sidebar */ | |
| .sidebar-scrollable::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| .sidebar-scrollable::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .sidebar-scrollable::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 3px; | |
| } | |
| .sidebar-scrollable::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| /* ── Main Workspace Area ── */ | |
| .content-area { | |
| flex: 1; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| position: relative; | |
| transition: var(--transition); | |
| } | |
| /* Main Scrollable wrapper */ | |
| .content-container { | |
| width: 100%; | |
| max-width: 840px; | |
| margin: 0 auto; | |
| padding: 24px 20px 60px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| header { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 20px 0 10px 0; | |
| gap: 12px; | |
| position: relative; | |
| } | |
| .logo-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo-emoji { | |
| font-size: 2.2rem; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| h1 { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 2.4rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #ffffff 40%, var(--accent-mint) 80%, #76ecd4 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: -0.5px; | |
| } | |
| .brand-badge { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| background: rgba(60, 208, 162, 0.1); | |
| color: var(--accent-mint); | |
| border: 1px solid rgba(60, 208, 162, 0.2); | |
| padding: 3px 8px; | |
| border-radius: 30px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .subtitle { | |
| font-size: 0.95rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| } | |
| .ltx-banner { | |
| background: rgba(22, 28, 45, 0.3); | |
| border: 1px solid var(--panel-border); | |
| border-left: 3px solid var(--accent-mint); | |
| border-radius: var(--radius-md); | |
| padding: 12px 18px; | |
| color: #cbd5e1; | |
| font-size: 0.82rem; | |
| line-height: 1.5; | |
| text-align: left; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| } | |
| .ltx-banner a { | |
| color: var(--accent-mint); | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .ltx-banner a:hover { | |
| color: #ffffff; | |
| text-decoration: underline; | |
| } | |
| /* Sliding Toggle Controls Button */ | |
| .btn-toggle-sidebar { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--panel-border); | |
| color: #ffffff; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| padding: 10px 16px; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: var(--transition); | |
| outline: none; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .btn-toggle-sidebar:hover { | |
| background: rgba(60, 208, 162, 0.05); | |
| border-color: var(--accent-mint); | |
| transform: translateY(-1px); | |
| } | |
| /* ── Modern Script Panels (Main Area) ── */ | |
| .main-panel { | |
| background: var(--panel-bg); | |
| border: 1px solid var(--panel-border); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| transition: var(--transition); | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .form-label { | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--text-secondary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .label-badge { | |
| font-size: 0.75rem; | |
| color: var(--accent-mint); | |
| text-transform: none; | |
| font-weight: 400; | |
| letter-spacing: 0; | |
| } | |
| .textarea-custom { | |
| width: 100%; | |
| background: rgba(5, 7, 12, 0.8); | |
| border: 1px solid var(--panel-border); | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| resize: vertical; | |
| min-height: 140px; | |
| outline: none; | |
| transition: var(--transition); | |
| } | |
| .textarea-custom:focus { | |
| border-color: var(--accent-mint); | |
| box-shadow: 0 0 15px var(--accent-mint-glow); | |
| background: rgba(5, 7, 12, 0.95); | |
| } | |
| /* Reference Uploader Inside Sidebar */ | |
| .upload-zone { | |
| border: 2px dashed rgba(60, 208, 162, 0.2); | |
| border-radius: var(--radius-md); | |
| padding: 18px; | |
| text-align: center; | |
| cursor: pointer; | |
| background: rgba(60, 208, 162, 0.01); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| transition: var(--transition); | |
| min-height: 90px; | |
| justify-content: center; | |
| } | |
| .upload-zone:hover, .upload-zone.dragover { | |
| border-color: var(--accent-mint); | |
| background: rgba(60, 208, 162, 0.04); | |
| } | |
| .upload-icon { | |
| font-size: 1.6rem; | |
| color: var(--accent-mint); | |
| transition: var(--transition); | |
| } | |
| .upload-text { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| .upload-text strong { | |
| color: #ffffff; | |
| font-weight: 500; | |
| } | |
| .hidden-input { | |
| display: none ; | |
| } | |
| .file-capsule { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| background: rgba(60, 208, 162, 0.06); | |
| border: 1px solid rgba(60, 208, 162, 0.2); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-md); | |
| width: 100%; | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .btn-clear { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| padding: 2px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .btn-clear:hover { | |
| color: #ffffff; | |
| transform: scale(1.1); | |
| } | |
| /* Modernized Sidebar Dashboard Items */ | |
| .settings-block { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| background: rgba(255, 255, 255, 0.01); | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| padding: 16px; | |
| border-radius: var(--radius-md); | |
| } | |
| .settings-block-title { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| color: #ffffff; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.03); | |
| padding-bottom: 8px; | |
| margin-bottom: 4px; | |
| } | |
| .slider-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .slider-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .slider-value { | |
| color: var(--accent-mint); | |
| font-weight: 700; | |
| font-family: monospace; | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 2px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background: var(--accent-mint); | |
| box-shadow: 0 0 8px var(--accent-mint-glow); | |
| transition: var(--transition); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| background: #ffffff; | |
| } | |
| /* Seed Elements */ | |
| .seed-row { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .input-seed { | |
| flex: 1; | |
| background: rgba(5, 7, 12, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: var(--radius-sm); | |
| padding: 8px 12px; | |
| color: var(--text-primary); | |
| font-family: monospace; | |
| outline: none; | |
| font-size: 0.85rem; | |
| transition: var(--transition); | |
| height: 38px; | |
| } | |
| .input-seed:focus { | |
| border-color: var(--accent-mint); | |
| } | |
| .btn-seed-random { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| height: 38px; | |
| width: 38px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| } | |
| .btn-seed-random:hover { | |
| background: rgba(60, 208, 162, 0.05); | |
| border-color: var(--accent-mint); | |
| } | |
| /* Glowing Resemble Green Button */ | |
| .btn-generate { | |
| background: linear-gradient(135deg, var(--accent-mint) 0%, #2ac596 100%); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| color: #07090e; | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 1.05rem; | |
| font-weight: 800; | |
| padding: 14px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| box-shadow: 0 6px 20px var(--accent-mint-glow); | |
| min-height: 48px; | |
| letter-spacing: 0.3px; | |
| } | |
| .btn-generate:hover:not(:disabled) { | |
| transform: translateY(-1.5px); | |
| box-shadow: 0 10px 25px rgba(60, 208, 162, 0.4); | |
| background: linear-gradient(135deg, var(--accent-mint-hover) 0%, var(--accent-mint) 100%); | |
| } | |
| .btn-generate:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .btn-generate:disabled { | |
| background: #161a24; | |
| color: #3b4255; | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| } | |
| /* ── Output Lounge (Visual Player Deck) ── */ | |
| .output-wrapper { | |
| background: rgba(5, 7, 12, 0.5); | |
| border: 1px solid var(--panel-border); | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 140px; | |
| position: relative; | |
| } | |
| .empty-placeholder { | |
| color: var(--text-secondary); | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .empty-icon { | |
| font-size: 2.2rem; | |
| opacity: 0.4; | |
| color: var(--accent-mint); | |
| } | |
| .empty-text { | |
| font-size: 0.85rem; | |
| } | |
| /* Glowing Custom Player Layout */ | |
| .audio-player { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .visualizer-box { | |
| width: 100%; | |
| height: 44px; | |
| background: linear-gradient(90deg, rgba(60, 208, 162, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid rgba(60, 208, 162, 0.04); | |
| overflow: hidden; | |
| } | |
| .visualizer-wave { | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| height: 100%; | |
| } | |
| .wave-bar { | |
| width: 3px; | |
| height: 5px; | |
| background: var(--accent-mint); | |
| border-radius: 1px; | |
| transition: var(--transition); | |
| } | |
| .audio-player.playing .wave-bar { | |
| animation: playWave 1.2s infinite ease-in-out alternate; | |
| } | |
| @keyframes playWave { | |
| 0% { height: 5px; } | |
| 100% { height: 28px; } | |
| } | |
| .wave-bar:nth-child(2n) { background: #5fe2b9; 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-mint); animation-delay: 0.6s; } | |
| .player-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| width: 100%; | |
| } | |
| .btn-play { | |
| background: #ffffff; | |
| border: none; | |
| color: var(--bg-color); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15); | |
| flex-shrink: 0; | |
| } | |
| .btn-play:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 6px 18px rgba(255, 255, 255, 0.3); | |
| } | |
| .progress-box { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .time-lbl { | |
| font-size: 0.72rem; | |
| color: var(--text-secondary); | |
| font-family: monospace; | |
| min-width: 32px; | |
| } | |
| /* Secondary progress slider bar track styling */ | |
| .progress-box input[type="range"]::-webkit-slider-thumb { | |
| background: #ffffff; | |
| box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); | |
| } | |
| .deck-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| border-top: 1px solid rgba(255, 255, 255, 0.04); | |
| padding-top: 12px; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .vol-slider { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| max-width: 90px; | |
| flex-shrink: 0; | |
| } | |
| .vol-icon { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| .vol-slider input[type="range"]::-webkit-slider-thumb { | |
| background: var(--text-secondary); | |
| } | |
| .speed-deck { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .btn-speed { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: 6px; | |
| color: var(--text-secondary); | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| padding: 3px 6px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-speed.active, .btn-speed:hover { | |
| background: rgba(60, 208, 162, 0.06); | |
| color: var(--accent-mint); | |
| border-color: rgba(60, 208, 162, 0.2); | |
| } | |
| .btn-download-wav { | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--panel-border); | |
| border-radius: var(--radius-sm); | |
| color: #ffffff; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| padding: 6px 12px; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: var(--transition); | |
| } | |
| .btn-download-wav:hover { | |
| background: var(--accent-mint); | |
| color: #07090e; | |
| border-color: var(--accent-mint); | |
| transform: translateY(-1px); | |
| } | |
| @media (max-width: 480px) { | |
| .deck-footer { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 12px; | |
| } | |
| .vol-slider { | |
| max-width: 100%; | |
| } | |
| .speed-deck { | |
| justify-content: space-between; | |
| } | |
| .btn-download-wav { | |
| justify-content: center; | |
| } | |
| } | |
| /* Synchronizer Status Alert */ | |
| .status-alert { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| padding: 10px 14px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid transparent; | |
| display: none; | |
| margin-bottom: 12px; | |
| width: 100%; | |
| } | |
| .status-alert.success { | |
| background: rgba(16, 185, 129, 0.04); | |
| border-color: rgba(16, 185, 129, 0.15); | |
| color: var(--accent-green); | |
| } | |
| .status-alert.info { | |
| background: rgba(60, 208, 162, 0.04); | |
| border-color: rgba(60, 208, 162, 0.15); | |
| color: #8bead0; | |
| } | |
| .status-alert.error { | |
| background: rgba(239, 68, 68, 0.04); | |
| border-color: rgba(239, 68, 68, 0.15); | |
| color: #f87171; | |
| } | |
| .alert-spinner { | |
| width: 14px; | |
| height: 14px; | |
| 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); } | |
| } | |
| /* Demo deck scrollable inside sidebar */ | |
| .demo-capsules { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .demo-pill { | |
| background: rgba(255, 255, 255, 0.01); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: var(--radius-md); | |
| padding: 10px 14px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| text-align: left; | |
| } | |
| .demo-pill:hover { | |
| background: rgba(60, 208, 162, 0.02); | |
| border-color: rgba(60, 208, 162, 0.15); | |
| transform: translateX(2px); | |
| } | |
| .demo-pill.active { | |
| border-color: var(--accent-mint); | |
| background: rgba(60, 208, 162, 0.03); | |
| } | |
| .demo-pill-title { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: #ffffff; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 170px; | |
| } | |
| .pill-labels { | |
| display: flex; | |
| gap: 4px; | |
| flex-shrink: 0; | |
| } | |
| .pill-badge { | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| padding: 1px 5px; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| } | |
| .pill-badge-male { background: rgba(59, 130, 246, 0.08); color: #60a5fa; } | |
| .pill-badge-female { background: rgba(236, 72, 153, 0.08); color: #f472b6; } | |
| .pill-badge-long { background: rgba(139, 92, 246, 0.08); color: #c084fc; } | |
| /* Guide container inside sidebar */ | |
| .guide-header { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| color: #ffffff; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| user-select: none; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.03); | |
| padding-bottom: 8px; | |
| margin-bottom: 4px; | |
| } | |
| .guide-body { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| font-size: 0.78rem; | |
| color: var(--text-secondary); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| line-height: 1.55; | |
| } | |
| .guide-body.open { | |
| max-height: 380px; | |
| margin-top: 12px; | |
| } | |
| .guide-block-title { | |
| color: #ffffff; | |
| font-weight: 600; | |
| margin-bottom: 2px; | |
| font-size: 0.78rem; | |
| } | |
| .guide-list { | |
| padding-left: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| /* ── Sidebar backdrop overlay (mobile and smaller desktops) ── */ | |
| .sidebar-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| z-index: 90; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .sidebar-overlay.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| footer { | |
| margin-top: auto; | |
| text-align: center; | |
| padding: 30px 20px; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| border-top: 1px solid rgba(255, 255, 255, 0.03); | |
| } | |
| /* ── Mobile and Tablet Adaptations ── */ | |
| @media (max-width: 992px) { | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| z-index: 1000; | |
| } | |
| .sidebar.collapsed { | |
| margin-left: 0; | |
| transform: translateX(-100%); | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .logo-emoji { | |
| font-size: 1.8rem; | |
| } | |
| } | |
| @media (min-width: 993px) { | |
| .sidebar-close-btn { | |
| display: none; /* Only show toggle trigger on desktop */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-layout"> | |
| <!-- Left collapsing sidebar with configuration parameters & demos --> | |
| <aside id="app-sidebar" class="sidebar"> | |
| <div class="sidebar-header"> | |
| <span class="sidebar-title">🎛️ Control Deck</span> | |
| <button id="btn-close-sidebar" class="sidebar-close-btn" title="Close Panel">✕</button> | |
| </div> | |
| <div class="sidebar-scrollable"> | |
| <!-- Reference Audio Uploader --> | |
| <div class="form-group"> | |
| <span class="form-label">Voice Reference (Optional)</span> | |
| <div id="dropzone" class="upload-zone"> | |
| <span class="upload-icon">📤</span> | |
| <div class="upload-text"> | |
| <strong>Drop file</strong> or click to choose<br> | |
| <span>WAV, MP3, etc. (10s+)</span> | |
| </div> | |
| </div> | |
| <input type="file" id="audio-file" class="hidden-input" accept="audio/*"> | |
| </div> | |
| <!-- Settings Dashboard Parameters --> | |
| <div class="settings-block"> | |
| <div class="settings-block-title">Synthesis Parameters</div> | |
| <!-- CFG Scale --> | |
| <div class="slider-group"> | |
| <div class="slider-meta"> | |
| <span>CFG Scale</span> | |
| <span class="slider-value" 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-meta"> | |
| <span>STG Scale</span> | |
| <span class="slider-value" 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 Scale Factor --> | |
| <div class="slider-group"> | |
| <div class="slider-meta"> | |
| <span>Breathing Factor</span> | |
| <span class="slider-value" 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 Generation Time --> | |
| <div class="slider-group"> | |
| <div class="slider-meta"> | |
| <span>Fixed duration (s) - 0 = Auto</span> | |
| <span class="slider-value" 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 Window --> | |
| <div class="slider-group"> | |
| <div class="slider-meta"> | |
| <span>Reference Window (s)</span> | |
| <span class="slider-value" 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 Controls --> | |
| <div class="form-group"> | |
| <span class="form-label">Seed Value</span> | |
| <div class="seed-row"> | |
| <input type="number" id="seed" class="input-seed" value="42"> | |
| <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Examples Selector --> | |
| <div class="form-group"> | |
| <span class="form-label">Quick Demos</span> | |
| <div class="demo-capsules" id="examples-container"> | |
| <!-- Loaded dynamically --> | |
| </div> | |
| </div> | |
| <!-- Accordion Guide --> | |
| <div class="form-group"> | |
| <div class="guide-header" id="guide-toggle"> | |
| <span>📖 Prompt Guide</span> | |
| <span class="accordion-icon" id="guide-arrow">▼</span> | |
| </div> | |
| <div class="guide-body" id="guide-body"> | |
| <div> | |
| <div class="guide-block-title">Format Structure</div> | |
| <p><code><description>, "<dialogue>" <movement/breath> "<more dialogue>"</code></p> | |
| </div> | |
| <div> | |
| <div class="guide-block-title">Inside Quotes (Spoken)</div> | |
| <ul class="guide-list"> | |
| <li>Dialogue transcript: <code>"We are in position."</code></li> | |
| <li>Phonetic expressions: <code>"Hahaha"</code>, <code>"Mmmm"</code>, <code>"Ugh"</code>, <code>"Argh"</code></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="guide-block-title">Outside Quotes (Pacing)</div> | |
| <ul class="guide-list"> | |
| <li>Action details: <code>She sighs deeply.</code>, <code>A long pause.</code></li> | |
| <li>Tonal delivery: <code>His voice cracks.</code>, <code>He clears his throat.</code></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Sidebar backdrop overlay (mobile and smaller screen viewports) --> | |
| <div id="sidebar-overlay" class="sidebar-overlay"></div> | |
| <!-- Main workspace containing editing space and glowing outputs --> | |
| <div class="content-area"> | |
| <div class="content-container"> | |
| <header> | |
| <div class="logo-area"> | |
| <span class="logo-emoji">🎭</span> | |
| <h1>DramaBox</h1> | |
| <span class="brand-badge">Resemble.AI</span> | |
| </div> | |
| <div class="subtitle">Expressive TTS with Voice Cloning</div> | |
| <!-- Sliding Collapsible Trigger --> | |
| <button id="btn-toggle-sidebar" class="btn-toggle-sidebar" title="Toggle Dashboard Panel"> | |
| <span class="toggle-icon">🎛️</span> | |
| <span class="toggle-text">Show Control Deck & Demos</span> | |
| </button> | |
| </header> | |
| <!-- State Alerts (Connecting / Queuing states) --> | |
| <div id="status-box" class="status-alert"> | |
| <div class="alert-spinner"></div> | |
| <span id="status-text">Connecting to DramaBox API...</span> | |
| </div> | |
| <main class="main-panel"> | |
| <!-- Script Prompt Input --> | |
| <div class="form-group"> | |
| <div class="form-label"> | |
| <span>Script Prompt</span> | |
| <span class="label-badge">Double quotes for dialogue, standard text for style</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> | |
| <!-- Synthesize Trigger --> | |
| <button id="btn-generate" class="btn-generate"> | |
| <span>⚡</span> Generate Speech | |
| </button> | |
| <!-- Output Deck --> | |
| <div class="output-wrapper"> | |
| <audio id="audio-element" style="display:none;"></audio> | |
| <!-- Empty Placeholder --> | |
| <div id="output-empty-state" class="empty-placeholder"> | |
| <span class="empty-icon">🎛️</span> | |
| <span class="empty-text">Formulate a script above to voice speech</span> | |
| </div> | |
| <!-- Elegant Audio Deck --> | |
| <div id="custom-player" class="audio-player" style="display: none;"> | |
| <div class="visualizer-box"> | |
| <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-row"> | |
| <button type="button" id="player-play" class="btn-play">▶</button> | |
| <div class="progress-box"> | |
| <span id="player-current-time" class="time-lbl">00:00</span> | |
| <input type="range" id="player-progress" min="0" max="100" value="0"> | |
| <span id="player-duration" class="time-lbl">00:00</span> | |
| </div> | |
| </div> | |
| <div class="deck-footer"> | |
| <!-- Volume --> | |
| <div class="vol-slider"> | |
| <span class="vol-icon">🔊</span> | |
| <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8"> | |
| </div> | |
| <!-- Speed control indicators --> | |
| <div class="speed-deck"> | |
| <button type="button" class="btn-speed" data-speed="0.8">0.8x</button> | |
| <button type="button" class="btn-speed active" data-speed="1.0">1.0x</button> | |
| <button type="button" class="btn-speed" data-speed="1.2">1.2x</button> | |
| <button type="button" class="btn-speed" data-speed="1.5">1.5x</button> | |
| </div> | |
| <!-- Downloader WAV --> | |
| <a id="player-download" class="btn-download-wav" href="#" download="dramabox_audio.wav"> | |
| <span>📥</span> Download | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="ltx-banner" style="margin-top: 12px;"> | |
| 🏗️ 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> | |
| <footer> | |
| © 2026 DramaBox. Audio output watermarked with Resemble Perth. | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gradio API script module --> | |
| <script type="module"> | |
| import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"; | |
| 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 = ""; | |
| // UI nodes | |
| const sidebar = document.getElementById("app-sidebar"); | |
| const sidebarOverlay = document.getElementById("sidebar-overlay"); | |
| const btnToggleSidebar = document.getElementById("btn-toggle-sidebar"); | |
| const btnCloseSidebar = document.getElementById("btn-close-sidebar"); | |
| 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"); | |
| // Settings 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(".btn-speed"); | |
| // Guide togglers | |
| const guideToggle = document.getElementById("guide-toggle"); | |
| const guideBody = document.getElementById("guide-body"); | |
| const guideArrow = document.getElementById("guide-arrow"); | |
| // --- Sidebar collapsers --- | |
| function toggleSidebar() { | |
| const isCollapsed = sidebar.classList.toggle("collapsed"); | |
| sidebarOverlay.classList.toggle("active", !isCollapsed); | |
| const btnText = btnToggleSidebar.querySelector(".toggle-text"); | |
| btnText.innerText = isCollapsed ? "Show Control Deck & Demos" : "Hide Control Deck & Demos"; | |
| } | |
| btnToggleSidebar.addEventListener("click", toggleSidebar); | |
| btnCloseSidebar.addEventListener("click", toggleSidebar); | |
| sidebarOverlay.addEventListener("click", toggleSidebar); | |
| // Collapse by default on load under 992px | |
| if (window.innerWidth <= 992) { | |
| sidebar.classList.add("collapsed"); | |
| sidebarOverlay.classList.remove("active"); | |
| } else { | |
| // Start open on desktop | |
| sidebar.classList.remove("collapsed"); | |
| const btnText = btnToggleSidebar.querySelector(".toggle-text"); | |
| btnText.innerText = "Hide Control Deck & Demos"; | |
| } | |
| // Simple alert helper | |
| function updateStatus(message, type = "info", showSpinner = true) { | |
| statusBox.style.display = "flex"; | |
| statusBox.className = `status-alert ${type}`; | |
| statusText.innerText = message; | |
| const spinner = statusBox.querySelector(".alert-spinner"); | |
| if (showSpinner) { | |
| spinner.style.display = "block"; | |
| } else { | |
| spinner.style.display = "none"; | |
| } | |
| } | |
| function hideStatus() { | |
| statusBox.style.display = "none"; | |
| } | |
| // Establish Gradio Connection | |
| async function connectClient() { | |
| try { | |
| updateStatus("Connecting to DramaBox API...", "info"); | |
| client = await Client.connect(window.location.origin); | |
| updateStatus("Engine online and ready", "success", false); | |
| setTimeout(hideStatus, 2500); | |
| } catch (err) { | |
| console.error(err); | |
| updateStatus("API synchronization failed. Please refresh.", "error", false); | |
| } | |
| } | |
| // Accordion animations | |
| guideToggle.addEventListener("click", () => { | |
| const isOpen = guideBody.classList.toggle("open"); | |
| guideArrow.innerText = isOpen ? "▲" : "▼"; | |
| }); | |
| // Sliders 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 randomVal = Math.floor(Math.random() * 99999999); | |
| inputSeed.value = randomVal; | |
| btnRandomSeed.style.transform = "rotate(360deg)"; | |
| setTimeout(() => btnRandomSeed.style.transform = "none", 300); | |
| }); | |
| // Upload triggers | |
| 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="file-capsule"> | |
| <div class="file-info"> | |
| <span>🎵</span> | |
| <span style="overflow: hidden; text-overflow: ellipsis; max-width: 190px;">${filename}</span> | |
| </div> | |
| <button type="button" class="btn-clear" 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>Drop file</strong> or click to choose<br> | |
| <span>WAV, MP3, etc. (10s+)</span> | |
| </div> | |
| `; | |
| } | |
| // Fetch preloaded voices as File | |
| async function loadExampleVoice(voicePath, originalFilename) { | |
| try { | |
| updateStatus("Buffering reference voice...", "info"); | |
| const response = await fetch(voicePath); | |
| if (!response.ok) throw new Error("Could not fetch remote resource."); | |
| const blob = await response.blob(); | |
| selectedAudioFile = new File([blob], originalFilename, { type: blob.type || "audio/mpeg" }); | |
| selectedAudioFilename = originalFilename; | |
| renderUploadedUI(originalFilename); | |
| updateStatus("Reference voice mapped", "success", false); | |
| setTimeout(hideStatus, 1500); | |
| } catch (err) { | |
| console.error(err); | |
| updateStatus("Unable to map the voice example.", "error", false); | |
| } | |
| } | |
| // Dynamically build Example Capsules | |
| const examplesContainer = document.getElementById("examples-container"); | |
| EXAMPLES.forEach((ex) => { | |
| const pill = document.createElement("div"); | |
| pill.className = "demo-pill"; | |
| const isLong = ex.name.startsWith("30s"); | |
| const badgeHtml = ` | |
| <span class="pill-badge ${ex.gender === "male" ? "pill-badge-male" : "pill-badge-female"}">${ex.gender}</span> | |
| ${isLong ? '<span class="pill-badge pill-badge-long">30s</span>' : ''} | |
| `; | |
| pill.innerHTML = ` | |
| <span class="demo-pill-title">${ex.name}</span> | |
| <div class="pill-labels">${badgeHtml}</div> | |
| `; | |
| pill.addEventListener("click", () => { | |
| document.querySelectorAll(".demo-pill").forEach(el => el.classList.remove("active")); | |
| pill.classList.add("active"); | |
| scenePrompt.value = ex.prompt; | |
| sliderGenDur.value = ex.duration; | |
| valGenDur.innerText = ex.duration.toFixed(1); | |
| const filename = ex.voice.substring(ex.voice.lastIndexOf('/') + 1); | |
| loadExampleVoice(ex.voice, filename); | |
| // On mobile, automatically collapse sidebar when selecting a demo so they see the generator | |
| if (window.innerWidth <= 992) { | |
| toggleSidebar(); | |
| } | |
| }); | |
| examplesContainer.appendChild(pill); | |
| }); | |
| // Custom HTML5 Audio controllers | |
| let isAudioReady = false; | |
| function setupAudioSource(src) { | |
| audioElement.src = src; | |
| audioElement.load(); | |
| isAudioReady = true; | |
| outputEmptyState.style.display = "none"; | |
| customPlayer.style.display = "flex"; | |
| playerPlay.innerText = "▶"; | |
| customPlayer.classList.remove("playing"); | |
| playerProgress.value = 0; | |
| 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 (!isAudioReady) 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 (!isAudioReady || !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); | |
| return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; | |
| } | |
| // Process Speech Trigger | |
| btnGenerate.addEventListener("click", async () => { | |
| const prompt = scenePrompt.value.trim(); | |
| if (!prompt) { | |
| updateStatus("Please enter a script prompt.", "error", false); | |
| return; | |
| } | |
| if (!client) { | |
| updateStatus("DramaBox is still configuring, please wait.", "error", false); | |
| return; | |
| } | |
| 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 { | |
| btnGenerate.disabled = true; | |
| btnGenerate.innerHTML = `<div class="alert-spinner"></div> Synthesizing...`; | |
| updateStatus("Checking models & processing queues...", "info"); | |
| let uploadedFileData = null; | |
| if (selectedAudioFile) { | |
| uploadedFileData = handle_file(selectedAudioFile); | |
| } | |
| // Execute Gradio Client request | |
| const predictResponse = await client.predict("/generate_audio", { | |
| prompt: prompt, | |
| 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; | |
| setupAudioSource(audioUrl); | |
| updateStatus("Speech generation complete!", "success", false); | |
| setTimeout(hideStatus, 2500); | |
| } 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`; | |
| } | |
| }); | |
| // Initialize connection | |
| connectClient(); | |
| </script> | |
| </body> | |
| </html> | |