Fix NoneType error and Gradio compatibility

app.py

@@ -36,17 +36,19 @@ def get_frame_info(frame_idx):
     frame_key = str(frame_idx)
     
     # Hand detection status
-    hand_data = hands_2d.get(frame_key, {})
+    hand_data = hands_2d.get(frame_key, {}) or {}
     left_detected = hand_data.get('left_hand') is not None
     right_detected = hand_data.get('right_hand') is not None
     
     # End effector pose
-    ee_data = end_effector.get(frame_key, {})
-    left_pose = ee_data.get('left_hand', {}).get('pose_6dof', None)
-    right_pose = ee_data.get('right_hand', {}).get('pose_6dof', None)
+    ee_data = end_effector.get(frame_key, {}) or {}
+    left_hand_data = ee_data.get('left_hand') or {}
+    right_hand_data = ee_data.get('right_hand') or {}
+    left_pose = left_hand_data.get('pose_6dof', None) if left_hand_data else None
+    right_pose = right_hand_data.get('pose_6dof', None) if right_hand_data else None
     
     # Action
-    action_data = actions.get(frame_key, {})
+    action_data = actions.get(frame_key, {}) or {}
     left_action = action_data.get('left_hand_action', None)
     camera_action = action_data.get('camera_action', None)
     
@@ -107,25 +109,7 @@ def update_display(frame_idx):
     return img, info
 
 # Build Gradio Interface
-with gr.Blocks(
-    title="DI Human Demo Visualizer",
-    theme=gr.themes.Soft(
-        primary_hue="cyan",
-        secondary_hue="purple",
-    ),
-    css="""
-    .header { text-align: center; margin-bottom: 20px; }
-    .stat-box { 
-        background: linear-gradient(135deg, #1a1a2e, #16213e); 
-        padding: 20px; 
-        border-radius: 12px; 
-        text-align: center;
-        color: white;
-    }
-    .stat-value { font-size: 32px; font-weight: bold; color: #00d4ff; }
-    .stat-label { font-size: 14px; color: #888; }
-    """
-) as demo:
+with gr.Blocks(title="DI Human Demo Visualizer") as demo:
     
     # Header
     gr.Markdown("""
@@ -143,33 +127,13 @@ with gr.Blocks(
     # Stats row
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown(f"""
-            <div class="stat-box">
-                <div class="stat-value">{total_frames}</div>
-                <div class="stat-label">Total Frames</div>
-            </div>
-            """)
+            gr.Markdown(f"### {total_frames}\n**Total Frames**")
         with gr.Column(scale=1):
-            gr.Markdown(f"""
-            <div class="stat-box">
-                <div class="stat-value">{hand_detection_rate:.1f}%</div>
-                <div class="stat-label">Hand Detection Rate</div>
-            </div>
-            """)
+            gr.Markdown(f"### {hand_detection_rate:.1f}%\n**Hand Detection**")
         with gr.Column(scale=1):
-            gr.Markdown(f"""
-            <div class="stat-box">
-                <div class="stat-value">{left_poses}</div>
-                <div class="stat-label">Left Hand Poses</div>
-            </div>
-            """)
+            gr.Markdown(f"### {left_poses}\n**Left Hand Poses**")
         with gr.Column(scale=1):
-            gr.Markdown(f"""
-            <div class="stat-box">
-                <div class="stat-value">{fps}</div>
-                <div class="stat-label">FPS</div>
-            </div>
-            """)
+            gr.Markdown(f"### {fps}\n**FPS**")
     
     gr.Markdown("---")