Add WebRTC streaming interface with vast.ai deployment

e62aafd 6 months ago

67.5 kB

	<!DOCTYPE html>
	<!--
	Avatar - Optimized Streaming
	VERSAO OTIMIZADA - 2024-12-27

	Otimizações:
	1. Recebe frames como WebSocket binário (sem base64)
	2. Decodificação mais eficiente
	3. -33% de bandwidth

	Protocolo binário:
	- Header: [tipo:1][param1:4][param2:4][dados...]
	- Tipo 0x01: Frame JPEG
	- Tipo 0x02: Audio PCM completo
	- Tipo 0x03: Audio chunk (futuro)
	-->
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Avatar - Optimized</title>
	<style>
	* { margin: 0; padding: 0; box-sizing: border-box; }
	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
	color: #fff;
	min-height: 100vh;
	padding: 20px;
	}
	.container { max-width: 1200px; margin: 0 auto; }
	h1 { text-align: center; margin-bottom: 20px; color: #00ff88; }

	.status-bar {
	display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;
	flex-wrap: wrap;
	}
	.status-item {
	padding: 8px 16px; border-radius: 20px;
	background: rgba(255,255,255,0.1);
	font-size: 13px;
	}
	.status-item.online { background: rgba(0,255,100,0.2); color: #0f0; }
	.status-item.offline { background: rgba(255,0,0,0.2); color: #f00; }
	.status-item.streaming { background: rgba(0,255,136,0.2); color: #0f8; }

	.main-content { display: flex; gap: 20px; flex-wrap: wrap; }

	.video-section {
	flex: 1.5; min-width: 450px;
	background: rgba(0,0,0,0.3); border-radius: 15px; padding: 20px;
	}
	.canvas-container {
	width: 100%; aspect-ratio: 16/9;
	background: #000; border-radius: 10px; overflow: hidden;
	position: relative;
	}
	/* Video idle fica oculto - só é usado como fonte para o canvas */
	#idle-video {
	position: absolute; top: 0; left: 0;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
	}
	/* Canvas sempre visível - renderiza tanto idle quanto speaking */
	#avatar-canvas {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	}

	.control-section {
	flex: 1; min-width: 280px;
	background: rgba(0,0,0,0.3); border-radius: 15px; padding: 20px;
	}

	.input-group { margin-bottom: 15px; }
	label { display: block; margin-bottom: 5px; color: #aaa; font-size: 13px; }
	textarea {
	width: 100%; height: 80px; padding: 10px;
	border: 1px solid #333; border-radius: 8px;
	background: rgba(255,255,255,0.05); color: #fff;
	resize: vertical; font-size: 14px;
	}
	select, button {
	width: 100%; padding: 12px; margin-top: 8px;
	border: none; border-radius: 8px; cursor: pointer;
	font-size: 14px;
	}
	select { background: rgba(255,255,255,0.1); color: #fff; }

	.btn-primary {
	background: linear-gradient(135deg, #00ff88, #00aa55);
	color: #000; font-weight: bold;
	}
	.btn-danger {
	background: linear-gradient(135deg, #ff4444, #cc0000);
	color: #fff; font-weight: bold;
	}
	button:hover { opacity: 0.9; }
	button:disabled { opacity: 0.5; cursor: not-allowed; }

	.metrics {
	margin-top: 15px; padding: 12px;
	background: rgba(0,255,136,0.05); border-radius: 8px;
	border: 1px solid rgba(0,255,136,0.2);
	}
	.metrics h4 { margin-bottom: 8px; color: #0f8; font-size: 13px; }
	.metric-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
	.metric-value { color: #0f8; font-weight: bold; font-family: monospace; }

	.log {
	margin-top: 15px; padding: 8px;
	background: #000; border-radius: 8px;
	font-family: monospace; font-size: 10px;
	max-height: 100px; overflow-y: auto;
	}
	.log-entry { padding: 2px 0; border-bottom: 1px solid #222; }
	.log-time { color: #666; }
	.log-msg { color: #0f8; }
	.log-error { color: #f00; }
	.log-status { color: #fc0; }
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Avatar - Optimized Binary</h1>

	<div class="status-bar">
	<div class="status-item" id="ws-status">WS: --</div>
	<div class="status-item" id="stream-status">Stream: Idle</div>
	<div class="status-item" id="fps-status">FPS: --</div>
	<div class="status-item" id="bandwidth-status">BW: --</div>
	</div>

	<div class="main-content">
	<div class="video-section">
	<h3 style="margin-bottom:10px">Avatar Stream (Binary Mode)</h3>
	<div class="canvas-container">
	<video id="idle-video" loop muted playsinline autoplay preload="auto" src="idle.mp4"></video>
	<canvas id="avatar-canvas"></canvas>
	</div>
	</div>

	<div class="control-section">
	<h3 style="margin-bottom:10px">Controles</h3>

	<div class="input-group">
	<label>Texto:</label>
	<textarea id="text-input">Hello! I am a real-time streaming avatar optimized for low latency.</textarea>
	</div>

	<div class="input-group">
	<label>Voz:</label>
	<select id="voice-select">
	<option value="tara">Tara</option>
	<option value="leah">Leah</option>
	<option value="jess">Jess</option>
	<option value="leo">Leo</option>
	<option value="dan">Dan</option>
	</select>
	</div>

	<div class="input-group" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1);">
	<label>Qualidade Video Fala: <span id="quality-value">95</span>%</label>
	<input type="range" id="quality-slider" min="50" max="100" value="95"
	style="width: 100%; margin-top: 5px;"
	oninput="document.getElementById('quality-value').textContent = this.value">
	<small style="color: #666; font-size: 11px;">Aumentar para igualar com vídeo idle</small>
	</div>

	<div class="input-group">
	<label>Offset Transição: <span id="offset-value">0</span>ms</label>
	<input type="range" id="offset-slider" min="-500" max="500" value="0"
	style="width: 100%; margin-top: 5px;"
	oninput="document.getElementById('offset-value').textContent = this.value">
	<small style="color: #666; font-size: 11px;">Ajuste fino do momento de voltar ao idle</small>
	</div>

	<button id="generate-btn" class="btn-primary" onclick="generate()" style="margin-top: 15px;">
	Gerar
	</button>
	<button id="stop-btn" class="btn-danger" onclick="stop()" disabled>
	Parar
	</button>

	<div class="input-group" style="margin-top: 15px; padding: 12px; background: rgba(255,200,0,0.1); border-radius: 8px; border: 1px solid rgba(255,200,0,0.3);">
	<label style="color: #fc0; font-weight: bold;">Modo Demo</label>
	<div style="display: flex; gap: 10px; margin-top: 8px; align-items: center;">
	<button id="demo-btn" class="btn-primary" onclick="toggleDemo()" style="flex: 1; background: linear-gradient(135deg, #fc0, #f90); margin: 0;">
	Iniciar Demo
	</button>
	</div>
	<div style="display: flex; gap: 10px; margin-top: 10px;">
	<div style="flex: 1;">
	<label style="font-size: 11px;">Idle: <span id="demo-idle-value">5</span>s</label>
	<input type="range" id="demo-idle-slider" min="1" max="30" value="5"
	style="width: 100%;"
	oninput="document.getElementById('demo-idle-value').textContent = this.value">
	</div>
	</div>
	<small style="color: #666; font-size: 11px;">Alterna entre falar e idle automaticamente</small>
	</div>

	<div class="metrics">
	<h4>Metricas (Binary)</h4>
	<div class="metric-row">
	<span>Latencia (ate playback):</span>
	<span class="metric-value" id="latency">--</span>
	</div>
	<div class="metric-row">
	<span>Frames recebidos:</span>
	<span class="metric-value" id="frames">0</span>
	</div>
	<div class="metric-row">
	<span>Frames renderizados:</span>
	<span class="metric-value" id="rendered">0</span>
	</div>
	<div class="metric-row">
	<span>Buffer:</span>
	<span class="metric-value" id="buffer">0</span>
	</div>
	<div class="metric-row">
	<span>Bytes recebidos:</span>
	<span class="metric-value" id="bytes">0 KB</span>
	</div>
	<div class="metric-row" style="border-top: 1px solid rgba(0,255,136,0.3); padding-top: 8px; margin-top: 4px;">
	<span>Duracao Video:</span>
	<span class="metric-value" id="video-duration">--</span>
	</div>
	<div class="metric-row">
	<span>Duracao Audio:</span>
	<span class="metric-value" id="audio-duration">--</span>
	</div>
	<div class="metric-row">
	<span>Diferenca (A-V):</span>
	<span class="metric-value" id="sync-diff">--</span>
	</div>
	</div>

	<div class="log" id="log"></div>
	</div>
	</div>
	</div>

	<script>
	const WS_URL = "ws://localhost:8080/ws";
	const TARGET_FPS = 25;
	const FRAME_INTERVAL = 1000 / TARGET_FPS;

	// Tipos de mensagem binária (devem corresponder ao server)
	const MSG_FRAME = 0x01;
	const MSG_AUDIO = 0x02;
	const MSG_AUDIO_CHUNK = 0x03;

	let ws = null;
	let isStreaming = false;
	let startTime = null;

	// Frame buffer - agora acumula até áudio chegar
	let frameQueue = [];
	let allFrames = []; // Todos os frames recebidos
	let renderedFrames = 0;
	let renderInterval = null;
	let lastRenderTime = 0;
	let totalBytes = 0;

	// Audio - streaming real com scheduling
	let audioContext = null;
	let audioSource = null;
	let audioBuffer = null;
	let audioDuration = 0;
	let audioChunks = []; // Chunks recebidos
	let audioChunksComplete = false; // Todos chunks recebidos?
	let streamDone = false;
	let syncedFrameInterval = FRAME_INTERVAL;
	let playbackStarted = false;

	// === REPRODUÇÃO PROGRESSIVA ===
	// Configurações de buffer mínimo para começar a reproduzir
	const MIN_FRAMES_TO_START = 5; // Mínimo de frames antes de iniciar (200ms de vídeo)
	const MIN_AUDIO_CHUNKS_TO_START = 2; // Mínimo de chunks de áudio antes de iniciar
	const PROGRESSIVE_MODE = true; // Ativar reprodução progressiva

	// Streaming de audio real - agendamento sequencial
	let nextAudioTime = 0; // Próximo tempo para agendar audio
	let audioScheduledChunks = 0; // Quantos chunks já agendamos
	let firstChunkTime = null; // Tempo do primeiro chunk (para latência)
	let totalAudioSamples = 0; // Total de samples de audio recebidos
	let currentAudioSource = null; // Referência ao audio source atual
	let audioPlaybackStartTime = 0; // Tempo em que o audio começou a tocar (performance.now)
	let audioExpectedEndTime = 0; // Tempo esperado para o audio terminar (performance.now)
	let progressivePlaybackStarted = false; // Flag para reprodução progressiva
	let audioContextStartTime = 0; // audioContext.currentTime quando começou

	// Sincronização de transição no nível de frame
	let endVideoTimeMs = null; // Tempo para continuar o vídeo idle após fala
	let startFrameIdx = null; // Frame inicial que o Wav2Lip usou
	let endFrameIdx = null; // Frame final que o Wav2Lip usou
	let waitingForFrameSync = false; // Esperando o frame certo para começar
	let frameSyncStartTime = 0; // Quando começou a esperar pelo frame
	const FRAME_SYNC_TIMEOUT = 500; // Timeout máximo em ms para sincronização
	let idleVideoDurationMs = 0; // Duração total do vídeo idle em ms
	let idleVideoTotalFrames = 0; // Total de frames do vídeo idle

	// Renderização unificada no canvas
	let renderSource = 'idle'; // 'idle' = video, 'speaking' = frames do servidor
	let unifiedRenderLoop = null; // ID do requestAnimationFrame

	// Medição de latência de rede
	let networkLatencyMs = 100; // Latência estimada (RTT/2), começa com valor default
	let lastPingSentAt = null; // Timestamp do último ping
	let latencyHistory = []; // Histórico de latências para média móvel
	const LATENCY_SAMPLES = 5; // Quantidade de amostras para média
	const IDLE_VIDEO_FPS = 25; // FPS do vídeo idle

	// Canvas e Video Idle
	const canvas = document.getElementById("avatar-canvas");
	const ctx = canvas.getContext("2d");
	const idleVideo = document.getElementById("idle-video");

	// Iniciar video idle (escondido - só o canvas aparece)
	idleVideo.play().catch(e => console.log("Autoplay blocked:", e));

	// Render loop unificado - sempre desenha no canvas
	// Quando idle: desenha frame do vídeo
	// Quando speaking: desenha frames recebidos do servidor
	let speakingFrameIndex = 0;
	let lastSpeakingRenderTime = 0;

	// Transição direta (sem crossfade para parecer mais natural)

	function startUnifiedRenderLoop() {
	if (unifiedRenderLoop) return; // Já está rodando

	function renderFrame() {
	// === ESTADO: AGUARDANDO SINCRONIZAÇÃO DE FRAME ===
	if (waitingForFrameSync && startFrameIdx !== null) {
	// Continuar mostrando idle video enquanto aguarda
	if (idleVideo.readyState >= 2) {
	ctx.drawImage(idleVideo, 0, 0, canvas.width, canvas.height);
	}

	// Verificar timeout - se demorou muito, iniciar mesmo assim
	const waitingTime = performance.now() - frameSyncStartTime;
	if (waitingTime > FRAME_SYNC_TIMEOUT) {
	console.log(`Frame sync: TIMEOUT após ${waitingTime.toFixed(0)}ms - iniciando sem sync`);
	waitingForFrameSync = false;
	doStartSpeaking();
	unifiedRenderLoop = requestAnimationFrame(renderFrame);
	return;
	}

	// Calcular frame atual do vídeo idle
	const currentIdleFrame = Math.floor(idleVideo.currentTime * IDLE_VIDEO_FPS) % idleVideoTotalFrames;

	// Verificar se chegou no frame alvo (com tolerância de ±2 frames)
	const frameDiff = Math.abs(currentIdleFrame - startFrameIdx);
	const isCloseEnough = frameDiff <= 2 \|\| frameDiff >= (idleVideoTotalFrames - 2);

	if (isCloseEnough) {
	console.log(`Frame sync: frame atual=${currentIdleFrame}, alvo=${startFrameIdx} - INICIANDO! (${waitingTime.toFixed(0)}ms)`);
	waitingForFrameSync = false;
	doStartSpeaking();
	}

	unifiedRenderLoop = requestAnimationFrame(renderFrame);
	return;
	}

	if (renderSource === 'idle') {
	// Transição direta - sem fade, apenas troca para o vídeo idle
	// O vídeo idle já está sincronizado no ponto correto (endVideoTimeMs)
	if (idleVideo.readyState >= 2) {
	ctx.drawImage(idleVideo, 0, 0, canvas.width, canvas.height);
	} else {
	// Video não está pronto - tentar recarregar
	console.log(`[IDLE] Video não pronto: readyState=${idleVideo.readyState}, tentando play...`);
	idleVideo.play().catch(e => {});
	}
	} else if (renderSource === 'speaking') {
	// Desenha frames do servidor com timing controlado
	const now = performance.now();
	const elapsed = now - lastSpeakingRenderTime;

	// === VERIFICAR SE DEVE FINALIZAR ===

	// Debug: mostrar estado a cada segundo
	if (Math.floor(now / 1000) !== Math.floor(lastSpeakingRenderTime / 1000)) {
	console.log(`[DEBUG] streamDone=${streamDone}, queue=${frameQueue.length}, rendered=${renderedFrames}, audioEnd=${audioExpectedEndTime.toFixed(0)}, now=${now.toFixed(0)}`);
	}

	// 1. Áudio terminou (tempo esperado passou + offset do usuário)
	const transitionOffset = parseInt(document.getElementById("offset-slider").value) \|\| 0;
	const adjustedEndTime = audioExpectedEndTime + transitionOffset;
	if (audioExpectedEndTime > 0 && now >= adjustedEndTime) {
	console.log(`[FIM] Audio terminou: now=${now.toFixed(0)} >= end=${adjustedEndTime.toFixed(0)} (offset=${transitionOffset})`);
	finishPlayback();
	// NÃO fazer return aqui - precisa continuar o render loop para o idle
	}

	// 2. Stream completo e fila de frames vazia
	else if (streamDone && frameQueue.length === 0) {
	console.log(`[FIM] Stream done + fila vazia: rendered=${renderedFrames}, total=${allFrames.length}`);
	finishPlayback();
	// NÃO fazer return aqui - precisa continuar o render loop para o idle
	}

	// === RENDERIZAR PRÓXIMO FRAME ===
	if (elapsed >= syncedFrameInterval && frameQueue.length > 0) {
	const frameData = frameQueue.shift();

	// Carregar imagem a partir da URL
	const img = new Image();
	img.onload = () => {
	// Ajustar canvas se necessário
	if (canvas.width !== img.width \|\| canvas.height !== img.height) {
	canvas.width = img.width;
	canvas.height = img.height;
	}
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	URL.revokeObjectURL(frameData.url); // Liberar memória
	};
	img.src = frameData.url;

	renderedFrames++;
	document.getElementById("rendered").textContent = renderedFrames;
	document.getElementById("buffer").textContent = frameQueue.length;
	lastSpeakingRenderTime = now;

	// Atualizar FPS
	const fps = 1000 / elapsed;
	updateStatus("fps-status", "", `FPS: ${fps.toFixed(0)}`);

	// Bandwidth
	const totalElapsed = (Date.now() - startTime) / 1000;
	const bw = totalElapsed > 0 ? (totalBytes / 1024 / totalElapsed) : 0;
	updateStatus("bandwidth-status", "", `BW: ${bw.toFixed(0)} KB/s`);

	}
	}

	unifiedRenderLoop = requestAnimationFrame(renderFrame);
	}

	unifiedRenderLoop = requestAnimationFrame(renderFrame);
	console.log("Unified render loop started");
	}

	function stopUnifiedRenderLoop() {
	if (unifiedRenderLoop) {
	cancelAnimationFrame(unifiedRenderLoop);
	unifiedRenderLoop = null;
	console.log("Unified render loop stopped");
	}
	}

	// Iniciar o render loop quando a página carrega
	idleVideo.addEventListener('loadeddata', () => {
	// Ajustar tamanho do canvas para match do vídeo
	canvas.width = idleVideo.videoWidth \|\| 512;
	canvas.height = idleVideo.videoHeight \|\| 512;

	// Capturar duração e calcular total de frames
	idleVideoDurationMs = (idleVideo.duration \|\| 60) * 1000;
	idleVideoTotalFrames = Math.round((idleVideo.duration \|\| 60) * IDLE_VIDEO_FPS);
	console.log(`Video idle carregado: ${canvas.width}x${canvas.height}, ${idleVideo.duration?.toFixed(1)}s, ~${idleVideoTotalFrames} frames`);

	// Garantir que o vídeo idle está tocando em loop
	idleVideo.loop = true;
	idleVideo.muted = true;
	idleVideo.play().then(() => {
	console.log("Video idle iniciado com sucesso");
	startUnifiedRenderLoop();
	}).catch(e => {
	console.log("Autoplay bloqueado, iniciando render loop mesmo assim:", e);
	startUnifiedRenderLoop();
	});
	});

	// Fallback: se o vídeo não carregar em 3 segundos, iniciar mesmo assim
	setTimeout(() => {
	if (!unifiedRenderLoop) {
	console.log("Fallback: iniciando render loop após timeout");
	canvas.width = 512;
	canvas.height = 512;
	startUnifiedRenderLoop();
	}
	}, 3000);

	// Tratamento de erro do vídeo idle
	idleVideo.addEventListener('error', (e) => {
	console.error("Erro carregando vídeo idle:", e);
	log("Erro carregando vídeo idle", "error");
	// Tentar carregar novamente após 2 segundos
	setTimeout(() => {
	console.log("Tentando recarregar vídeo idle...");
	idleVideo.load();
	}, 2000);
	});

	// Quando o vídeo idle termina (não deveria acontecer com loop=true, mas por segurança)
	idleVideo.addEventListener('ended', () => {
	console.log("Video idle ended - reiniciando");
	idleVideo.currentTime = 0;
	idleVideo.play().catch(e => console.log("Erro reiniciando idle:", e));
	});

	// Quando o vídeo idle para por algum motivo
	idleVideo.addEventListener('pause', () => {
	if (renderSource === 'idle') {
	console.log("Video idle pausou inesperadamente - retomando");
	idleVideo.play().catch(e => console.log("Erro retomando idle:", e));
	}
	});

	// Forçar carregamento do vídeo idle com cache-busting
	idleVideo.src = `idle.mp4?t=${Date.now()}`;

	function log(msg, type = "msg") {
	const logDiv = document.getElementById("log");
	const time = new Date().toLocaleTimeString();
	logDiv.innerHTML = `<div class="log-entry"><span class="log-time">${time}</span> <span class="log-${type}">${msg}</span></div>` + logDiv.innerHTML;
	while (logDiv.children.length > 20) logDiv.removeChild(logDiv.lastChild);
	}

	function updateStatus(id, status, text) {
	const el = document.getElementById(id);
	el.textContent = text;
	el.className = "status-item " + status;
	}

	function connectWebSocket() {
	if (ws && ws.readyState === WebSocket.OPEN) return;

	updateStatus("ws-status", "", "WS: Conectando...");
	ws = new WebSocket(WS_URL);
	ws.binaryType = "arraybuffer"; // Importante para receber binário

	ws.onopen = () => {
	updateStatus("ws-status", "online", "WS: Conectado");
	log("Conectado (binary mode)", "msg");
	// Iniciar medição de latência
	measureLatency();
	};

	ws.onmessage = (event) => {
	if (event.data instanceof ArrayBuffer) {
	// Mensagem binária
	handleBinaryMessage(event.data);
	} else {
	// Mensagem JSON
	try {
	const data = JSON.parse(event.data);
	handleJsonMessage(data);
	} catch (e) {
	log("Erro JSON: " + e, "error");
	}
	}
	};

	ws.onclose = () => {
	updateStatus("ws-status", "offline", "WS: Desconectado");
	setTimeout(connectWebSocket, 3000);
	};

	ws.onerror = () => log("Erro WebSocket", "error");
	}

	// Medir latência de rede (RTT)
	function measureLatency() {
	if (!ws \|\| ws.readyState !== WebSocket.OPEN) return;

	lastPingSentAt = performance.now();
	ws.send(JSON.stringify({ action: "ping", timestamp: lastPingSentAt }));
	}

	// Processar resposta de latência
	function handlePong(serverTimestamp) {
	if (!lastPingSentAt) return;

	const rtt = performance.now() - lastPingSentAt;
	const oneWayLatency = rtt / 2;

	// Adicionar ao histórico
	latencyHistory.push(oneWayLatency);
	if (latencyHistory.length > LATENCY_SAMPLES) {
	latencyHistory.shift();
	}

	// Calcular média móvel
	networkLatencyMs = latencyHistory.reduce((a, b) => a + b, 0) / latencyHistory.length;

	console.log(`Latência: RTT=${rtt.toFixed(0)}ms, one-way=${networkLatencyMs.toFixed(0)}ms`);

	// Agendar próxima medição (a cada 5 segundos)
	setTimeout(measureLatency, 5000);
	}

	// Calcular timestamp compensado para gerar vídeo no frame certo
	function getCompensatedIdleVideoTime() {
	const currentTimeMs = idleVideo.currentTime * 1000;
	const videoDurationMs = (idleVideo.duration \|\| 60) * 1000;

	// Compensar: tempo atual + latência de ida + tempo estimado de processamento
	// O servidor vai receber o request depois de networkLatencyMs
	// E vai começar a gerar o vídeo, que precisa casar com o frame nesse momento
	const processingEstimateMs = 50; // Estimativa de overhead de processamento
	const compensatedTime = currentTimeMs + networkLatencyMs + processingEstimateMs;

	// Garantir que está dentro do range do vídeo (loop)
	return Math.round(compensatedTime % videoDurationMs);
	}

	function handleBinaryMessage(buffer) {
	const view = new DataView(buffer);
	const msgType = view.getUint8(0);

	if (msgType === MSG_FRAME) {
	// Frame: [tipo:1][index:4][tamanho:4][dados]
	const frameIndex = view.getUint32(1, true);
	const dataSize = view.getUint32(5, true);
	const frameData = new Uint8Array(buffer, 9, dataSize);

	totalBytes += buffer.byteLength;
	document.getElementById("bytes").textContent = (totalBytes / 1024).toFixed(1) + " KB";

	handleFrame(frameData, frameIndex);

	} else if (msgType === MSG_AUDIO) {
	// Audio completo: [tipo:1][sample_rate:4][tamanho:4][dados]
	const sampleRate = view.getUint32(1, true);
	const dataSize = view.getUint32(5, true);
	const audioData = new Uint8Array(buffer, 9, dataSize);

	totalBytes += buffer.byteLength;
	document.getElementById("bytes").textContent = (totalBytes / 1024).toFixed(1) + " KB";

	handleAudioComplete(audioData, sampleRate);

	} else if (msgType === MSG_AUDIO_CHUNK) {
	// Audio chunk: [tipo:1][chunk_index:4][is_last:1][tamanho:4][dados]
	const chunkIndex = view.getUint32(1, true);
	const isLast = view.getUint8(5) === 1;
	const dataSize = view.getUint32(6, true);
	const chunkData = new Uint8Array(buffer, 10, dataSize);

	totalBytes += buffer.byteLength;
	document.getElementById("bytes").textContent = (totalBytes / 1024).toFixed(1) + " KB";

	handleAudioChunk(chunkData, chunkIndex, isLast);
	}
	}

	function handleJsonMessage(data) {
	switch (data.type) {
	case "pong":
	// Resposta do ping - calcular latência
	handlePong(data.timestamp);
	break;

	case "first_frame":
	// Capturar start_frame_idx para sincronização no nível de frame
	if (data.start_frame_idx !== undefined && data.start_frame_idx !== null) {
	startFrameIdx = data.start_frame_idx;
	console.log(`Sync: start_frame_idx=${startFrameIdx}`);
	}
	log(`Primeiro frame (server): ${data.latency_ms}ms`, "status");
	break;

	case "done":
	// Salvar índices de frame para sincronização
	if (data.start_frame_idx !== undefined && data.start_frame_idx !== null) {
	startFrameIdx = data.start_frame_idx;
	}
	if (data.end_frame_idx !== undefined && data.end_frame_idx !== null) {
	endFrameIdx = data.end_frame_idx;
	}
	if (data.end_video_time_ms !== undefined) {
	endVideoTimeMs = data.end_video_time_ms;
	}
	console.log(`Sync: start_frame=${startFrameIdx}, end_frame=${endFrameIdx}, end_time_ms=${endVideoTimeMs}`);

	const framesCount = data.total_frames \|\| data.frames \|\| allFrames.length;
	const bytesInfo = data.bytes_sent ? `${(data.bytes_sent/1024).toFixed(1)}KB` : '';
	log(`Recebido: ${framesCount} frames ${bytesInfo}`, "msg");
	streamDone = true;
	console.log(`Stream done: ${allFrames.length} frames, audioChunks=${audioChunks.length}`);
	// Tentar iniciar reprodução sincronizada
	tryStartStreamingPlayback();
	break;

	case "status":
	log(data.message, "status");
	break;

	case "error":
	log("Erro: " + data.message, "error");
	stopStream();
	break;
	}
	}

	function handleFrame(frameData, frameIndex) {
	// Criar blob diretamente dos bytes (sem base64!)
	const blob = new Blob([frameData], { type: "image/jpeg" });
	const url = URL.createObjectURL(blob);

	// Acumular frames
	allFrames.push({ url, index: frameIndex });

	// Se já está reproduzindo (progressivo ou normal), adicionar ao buffer
	if (progressivePlaybackStarted \|\| playbackStarted) {
	frameQueue.push({ url, index: frameIndex });
	document.getElementById("buffer").textContent = frameQueue.length;
	}

	const received = allFrames.length;
	document.getElementById("frames").textContent = received;

	// Atualizar duracao do video (frames / FPS)
	const videoDuration = received / TARGET_FPS;
	document.getElementById("video-duration").textContent = videoDuration.toFixed(2) + "s";
	updateSyncDiff();

	if (!progressivePlaybackStarted && !playbackStarted) {
	document.getElementById("buffer").textContent = received + " (buffering)";
	}

	if (received === 1) {
	console.log("Primeiro frame recebido - buffering...");
	updateStatus("stream-status", "streaming", "Stream: Buffering...");
	}

	// Tentar iniciar playback streaming
	tryStartStreamingPlayback();
	}

	function startAudioPlayback() {
	if (!audioBuffer \|\| !audioContext) return;

	if (audioSource) {
	try { audioSource.stop(); } catch (e) {}
	}

	audioSource = audioContext.createBufferSource();
	audioSource.buffer = audioBuffer;
	audioSource.connect(audioContext.destination);
	audioSource.start();

	// Callback quando áudio termina
	audioSource.onended = () => {
	console.log("Audio terminou");
	};
	}

	// REMOVIDO: startRendering() e renderNextFrame() obsoletos
	// Agora usamos o render loop unificado (startUnifiedRenderLoop)
	// que renderiza tanto frames do vídeo idle quanto frames do servidor

	function handleAudioChunk(chunkData, chunkIndex, isLast) {
	// Primeiro chunk - inicializar contexto
	if (audioChunks.length === 0 && chunkData.length > 0) {
	firstChunkTime = Date.now();
	initAudioContext();
	}

	if (chunkData.length > 0) {
	// Acumular chunk
	audioChunks.push(chunkData);

	// Acumular samples para calcular duração
	const alignedBuffer = new ArrayBuffer(chunkData.length);
	new Uint8Array(alignedBuffer).set(chunkData);
	const samples = new Int16Array(alignedBuffer);
	totalAudioSamples += samples.length;

	// Atualizar duração na UI
	const totalAudioDuration = totalAudioSamples / 24000;
	document.getElementById("audio-duration").textContent = totalAudioDuration.toFixed(2) + "s";
	updateSyncDiff();

	// === MODO PROGRESSIVO: Agendar chunk imediatamente ===
	if (PROGRESSIVE_MODE && progressivePlaybackStarted) {
	scheduleAudioChunkProgressive(chunkData);
	}

	console.log(`Audio chunk ${chunkIndex}: ${chunkData.length} bytes, scheduled=${audioScheduledChunks}`);
	}

	if (isLast) {
	audioChunksComplete = true;
	log(`Audio completo: ${audioChunks.length} chunks`, "status");
	console.log(`Todos chunks recebidos: ${audioChunks.length}`);
	}

	// Tentar iniciar playback
	tryStartStreamingPlayback();
	}

	function scheduleAudioChunkProgressive(chunkData) {
	// Agendar este chunk de áudio para tocar em sequência
	if (!audioContext) return;

	try {
	// Converter PCM int16 para float32
	const alignedBuffer = new ArrayBuffer(chunkData.length);
	new Uint8Array(alignedBuffer).set(chunkData);
	const samples = new Int16Array(alignedBuffer);
	const floatSamples = new Float32Array(samples.length);
	for (let i = 0; i < samples.length; i++) {
	floatSamples[i] = samples[i] / 32768;
	}

	// Criar buffer de audio
	const buffer = audioContext.createBuffer(1, floatSamples.length, 24000);
	buffer.getChannelData(0).set(floatSamples);

	// Criar source
	const source = audioContext.createBufferSource();
	source.buffer = buffer;
	source.connect(audioContext.destination);

	// Garantir que não agendamos no passado
	const now = audioContext.currentTime;
	if (nextAudioTime < now) {
	nextAudioTime = now + 0.01;
	}

	// Agendar para tocar
	source.start(nextAudioTime);

	// Calcular duração e atualizar próximo tempo
	const chunkDuration = floatSamples.length / 24000;
	nextAudioTime += chunkDuration;
	audioScheduledChunks++;

	// Atualizar tempo esperado de fim (em performance.now)
	const audioEndContextTime = nextAudioTime;
	const elapsedSinceStart = audioEndContextTime - audioContextStartTime;
	audioExpectedEndTime = audioPlaybackStartTime + (elapsedSinceStart * 1000);

	} catch (e) {
	console.error("Erro agendando audio chunk:", e);
	}
	}

	function initAudioContext() {
	if (!audioContext) {
	audioContext = new (window.AudioContext \|\| window.webkitAudioContext)({
	sampleRate: 24000
	});
	}
	// Inicializar o tempo de scheduling
	nextAudioTime = audioContext.currentTime + 0.05; // 50ms de buffer inicial
	audioScheduledChunks = 0;
	}

	function updateSyncDiff() {
	// Calcular diferenca entre duracao do audio e do video
	const videoDuration = allFrames.length / TARGET_FPS;
	const audioDuration = totalAudioSamples / 24000;

	if (videoDuration > 0 && audioDuration > 0) {
	const diff = audioDuration - videoDuration;
	const diffEl = document.getElementById("sync-diff");
	diffEl.textContent = (diff >= 0 ? "+" : "") + diff.toFixed(2) + "s";

	// Colorir baseado na diferenca
	if (Math.abs(diff) < 0.1) {
	diffEl.style.color = "#0f0"; // Verde - sincronizado
	} else if (Math.abs(diff) < 0.5) {
	diffEl.style.color = "#fc0"; // Amarelo - pequena diferenca
	} else {
	diffEl.style.color = "#f00"; // Vermelho - dessincronizado
	}
	}
	}

	function scheduleAudioChunk(chunkData) {
	if (!audioContext) return;

	try {
	// Converter PCM int16 para float32
	const alignedBuffer = new ArrayBuffer(chunkData.length);
	new Uint8Array(alignedBuffer).set(chunkData);
	const samples = new Int16Array(alignedBuffer);
	const floatSamples = new Float32Array(samples.length);
	for (let i = 0; i < samples.length; i++) {
	floatSamples[i] = samples[i] / 32768;
	}

	// Acumular samples para calcular duracao
	totalAudioSamples += samples.length;

	// Criar buffer de audio para este chunk
	const chunkBuffer = audioContext.createBuffer(1, floatSamples.length, 24000);
	chunkBuffer.getChannelData(0).set(floatSamples);

	// Criar source e agendar
	const source = audioContext.createBufferSource();
	source.buffer = chunkBuffer;
	source.connect(audioContext.destination);

	// Garantir que não agendamos no passado
	if (nextAudioTime < audioContext.currentTime) {
	nextAudioTime = audioContext.currentTime + 0.01;
	}

	source.start(nextAudioTime);

	// Atualizar próximo tempo
	const chunkDuration = floatSamples.length / 24000;
	nextAudioTime += chunkDuration;
	audioScheduledChunks++;

	// Atualizar duracao do audio na UI
	const totalAudioDuration = totalAudioSamples / 24000;
	document.getElementById("audio-duration").textContent = totalAudioDuration.toFixed(2) + "s";
	updateSyncDiff();

	// Log do primeiro chunk
	if (audioScheduledChunks === 1) {
	const latency = Date.now() - startTime;
	console.log(`Primeiro audio chunk agendado: latencia=${latency}ms`);
	}

	} catch (e) {
	console.error("Erro agendando audio chunk:", e);
	}
	}

	async function handleAudioComplete(audioData, sampleRate) {
	// Fallback para audio completo (modo antigo)
	try {
	if (!audioContext) {
	audioContext = new (window.AudioContext \|\| window.webkitAudioContext)({
	sampleRate: sampleRate
	});
	}

	const alignedBuffer = new ArrayBuffer(audioData.length);
	new Uint8Array(alignedBuffer).set(audioData);

	const samples = new Int16Array(alignedBuffer);
	const floatSamples = new Float32Array(samples.length);
	for (let i = 0; i < samples.length; i++) {
	floatSamples[i] = samples[i] / 32768;
	}

	audioBuffer = audioContext.createBuffer(1, floatSamples.length, sampleRate);
	audioBuffer.getChannelData(0).set(floatSamples);
	audioDuration = audioBuffer.duration;
	audioChunksComplete = true;

	log(`Audio completo: ${(audioData.length/1024).toFixed(1)}KB, ${audioDuration.toFixed(2)}s`, "status");

	tryStartStreamingPlayback();

	} catch (e) {
	log("Erro audio: " + e, "error");
	console.error("Erro processando audio:", e);
	}
	}

	function tryStartStreamingPlayback() {
	// Já iniciou playback final? Sair
	if (playbackStarted) return;

	const framesCount = allFrames.length;
	const audioChunksCount = audioChunks.length;

	// === MODO PROGRESSIVO ===
	if (PROGRESSIVE_MODE && !progressivePlaybackStarted) {
	// Verificar se temos buffer mínimo para começar
	const hasMinFrames = framesCount >= MIN_FRAMES_TO_START;
	const hasMinAudio = audioChunksCount >= MIN_AUDIO_CHUNKS_TO_START;

	if (hasMinFrames && hasMinAudio) {
	console.log(`=== INICIANDO REPRODUÇÃO PROGRESSIVA ===`);
	console.log(`Buffer: ${framesCount} frames, ${audioChunksCount} chunks de áudio`);

	progressivePlaybackStarted = true;
	startProgressivePlayback();
	return;
	} else {
	// Ainda buffering
	const status = `Buffering: ${framesCount}/${MIN_FRAMES_TO_START} frames, ${audioChunksCount}/${MIN_AUDIO_CHUNKS_TO_START} chunks`;
	document.getElementById("buffer").textContent = status;
	return;
	}
	}

	// === STREAM COMPLETO - Ajustar FPS final ===
	if (streamDone && progressivePlaybackStarted && !playbackStarted) {
	playbackStarted = true;

	// Calcular FPS final baseado na duração real
	const audioDurationSec = totalAudioSamples / 24000;
	const calculatedFps = framesCount / audioDurationSec;
	syncedFrameInterval = 1000 / calculatedFps;

	console.log(`=== AJUSTE FINAL DE SYNC ===`);
	console.log(`Frames: ${framesCount}, Audio: ${audioDurationSec.toFixed(2)}s`);
	console.log(`FPS ajustado: ${calculatedFps.toFixed(2)} (interval: ${syncedFrameInterval.toFixed(1)}ms)`);
	return;
	}

	// === MODO TRADICIONAL (sem progressivo) ===
	if (!PROGRESSIVE_MODE && streamDone) {
	if (framesCount === 0 \|\| totalAudioSamples === 0) return;

	playbackStarted = true;

	const playbackLatency = Date.now() - startTime;
	document.getElementById("latency").textContent = playbackLatency + "ms";
	log(`Latencia: ${playbackLatency}ms`, "status");

	const audioDurationSec = totalAudioSamples / 24000;
	const calculatedFps = framesCount / audioDurationSec;
	syncedFrameInterval = 1000 / calculatedFps;

	frameQueue = [...allFrames];
	renderSource = 'speaking';
	lastSpeakingRenderTime = performance.now();
	restartAudioPlayback();

	updateStatus("stream-status", "streaming", "Stream: Reproduzindo");
	}
	}

	function startProgressivePlayback() {
	// Registrar latência
	const playbackLatency = Date.now() - startTime;
	document.getElementById("latency").textContent = playbackLatency + "ms";
	log(`Latencia: ${playbackLatency}ms`, "status");

	// Usar FPS padrão (25fps)
	syncedFrameInterval = FRAME_INTERVAL;

	console.log(`Iniciando progressivo: ${allFrames.length} frames, ${audioChunks.length} chunks`);

	// Copiar frames disponíveis para a fila
	frameQueue = [...allFrames];
	document.getElementById("buffer").textContent = frameQueue.length;

	// === SINCRONIZAÇÃO NO NÍVEL DE FRAME ===
	// Se temos startFrameIdx, esperar o vídeo idle chegar no frame certo
	if (startFrameIdx !== null && idleVideoTotalFrames > 0) {
	waitingForFrameSync = true;
	frameSyncStartTime = performance.now();
	console.log(`Frame sync: aguardando frame ${startFrameIdx} de ${idleVideoTotalFrames}`);
	updateStatus("stream-status", "streaming", `Sync: aguardando frame ${startFrameIdx}...`);
	// O render loop vai detectar waitingForFrameSync e fazer a transição quando chegar o frame certo
	return;
	}

	// Sem frame sync - iniciar imediatamente
	doStartSpeaking();
	}

	function doStartSpeaking() {
	// Mudar para modo speaking
	renderSource = 'speaking';
	lastSpeakingRenderTime = performance.now();

	// Iniciar áudio - agendar todos os chunks que já temos
	startProgressiveAudio();

	updateStatus("stream-status", "streaming", "Stream: Reproduzindo...");
	}

	function startProgressiveAudio() {
	if (!audioContext) {
	initAudioContext();
	}

	// Registrar tempo de início
	audioPlaybackStartTime = performance.now();
	audioContextStartTime = audioContext.currentTime;
	nextAudioTime = audioContext.currentTime + 0.02; // 20ms de buffer inicial

	// Agendar todos os chunks que já temos
	for (const chunk of audioChunks) {
	scheduleAudioChunkProgressive(chunk);
	}

	console.log(`Audio progressivo: ${audioScheduledChunks} chunks agendados`);
	}

	function restartAudioPlayback() {
	// Parar qualquer áudio anterior e recomeçar do início
	if (!audioContext) return;

	// Criar buffer completo de todos os chunks
	if (audioChunks.length === 0) return;

	try {
	// Parar o audio source anterior se existir
	if (currentAudioSource) {
	try { currentAudioSource.stop(); } catch (e) {}
	currentAudioSource = null;
	}

	const totalLength = audioChunks.reduce((sum, c) => sum + c.length, 0);
	const combined = new Uint8Array(totalLength);
	let offset = 0;
	for (const chunk of audioChunks) {
	combined.set(chunk, offset);
	offset += chunk.length;
	}

	// Converter PCM int16 para float32
	const alignedBuffer = new ArrayBuffer(combined.length);
	new Uint8Array(alignedBuffer).set(combined);
	const samples = new Int16Array(alignedBuffer);
	const floatSamples = new Float32Array(samples.length);
	for (let i = 0; i < samples.length; i++) {
	floatSamples[i] = samples[i] / 32768;
	}

	// Criar buffer e tocar
	const buffer = audioContext.createBuffer(1, floatSamples.length, 24000);
	buffer.getChannelData(0).set(floatSamples);

	const source = audioContext.createBufferSource();
	source.buffer = buffer;
	source.connect(audioContext.destination);

	// Registrar tempo de início e fim esperado do áudio
	audioPlaybackStartTime = performance.now();
	audioExpectedEndTime = audioPlaybackStartTime + (buffer.duration * 1000);

	// Callback quando áudio termina
	source.onended = () => {
	console.log("Audio playback ended (onended callback)");
	// Segurança extra: finalizar playback se ainda não foi
	if (renderSource === 'speaking') {
	finishPlayback();
	}
	};

	source.start();
	currentAudioSource = source;

	console.log(`Audio reiniciado: ${buffer.duration.toFixed(2)}s, end expected at ${audioExpectedEndTime.toFixed(0)}ms`);

	} catch (e) {
	console.error("Erro reiniciando audio:", e);
	}
	}

	async function prepareAndPlayAudio() {
	try {
	if (!audioContext) {
	audioContext = new (window.AudioContext \|\| window.webkitAudioContext)({
	sampleRate: 24000
	});
	}

	// Se já temos audioBuffer pronto (modo completo), usar direto
	if (audioBuffer) {
	startAudioPlayback();
	return;
	}

	// Caso contrário, juntar chunks disponíveis
	if (audioChunks.length === 0) return;

	const totalLength = audioChunks.reduce((sum, c) => sum + c.length, 0);
	const combined = new Uint8Array(totalLength);
	let offset = 0;
	for (const chunk of audioChunks) {
	combined.set(chunk, offset);
	offset += chunk.length;
	}

	// Converter PCM int16 para float32
	const alignedBuffer = new ArrayBuffer(combined.length);
	new Uint8Array(alignedBuffer).set(combined);
	const samples = new Int16Array(alignedBuffer);
	const floatSamples = new Float32Array(samples.length);
	for (let i = 0; i < samples.length; i++) {
	floatSamples[i] = samples[i] / 32768;
	}

	audioBuffer = audioContext.createBuffer(1, floatSamples.length, 24000);
	audioBuffer.getChannelData(0).set(floatSamples);
	audioDuration = audioBuffer.duration;

	console.log(`Audio preparado: ${audioDuration.toFixed(2)}s de ${audioChunks.length} chunks`);

	startAudioPlayback();

	} catch (e) {
	log("Erro preparando audio: " + e, "error");
	console.error(e);
	}
	}

	function generate() {
	const text = document.getElementById("text-input").value.trim();
	const voice = document.getElementById("voice-select").value;

	if (!text) { log("Digite texto", "error"); return; }
	if (!ws \|\| ws.readyState !== WebSocket.OPEN) { log("WS desconectado", "error"); return; }

	// Capturar o tempo COMPENSADO do vídeo idle (em ms)
	// Considera a latência de rede para que o frame gerado corresponda
	// ao frame que estará sendo exibido quando o vídeo chegar de volta
	const idleVideoTimeMs = getCompensatedIdleVideoTime();
	console.log(`Idle video compensated: ${idleVideoTimeMs}ms (latency: ${networkLatencyMs.toFixed(0)}ms)`);

	stopStream();

	// Reset frame state
	frameQueue = [];
	allFrames = [];
	renderedFrames = 0;
	totalBytes = 0;
	startTime = Date.now();

	// Reset audio/sync state
	audioChunks = [];
	audioChunksComplete = false;
	streamDone = false;
	audioDuration = 0;
	audioBuffer = null;
	syncedFrameInterval = FRAME_INTERVAL;
	playbackStarted = false;
	nextAudioTime = 0;
	audioScheduledChunks = 0;
	firstChunkTime = null;
	totalAudioSamples = 0;
	currentAudioSource = null;
	audioPlaybackStartTime = 0;
	audioExpectedEndTime = 0;
	audioContextStartTime = 0;
	progressivePlaybackStarted = false;

	// Reset frame sync state
	startFrameIdx = null;
	endFrameIdx = null;
	endVideoTimeMs = null;
	waitingForFrameSync = false;

	document.getElementById("frames").textContent = "0";
	document.getElementById("rendered").textContent = "0";
	document.getElementById("buffer").textContent = "0";
	document.getElementById("bytes").textContent = "0 KB";
	document.getElementById("latency").textContent = "--";
	document.getElementById("video-duration").textContent = "--";
	document.getElementById("audio-duration").textContent = "--";
	document.getElementById("sync-diff").textContent = "--";
	document.getElementById("sync-diff").style.color = "";

	isStreaming = true;
	document.getElementById("generate-btn").disabled = true;
	document.getElementById("stop-btn").disabled = false;
	updateStatus("stream-status", "", "Stream: Iniciando...");

	// Pegar valores dos controles
	const quality = parseInt(document.getElementById("quality-slider").value);

	// Calcular start_frame_idx localmente (mesmo cálculo que o Wav2Lip faz)
	// Isso permite sincronização imediata sem esperar resposta do servidor
	const localStartFrameIdx = Math.floor((idleVideoTimeMs / 1000) * IDLE_VIDEO_FPS) % idleVideoTotalFrames;
	startFrameIdx = localStartFrameIdx;
	console.log(`Frame sync local: start_frame_idx=${startFrameIdx} (de ${idleVideoTotalFrames} frames)`);

	log("Enviando: " + text.substring(0, 30) + "...", "status");

	// Enviar com o timestamp do vídeo idle para sincronização
	ws.send(JSON.stringify({
	action: "generate",
	text: text,
	voice: voice,
	idle_video_time_ms: idleVideoTimeMs, // Timestamp exato do vídeo idle
	jpeg_quality: quality // Qualidade do JPEG (50-100)
	}));
	}

	function stop() {
	if (ws && ws.readyState === WebSocket.OPEN) {
	ws.send(JSON.stringify({ action: "stop" }));
	}
	stopStream();
	}

	function finishPlayback() {
	// Evitar chamadas múltiplas
	if (renderSource === 'idle') {
	console.log("finishPlayback: já está em idle, ignorando");
	return;
	}

	// Parar render interval antigo (se existir)
	if (renderInterval) {
	clearInterval(renderInterval);
	renderInterval = null;
	}

	// Calcular estatísticas finais
	const elapsed = (Date.now() - startTime) / 1000;
	log(`Finalizado: ${renderedFrames} frames em ${elapsed.toFixed(1)}s`, "msg");
	console.log(`Playback finalizado: ${renderedFrames} frames renderizados`);

	// Transição para idle - calcular posição exata considerando tempo de rede
	// O servidor envia end_video_time_ms = posição do último frame usado
	// Precisamos compensar pelo tempo que passou desde que o servidor terminou até agora
	if (endVideoTimeMs !== null && endVideoTimeMs > 0) {
	const videoDuration = idleVideo.duration \|\| 60;
	const videoDurationMs = videoDuration * 1000;

	// Calcular quanto tempo passou desde o início (tempo de processamento + rede)
	const totalElapsedMs = Date.now() - startTime;

	// O áudio tem a duração real - usar isso como referência
	const audioDurationMs = totalAudioSamples / 24000 * 1000;

	// Tempo extra que passou além da duração do áudio (overhead de rede/processamento)
	const networkOverheadMs = Math.max(0, totalElapsedMs - audioDurationMs);

	// Posição compensada: end_video_time_ms + overhead de rede
	const compensatedTimeMs = endVideoTimeMs + networkOverheadMs;
	const seekTime = (compensatedTimeMs % videoDurationMs) / 1000;

	console.log(`Transição: end=${endVideoTimeMs}ms, elapsed=${totalElapsedMs}ms, audio=${audioDurationMs.toFixed(0)}ms, overhead=${networkOverheadMs.toFixed(0)}ms -> seek=${seekTime.toFixed(2)}s`);
	idleVideo.currentTime = seekTime;
	}

	// IMPORTANTE: Garantir que o vídeo idle está tocando (loop infinito)
	idleVideo.loop = true;
	idleVideo.play().catch(e => console.log("Erro ao retomar idle video:", e));

	// Transição direta: speaking → idle (sem fade, mais natural)
	renderSource = 'idle';
	console.log("Transição direta para idle");

	// Reset estado de audio
	audioExpectedEndTime = 0;
	audioPlaybackStartTime = 0;

	// Reset estado geral
	isStreaming = false;
	playbackStarted = false;
	progressivePlaybackStarted = false;

	// Reset frame sync state (manter endVideoTimeMs até aqui pois é usado acima)
	startFrameIdx = null;
	endFrameIdx = null;
	endVideoTimeMs = null;
	waitingForFrameSync = false;
	document.getElementById("generate-btn").disabled = false;
	document.getElementById("stop-btn").disabled = true;
	updateStatus("stream-status", "online", "Stream: Concluido");
	}

	function stopStream() {
	isStreaming = false;

	if (renderInterval) {
	clearInterval(renderInterval);
	renderInterval = null;
	}

	// Liberar URLs pendentes
	frameQueue.forEach(f => URL.revokeObjectURL(f.url));
	frameQueue = [];

	// Liberar URLs acumulados
	allFrames.forEach(f => URL.revokeObjectURL(f.url));
	allFrames = [];

	// Reset sync state
	audioChunks = [];
	audioChunksComplete = false;
	streamDone = false;
	audioDuration = 0;
	audioBuffer = null;
	playbackStarted = false;
	progressivePlaybackStarted = false;
	nextAudioTime = 0;
	audioScheduledChunks = 0;
	firstChunkTime = null;
	totalAudioSamples = 0;
	audioPlaybackStartTime = 0;
	audioExpectedEndTime = 0;
	audioContextStartTime = 0;

	if (currentAudioSource) {
	try { currentAudioSource.stop(); } catch (e) {}
	currentAudioSource = null;
	}

	if (audioSource) {
	try { audioSource.stop(); } catch (e) {}
	audioSource = null;
	}

	// Reset frame sync state
	startFrameIdx = null;
	endFrameIdx = null;
	endVideoTimeMs = null;
	waitingForFrameSync = false;

	// Voltar ao video idle (apenas muda a fonte do render loop)
	renderSource = 'idle';
	idleVideo.play().catch(e => {});
	console.log("stopStream: Transição para idle");

	document.getElementById("generate-btn").disabled = false;
	document.getElementById("stop-btn").disabled = true;
	updateStatus("stream-status", "", "Stream: Idle");
	}

	// Heartbeat
	setInterval(() => {
	if (ws && ws.readyState === WebSocket.OPEN) {
	ws.send(JSON.stringify({ action: "ping" }));
	}
	}, 30000);

	// === MODO DEMO ===
	let demoMode = false;
	let demoTimeout = null;
	let lastDemoText = "";

	function toggleDemo() {
	if (demoMode) {
	stopDemo();
	} else {
	startDemo();
	}
	}

	function startDemo() {
	demoMode = true;
	lastDemoText = document.getElementById("text-input").value.trim();

	if (!lastDemoText) {
	lastDemoText = "Hello! I am a real-time streaming avatar optimized for low latency.";
	document.getElementById("text-input").value = lastDemoText;
	}

	document.getElementById("demo-btn").textContent = "Parar Demo";
	document.getElementById("demo-btn").style.background = "linear-gradient(135deg, #f44, #c00)";
	document.getElementById("generate-btn").disabled = true;
	document.getElementById("text-input").disabled = true;

	log("Modo demo iniciado", "status");
	console.log("Demo: iniciando ciclo");

	// Iniciar primeiro ciclo
	demoSpeak();
	}

	function stopDemo() {
	demoMode = false;
	if (demoTimeout) {
	clearTimeout(demoTimeout);
	demoTimeout = null;
	}

	document.getElementById("demo-btn").textContent = "Iniciar Demo";
	document.getElementById("demo-btn").style.background = "linear-gradient(135deg, #fc0, #f90)";
	document.getElementById("generate-btn").disabled = false;
	document.getElementById("text-input").disabled = false;

	stop();
	log("Modo demo parado", "status");
	console.log("Demo: parado");
	}

	function demoSpeak() {
	if (!demoMode) return;

	console.log("Demo: falando...");

	// Usar o texto configurado
	const text = document.getElementById("text-input").value.trim() \|\| lastDemoText;
	const voice = document.getElementById("voice-select").value;
	const quality = parseInt(document.getElementById("quality-slider").value);
	const idleVideoTimeMs = getCompensatedIdleVideoTime();

	// Reset estado
	stopStream();
	frameQueue = [];
	allFrames = [];
	renderedFrames = 0;
	totalBytes = 0;
	startTime = Date.now();
	audioChunks = [];
	audioChunksComplete = false;
	streamDone = false;
	audioDuration = 0;
	audioBuffer = null;
	syncedFrameInterval = FRAME_INTERVAL;
	playbackStarted = false;
	nextAudioTime = 0;
	audioScheduledChunks = 0;
	firstChunkTime = null;
	totalAudioSamples = 0;
	currentAudioSource = null;
	audioPlaybackStartTime = 0;
	audioExpectedEndTime = 0;
	audioContextStartTime = 0;
	progressivePlaybackStarted = false;

	// Reset frame sync state
	endFrameIdx = null;
	endVideoTimeMs = null;
	waitingForFrameSync = false;

	// Calcular start_frame_idx localmente (mesmo cálculo que o Wav2Lip faz)
	const localStartFrameIdx = Math.floor((idleVideoTimeMs / 1000) * IDLE_VIDEO_FPS) % idleVideoTotalFrames;
	startFrameIdx = localStartFrameIdx;
	console.log(`Demo frame sync: start_frame_idx=${startFrameIdx}`);

	isStreaming = true;
	updateStatus("stream-status", "streaming", "Demo: Falando...");

	ws.send(JSON.stringify({
	action: "generate",
	text: text,
	voice: voice,
	idle_video_time_ms: idleVideoTimeMs,
	jpeg_quality: quality
	}));
	}

	function demoScheduleNextCycle() {
	if (!demoMode) return;

	const idleTime = parseInt(document.getElementById("demo-idle-slider").value) * 1000;
	console.log(`Demo: aguardando ${idleTime}ms em idle...`);
	updateStatus("stream-status", "online", `Demo: Idle (${idleTime/1000}s)`);

	demoTimeout = setTimeout(() => {
	if (demoMode) {
	demoSpeak();
	}
	}, idleTime);
	}

	// Modificar finishPlayback para suportar demo mode
	const originalFinishPlayback = finishPlayback;
	finishPlayback = function() {
	originalFinishPlayback();

	// Se está em modo demo, agendar próximo ciclo
	if (demoMode) {
	demoScheduleNextCycle();
	}
	};

	connectWebSocket();
	</script>
	</body>
	</html>