Simplified version - remove lru_cache and complex CSS

app.py

@@ -2,7 +2,6 @@ import json
 import html
 from pathlib import Path
 from typing import Dict, List
-from functools import lru_cache
 
 import gradio as gr
 import plotly.graph_objects as go
@@ -22,151 +21,47 @@ PLOT_GRID = [
     ["yaw_deg", "pitch_deg", "roll_deg"],
 ]
 
-PLOT_ORDER = [metric for row in PLOT_GRID for metric in row]
-
-CUSTOM_CSS = """
-:root, .gradio-container, body {
-    background-color: #050a18 !important;
-    color: #f8fafc !important;
-    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
-}
-.side-panel {
-    background: #0f172a;
-    padding: 20px;
-    border-radius: 18px;
-    border: 1px solid #1f2b47;
-    min-height: 100%;
-}
-.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;
-}
-.main-panel {
-    padding-top: 8px;
-}
-.instruction-card {
-    background: #0f172a;
-    padding: 18px 20px;
-    border-radius: 18px;
-    border: 1px solid #1f2b47;
-}
-.instruction-label {
-    font-size: 0.75rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: #94a3b8;
-    margin-bottom: 10px;
-}
-.instruction-text {
-    font-size: 1.1rem;
-    line-height: 1.5;
-}
-.video-card {
-    background: #0f172a;
-    border: 1px solid #1f2b47;
-    border-radius: 18px;
-    padding: 18px 20px;
-    margin-top: 18px;
-}
-.video-title {
-    font-size: 0.78rem;
-    text-transform: uppercase;
-    letter-spacing: 0.18em;
-    color: #94a3b8;
-    margin-bottom: 8px;
-}
-.video-panel video {
-    border-radius: 12px;
-    border: 1px solid #1f2b47;
-    background: #030712;
-}
-.download-button button {
-    border-radius: 999px;
-    border: 1px solid #334155;
-    background: #1e293b;
-    color: #f8fafc;
-    font-size: 0.85rem;
-    padding: 8px 24px;
-}
-.download-button button:hover {
-    border-color: #67e8f9;
-    color: #67e8f9;
-}
-.plots-wrap {
-    margin-top: 18px;
-}
-.plots-wrap .gr-row {
-    gap: 16px;
-}
-.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 get_data_dir():
-    """Get data directory path."""
     try:
         return Path(__file__).parent / "data"
     except:
         return Path("data")
 
-
-@lru_cache(maxsize=1)
 def load_data():
-    """Load all data files."""
     data_dir = get_data_dir()
-    metadata_path = data_dir / "metadata.json"
-    end_effector_path = data_dir / "end_effector.json"
-    hands_2d_path = data_dir / "hands_2d.json"
-    
     metadata = {}
     end_effector = {}
     hands_2d = {}
     
-    if metadata_path.exists():
-        with open(metadata_path, 'r') as f:
-            metadata = json.load(f)
+    try:
+        metadata_path = data_dir / "metadata.json"
+        if metadata_path.exists():
+            with open(metadata_path, 'r') as f:
+                metadata = json.load(f)
+    except:
+        pass
     
-    if end_effector_path.exists():
-        with open(end_effector_path, 'r') as f:
-            end_effector = json.load(f)
+    try:
+        end_effector_path = data_dir / "end_effector.json"
+        if end_effector_path.exists():
+            with open(end_effector_path, 'r') as f:
+                end_effector = json.load(f)
+    except:
+        pass
     
-    if hands_2d_path.exists():
-        with open(hands_2d_path, 'r') as f:
-            hands_2d = json.load(f)
+    try:
+        hands_2d_path = data_dir / "hands_2d.json"
+        if hands_2d_path.exists():
+            with open(hands_2d_path, 'r') as f:
+                hands_2d = json.load(f)
+    except:
+        pass
     
     return metadata, end_effector, hands_2d
 
-
 def build_state_dataframe(metadata: dict, end_effector: dict, hand: str = "left"):
-    """Build state dataframe from JSON data."""
     fps = metadata.get('fps', 60)
-    
-    try:
-        frame_keys = sorted([int(k) for k in end_effector.keys() if str(k).isdigit()])
-    except:
-        frame_keys = []
+    frame_keys = sorted([int(k) for k in end_effector.keys() if str(k).isdigit()])
     
     timestamps = []
     state_data = {
@@ -189,10 +84,10 @@ def build_state_dataframe(metadata: dict, end_effector: dict, hand: str = "left"
         if hand_data and isinstance(hand_data, dict):
             pose = hand_data.get('pose_6dof')
             if pose and len(pose) >= 6:
-                state_data['wrist_x_cm'].append(pose[0] * 100)  # m to cm
+                state_data['wrist_x_cm'].append(pose[0] * 100)
                 state_data['wrist_y_cm'].append(pose[1] * 100)
                 state_data['wrist_z_cm'].append(pose[2] * 100)
-                state_data['wrist_roll_deg'].append(pose[3] * 57.3)  # rad to deg
+                state_data['wrist_roll_deg'].append(pose[3] * 57.3)
                 state_data['wrist_pitch_deg'].append(pose[4] * 57.3)
                 state_data['wrist_yaw_deg'].append(pose[5] * 57.3)
             else:
@@ -204,170 +99,79 @@ def build_state_dataframe(metadata: dict, end_effector: dict, hand: str = "left"
     
     return timestamps, state_data
 
-
-def build_plot_fig(timestamps: List[float], state_data: Dict, metric: str) -> go.Figure:
-    """Build Plotly figure for a metric."""
+def build_plot_html(timestamps: List[float], state_data: Dict, metric: str) -> str:
     col_name = f"wrist_{metric}"
-    if col_name not in state_data:
-        return go.Figure()
+    if col_name not in state_data or not timestamps:
+        return "<p>No data</p>"
     
     fig = go.Figure()
-    fig.add_trace(
-        go.Scatter(
-            x=timestamps,
-            y=state_data[col_name],
-            mode="lines",
-            name="Wrist",
-        )
-    )
+    fig.add_trace(go.Scatter(x=timestamps, y=state_data[col_name], mode="lines", name="Wrist"))
     fig.update_layout(
         margin=dict(l=20, r=20, t=30, b=20),
         height=250,
         template="plotly_dark",
-        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
         xaxis_title="Time (s)",
         yaxis_title=METRIC_LABELS[metric],
     )
-    fig.update_xaxes(showgrid=True, gridwidth=0.5, gridcolor="rgba(255,255,255,0.1)")
-    fig.update_yaxes(showgrid=True, gridwidth=0.5, gridcolor="rgba(255,255,255,0.1)")
-    return fig
-
-
-def build_plot_html(timestamps: List[float], state_data: Dict, metric: str) -> str:
-    """Build Plotly HTML for a metric."""
-    fig = build_plot_fig(timestamps, state_data, metric)
     return pio.to_html(fig, include_plotlyjs="cdn", full_html=False)
 
-
-def format_instruction_html(text: str) -> str:
-    safe_text = html.escape(text)
-    return (
-        '<div class="instruction-card">'
-        '<p class="instruction-label">Language Instruction</p>'
-        f'<p class="instruction-text">{safe_text}</p>'
-        "</div>"
-    )
-
-
 def build_interface():
-    """Build Gradio interface."""
-    try:
-        metadata, end_effector, hands_2d = load_data()
-    except Exception as e:
-        print(f"Error loading data: {e}")
-        metadata, end_effector, hands_2d = {}, {}, {}
+    metadata, end_effector, hands_2d = load_data()
     
     total_frames = len(metadata.get('poses', []))
     fps = metadata.get('fps', 60)
     hand_detection_rate = len(hands_2d) / max(1, total_frames) * 100 if total_frames > 0 else 0
-    
     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 = get_data_dir() / "video.mp4"
     
-    # Build data for left hand (lazy - only if needed)
-    left_figs = {}
-    right_figs = {}
-    try:
-        left_timestamps, left_state = build_state_dataframe(metadata, end_effector, "left")
-        left_figs = {metric: build_plot_html(left_timestamps, left_state, metric) for metric in METRIC_LABELS.keys()}
-    except Exception as e:
-        print(f"Error building left plots: {e}")
-        left_figs = {metric: "<p>Plot unavailable</p>" for metric in METRIC_LABELS.keys()}
+    left_timestamps, left_state = build_state_dataframe(metadata, end_effector, "left")
+    right_timestamps, right_state = build_state_dataframe(metadata, end_effector, "right")
     
-    # Build data for right hand
-    try:
-        right_timestamps, right_state = build_state_dataframe(metadata, end_effector, "right")
-        right_figs = {metric: build_plot_html(right_timestamps, right_state, metric) for metric in METRIC_LABELS.keys()}
-    except Exception as e:
-        print(f"Error building right plots: {e}")
-        right_figs = {metric: "<p>Plot unavailable</p>" for metric in METRIC_LABELS.keys()}
+    left_figs = {metric: build_plot_html(left_timestamps, left_state, metric) for metric in METRIC_LABELS.keys()}
+    right_figs = {metric: build_plot_html(right_timestamps, right_state, metric) for metric in METRIC_LABELS.keys()}
     
     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>
+<div style="background: #0f172a; padding: 20px; border-radius: 18px;">
+  <ul style="list-style: none; padding: 0;">
+    <li><span style="color: #7dd3fc;">Frames:</span> {total_frames:,}</li>
+    <li><span style="color: #7dd3fc;">Detection rate:</span> {hand_detection_rate:.1f}%</li>
+    <li><span style="color: #7dd3fc;">Left poses:</span> {left_poses}</li>
+    <li><span style="color: #7dd3fc;">Right poses:</span> {right_poses}</li>
+    <li><span style="color: #7dd3fc;">FPS:</span> {fps:.1f}</li>
   </ul>
 </div>
 """
     
