EXACT reference structure: plots-wrap Column + Row loop + plot-html elem_classes

app.py

@@ -7,7 +7,20 @@ import plotly.io as pio
 DATA_DIR = Path(__file__).parent / "data"
 video_path = DATA_DIR / "video.mp4"
 
+PLOT_GRID = [
+    ["x_cm", "y_cm", "z_cm"],
+    ["yaw_deg", "pitch_deg", "roll_deg"],
+]
+
+PLOT_ORDER = [metric for row in PLOT_GRID for metric in row]
+
 CUSTOM_CSS = """
+.plots-wrap {
+    margin-top: 18px;
+}
+.plots-wrap .gr-row {
+    gap: 16px;
+}
 .plot-html {
     background: #111a2c;
     border-radius: 12px;
@@ -28,13 +41,13 @@ def load_data():
     try:
         with open(DATA_DIR / "metadata.json", 'r') as f:
             metadata = json.load(f)
-    except Exception as e:
-        print(f"Error loading metadata: {e}")
+    except:
+        pass
     try:
         with open(DATA_DIR / "end_effector.json", 'r') as f:
             end_effector = json.load(f)
-    except Exception as e:
-        print(f"Error loading end_effector: {e}")
+    except:
+        pass
     return metadata, end_effector
 
 def build_plot_html(metadata, end_effector, hand, metric):
@@ -103,33 +116,11 @@ metadata, end_effector = load_data()
 total_frames = len(metadata.get('poses', []))
 fps = metadata.get('fps', 60)
 
-# 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_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"),
-}
+# Build plots - EXACTLY like reference app
+left_figs = {metric: build_plot_html(metadata, end_effector, "left", metric) for metric in PLOT_ORDER}
+right_figs = {metric: build_plot_html(metadata, end_effector, "right", metric) for metric in PLOT_ORDER}
 
-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",
-)
+theme = gr.themes.Soft(primary_hue="cyan", secondary_hue="blue", neutral_hue="slate")
 
 with gr.Blocks(theme=theme, css=CUSTOM_CSS) as demo:
     gr.Markdown("# 🤖 Dynamic Intelligence - Human Demo Visualizer")
@@ -137,27 +128,21 @@ with gr.Blocks(theme=theme, css=CUSTOM_CSS) as demo:
     
     gr.Video(value=str(video_path) if video_path.exists() else None, height=360)
     
+    # Left hand - EXACT structure from reference
     gr.Markdown("### Left Hand Trajectories")
-    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"])
+    with gr.Column(elem_classes=["plots-wrap"]):
+        for row in PLOT_GRID:
+            with gr.Row():
+                for metric in row:
+                    gr.HTML(value=left_figs[metric], elem_classes=["plot-html"])
     
+    # Right hand - EXACT structure from reference
     gr.Markdown("### Right Hand Trajectories")
-    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"])
+    with gr.Column(elem_classes=["plots-wrap"]):
+        for row in PLOT_GRID:
+            with gr.Row():
+                for metric in row:
+                    gr.HTML(value=right_figs[metric], elem_classes=["plot-html"])
 
 if __name__ == "__main__":
     demo.launch()