feat: spectator mode - all visitors see the same streaming generation

app.py

@@ -459,37 +459,50 @@ def get_frame():
                 {"status": "error", "message": "session_id is required"}
             ), 400
 
-        # Verify this is the active session
-        with session_lock:
-            if active_session_id != session_id:
-                return jsonify(
-                    {"status": "error", "message": "Not the active session"}
-                ), 403
-
         if model_manager is None:
             return jsonify({"status": "error", "message": "Model not initialized"}), 400
 
-        # 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()
 
-            return jsonify(
-                {
-                    "status": "success",
-                    "frames": frames,
-                    "buffer_size": model_manager.frame_buffer.size(),
-                }
-            )
+        # Check if this is the active session or a spectator
+        with session_lock:
+            is_active = active_session_id == session_id
+
+        if is_active:
+            # Active session: pop frames from generation buffer
+            frames = []
+            for _ in range(count):
+                joints = model_manager.get_next_frame()
+                if joints is None:
+                    break
+                frames.append(joints.tolist())
+
+            if frames:
+                with consumption_monitor_lock:
+                    last_frame_consumed_time = time.time()
+
+                return jsonify(
+                    {
+                        "status": "success",
+                        "frames": frames,
+                        "buffer_size": model_manager.frame_buffer.size(),
+                    }
+                )
+        else:
+            # Spectator: read from broadcast buffer (non-destructive)
+            after_id = int(request.args.get("after_id", 0))
+            broadcast = model_manager.get_broadcast_frames(after_id, count)
+            if broadcast:
+                last_id = broadcast[-1][0]
+                frames = [joints.tolist() for _, joints in broadcast]
+                return jsonify(
+                    {
+                        "status": "success",
+                        "frames": frames,
+                        "last_id": last_id,
+                        "buffer_size": model_manager.frame_buffer.size(),
+                    }
+                )
         else:
             return jsonify(
                 {

model_manager.py

@@ -71,9 +71,14 @@ class ModelManager:
             "cfg_scale": self.model.cfg_scale,
         }
 
-        # Frame buffer
+        # Frame buffer (for active session)
         self.frame_buffer = FrameBuffer(target_buffer_size=16)
 
+        # Broadcast buffer (for spectators) - append-only with frame IDs
+        self.broadcast_frames = deque(maxlen=200)
+        self.broadcast_id = 0
+        self.broadcast_lock = threading.Lock()
+
         # Stream joint recovery with smoothing
         self.smoothing_alpha = 0.5  # Default: medium smoothing
         self.stream_recovery = StreamJointRecovery263(
@@ -335,6 +340,12 @@ class ModelManager:
                             frame_data = decoded[i].cpu().numpy()
                             joints = self.stream_recovery.process_frame(frame_data)
                             self.frame_buffer.add_frame(joints)
+                            # Also add to broadcast buffer for spectators
+                            with self.broadcast_lock:
+                                self.broadcast_id += 1
+                                self.broadcast_frames.append(
+                                    (self.broadcast_id, joints)
+                                )
 
                         step_time = time.time() - step_start
                         total_gen_time += step_time
@@ -367,6 +378,16 @@ class ModelManager:
         """Get the next frame from buffer"""
         return self.frame_buffer.get_frame()
 
+    def get_broadcast_frames(self, after_id, count=8):
+        """Get frames from broadcast buffer after the given ID (for spectators)."""
+        with self.broadcast_lock:
+            frames = [
+                (fid, joints)
+                for fid, joints in self.broadcast_frames
+                if fid > after_id
+            ]
+        return frames[:count]
+
     def get_buffer_status(self):
         """Get buffer status"""
         return {

static/js/main.js

@@ -22,6 +22,7 @@ class MotionApp {
         // Local frame queue for batch fetching (reduces HTTP round-trip overhead)
         this.localFrameQueue = [];
         this.batchSize = 8;  // Fetch up to 8 frames per request
+        this.broadcastLastId = 0;  // For spectator mode (broadcast buffer cursor)
         
         // Session management
         this.sessionId = this.generateSessionId();
@@ -501,14 +502,20 @@ class MotionApp {
         if (this.localFrameQueue.length < this.batchSize && !this.isFetchingFrame) {
             this.isFetchingFrame = true;
 
-            fetch(`/api/get_frame?session_id=${this.sessionId}&count=${this.batchSize}`)
+            let url = `/api/get_frame?session_id=${this.sessionId}&count=${this.batchSize}`;
+            if (this.broadcastLastId > 0) {
+                url += `&after_id=${this.broadcastLastId}`;
+            }
+            fetch(url)
                 .then(response => response.json())
                 .then(data => {
                     if (data.status === 'success') {
-                        // Push batch of frames into local queue
                         for (const frame of data.frames) {
                             this.localFrameQueue.push(frame);
                         }
+                        if (data.last_id !== undefined) {
+                            this.broadcastLastId = data.last_id;
+                        }
                         this.consecutiveWaiting = 0;
                     } else if (data.status === 'waiting') {
                         this.consecutiveWaiting++;
@@ -563,6 +570,7 @@ class MotionApp {
         this.isFetchingFrame = false;
         this.consecutiveWaiting = 0;
         this.localFrameQueue = [];
+        this.broadcastLastId = 0;
         this.startResetBtn.textContent = 'Start';
         this.startResetBtn.classList.remove('btn-danger');
         this.startResetBtn.classList.add('btn-primary');
@@ -723,6 +731,22 @@ class MotionApp {
                 if (data.history_length !== undefined) {
                     this.currentHistory.textContent = data.history_length;
                 }
+
+                // Auto-start spectator mode if someone else is generating
+                if (data.is_generating && !data.is_active_session && this.isIdle && !this.isRunning) {
+                    this.isRunning = true;
+                    this.isIdle = false;
+                    this.statusEl.textContent = 'Watching';
+                    this.startFrameLoop();
+                }
+                // Stop spectator mode when generation stops
+                if (!data.is_generating && !data.is_active_session && this.isRunning && this.statusEl.textContent === 'Watching') {
+                    this.isRunning = false;
+                    this.isIdle = true;
+                    this.statusEl.textContent = 'Idle';
+                    this.localFrameQueue = [];
+                    this.broadcastLastId = 0;
+                }
             }
             
             // Update motion FPS (frame consumption rate)