-    instruction_text = "LiDAR-based egocentric hand tracking for robot training data"
+    theme = gr.themes.Soft(primary_hue="cyan", secondary_hue="blue", neutral_hue="slate")
     
-    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",
-        block_title_text_color="#f8fafc",
-        input_background_fill="#151f33",
-        border_color_primary="#1f2b47",
-        shadow_drop="none",
-    )
-    
-    with gr.Blocks(theme=theme, css=CUSTOM_CSS) as demo:
+    with gr.Blocks(theme=theme) as demo:
         gr.Markdown("# 🤖 Dynamic Intelligence - Human Demo Visualizer")
-        gr.Markdown(
-            "Egocentric hand tracking dataset for humanoid robot training. "
-            "Pipeline: iPhone LiDAR → MediaPipe → 6DoF End-Effector → Robot Training Data"
-        )
+        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"]):
+        with gr.Row():
+            with gr.Column(scale=1):
                 gr.HTML(stats_html)
-            with gr.Column(scale=2, min_width=640, elem_classes=["main-panel"]):
-                instruction_box = gr.HTML(
-                    format_instruction_html(instruction_text),
-                    label="Language Instruction",
-                )
-                with gr.Column(elem_classes=["video-card"]):
-                    gr.HTML('<div class="video-title">RGB Video</div>')
-                    video = gr.Video(
-                        height=360,
-                        value=str(video_path) if video_path.exists() else None,
-                        elem_classes=["video-panel"],
-                        show_label=False,
-                        show_download_button=False,
-                    )
-                    download_button = gr.DownloadButton(
-                        label="Download",
-                        value=str(video_path) if video_path.exists() else None,
-                        elem_classes=["download-button"],
-                    )
+            with gr.Column(scale=2):
+                video = gr.Video(value=str(video_path) if video_path.exists() else None, height=360)
         
