Add sidebar with stats and video player

app.py

@@ -1,16 +1,95 @@
 """
-Minimal test version
+Dynamic Intelligence - Human Demo Visualizer
 """
 import gradio as gr
+import json
 from pathlib import Path
 
 DATA_DIR = Path(__file__).parent / "data"
+
+def load_json_safe(path):
+    try:
+        with open(path, 'r') as f:
+            return json.load(f)
+    except:
+        return {}
+
+# Load data
+metadata = load_json_safe(DATA_DIR / "metadata.json")
+end_effector = load_json_safe(DATA_DIR / "end_effector.json")
+hands_2d = load_json_safe(DATA_DIR / "hands_2d.json")
+
+total_frames = max(1, len(metadata.get('poses', [])))
+fps = metadata.get('fps', 60)
+hand_detection_rate = len(hands_2d) / total_frames * 100
+
+left_poses = sum(1 for f in end_effector.values() if f and isinstance(f, dict) and f.get('left_hand'))
+right_poses = sum(1 for f in end_effector.values() if f and isinstance(f, dict) and f.get('right_hand'))
+
 video_path = DATA_DIR / "video.mp4"
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Test")
-    gr.Video(value=str(video_path) if video_path.exists() else None)
+CUSTOM_CSS = """
+:root, .gradio-container, body {
+    background-color: #050a18 !important;
+    color: #f8fafc !important;
+}
+.side-panel {
+    background: #0f172a;
+    padding: 20px;
+    border-radius: 18px;
+    border: 1px solid #1f2b47;
+}
+.stats-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 0.92rem;
+}
+.stats-card li {
+    margin-bottom: 10px;
+    color: #e2e8f0;
+}
+.stats-card span {
+    display: inline-block;
+    margin-right: 6px;
+    color: #7dd3fc;
+}
+"""
 
-if __name__ == "__main__":
-    demo.launch()
+stats_html = f"""
+<div class="stats-card">
+  <ul>
+    <li><span>Number of samples/frames:</span> {total_frames:,}</li>
+    <li><span>Hand detection rate:</span> {hand_detection_rate:.1f}%</li>
+    <li><span>Left hand poses:</span> {left_poses}</li>
+    <li><span>Right hand poses:</span> {right_poses}</li>
+    <li><span>Frames per second:</span> {fps:.1f}</li>
+  </ul>
+</div>
+"""
+
+theme = gr.themes.Soft(
+    primary_hue="cyan", secondary_hue="blue", neutral_hue="slate"
+).set(
+    body_background_fill="#0c1424",
+    body_text_color="#f8fafc",
+    block_background_fill="#111a2c",
+)
 
+with gr.Blocks(theme=theme, css=CUSTOM_CSS) as demo:
+    gr.Markdown("# 🤖 Dynamic Intelligence - Human Demo Visualizer")
+    gr.Markdown("Egocentric hand tracking dataset for humanoid robot training")
+    
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1, min_width=260, elem_classes=["side-panel"]):
+            gr.HTML(stats_html)
+        with gr.Column(scale=2, min_width=640):
+            gr.Markdown("### RGB Video")
+            video = gr.Video(
+                height=360,
+                value=str(video_path) if video_path.exists() else None,
+                show_label=False,
+            )
+
+if __name__ == "__main__":
+    demo.queue().launch(show_api=False)