Add arrow key navigation for Segmentation Editing frame slider

- Implement handle_keyboard_navigation() callback function
- Add JavaScript keydown listener scoped to Segmentation tab
- Clamp frame values to min/max boundaries from frames_state
- Reuse existing composite_image_with_mask logic for consistency
- Prevent default browser behavior for captured arrow keys
- Update both ImageEditor and slider value synchronously

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

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

app.py

@@ -378,6 +378,68 @@ def load_segment_frame(segment_id, frame_number, show_mask, magic_code_state, fr
     return result_image, gr.update()
 
 
+def handle_keyboard_navigation(key_code, segment_id, current_frame, show_mask, magic_code_state, frames_state, masks_state):
+    """
+    Handle left/right arrow key navigation for frame slider.
+
+    Args:
+        key_code: JavaScript key code ('ArrowLeft' or 'ArrowRight')
+        segment_id: Current segment ID
+        current_frame: Current frame number
+        show_mask: Whether to show alpha mask overlay
+        magic_code_state: Magic code state
+        frames_state: Frames dictionary state
+        masks_state: Masks dictionary state
+
+    Returns:
+        Tuple of (updated image, updated slider value)
+    """
+    if not segment_id or frames_state is None:
+        return None, gr.update()
+
+    frames_dict = frames_state
+    masks_dict = masks_state
+
+    # Get min/max from available frames
+    available_frames = sorted(frames_dict.keys())
+    if not available_frames:
+        return None, gr.update()
+
+    min_frame = available_frames[0]
+    max_frame = available_frames[-1]
+
+    # Calculate new frame number
+    new_frame = int(current_frame)
+
+    if key_code == 'ArrowLeft':
+        new_frame = max(min_frame, new_frame - 1)
+    elif key_code == 'ArrowRight':
+        new_frame = min(max_frame, new_frame + 1)
+    else:
+        # Unknown key, no change
+        return None, gr.update()
+
+    # If frame didn't change (at boundary), return early
+    if new_frame == int(current_frame):
+        return None, gr.update()
+
+    logger.info(f"Keyboard navigation: {key_code} -> frame {new_frame}")
+
+    # Load the new frame using existing logic
+    if new_frame not in frames_dict:
+        logger.warning(f"Frame {new_frame} not found in downloaded frames")
+        return None, gr.update()
+
+    frame = frames_dict[new_frame]
+    mask = masks_dict.get(new_frame, None)
+
+    # Composite image with mask
+    result_image = composite_image_with_mask(frame, mask, show_mask)
+
+    # Return updated image and new slider value
+    return result_image, gr.update(value=new_frame)
+
+
 def handle_segment_selection(segment_id, magic_code):
     """
     Handle segment selection: download all files and initialize the view.
@@ -794,6 +856,9 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
                     seg_download_btn = gr.Button("Download Segment", variant="secondary")
                     seg_download_file = gr.File(label="Download", visible=False)
 
+                # Hidden component for keyboard event capture
+                seg_keyboard_input = gr.Textbox(visible=False, elem_id="seg_keyboard_input")
+
     # Wire Content Moderation processing
     cm_process_btn.click(
         fn=process_video,
@@ -843,6 +908,61 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
         outputs=[seg_download_file]
     )
 
+    # Keyboard navigation handler
+    seg_keyboard_input.change(
+        fn=handle_keyboard_navigation,
+        inputs=[
+            seg_keyboard_input,
+            seg_id_dropdown,
+            seg_frame_slider,
+            seg_show_mask,
+            magic_code_state,
+            frames_state,
+            masks_state
+        ],
+        outputs=[seg_image_editor, seg_frame_slider]
+    )
+
+    # Add JavaScript to capture arrow key events
+    demo.load(
+        None,
+        None,
+        None,
+        js="""
+        () => {
+            // Wait for the DOM to be ready
+            setTimeout(() => {
+                const keyboardInput = document.getElementById('seg_keyboard_input');
+                if (!keyboardInput) {
+                    console.warn('Keyboard input element not found');
+                    return;
+                }
+
+                // Add keydown listener to document
+                document.addEventListener('keydown', (e) => {
+                    // Only handle arrow keys
+                    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                        // Check if we're in the Segmentation Editing tab
+                        const segTab = document.querySelector('[id*="segmentation-editing"]');
+                        const activeTab = document.querySelector('.tab-nav button.selected');
+
+                        if (activeTab && activeTab.textContent.includes('Segmentation Editing')) {
+                            e.preventDefault();
+
+                            // Update the hidden input to trigger the change event
+                            const textarea = keyboardInput.querySelector('textarea');
+                            if (textarea) {
+                                textarea.value = e.key;
+                                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                        }
+                    }
+                });
+            }, 1000);
+        }
+        """
+    )
+
 if __name__ == "__main__":
     # To run this file locally, you'll need to install gradio and requests:
     # pip install gradio requests