Update app.py

app.py

@@ -265,7 +265,7 @@ async def chat_next(request: Request):
 
 def _generate_chunk(sentence, idx, total):
     """Synchronous TTS + FLOAT generation (runs in thread pool)."""
-    logger.info(f"[{_ts()}] [CHUNK {idx+1}/{total}] ({len(sentence.split())}w {len(sentence)}c) {sentence[:60]}...")
+    logger.info(f"[{_ts()}] [CHUNK {idx+1}/{total}] {sentence[:60]}...")
     t0 = _time.time()
 
     # 1. TTS
@@ -394,91 +394,44 @@ const chatInput=document.getElementById('chatInput'), btnSend=document.getElemen
 const btnReset=document.getElementById('btnReset');
 
 // ======================================================================
-// VIDEO: Seamless crossfade with preloading
+// VIDEO: Crossfade
 // ======================================================================
 function getActiveVideo(){return currentVideo==='A'?videoA:videoB}
 function getInactiveVideo(){return currentVideo==='A'?videoB:videoA}
 
-// Preload a video into the inactive element (doesn't play yet)
-function preloadVideo(url){
-    return new Promise((resolve)=>{
-        const next=getInactiveVideo();
-        next.muted=true;
-        next.preload='auto';
-        next.src=url;
-        next.load();
-        next.oncanplaythrough=function(){
-            next.oncanplaythrough=null;
-            console.log('['+new Date().toISOString().substr(11,12)+'] preloaded: '+url.split('/').pop());
-            resolve(true);
-        };
-        next.onerror=function(){
-            next.onerror=null;
-            console.warn('[VIDEO] Preload failed:', url);
-            resolve(false);
-        };
-        // Timeout fallback — don't wait forever
-        setTimeout(()=>resolve(true), 3000);
-    });
-}
-
-// Swap: the inactive element is already loaded, just play and crossfade
-function swapToPreloaded(){
+function crossfadeTo(url, muted){
     return new Promise((resolve)=>{
-        const prev=getActiveVideo();
-        const next=getInactiveVideo();
-
-        // If nothing preloaded, just resolve
-        if(!next.src || next.src===''){
-            resolve(); return;
-        }
-
-        next.style.zIndex='2';
-        prev.style.zIndex='1';
-        next.style.opacity='0';
-
-        next.play().then(()=>{
-            // Instant opacity swap (no slow fade — speed over beauty)
-            next.style.opacity='1';
-            prev.style.opacity='0';
-
-            // Clean up old video after brief overlap
-            setTimeout(()=>{
-                prev.pause();
-                prev.removeAttribute('src');
-                prev.load(); // reset
-                prev.style.zIndex='0';
-                next.style.zIndex='1';
-                currentVideo=currentVideo==='A'?'B':'A';
-                resolve();
-            }, 50);
-        }).catch(()=>{
-            next.muted=true;
+        if(isTransitioning){ resolve(); return; }
+        isTransitioning=true;
+        const prev=getActiveVideo(), next=getInactiveVideo();
+        next.muted=(muted!==false);
+        next.src=url; next.load();
+        next.onloadeddata=function(){
+            next.style.zIndex='2'; prev.style.zIndex='1'; next.style.opacity='0';
             next.play().then(()=>{
                 next.style.opacity='1';
-                prev.style.opacity='0';
                 setTimeout(()=>{
-                    prev.pause();
-                    prev.removeAttribute('src');
-                    prev.load();
-                    prev.style.zIndex='0';
-                    next.style.zIndex='1';
+                    prev.style.opacity='0'; prev.pause(); prev.src='';
+                    prev.style.zIndex='0'; next.style.zIndex='1';
                     currentVideo=currentVideo==='A'?'B':'A';
+                    isTransitioning=false;
                     resolve();
-                }, 50);
-            }).catch(()=>{ resolve(); });
-        });
-    });
-}
-
-// Full crossfade (load + play) for idle videos and first chunk
-function crossfadeTo(url, muted){
-    return new Promise(async (resolve)=>{
-        await preloadVideo(url);
-        const next=getInactiveVideo();
-        next.muted=(muted!==false);
-        await swapToPreloaded();
-        resolve();
+                },300);
+            }).catch(()=>{
+                next.muted=true;
+                next.play().then(()=>{
+                    next.style.opacity='1';
+                    setTimeout(()=>{
+                        prev.style.opacity='0'; prev.pause(); prev.src='';
+                        prev.style.zIndex='0'; next.style.zIndex='1';
+                        currentVideo=currentVideo==='A'?'B':'A';
+                        isTransitioning=false;
+                        resolve();
+                    },300);
+                }).catch(()=>{ isTransitioning=false; resolve(); });
+            });
+        };
+        next.onerror=function(){ isTransitioning=false; resolve(); };
     });
 }
 
