Use exact reference structure: elem_classes plot-html + CSS + theme

app.py

@@ -7,6 +7,21 @@ import plotly.io as pio
 DATA_DIR = Path(__file__).parent / "data"
 video_path = DATA_DIR / "video.mp4"
 
+CUSTOM_CSS = """
+.plot-html {
+    background: #111a2c;
+    border-radius: 12px;
+    padding: 10px;
+    border: 1px solid #1f2b47;
+    min-height: 320px;
+}
+.plot-html iframe {
+    width: 100%;
+    height: 300px;
+    border: none;
+}
+"""
+
 def load_data():
     metadata = {}
     end_effector = {}
@@ -22,15 +37,15 @@ def load_data():
         print(f"Error loading end_effector: {e}")
     return metadata, end_effector
 
-def build_plot(metadata, end_effector, hand, metric):
+def build_plot_html(metadata, end_effector, hand, metric):
     try:
         fps = metadata.get('fps', 60)
         if not end_effector:
-            return "<div style='padding:20px;'>No data available</div>"
+            return "<p>No data</p>"
         
         frame_keys = sorted([int(k) for k in end_effector.keys() if str(k).isdigit()])
         if not frame_keys:
-            return "<div style='padding:20px;'>No frames found</div>"
+            return "<p>No frames</p>"
         
         times = [i/fps for i in frame_keys]
         values = []
@@ -53,26 +68,23 @@ def build_plot(metadata, end_effector, hand, metric):
                         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)
         
-        # Filter out None values for plotting
         valid_times = [t for t, v in zip(times, values) if v is not None]
         valid_values = [v for v in values if v is not None]
         
         if not valid_times or not valid_values:
-            return f"<div style='padding:20px;'>No valid data for {hand} hand {metric}</div>"
+            return "<p>No valid data</p>"
         
         fig = go.Figure()
         fig.add_trace(go.Scatter(
             x=valid_times, 
             y=valid_values, 
             mode="lines",
-            name=f"{hand.title()} {metric}",
+            name=f"{hand} {metric}",
             line=dict(width=2)
         ))
         fig.update_layout(
@@ -82,60 +94,70 @@ def build_plot(metadata, end_effector, hand, metric):
             xaxis_title="Time (s)",
             yaxis_title=metric.replace("_", " ").title()
         )
-        html_str = pio.to_html(fig, include_plotlyjs="cdn", full_html=False)
-        return f"<div style='width:100%; height:300px;'>{html_str}</div>"
+        return pio.to_html(fig, include_plotlyjs="cdn", full_html=False)
     except Exception as e:
-        return f"<div style='padding:20px; color:red;'>Error: {str(e)}</div>"
+        return f"<p>Error: {str(e)}</p>"
 
-# Load data at module level
+# Load data
 metadata, end_effector = load_data()
 total_frames = len(metadata.get('poses', []))
 fps = metadata.get('fps', 60)
 
-# Build all plots at module level
-left_plots = {
-    "x_cm": build_plot(metadata, end_effector, "left", "x_cm"),
-    "y_cm": build_plot(metadata, end_effector, "left", "y_cm"),
-    "z_cm": build_plot(metadata, end_effector, "left", "z_cm"),
-    "roll_deg": build_plot(metadata, end_effector, "left", "roll_deg"),
-    "pitch_deg": build_plot(metadata, end_effector, "left", "pitch_deg"),
-    "yaw_deg": build_plot(metadata, end_effector, "left", "yaw_deg"),
+# Build plots
+left_figs = {
+    "x_cm": build_plot_html(metadata, end_effector, "left", "x_cm"),
+    "y_cm": build_plot_html(metadata, end_effector, "left", "y_cm"),
+    "z_cm": build_plot_html(metadata, end_effector, "left", "z_cm"),
+    "roll_deg": build_plot_html(metadata, end_effector, "left", "roll_deg"),
+    "pitch_deg": build_plot_html(metadata, end_effector, "left", "pitch_deg"),
+    "yaw_deg": build_plot_html(metadata, end_effector, "left", "yaw_deg"),
 }
 
-right_plots = {
-    "x_cm": build_plot(metadata, end_effector, "right", "x_cm"),
-    "y_cm": build_plot(metadata, end_effector, "right", "y_cm"),
-    "z_cm": build_plot(metadata, end_effector, "right", "z_cm"),
-    "roll_deg": build_plot(metadata, end_effector, "right", "roll_deg"),
-    "pitch_deg": build_plot(metadata, end_effector, "right", "pitch_deg"),
-    "yaw_deg": build_plot(metadata, end_effector, "right", "yaw_deg"),
+right_figs = {
+    "x_cm": build_plot_html(metadata, end_effector, "right", "x_cm"),
+    "y_cm": build_plot_html(metadata, end_effector, "right", "y_cm"),
+    "z_cm": build_plot_html(metadata, end_effector, "right", "z_cm"),
+    "roll_deg": build_plot_html(metadata, end_effector, "right", "roll_deg"),
+    "pitch_deg": build_plot_html(metadata, end_effector, "right", "pitch_deg"),
+    "yaw_deg": build_plot_html(metadata, end_effector, "right", "yaw_deg"),
 }
 
-with gr.Blocks() as demo:
+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",
+    border_color_primary="#1f2b47",
+)
+
+with gr.Blocks(theme=theme, css=CUSTOM_CSS) as demo:
     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 Trajectories")
-    with gr.Row():
-        gr.HTML(left_plots["x_cm"])
-        gr.HTML(left_plots["y_cm"])
-        gr.HTML(left_plots["z_cm"])
-    with gr.Row():
-        gr.HTML(left_plots["roll_deg"])
-        gr.HTML(left_plots["pitch_deg"])
-        gr.HTML(left_plots["yaw_deg"])
+    with gr.Column():
+        with gr.Row():
+            gr.HTML(value=left_figs["x_cm"], elem_classes=["plot-html"])
+            gr.HTML(value=left_figs["y_cm"], elem_classes=["plot-html"])
+            gr.HTML(value=left_figs["z_cm"], elem_classes=["plot-html"])
+        with gr.Row():
+            gr.HTML(value=left_figs["roll_deg"], elem_classes=["plot-html"])
+            gr.HTML(value=left_figs["pitch_deg"], elem_classes=["plot-html"])
+            gr.HTML(value=left_figs["yaw_deg"], elem_classes=["plot-html"])
     
     gr.Markdown("### Right Hand Trajectories")
-    with gr.Row():
-        gr.HTML(right_plots["x_cm"])
-        gr.HTML(right_plots["y_cm"])
-        gr.HTML(right_plots["z_cm"])
-    with gr.Row():
-        gr.HTML(right_plots["roll_deg"])
-        gr.HTML(right_plots["pitch_deg"])
-        gr.HTML(right_plots["yaw_deg"])
+    with gr.Column():
+        with gr.Row():
+            gr.HTML(value=right_figs["x_cm"], elem_classes=["plot-html"])
+            gr.HTML(value=right_figs["y_cm"], elem_classes=["plot-html"])
+            gr.HTML(value=right_figs["z_cm"], elem_classes=["plot-html"])
+        with gr.Row():
+            gr.HTML(value=right_figs["roll_deg"], elem_classes=["plot-html"])
+            gr.HTML(value=right_figs["pitch_deg"], elem_classes=["plot-html"])
+            gr.HTML(value=right_figs["yaw_deg"], elem_classes=["plot-html"])
 
 if __name__ == "__main__":
     demo.launch()