File size: 13,092 Bytes
cd5198d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VibeVoice Agent - Microsoft Research Voice Synthesis Studio</title>
<meta name="description" content="A state-of-the-art voice agent cloning and synthesis platform powered by Microsoft VibeVoice models with real-time streaming and custom speaker cloning.">
<!-- Google Fonts -->
<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=Orbitron:wght@500;700;900&display=swap" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Main Style Sheet -->
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="glow-bg"></div>
<div class="container">
<!-- Header Section -->
<header class="app-header">
<div class="logo-area">
<i class="fa-solid fa-wand-magic-sparkles logo-icon"></i>
<div class="logo-text">
<h1>VibeVoice<span>Studio</span></h1>
<p>Microsoft Frontier Speech Synthesis</p>
</div>
</div>
<div class="status-controls">
<!-- AI Model Loader Status -->
<div class="model-status-card" id="modelStatusCard">
<span class="status-dot green animate-pulse" id="modelDot"></span>
<span class="status-lbl">Model: <strong id="modelStatusVal">Demo Synthesizer</strong></span>
<button class="btn btn-toggle" id="btnToggleModel" title="Switch between fast local synthesizer & full VibeVoice weights">
<i class="fa-solid fa-power-off"></i> Toggle AI Model
</button>
</div>
<!-- Websocket Connection Status -->
<div class="connection-badge" id="connBadge">
<i class="fa-solid fa-link-slash icon" id="connIcon"></i>
<span id="connText">Offline</span>
</div>
</div>
</header>
<!-- Main Dashboard Layout -->
<main class="dashboard-grid">
<!-- Left Column: Voice Profiles & Configurations -->
<section class="control-panel glass-card">
<div class="panel-header">
<i class="fa-solid fa-user-gear"></i>
<h2>Voice Cloning Center</h2>
</div>
<p class="panel-desc">Clone any voice in seconds. Record or upload a 10-30s audio sample to create a speaker profile prompt.</p>
<!-- Speaker Settings Slot 1 -->
<div class="speaker-profile-box" id="speakerSlot0">
<div class="speaker-badge-header">
<span class="speaker-num">Speaker 0</span>
<div class="badge cyan-glow">Primary Speaker</div>
</div>
<div class="speaker-info">
<label for="spkName0">Speaker Name</label>
<input type="text" id="spkName0" value="Alex" class="form-input">
</div>
<div class="cloning-options">
<button class="btn btn-sm btn-outline" id="btnRecord0">
<i class="fa-solid fa-microphone"></i> Record Mic
</button>
<label class="btn btn-sm btn-outline btn-file">
<i class="fa-solid fa-upload"></i> Upload WAV
<input type="file" id="fileVoice0" accept="audio/wav,audio/mp3" style="display: none;">
</label>
</div>
<div class="cloned-status hidden" id="clonedStatus0">
<span class="lbl-status"><i class="fa-solid fa-check-double"></i> Voice Cloned:</span>
<audio id="audioPreview0" controls class="mini-player"></audio>
</div>
</div>
<!-- Speaker Settings Slot 2 -->
<div class="speaker-profile-box" id="speakerSlot1">
<div class="speaker-badge-header">
<span class="speaker-num">Speaker 1</span>
<div class="badge purple-glow">Dialogue Partner</div>
</div>
<div class="speaker-info">
<label for="spkName1">Speaker Name</label>
<input type="text" id="spkName1" value="Sarah" class="form-input">
</div>
<div class="cloning-options">
<button class="btn btn-sm btn-outline" id="btnRecord1">
<i class="fa-solid fa-microphone"></i> Record Mic
</button>
<label class="btn btn-sm btn-outline btn-file">
<i class="fa-solid fa-upload"></i> Upload WAV
<input type="file" id="fileVoice1" accept="audio/wav,audio/mp3" style="display: none;">
</label>
</div>
<div class="cloned-status hidden" id="clonedStatus1">
<span class="lbl-status"><i class="fa-solid fa-check-double"></i> Voice Cloned:</span>
<audio id="audioPreview1" controls class="mini-player"></audio>
</div>
</div>
<!-- Presets & Sample Scripts -->
<div class="preset-box">
<h3>Dialogue Presets</h3>
<div class="preset-buttons">
<button class="btn btn-xs btn-preset" id="presetPodcast">
<i class="fa-solid fa-podcast"></i> Podcast Host
</button>
<button class="btn btn-xs btn-preset" id="presetAssistant">
<i class="fa-solid fa-headset"></i> AI Voice Agent
</button>
<button class="btn btn-xs btn-preset" id="presetNews">
<i class="fa-solid fa-newspaper"></i> News Broadcast
</button>
</div>
</div>
</section>
<!-- Right Column: Interactive Script Synthesizer & Visualizer -->
<section class="execution-panel">
<!-- Main Visualizer Core Box -->
<div class="visualizer-container glass-card">
<!-- Holographic Pulsing Agent Orb -->
<div class="agent-orb-wrapper">
<div class="agent-orb idle" id="agentOrb">
<div class="orb-inner"></div>
<div class="orb-wave"></div>
<div class="orb-wave wave-2"></div>
<div class="orb-glow"></div>
</div>
<div class="agent-details">
<span class="agent-state-text" id="agentStateText">AGENT READY</span>
<p class="agent-state-sub" id="agentStateSub">Configure scripts and trigger generation below</p>
</div>
</div>
<!-- Canvas Audio Visualizer -->
<div class="visualizer-canvas-box">
<canvas id="canvasWaveform" width="600" height="90"></canvas>
</div>
</div>
<!-- Script Editor Studio -->
<div class="script-editor-card glass-card">
<div class="editor-header">
<div class="title-with-desc">
<i class="fa-solid fa-pen-nib"></i>
<h2>Podcast Script Studio</h2>
</div>
<!-- Synthesis Type Controls -->
<div class="synthesis-mode-selector">
<label class="toggle-mode-container" title="Streams audio in real-time as words are spoken">
<input type="checkbox" id="chkStreamMode" checked>
<span class="toggle-slider"></span>
<span class="toggle-label"><i class="fa-solid fa-bolt"></i> Real-time Streaming</span>
</label>
</div>
</div>
<div class="script-area-wrapper">
<textarea id="txtScript" placeholder="Write speaker turn-taking script...
Format: Speaker ID: Text content
Example:
Speaker 0: Hello, how are you?
Speaker 1: I am doing fantastic! Let's clone some voices." class="script-textarea">Speaker 0: Welcome to Vibe Voice Studio. I am cloned from your custom voice sample.
Speaker 1: That is incredible! The transition between speakers sounds so smooth and natural.
Speaker 0: Yes, Microsoft's continuous acoustic tokenizers make multi-speaker podcasts sound beautiful.</textarea>
</div>
<!-- Execution Buttons -->
<div class="execution-actions">
<button class="btn btn-primary btn-lg" id="btnSynthesize">
<i class="fa-solid fa-circle-play icon-play"></i> Synthesize Speech
</button>
<button class="btn btn-secondary btn-lg" id="btnStop" disabled>
<i class="fa-solid fa-circle-stop"></i> Stop Agent
</button>
</div>
</div>
<!-- Custom Audio Control Toolbar -->
<div class="audio-control-bar glass-card hidden" id="audioToolbar">
<div class="playback-controls">
<button class="playback-btn" id="btnToolbarPlay" title="Play / Pause"><i class="fa-solid fa-play"></i></button>
<div class="timeline-container">
<span class="time-stamp" id="lblTimeStart">00:00</span>
<div class="progress-bar-wrapper">
<input type="range" id="sliderTimeline" min="0" max="100" value="0" class="slider-theme">
<div class="progress-fill" id="progressTimelineFill"></div>
</div>
<span class="time-stamp" id="lblTimeEnd">00:00</span>
</div>
<!-- Volume Controls -->
<div class="volume-container">
<i class="fa-solid fa-volume-high" id="iconVolume"></i>
<input type="range" id="sliderVolume" min="0" max="100" value="80" class="slider-theme slider-volume">
</div>
<!-- Speed Controls -->
<select id="selectSpeed" class="speed-selector">
<option value="0.75">0.75x</option>
<option value="1.0" selected>1.0x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
</select>
</div>
</div>
<!-- Debug Console Log Viewer -->
<div class="console-card glass-card">
<div class="console-header">
<span><i class="fa-solid fa-terminal"></i> Agent Console Logs</span>
<button class="btn btn-xs btn-outline" id="btnClearLogs">Clear</button>
</div>
<div class="console-body" id="consoleBody">
<div class="log-line system">[System] Welcome to VibeVoice Agent Console. System ready.</div>
<div class="log-line info">[Info] Default mode: Simulated Synthesizer (runs instantly on CPU). Click 'Toggle AI Model' to load the full 0.5B neural net!</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="app-footer">
<p>VibeVoice Voice Synthesis Platform © 2026. Built with Microsoft Research VibeVoice Models & FastAPI.</p>
</footer>
</div>
<!-- Script assets -->
<script src="/app.js"></script>
</body>
</html>
|