@@ -501,11 +454,12 @@ videoA.addEventListener('ended',()=>{ if(currentVideo==='A'&&!isProcessing) play
 videoB.addEventListener('ended',()=>{ if(currentVideo==='B'&&!isProcessing) playNextIdle(); });
 
 // ======================================================================
-// VIDEO: Wait for current video to end
+// VIDEO: Wait for current lipsync video to end
 // ======================================================================
 function waitForVideoEnd(){
     return new Promise((resolve)=>{
         const active=getActiveVideo();
+        // If video is very short or already ended, resolve quickly
         if(active.ended || active.paused || !active.src){
             resolve(); return;
         }
@@ -574,60 +528,41 @@ async function sendMessage(){
             return await r.json();
         }
 
-        // Step 2: Fetch and play chunks with preloading
-        let nextChunk = await fetchChunk(sessionId);
+        // Step 2: Prefetch first chunk
+        let nextChunkPromise=fetchChunk(sessionId);
 
         for(let i=0; i<totalChunks; i++){
-            const chunk = nextChunk;
-            if(!chunk || chunk.done) break;
+            videoStatus.textContent='waiting '+(i+1)+'/'+totalChunks+'...';
 
-            console.log('['+new Date().toISOString().substr(11,12)+'] chunk '+(i+1)+' ready');
-            videoStatus.textContent='playing '+(i+1)+'/'+totalChunks;
+            // Wait for the current chunk to be ready
+            const chunk=await nextChunkPromise;
+            if(!chunk || chunk.done) break;
 
-            // Start fetching next chunk data from server (TTS+FLOAT generation)
-            let nextChunkPromise = (i+1 < totalChunks) ? fetchChunk(sessionId) : null;
+            // Immediately start prefetching the NEXT chunk (runs in parallel with playback)
+            if(i+1 < totalChunks){
+                videoStatus.textContent='speaking '+(i+1)+'/'+totalChunks+' (prefetching '+(i+2)+')';
+                nextChunkPromise=fetchChunk(sessionId);
+            }
 
             // Play audio
+            let audioPromise=null;
             if(chunk.audio_url){
                 const audio=new Audio(chunk.audio_url);
-                audio.play().catch(()=>{});
+                audioPromise=new Promise((resolve)=>{
+                    audio.onended=resolve;
+                    audio.onerror=resolve;
+                    audio.play().catch(()=>resolve());
+                });
             }
 
+            // Play lipsync video
             if(chunk.lipsync_video_url){
-                // First chunk: full load + crossfade
-                // Subsequent: inactive element already has preloaded video, just swap
-                if(i===0){
-                    await crossfadeTo(chunk.lipsync_video_url, true);
-                } else {
-                    // Preloaded from previous iteration — just swap
-                    await swapToPreloaded();
-                }
-                console.log('['+new Date().toISOString().substr(11,12)+'] chunk '+(i+1)+' playing');
-
-                // While video plays, wait for next chunk data and preload its video
-                if(nextChunkPromise){
-                    nextChunkPromise.then((nc)=>{
-                        if(nc && !nc.done && nc.lipsync_video_url){
-                            console.log('['+new Date().toISOString().substr(11,12)+'] preloading chunk '+(i+2));
-                            preloadVideo(nc.lipsync_video_url);
-                        }
-                    });
-                }
-
-                // Wait for current video to finish
+                await crossfadeTo(chunk.lipsync_video_url, true);
+                // Wait for this lipsync video to finish before next chunk
                 await waitForVideoEnd();
-                console.log('['+new Date().toISOString().substr(11,12)+'] chunk '+(i+1)+' ended');
-
-            } else if(chunk.audio_duration > 0){
-                // No video, just wait for audio
-                await new Promise(r=>setTimeout(r, chunk.audio_duration*1000));
-            }
-
-            // Get the next chunk (should already be resolved from the promise above)
-            if(nextChunkPromise){
-                nextChunk = await nextChunkPromise;
-            } else {
-                nextChunk = null;
+            } else if(audioPromise){
+                // No lipsync, just wait for audio to finish
+                await audioPromise;
             }
         }