|
|
<!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> |
|
|
|
