Add plots step by step - simple version

app.py

@@ -1,16 +1,96 @@
-"""
-Minimal test version
-"""
-import gradio as gr
+import json
 from pathlib import Path
+import gradio as gr
+import plotly.graph_objects as go
+import plotly.io as pio
 
 DATA_DIR = Path(__file__).parent / "data"
 video_path = DATA_DIR / "video.mp4"
 
+def load_data():
+    metadata = {}
+    end_effector = {}
+    try:
+        with open(DATA_DIR / "metadata.json", 'r') as f:
+            metadata = json.load(f)
+    except:
+        pass
+    try:
+        with open(DATA_DIR / "end_effector.json", 'r') as f:
+            end_effector = json.load(f)
+    except:
+        pass
+    return metadata, end_effector
+
+def build_plot(metadata, end_effector, hand, metric):
+    fps = metadata.get('fps', 60)
+    frame_keys = sorted([int(k) for k in end_effector.keys() if str(k).isdigit()])
+    
+    times = [i/fps for i in frame_keys]
+    values = []
+    
+    for k in frame_keys:
+        ee = end_effector.get(str(k), {}) or {}
+        hd = ee.get(hand + "_hand")
+        if hd and isinstance(hd, dict):
+            pose = hd.get('pose_6dof', [])
+            if len(pose) >= 6:
+                if metric == "x_cm":
+                    values.append(pose[0] * 100)
+                elif metric == "y_cm":
+                    values.append(pose[1] * 100)
+                elif metric == "z_cm":
+                    values.append(pose[2] * 100)
+                elif metric == "roll_deg":
+                    values.append(pose[3] * 57.3)
+                elif metric == "pitch_deg":
+                    values.append(pose[4] * 57.3)
+                elif metric == "yaw_deg":
+                    values.append(pose[5] * 57.3)
+                else:
+                    values.append(0)
+            else:
+                values.append(None)
+        else:
+            values.append(None)
+    
+    if not times or not values:
+        return "<p>No data</p>"
+    
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=times, y=values, mode="lines"))
+    fig.update_layout(template="plotly_dark", height=250, margin=dict(l=20, r=20, t=30, b=20))
+    return pio.to_html(fig, include_plotlyjs="cdn", full_html=False)
+
+metadata, end_effector = load_data()
+total_frames = len(metadata.get('poses', []))
+fps = metadata.get('fps', 60)
+
 with gr.Blocks() as demo:
-    gr.Markdown("# Test")
-    gr.Video(value=str(video_path) if video_path.exists() else None)
+    gr.Markdown("# 🤖 Dynamic Intelligence - Human Demo Visualizer")
+    gr.Markdown(f"Frames: {total_frames}, FPS: {fps}")
+    
+    gr.Video(value=str(video_path) if video_path.exists() else None, height=360)
+    
+    gr.Markdown("### Left Hand")
+    with gr.Row():
+        gr.HTML(build_plot(metadata, end_effector, "left", "x_cm"))
+        gr.HTML(build_plot(metadata, end_effector, "left", "y_cm"))
+        gr.HTML(build_plot(metadata, end_effector, "left", "z_cm"))
+    with gr.Row():
+        gr.HTML(build_plot(metadata, end_effector, "left", "roll_deg"))
+        gr.HTML(build_plot(metadata, end_effector, "left", "pitch_deg"))
+        gr.HTML(build_plot(metadata, end_effector, "left", "yaw_deg"))
+    
+    gr.Markdown("### Right Hand")
+    with gr.Row():
+        gr.HTML(build_plot(metadata, end_effector, "right", "x_cm"))
+        gr.HTML(build_plot(metadata, end_effector, "right", "y_cm"))
+        gr.HTML(build_plot(metadata, end_effector, "right", "z_cm"))
+    with gr.Row():
+        gr.HTML(build_plot(metadata, end_effector, "right", "roll_deg"))
+        gr.HTML(build_plot(metadata, end_effector, "right", "pitch_deg"))
+        gr.HTML(build_plot(metadata, end_effector, "right", "yaw_deg"))
 
 if __name__ == "__main__":
     demo.launch()
-