Spaces:

anycoderapps
/

VibeVoice-Realtime-0.5B

Running on Zero

App Files Files Community

VibeVoice-Realtime-0.5B / demo /web /index.html

akhaliq HF Staff

Upload 37 files

26e0cd3 verified 7 days ago

raw

history blame contribute delete

27.4 kB

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