Add smooth crossfade transition and improve video sync on speech end

- Add 300ms crossfade transition between speaking and idle video
- Save last speaking frame for smooth visual transition
- Pass end_video_time_ms from Wav2Lip to frontend for precise sync
- Increase JPEG quality from 85 to 100 on Wav2Lip server

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

interface/index_optimized.html

@@ -280,14 +280,47 @@
         let speakingFrameIndex = 0;
         let lastSpeakingRenderTime = 0;
 
+        // Crossfade transition variables
+        let isTransitioning = false;
+        let transitionStartTime = 0;
+        let lastSpeakingFrame = null;  // Guarda o último frame do speaking para crossfade
+        const TRANSITION_DURATION_MS = 300;  // Duração do crossfade em ms
+
         function startUnifiedRenderLoop() {
             if (unifiedRenderLoop) return; // Já está rodando
 
             function renderFrame() {
                 if (renderSource === 'idle') {
-                    // Desenha o frame atual do vídeo idle no canvas
-                    if (idleVideo.readyState >= 2) { // HAVE_CURRENT_DATA
-                        ctx.drawImage(idleVideo, 0, 0, canvas.width, canvas.height);
+                    // Se estamos em transição, fazer crossfade
+                    if (isTransitioning && lastSpeakingFrame) {
+                        const now = performance.now();
+                        const elapsed = now - transitionStartTime;
+                        const progress = Math.min(elapsed / TRANSITION_DURATION_MS, 1);
+
+                        // Desenha o último frame do speaking
+                        ctx.globalAlpha = 1 - progress;
+                        ctx.drawImage(lastSpeakingFrame, 0, 0, canvas.width, canvas.height);
+
+                        // Desenha o vídeo idle por cima com alpha crescente
+                        ctx.globalAlpha = progress;
+                        if (idleVideo.readyState >= 2) {
+                            ctx.drawImage(idleVideo, 0, 0, canvas.width, canvas.height);
+                        }
+
+                        // Restaurar alpha
+                        ctx.globalAlpha = 1;
+
+                        // Fim da transição
+                        if (progress >= 1) {
+                            isTransitioning = false;
+                            lastSpeakingFrame = null;
+                            console.log("Crossfade concluído");
+                        }
+                    } else {
+                        // Desenha o frame atual do vídeo idle no canvas
+                        if (idleVideo.readyState >= 2) { // HAVE_CURRENT_DATA
+                            ctx.drawImage(idleVideo, 0, 0, canvas.width, canvas.height);
+                        }
                     }
                 } else if (renderSource === 'speaking') {
                     // Desenha frames do servidor com timing controlado
@@ -298,6 +331,8 @@
                     // Se o tempo esperado de fim do áudio já passou, parar de renderizar frames
                     if (audioExpectedEndTime > 0 && now >= audioExpectedEndTime) {
                         console.log(`Audio terminou (${now.toFixed(0)} >= ${audioExpectedEndTime.toFixed(0)}), finalizando video`);
+                        // Salvar último frame para crossfade
+                        saveLastFrameForTransition();
                         finishPlayback();
                         return;
                     }
@@ -334,6 +369,8 @@
 
                         // Verificar se terminou
                         if (streamDone && frameQueue.length === 0) {
+                            // Salvar último frame para crossfade
+                            saveLastFrameForTransition();
                             finishPlayback();
                         }
                     }
@@ -354,6 +391,23 @@
             }
         }
 
+        // Salvar o último frame do speaking para crossfade
+        function saveLastFrameForTransition() {
+            // Criar uma cópia do canvas atual como imagem
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = canvas.width;
+            tempCanvas.height = canvas.height;
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCtx.drawImage(canvas, 0, 0);
+
+            // Criar imagem a partir do canvas
+            const img = new Image();
+            img.src = tempCanvas.toDataURL('image/jpeg', 0.95);
+            lastSpeakingFrame = img;
+
+            console.log("Último frame salvo para crossfade");
+        }
+
         // Iniciar o render loop quando a página carrega
         idleVideo.addEventListener('loadeddata', () => {
             // Ajustar tamanho do canvas para match do vídeo
@@ -953,6 +1007,10 @@
             audioPlaybackStartTime = 0;
             audioExpectedEndTime = 0;
 
+            // Reset crossfade state
+            isTransitioning = false;
+            lastSpeakingFrame = null;
+
             document.getElementById("frames").textContent = "0";
             document.getElementById("rendered").textContent = "0";
             document.getElementById("buffer").textContent = "0";
@@ -1018,6 +1076,13 @@
             idleVideo.loop = true;
             idleVideo.play().catch(e => console.log("Erro ao retomar idle video:", e));
 
+            // Iniciar crossfade se temos o último frame salvo
+            if (lastSpeakingFrame) {
+                isTransitioning = true;
+                transitionStartTime = performance.now();
+                console.log("Iniciando crossfade de 300ms");
+            }
+
             // Transição: speaking → idle (só muda a fonte, canvas continua renderizando)
             renderSource = 'idle';
             console.log("Transição para idle - renderSource mudou, idle video playing");

interface/server_optimized.py

@@ -47,6 +47,7 @@ class OptimizedSession:
         self.start_time = None
         self.total_frames = 0
         self.total_bytes = 0
+        self.end_video_time_ms = None  # Tempo do vídeo onde parou (para sync)
 
     async def send_json(self, msg_type: str, **kwargs):
         """Envia mensagem JSON (para status/controle)."""
@@ -233,7 +234,10 @@ class OptimizedSession:
                             break
 
                         elif msg_type == "done":
-                            print(f"[Optimized] Wav2Lip done: {self.total_frames} frames")
+                            # Capturar end_video_time_ms para sincronização
+                            self.end_video_time_ms = data.get("end_video_time_ms")
+                            end_frame_idx = data.get("end_frame_idx")
+                            print(f"[Optimized] Wav2Lip done: {self.total_frames} frames, end_video_time_ms={self.end_video_time_ms}, end_frame_idx={end_frame_idx}")
                             break
 
                     elif msg.type in (aiohttp.WSMsgType.CLOSED, aiohttp.WSMsgType.ERROR):
@@ -267,7 +271,8 @@ class OptimizedSession:
             "done",
             total_frames=self.total_frames,
             elapsed_ms=int(elapsed * 1000),
-            bytes_sent=self.total_bytes
+            bytes_sent=self.total_bytes,
+            end_video_time_ms=self.end_video_time_ms
         )
 
     def stop(self):