| <!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."> |
| |
| <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"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <link rel="stylesheet" href="/index.css"> |
| </head> |
| <body> |
| <div class="glow-bg"></div> |
| <div class="container"> |
| |
| |
| <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"> |
| |
| <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> |
| |
| |
| <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 class="dashboard-grid"> |
| |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <section class="execution-panel"> |
| |
| |
| <div class="visualizer-container glass-card"> |
| |
| <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> |
|
|
| |
| <div class="visualizer-canvas-box"> |
| <canvas id="canvasWaveform" width="600" height="90"></canvas> |
| </div> |
| </div> |
|
|
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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 class="app-footer"> |
| <p>VibeVoice Voice Synthesis Platform © 2026. Built with Microsoft Research VibeVoice Models & FastAPI.</p> |
| </footer> |
| </div> |
|
|
| |
| <script src="/app.js"></script> |
| </body> |
| </html> |
|
|
