|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<meta charset="UTF-8" />
|
|
|
<title>VibeVoice-Realtime TTS Demo</title>
|
|
|
<style>
|
|
|
:root {
|
|
|
--bg: #f5f7fc;
|
|
|
--surface: #ffffff;
|
|
|
--accent: #5562ff;
|
|
|
--accent-strong: #3f4dff;
|
|
|
--text-primary: #1f2742;
|
|
|
--text-muted: #5d6789;
|
|
|
--border: rgba(85, 98, 255, 0.18);
|
|
|
--shadow: 0 18px 45px rgba(31, 39, 66, 0.08);
|
|
|
}
|
|
|
|
|
|
.helper-text {
|
|
|
font-size: 12px;
|
|
|
color: #8a93b5;
|
|
|
}
|
|
|
|
|
|
* {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
margin: 0;
|
|
|
background: var(--bg);
|
|
|
font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif;
|
|
|
color: var(--text-primary);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
padding: 48px 20px;
|
|
|
}
|
|
|
|
|
|
.app-shell {
|
|
|
width: min(960px, 100%);
|
|
|
background: var(--surface);
|
|
|
border-radius: 20px;
|
|
|
padding: 36px 40px 44px;
|
|
|
box-shadow: var(--shadow);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 28px;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
margin: 0;
|
|
|
text-align: center;
|
|
|
font-size: 30px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.01em;
|
|
|
}
|
|
|
|
|
|
.panel {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.field {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.field-label {
|
|
|
font-weight: 600;
|
|
|
font-size: 15px;
|
|
|
color: var(--text-primary);
|
|
|
}
|
|
|
|
|
|
.text-input {
|
|
|
width: 100%;
|
|
|
min-height: 140px;
|
|
|
max-height: 240px;
|
|
|
border: 1px solid rgba(31, 39, 66, 0.14);
|
|
|
border-radius: 12px;
|
|
|
padding: 14px 16px;
|
|
|
font-size: 15px;
|
|
|
line-height: 1.6;
|
|
|
font-family: inherit;
|
|
|
background: #f9faff;
|
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
|
resize: vertical;
|
|
|
}
|
|
|
|
|
|
.text-input:focus {
|
|
|
outline: none;
|
|
|
border-color: var(--accent);
|
|
|
box-shadow: 0 0 0 3px rgba(85, 98, 255, 0.18);
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
#streamingPreviewContainer {
|
|
|
border-radius: 14px;
|
|
|
border: 1px solid var(--border);
|
|
|
background: linear-gradient(135deg, #eef2ff 0%, #f7f9ff 100%);
|
|
|
padding: 18px 20px;
|
|
|
box-shadow: inset 0 1px 2px rgba(85, 98, 255, 0.12);
|
|
|
}
|
|
|
|
|
|
#streamingPreviewHeader {
|
|
|
font-weight: 600;
|
|
|
color: var(--text-primary);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
font-size: 14px;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
#streamingPreviewNote {
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
|
|
color: var(--text-muted);
|
|
|
}
|
|
|
|
|
|
#streamingPreview {
|
|
|
min-height: 70px;
|
|
|
padding: 10px 12px;
|
|
|
border-radius: 10px;
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
border: 1px solid rgba(85, 98, 255, 0.25);
|
|
|
font-family: 'Courier New', Courier, monospace;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
color: var(--text-primary);
|
|
|
white-space: pre-wrap;
|
|
|
}
|
|
|
|
|
|
#streamingPreview.streaming-active::after {
|
|
|
content: "";
|
|
|
display: inline-block;
|
|
|
width: 2px;
|
|
|
height: 1.1em;
|
|
|
background: var(--accent);
|
|
|
margin-left: 2px;
|
|
|
animation: previewCaret 0.9s steps(1) infinite;
|
|
|
vertical-align: bottom;
|
|
|
}
|
|
|
|
|
|
@keyframes previewCaret {
|
|
|
0%, 50% {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
51%, 100% {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.control-panel {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 18px;
|
|
|
}
|
|
|
|
|
|
.inline-field {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 6px;
|
|
|
}
|
|
|
|
|
|
.select-control {
|
|
|
width: 220px;
|
|
|
border: 1px solid rgba(31, 39, 66, 0.14);
|
|
|
border-radius: 10px;
|
|
|
padding: 8px 12px;
|
|
|
font-size: 14px;
|
|
|
font-family: inherit;
|
|
|
background: #fbfcff;
|
|
|
color: var(--text-primary);
|
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
|
}
|
|
|
|
|
|
.select-control:focus {
|
|
|
outline: none;
|
|
|
border-color: var(--accent);
|
|
|
box-shadow: 0 0 0 3px rgba(85, 98, 255, 0.18);
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.control-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 20px 28px;
|
|
|
}
|
|
|
|
|
|
.range-control {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
font-size: 14px;
|
|
|
color: var(--text-primary);
|
|
|
}
|
|
|
|
|
|
.range-control input[type="range"] {
|
|
|
width: 200px;
|
|
|
accent-color: var(--accent);
|
|
|
}
|
|
|
|
|
|
.range-value {
|
|
|
font-weight: 600;
|
|
|
color: var(--text-primary);
|
|
|
min-width: 42px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
#playback {
|
|
|
background: var(--accent);
|
|
|
color: #fff;
|
|
|
border: none;
|
|
|
padding: 10px 24px;
|
|
|
border-radius: 999px;
|
|
|
cursor: pointer;
|
|
|
font-weight: 600;
|
|
|
font-size: 14px;
|
|
|
box-shadow: 0 8px 16px rgba(85, 98, 255, 0.25);
|
|
|
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
|
|
|
}
|
|
|
|
|
|
#playback:hover {
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 10px 20px rgba(85, 98, 255, 0.28);
|
|
|
}
|
|
|
|
|
|
#playback:active {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
#playback.playing {
|
|
|
background: var(--accent-strong);
|
|
|
}
|
|
|
|
|
|
.secondary-btn {
|
|
|
border: 1px solid rgba(31, 39, 66, 0.18);
|
|
|
background: #f1f3ff;
|
|
|
color: var(--text-primary);
|
|
|
padding: 8px 18px;
|
|
|
border-radius: 999px;
|
|
|
cursor: pointer;
|
|
|
font-size: 13px;
|
|
|
font-weight: 500;
|
|
|
transition: background 0.15s, border-color 0.15s;
|
|
|
}
|
|
|
|
|
|
.secondary-btn:hover {
|
|
|
background: #e6e9ff;
|
|
|
border-color: rgba(31, 39, 66, 0.26);
|
|
|
}
|
|
|
|
|
|
.secondary-btn:disabled {
|
|
|
opacity: 0.55;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
.metrics {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 16px 32px;
|
|
|
font-size: 14px;
|
|
|
color: var(--text-muted);
|
|
|
}
|
|
|
|
|
|
.metrics span {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
gap: 6px;
|
|
|
}
|
|
|
|
|
|
.metrics span strong {
|
|
|
color: var(--text-primary);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.metric-unit {
|
|
|
color: var(--text-muted);
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
#logOutput {
|
|
|
max-height: 260px;
|
|
|
overflow-y: auto;
|
|
|
background: #f7f9ff;
|
|
|
color: var(--text-primary);
|
|
|
padding: 16px 18px;
|
|
|
border: 1px solid rgba(31, 39, 66, 0.12);
|
|
|
border-radius: 12px;
|
|
|
font-size: 13px;
|
|
|
line-height: 1.6;
|
|
|
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
|
font-family: 'Fira Code', 'Courier New', Courier, monospace;
|
|
|
margin-top: 0px;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 720px) {
|
|
|
.app-shell {
|
|
|
padding: 28px 20px 36px;
|
|
|
gap: 24px;
|
|
|
}
|
|
|
|
|
|
.select-control {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.control-row {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
#playback {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
<div class="app-shell">
|
|
|
<h1>VibeVoice-Realtime TTS Demo</h1>
|
|
|
|
|
|
<section class="panel">
|
|
|
<label class="field">
|
|
|
<span class="field-label">Text</span>
|
|
|
<textarea
|
|
|
id="prompt"
|
|
|
class="text-input"
|
|
|
rows="4"
|
|
|
>Enter your text here and click "Start" to instantly hear the VibeVoice-Realtime TTS output audio.</textarea>
|
|
|
</label>
|
|
|
|
|
|
<div id="streamingPreviewContainer">
|
|
|
<div id="streamingPreviewHeader">
|
|
|
<span>Streaming Input Text</span>
|
|
|
</div>
|
|
|
<div id="streamingPreview" aria-live="polite">This area will display the streaming input text in real time.</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<span class="helper-text">This demo requires the full text to be provided upfront. The model then receives the text via streaming input during synthesis.<br>
|
|
|
For non-punctuation special characters, applying text normalization before processing often yields better results.</span>
|
|
|
|
|
|
<section class="panel control-panel">
|
|
|
<div class="inline-field">
|
|
|
<span class="field-label">Speaker</span>
|
|
|
<select id="voiceSelect" class="select-control">
|
|
|
<option value="">Loading...</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
<div class="control-row">
|
|
|
<label class="range-control">
|
|
|
<span>CFG</span>
|
|
|
<input id="cfgScale" type="range" min="1" max="3" step="0.05" value="1.5" />
|
|
|
<span class="range-value" id="cfgValue">1.5</span>
|
|
|
</label>
|
|
|
<label class="range-control">
|
|
|
<span>Inference Steps</span>
|
|
|
<input id="inferenceSteps" type="range" min="1" max="20" step="1" value="5" />
|
|
|
<span class="range-value" id="stepsValue">5</span>
|
|
|
</label>
|
|
|
<button id="resetControls" type="button" class="secondary-btn">Reset Controls</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="control-row">
|
|
|
<button id="playback">Start</button>
|
|
|
<button id="saveAudio" type="button" class="secondary-btn" disabled>Save</button>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="panel">
|
|
|
<div class="metrics">
|
|
|
<span>Model Generated Audio<strong id="modelGenerated">0.00</strong><span class="metric-unit">s</span></span>
|
|
|
<span>Audio Played<strong id="playbackElapsed">0.00</strong><span class="metric-unit">s</span></span>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="panel">
|
|
|
<span class="field-label">Runtime Logs</span>
|
|
|
<pre id="logOutput"></pre>
|
|
|
</section>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
(() => {
|
|
|
const SAMPLE_RATE = 24_000;
|
|
|
const BUFFER_SIZE = 2048;
|
|
|
const PREBUFFER_SEC = 0.1;
|
|
|
|
|
|
let audioCtx = null;
|
|
|
let scriptNode = null;
|
|
|
let socket = null;
|
|
|
let buffer = new Float32Array(0);
|
|
|
let isPlaying = false;
|
|
|
let hasStartedPlayback = false;
|
|
|
let silentFrameCount = 0;
|
|
|
|
|
|
const promptInput = document.getElementById('prompt');
|
|
|
const streamingPreview = document.getElementById('streamingPreview');
|
|
|
const controlBtn = document.getElementById('playback');
|
|
|
const cfgSelect = document.getElementById('cfgScale');
|
|
|
const stepsSelect = document.getElementById('inferenceSteps');
|
|
|
const voiceSelect = document.getElementById('voiceSelect');
|
|
|
const cfgValueLabel = document.getElementById('cfgValue');
|
|
|
const stepsValueLabel = document.getElementById('stepsValue');
|
|
|
const modelGeneratedLabel = document.getElementById('modelGenerated');
|
|
|
const playbackElapsedLabel = document.getElementById('playbackElapsed');
|
|
|
const logOutput = document.getElementById('logOutput');
|
|
|
const resetBtn = document.getElementById('resetControls');
|
|
|
const saveBtn = document.getElementById('saveAudio');
|
|
|
|
|
|
let playbackTimer = null;
|
|
|
let lastPlaybackElapsed = 0;
|
|
|
let playbackSamples = 0;
|
|
|
let modelGeneratedTotal = 0;
|
|
|
let firstBrowserChunkLogged = false;
|
|
|
let playbackStartedLogged = false;
|
|
|
const logEntries = [];
|
|
|
let logSequence = 0;
|
|
|
let recordedChunks = [];
|
|
|
let recordedSamples = 0;
|
|
|
let recordingComplete = false;
|
|
|
let downloadUrl = null;
|
|
|
|
|
|
const revokeDownloadUrl = () => {
|
|
|
if (downloadUrl) {
|
|
|
URL.revokeObjectURL(downloadUrl);
|
|
|
downloadUrl = null;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const updateSaveButtonState = () => {
|
|
|
if (!saveBtn) {
|
|
|
return;
|
|
|
}
|
|
|
saveBtn.disabled = recordedSamples === 0 || !recordingComplete;
|
|
|
};
|
|
|
|
|
|
const clearRecordedChunks = () => {
|
|
|
recordedChunks = [];
|
|
|
recordedSamples = 0;
|
|
|
recordingComplete = false;
|
|
|
revokeDownloadUrl();
|
|
|
updateSaveButtonState();
|
|
|
};
|
|
|
|
|
|
const createWavBlob = () => {
|
|
|
if (!recordedSamples) {
|
|
|
return null;
|
|
|
}
|
|
|
const wavBuffer = new ArrayBuffer(44 + recordedSamples * 2);
|
|
|
const view = new DataView(wavBuffer);
|
|
|
const writeString = (offset, str) => {
|
|
|
for (let i = 0; i < str.length; i += 1) {
|
|
|
view.setUint8(offset + i, str.charCodeAt(i));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
writeString(0, 'RIFF');
|
|
|
view.setUint32(4, 36 + recordedSamples * 2, true);
|
|
|
writeString(8, 'WAVE');
|
|
|
writeString(12, 'fmt ');
|
|
|
view.setUint32(16, 16, true);
|
|
|
view.setUint16(20, 1, true);
|
|
|
view.setUint16(22, 1, true);
|
|
|
view.setUint32(24, SAMPLE_RATE, true);
|
|
|
view.setUint32(28, SAMPLE_RATE * 2, true);
|
|
|
view.setUint16(32, 2, true);
|
|
|
view.setUint16(34, 16, true);
|
|
|
writeString(36, 'data');
|
|
|
view.setUint32(40, recordedSamples * 2, true);
|
|
|
|
|
|
const pcmData = new Int16Array(wavBuffer, 44, recordedSamples);
|
|
|
let offset = 0;
|
|
|
recordedChunks.forEach(chunk => {
|
|
|
const chunkData = new Int16Array(chunk);
|
|
|
pcmData.set(chunkData, offset);
|
|
|
offset += chunkData.length;
|
|
|
});
|
|
|
return new Blob([wavBuffer], { type: 'audio/wav' });
|
|
|
};
|
|
|
|
|
|
const updateCfgDisplay = () => {
|
|
|
cfgValueLabel.textContent = Number(cfgSelect.value).toFixed(3);
|
|
|
};
|
|
|
|
|
|
const updateStepsDisplay = () => {
|
|
|
stepsValueLabel.textContent = Number(stepsSelect.value).toString();
|
|
|
};
|
|
|
|
|
|
cfgSelect.addEventListener('input', updateCfgDisplay);
|
|
|
stepsSelect.addEventListener('input', updateStepsDisplay);
|
|
|
updateCfgDisplay();
|
|
|
updateStepsDisplay();
|
|
|
|
|
|
const pad2 = value => value.toString().padStart(2, '0');
|
|
|
const pad3 = value => value.toString().padStart(3, '0');
|
|
|
|
|
|
const formatLocalTimestamp = () => {
|
|
|
const d = new Date();
|
|
|
const year = d.getFullYear();
|
|
|
const month = pad2(d.getMonth() + 1);
|
|
|
const day = pad2(d.getDate());
|
|
|
const hours = pad2(d.getHours());
|
|
|
const minutes = pad2(d.getMinutes());
|
|
|
const seconds = pad2(d.getSeconds());
|
|
|
const millis = pad3(d.getMilliseconds());
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${millis}`;
|
|
|
};
|
|
|
|
|
|
const formatSeconds = raw => {
|
|
|
const value = Number(raw);
|
|
|
return Number.isFinite(value) ? value.toFixed(2) : '0.00';
|
|
|
};
|
|
|
|
|
|
const parseTimestamp = value => {
|
|
|
if (!value) {
|
|
|
return new Date();
|
|
|
}
|
|
|
if (/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}/.test(value)) {
|
|
|
return new Date(value.replace(' ', 'T'));
|
|
|
}
|
|
|
return new Date(value);
|
|
|
};
|
|
|
|
|
|
const setModelGenerated = value => {
|
|
|
const numeric = Number(value);
|
|
|
if (!Number.isFinite(numeric)) {
|
|
|
return;
|
|
|
}
|
|
|
modelGeneratedTotal = Math.max(0, numeric);
|
|
|
modelGeneratedLabel.textContent = formatSeconds(modelGeneratedTotal);
|
|
|
};
|
|
|
|
|
|
const setPlaybackElapsed = value => {
|
|
|
const capped = Math.min(modelGeneratedTotal, Math.max(0, value));
|
|
|
lastPlaybackElapsed = capped;
|
|
|
playbackElapsedLabel.textContent = formatSeconds(lastPlaybackElapsed);
|
|
|
};
|
|
|
|
|
|
const STREAMING_WPM = 180;
|
|
|
const STREAMING_INTERVAL_MS = 60000 / STREAMING_WPM;
|
|
|
let previewTimeoutId = null;
|
|
|
let previewTokens = [];
|
|
|
let previewIndex = 0;
|
|
|
let previewActive = false;
|
|
|
|
|
|
const clearPreviewTimer = () => {
|
|
|
if (previewTimeoutId) {
|
|
|
clearTimeout(previewTimeoutId);
|
|
|
previewTimeoutId = null;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const setPreviewIdle = message => {
|
|
|
if (!streamingPreview) {
|
|
|
return;
|
|
|
}
|
|
|
streamingPreview.classList.remove('streaming-active');
|
|
|
streamingPreview.textContent = message;
|
|
|
};
|
|
|
|
|
|
const schedulePreviewTick = () => {
|
|
|
if (!streamingPreview) {
|
|
|
return;
|
|
|
}
|
|
|
if (previewIndex >= previewTokens.length) {
|
|
|
streamingPreview.classList.remove('streaming-active');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
streamingPreview.classList.add('streaming-active');
|
|
|
|
|
|
streamingPreview.textContent += previewTokens[previewIndex];
|
|
|
previewIndex += 1;
|
|
|
previewTimeoutId = setTimeout(schedulePreviewTick, STREAMING_INTERVAL_MS);
|
|
|
};
|
|
|
|
|
|
const updateStreamingPreview = () => {
|
|
|
if (!streamingPreview) {
|
|
|
return;
|
|
|
}
|
|
|
clearPreviewTimer();
|
|
|
previewIndex = 0;
|
|
|
const source = (promptInput?.value || '').trimEnd();
|
|
|
streamingPreview.textContent = '';
|
|
|
previewTokens = source.match(/\S+\s*/g) || [];
|
|
|
schedulePreviewTick();
|
|
|
};
|
|
|
|
|
|
const clearLogs = () => {
|
|
|
if (logOutput) {
|
|
|
logOutput.textContent = '';
|
|
|
}
|
|
|
logEntries.length = 0;
|
|
|
modelGeneratedTotal = 0;
|
|
|
setModelGenerated(0);
|
|
|
};
|
|
|
|
|
|
const appendLog = (message, timestamp) => {
|
|
|
if (!logOutput) {
|
|
|
return;
|
|
|
}
|
|
|
const finalTimestamp = timestamp || formatLocalTimestamp();
|
|
|
const entry = {
|
|
|
timestamp: finalTimestamp,
|
|
|
date: parseTimestamp(finalTimestamp),
|
|
|
message,
|
|
|
seq: logSequence += 1,
|
|
|
};
|
|
|
logEntries.push(entry);
|
|
|
logEntries.sort((a, b) => {
|
|
|
const diff = a.date.getTime() - b.date.getTime();
|
|
|
return diff !== 0 ? diff : a.seq - b.seq;
|
|
|
});
|
|
|
if (logEntries.length > 400) {
|
|
|
logEntries.splice(0, logEntries.length - 400);
|
|
|
}
|
|
|
logOutput.textContent = logEntries
|
|
|
.map(item => `[${item.timestamp}] ${item.message}`)
|
|
|
.join('\n');
|
|
|
logOutput.scrollTop = logOutput.scrollHeight;
|
|
|
};
|
|
|
|
|
|
const handleSaveClick = () => {
|
|
|
if (!recordedSamples) {
|
|
|
appendLog('[Frontend] Save requested but no audio received yet');
|
|
|
return;
|
|
|
}
|
|
|
const wavBlob = createWavBlob();
|
|
|
if (!wavBlob) {
|
|
|
appendLog('[Error] Failed to assemble WAV data for download');
|
|
|
return;
|
|
|
}
|
|
|
revokeDownloadUrl();
|
|
|
downloadUrl = URL.createObjectURL(wavBlob);
|
|
|
const link = document.createElement('a');
|
|
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
|
|
link.href = downloadUrl;
|
|
|
link.download = `vibevoice_realtime_audio_${timestamp}.wav`;
|
|
|
document.body.appendChild(link);
|
|
|
link.click();
|
|
|
document.body.removeChild(link);
|
|
|
appendLog('[Frontend] Audio download triggered');
|
|
|
};
|
|
|
|
|
|
const stopPlaybackTimer = () => {
|
|
|
if (playbackTimer) {
|
|
|
clearInterval(playbackTimer);
|
|
|
playbackTimer = null;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const startPlaybackTimer = () => {
|
|
|
stopPlaybackTimer();
|
|
|
playbackTimer = setInterval(() => {
|
|
|
setPlaybackElapsed(playbackSamples / SAMPLE_RATE);
|
|
|
}, 250);
|
|
|
};
|
|
|
|
|
|
const loadVoices = async () => {
|
|
|
try {
|
|
|
voiceSelect.disabled = true;
|
|
|
const response = await fetch('/config');
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`Failed to fetch config: ${response.status}`);
|
|
|
}
|
|
|
const data = await response.json();
|
|
|
const voices = Array.isArray(data.voices) ? data.voices : [];
|
|
|
voiceSelect.innerHTML = '';
|
|
|
if (voices.length === 0) {
|
|
|
const option = document.createElement('option');
|
|
|
option.value = '';
|
|
|
option.textContent = 'No voices available';
|
|
|
voiceSelect.appendChild(option);
|
|
|
voiceSelect.disabled = true;
|
|
|
appendLog('[Error] No voice presets available');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
voices.forEach(voice => {
|
|
|
const option = document.createElement('option');
|
|
|
option.value = voice;
|
|
|
option.textContent = voice;
|
|
|
voiceSelect.appendChild(option);
|
|
|
});
|
|
|
|
|
|
if (data.default_voice && voices.includes(data.default_voice)) {
|
|
|
voiceSelect.value = data.default_voice;
|
|
|
}
|
|
|
voiceSelect.disabled = false;
|
|
|
appendLog(`[Frontend] Loaded ${voices.length} voice presets`);
|
|
|
} catch (err) {
|
|
|
console.error('Failed to load voices', err);
|
|
|
voiceSelect.innerHTML = '';
|
|
|
const option = document.createElement('option');
|
|
|
option.value = '';
|
|
|
option.textContent = 'Load failed';
|
|
|
voiceSelect.appendChild(option);
|
|
|
voiceSelect.disabled = true;
|
|
|
appendLog('[Error] Failed to load voice presets');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
loadVoices();
|
|
|
|
|
|
resetBtn.addEventListener('click', () => {
|
|
|
cfgSelect.value = '1.5';
|
|
|
stepsSelect.value = '5';
|
|
|
updateCfgDisplay();
|
|
|
updateStepsDisplay();
|
|
|
appendLog('[Frontend] Controls reset to defaults (CFG=1.5, Steps=5)');
|
|
|
});
|
|
|
|
|
|
if (promptInput) {
|
|
|
promptInput.addEventListener('input', () => {
|
|
|
if (previewActive) {
|
|
|
updateStreamingPreview();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const handleLogMessage = raw => {
|
|
|
let payload;
|
|
|
try {
|
|
|
payload = JSON.parse(raw);
|
|
|
} catch (err) {
|
|
|
appendLog(`[Error] Failed to parse log message: ${raw}`);
|
|
|
return;
|
|
|
}
|
|
|
if (!payload || payload.type !== 'log') {
|
|
|
appendLog(`[Log] ${raw}`);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const { event, data = {}, timestamp } = payload;
|
|
|
switch (event) {
|
|
|
case 'backend_request_received': {
|
|
|
const cfg = typeof data.cfg_scale === 'number' ? data.cfg_scale.toFixed(3) : data.cfg_scale;
|
|
|
const steps = data.inference_steps ?? 'default';
|
|
|
const voice = data.voice || 'default';
|
|
|
const textLength = data.text_length ?? 0;
|
|
|
appendLog(`[Backend] Received request`, timestamp);
|
|
|
break;
|
|
|
}
|
|
|
case 'backend_first_chunk_sent':
|
|
|
appendLog('[Backend] Sent first audio chunk', timestamp);
|
|
|
break;
|
|
|
case 'model_progress':
|
|
|
if (typeof data.generated_sec !== 'undefined') {
|
|
|
const generated = Number(data.generated_sec);
|
|
|
if (Number.isFinite(generated)) {
|
|
|
setModelGenerated(generated);
|
|
|
}
|
|
|
}
|
|
|
return;
|
|
|
case 'generation_error':
|
|
|
appendLog(`[Error] Generation error: ${data.message || 'Unknown error'}`, timestamp);
|
|
|
break;
|
|
|
case 'backend_error':
|
|
|
appendLog(`[Error] Backend error: ${data.message || 'Unknown error'}`, timestamp);
|
|
|
break;
|
|
|
case 'client_disconnected':
|
|
|
appendLog('[Frontend] Client disconnected', timestamp);
|
|
|
break;
|
|
|
case 'backend_stream_complete':
|
|
|
appendLog('[Backend] Backend finished', timestamp);
|
|
|
recordingComplete = true;
|
|
|
updateSaveButtonState();
|
|
|
break;
|
|
|
default:
|
|
|
appendLog(`[Log] Event ${event}`, timestamp);
|
|
|
break;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const updateButtonLabel = () => {
|
|
|
controlBtn.textContent = isPlaying ? 'Stop' : 'Start';
|
|
|
controlBtn.classList.toggle('playing', isPlaying);
|
|
|
};
|
|
|
|
|
|
const appendAudio = chunk => {
|
|
|
const merged = new Float32Array(buffer.length + chunk.length);
|
|
|
merged.set(buffer, 0);
|
|
|
merged.set(chunk, buffer.length);
|
|
|
buffer = merged;
|
|
|
};
|
|
|
|
|
|
const pullAudio = frameCount => {
|
|
|
const available = buffer.length;
|
|
|
if (available === 0) {
|
|
|
return new Float32Array(frameCount);
|
|
|
}
|
|
|
if (available <= frameCount) {
|
|
|
const chunk = buffer;
|
|
|
buffer = new Float32Array(0);
|
|
|
if (chunk.length < frameCount) {
|
|
|
const padded = new Float32Array(frameCount);
|
|
|
padded.set(chunk, 0);
|
|
|
return padded;
|
|
|
}
|
|
|
return chunk;
|
|
|
}
|
|
|
const chunk = buffer.subarray(0, frameCount);
|
|
|
buffer = buffer.subarray(frameCount);
|
|
|
return chunk;
|
|
|
};
|
|
|
|
|
|
const closeSocket = () => {
|
|
|
if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
|
|
|
socket.close();
|
|
|
}
|
|
|
socket = null;
|
|
|
};
|
|
|
|
|
|
const resetPlaybackFlags = (resetSamples = true) => {
|
|
|
buffer = new Float32Array(0);
|
|
|
if (resetSamples) {
|
|
|
playbackSamples = 0;
|
|
|
setPlaybackElapsed(0);
|
|
|
}
|
|
|
hasStartedPlayback = false;
|
|
|
silentFrameCount = 0;
|
|
|
firstBrowserChunkLogged = false;
|
|
|
playbackStartedLogged = false;
|
|
|
};
|
|
|
|
|
|
const teardownAudio = () => {
|
|
|
if (scriptNode) {
|
|
|
try { scriptNode.disconnect(); } catch (err) { console.warn('disconnect error', err); }
|
|
|
scriptNode.onaudioprocess = null;
|
|
|
}
|
|
|
if (audioCtx) {
|
|
|
try { audioCtx.close(); } catch (err) { console.warn('audioCtx.close error', err); }
|
|
|
}
|
|
|
audioCtx = null;
|
|
|
scriptNode = null;
|
|
|
};
|
|
|
|
|
|
const resetState = (resetSamples = true) => {
|
|
|
closeSocket();
|
|
|
teardownAudio();
|
|
|
resetPlaybackFlags(resetSamples);
|
|
|
isPlaying = false;
|
|
|
stopPlaybackTimer();
|
|
|
};
|
|
|
|
|
|
const createAudioChain = () => {
|
|
|
teardownAudio();
|
|
|
resetPlaybackFlags();
|
|
|
audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
|
|
|
scriptNode = audioCtx.createScriptProcessor(BUFFER_SIZE, 0, 1);
|
|
|
|
|
|
const minBufferSamples = Math.floor(audioCtx.sampleRate * PREBUFFER_SEC);
|
|
|
|
|
|
scriptNode.onaudioprocess = event => {
|
|
|
const output = event.outputBuffer.getChannelData(0);
|
|
|
const needPrebuffer = !hasStartedPlayback;
|
|
|
const socketClosed = !socket || socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING;
|
|
|
|
|
|
if (needPrebuffer) {
|
|
|
if (buffer.length >= minBufferSamples || socketClosed) {
|
|
|
hasStartedPlayback = true;
|
|
|
if (!playbackStartedLogged) {
|
|
|
playbackStartedLogged = true;
|
|
|
appendLog('[Frontend] Browser started to play audio');
|
|
|
startPlaybackTimer();
|
|
|
}
|
|
|
} else {
|
|
|
output.fill(0);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const chunk = pullAudio(output.length);
|
|
|
output.set(chunk);
|
|
|
|
|
|
if (hasStartedPlayback) {
|
|
|
playbackSamples += output.length;
|
|
|
}
|
|
|
|
|
|
if (socketClosed && buffer.length === 0 && chunk.every(sample => sample === 0)) {
|
|
|
silentFrameCount += 1;
|
|
|
if (silentFrameCount >= 4) {
|
|
|
stop();
|
|
|
}
|
|
|
} else {
|
|
|
silentFrameCount = 0;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
scriptNode.connect(audioCtx.destination);
|
|
|
};
|
|
|
|
|
|
const start = () => {
|
|
|
if (isPlaying) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const textValue = promptInput?.value || '';
|
|
|
const cfgValue = Number(cfgSelect.value);
|
|
|
const stepsValue = Number(stepsSelect.value);
|
|
|
const voiceValue = voiceSelect.value || '';
|
|
|
|
|
|
clearLogs();
|
|
|
const cfgDisplay = Number.isFinite(cfgValue) ? cfgValue.toFixed(3) : 'default';
|
|
|
const stepsDisplay = Number.isFinite(stepsValue) ? stepsValue : 'default';
|
|
|
appendLog(`[Frontend] Start button clicked, CFG=${cfgDisplay}, Steps=${stepsDisplay}, Speaker=${voiceValue || 'default'}`);
|
|
|
setModelGenerated(0);
|
|
|
setPlaybackElapsed(0);
|
|
|
|
|
|
resetState(true);
|
|
|
clearRecordedChunks();
|
|
|
isPlaying = true;
|
|
|
previewActive = true;
|
|
|
updateStreamingPreview();
|
|
|
updateButtonLabel();
|
|
|
createAudioChain();
|
|
|
|
|
|
const params = new URLSearchParams();
|
|
|
params.set('text', textValue);
|
|
|
if (!Number.isNaN(cfgValue)) {
|
|
|
params.set('cfg', cfgValue.toFixed(3));
|
|
|
}
|
|
|
if (!Number.isNaN(stepsValue)) {
|
|
|
params.set('steps', stepsValue.toString());
|
|
|
}
|
|
|
if (voiceValue) {
|
|
|
params.set('voice', voiceValue);
|
|
|
}
|
|
|
const wsUrl = `${location.origin.replace(/^http/, 'ws')}/stream?${params.toString()}`;
|
|
|
|
|
|
socket = new WebSocket(wsUrl);
|
|
|
socket.binaryType = 'arraybuffer';
|
|
|
|
|
|
socket.onmessage = event => {
|
|
|
if (typeof event.data === 'string') {
|
|
|
handleLogMessage(event.data);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!(event.data instanceof ArrayBuffer)) {
|
|
|
return;
|
|
|
}
|
|
|
const rawBuffer = event.data.slice(0);
|
|
|
const view = new DataView(rawBuffer);
|
|
|
const floatChunk = new Float32Array(view.byteLength / 2);
|
|
|
for (let i = 0; i < floatChunk.length; i += 1) {
|
|
|
floatChunk[i] = view.getInt16(i * 2, true) / 32768;
|
|
|
}
|
|
|
appendAudio(floatChunk);
|
|
|
recordedChunks.push(rawBuffer);
|
|
|
recordedSamples += floatChunk.length;
|
|
|
updateSaveButtonState();
|
|
|
|
|
|
if (!firstBrowserChunkLogged) {
|
|
|
firstBrowserChunkLogged = true;
|
|
|
appendLog('[Frontend] Received first audio chunk');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
socket.onerror = err => {
|
|
|
console.error('WebSocket error', err);
|
|
|
appendLog(`[Error] WebSocket error: ${err?.message || err}`);
|
|
|
stop();
|
|
|
};
|
|
|
|
|
|
socket.onclose = () => {
|
|
|
socket = null;
|
|
|
if (recordedSamples > 0) {
|
|
|
recordingComplete = true;
|
|
|
updateSaveButtonState();
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
|
|
|
const stop = () => {
|
|
|
if (!isPlaying) {
|
|
|
resetState(false);
|
|
|
updateButtonLabel();
|
|
|
return;
|
|
|
}
|
|
|
resetState(false);
|
|
|
setPlaybackElapsed(Math.min(lastPlaybackElapsed, modelGeneratedTotal));
|
|
|
appendLog('[Frontend] Playback stopped');
|
|
|
if (recordedSamples > 0) {
|
|
|
recordingComplete = true;
|
|
|
updateSaveButtonState();
|
|
|
}
|
|
|
previewActive = false;
|
|
|
clearPreviewTimer();
|
|
|
streamingPreview?.classList.remove('streaming-active');
|
|
|
updateButtonLabel();
|
|
|
};
|
|
|
|
|
|
controlBtn.addEventListener('click', () => {
|
|
|
if (isPlaying) {
|
|
|
stop();
|
|
|
} else {
|
|
|
start();
|
|
|
}
|
|
|
});
|
|
|
if (saveBtn) {
|
|
|
saveBtn.addEventListener('click', handleSaveClick);
|
|
|
}
|
|
|
updateButtonLabel();
|
|
|
updateSaveButtonState();
|
|
|
window.addEventListener('beforeunload', () => {
|
|
|
resetState();
|
|
|
clearPreviewTimer();
|
|
|
revokeDownloadUrl();
|
|
|
});
|
|
|
})();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
