perf: batch frame fetching to overcome HTTP round-trip latency

app.py

@@ -469,20 +469,24 @@ def get_frame():
         if model_manager is None:
             return jsonify({"status": "error", "message": "Model not initialized"}), 400
 
-        # Get next frame from buffer
-        joints = model_manager.get_next_frame()
-
-        if joints is not None:
+        # Get batch of frames from buffer (reduces HTTP round-trip overhead)
+        count = min(int(request.args.get("count", 8)), 20)
+        frames = []
+        for _ in range(count):
+            joints = model_manager.get_next_frame()
+            if joints is None:
+                break
+            frames.append(joints.tolist())
+
+        if frames:
             # Update last consumption time
             with consumption_monitor_lock:
                 last_frame_consumed_time = time.time()
 
-            # Convert numpy array to list for JSON
-            joints_list = joints.tolist()
             return jsonify(
                 {
                     "status": "success",
-                    "joints": joints_list,
+                    "frames": frames,
                     "buffer_size": model_manager.frame_buffer.size(),
                 }
             )

static/js/main.js

@@ -18,6 +18,10 @@ class MotionApp {
         // Request throttling
         this.isFetchingFrame = false;  // Prevent concurrent requests
         this.consecutiveWaiting = 0;   // Count consecutive 'waiting' responses
+
+        // Local frame queue for batch fetching (reduces HTTP round-trip overhead)
+        this.localFrameQueue = [];
+        this.batchSize = 8;  // Fetch up to 8 frames per request
         
         // Session management
         this.sessionId = this.generateSessionId();
@@ -473,68 +477,51 @@ class MotionApp {
     
     fetchFrame() {
         if (!this.isRunning) return;
-        
+
         const now = performance.now();
-        
-        // Check if it's time to fetch next frame AND we're not already fetching
-        if (now >= this.nextFetchTime && !this.isFetchingFrame) {
-            // Schedule next fetch (maintain fixed rate regardless of delays)
+
+        // Play back from local queue at target FPS
+        if (now >= this.nextFetchTime && this.localFrameQueue.length > 0) {
             this.nextFetchTime += this.frameInterval;
-            
-            // If we've fallen behind, catch up
             if (this.nextFetchTime < now) {
                 this.nextFetchTime = now + this.frameInterval;
             }
-            
-            // Mark as fetching to prevent concurrent requests
+
+            const joints = this.localFrameQueue.shift();
+            this.skeleton.updatePose(joints);
+            this.frameCount++;
+            this.frameCountEl.textContent = this.frameCount;
+            this.motionFpsCounter++;
+
+            this.currentRootPos.set(joints[0][0], joints[0][1], joints[0][2]);
+            this.updateAutoFollow();
+        }
+
+        // Fetch a batch from server when local queue is running low
+        if (this.localFrameQueue.length < this.batchSize && !this.isFetchingFrame) {
             this.isFetchingFrame = true;
-            
-            fetch(`/api/get_frame?session_id=${this.sessionId}`)
+
+            fetch(`/api/get_frame?session_id=${this.sessionId}&count=${this.batchSize}`)
                 .then(response => response.json())
                 .then(data => {
                     if (data.status === 'success') {
-                        this.skeleton.updatePose(data.joints);
-                        this.frameCount++;
-                        this.frameCountEl.textContent = this.frameCount;
-                        
-                        // Update motion FPS counter (only when frame consumed)
-
-
-                        this.motionFpsCounter++;
-                        
-                        // Update current root position
-                        this.currentRootPos.set(
-                            data.joints[0][0],
-                            data.joints[0][1],
-                            data.joints[0][2]
-                        );
-                        
-                        // Auto-follow (if user hasn't interacted for a while)
-                        this.updateAutoFollow();
-                        
-                        // Reset waiting counter on success
+                        // Push batch of frames into local queue
+                        for (const frame of data.frames) {
+                            this.localFrameQueue.push(frame);
+                        }
                         this.consecutiveWaiting = 0;
                     } else if (data.status === 'waiting') {
-                        // No frame available, slow down requests if this happens repeatedly
                         this.consecutiveWaiting++;
-                        
-                        // If buffer is consistently empty, back off a bit
-                        if (this.consecutiveWaiting > 5) {
-                            // Add a small delay to reduce server load
-                            this.nextFetchTime = now + this.frameInterval * 1.5;
-                            this.consecutiveWaiting = 0;
-                        }
                     }
                 })
                 .catch(error => {
-                    console.error('Error fetching frame:', error);
+                    console.error('Error fetching frames:', error);
                 })
                 .finally(() => {
-                    // Always mark as done fetching
                     this.isFetchingFrame = false;
                 });
         }
-        
+
         // Use requestAnimationFrame for continuous checking
         requestAnimationFrame(() => this.fetchFrame());
     }
@@ -575,6 +562,7 @@ class MotionApp {
         this.motionFpsCounter = 0;
         this.isFetchingFrame = false;
         this.consecutiveWaiting = 0;
+        this.localFrameQueue = [];
         this.startResetBtn.textContent = 'Start';
         this.startResetBtn.classList.remove('btn-danger');
         this.startResetBtn.classList.add('btn-primary');