-        plot_outputs_left = []
-        gr.Markdown("### Left Hand Trajectories", elem_classes=["plots-title"])
-        with gr.Column(elem_classes=["plots-wrap"]):
-            for row in PLOT_GRID:
-                with gr.Row():
-                    for metric in row:
-                        plot = gr.HTML(value=left_figs[metric], elem_classes=["plot-html"])
-                        plot_outputs_left.append(plot)
+        gr.Markdown("### Left Hand Trajectories")
+        with gr.Row():
+            for metric in ["x_cm", "y_cm", "z_cm"]:
+                gr.HTML(value=left_figs[metric])
+        with gr.Row():
+            for metric in ["yaw_deg", "pitch_deg", "roll_deg"]:
+                gr.HTML(value=left_figs[metric])
         
-        plot_outputs_right = []
-        gr.Markdown("### Right Hand Trajectories", elem_classes=["plots-title"])
-        with gr.Column(elem_classes=["plots-wrap"]):
-            for row in PLOT_GRID:
-                with gr.Row():
-                    for metric in row:
-                        plot = gr.HTML(value=right_figs[metric], elem_classes=["plot-html"])
-                        plot_outputs_right.append(plot)
+        gr.Markdown("### Right Hand Trajectories")
+        with gr.Row():
+            for metric in ["x_cm", "y_cm", "z_cm"]:
+                gr.HTML(value=right_figs[metric])
+        with gr.Row():
+            for metric in ["yaw_deg", "pitch_deg", "roll_deg"]:
+                gr.HTML(value=right_figs[metric])
     
     return demo
 
-
-def main():
-    demo = build_interface()
-    demo.queue().launch(show_api=False)
-
-
-if __name__ == "__main__":
-    main()
-
-# For Gradio Spaces - demo must be at module level
 demo = build_interface()