Rebuild app using exact reference structure with build_interface() function

app.py

@@ -1,47 +1,347 @@
-"""
-Dynamic Intelligence - Human Demo Visualizer
-"""
-import gradio as gr
 import json
+import os
+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
+import plotly.io as pio
 
 DATA_DIR = Path(__file__).parent / "data"
-video_path = DATA_DIR / "video.mp4"
 
-# Load data safely
-try:
-    metadata = json.load(open(DATA_DIR / "metadata.json"))
-    end_effector = json.load(open(DATA_DIR / "end_effector.json"))
-    hands_2d = json.load(open(DATA_DIR / "hands_2d.json"))
+METRIC_LABELS = {
+    "x_cm": "X (cm)",
+    "y_cm": "Y (cm)",
+    "z_cm": "Z (cm)",
+    "yaw_deg": "Yaw (°)",
+    "pitch_deg": "Pitch (°)",
+    "roll_deg": "Roll (°)",
+}
+
+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 = """
+: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;
+}
+"""
+
+
+@lru_cache(maxsize=1)
+def load_data():
+    """Load all data files."""
+    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)
+    
+    if end_effector_path.exists():
+        with open(end_effector_path, 'r') as f:
+            end_effector = json.load(f)
+    
+    if hands_2d_path.exists():
+        with open(hands_2d_path, 'r') as f:
+            hands_2d = json.load(f)
+    
+    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)
+    
+    frame_keys = sorted([int(k) for k in end_effector.keys() if str(k).isdigit()])
+    
+    timestamps = []
+    state_data = {
+        'wrist_x_cm': [],
+        'wrist_y_cm': [],
+        'wrist_z_cm': [],
+        'wrist_yaw_deg': [],
+        'wrist_pitch_deg': [],
+        'wrist_roll_deg': [],
+    }
+    
+    for frame_idx in frame_keys:
+        frame_key = str(frame_idx)
+        t = frame_idx / fps
+        timestamps.append(t)
+        
+        ee_data = end_effector.get(frame_key, {}) or {}
+        hand_data = ee_data.get(hand + "_hand")
+        
+        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_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_pitch_deg'].append(pose[4] * 57.3)
+                state_data['wrist_yaw_deg'].append(pose[5] * 57.3)
+            else:
+                for k in state_data:
+                    state_data[k].append(None)
+        else:
+            for k in state_data:
+                state_data[k].append(None)
+    
+    return timestamps, state_data
+
+
+def build_plot_fig(timestamps: List[float], state_data: Dict, metric: str) -> go.Figure:
+    """Build Plotly figure for a metric."""
+    col_name = f"wrist_{metric}"
+    if col_name not in state_data:
+        return go.Figure()
+    
+    fig = go.Figure()
+    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."""
+    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
+    
     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'))
-except:
-    total_frames = 0
-    fps = 60
-    hand_detection_rate = 0
-    left_poses = 0
-    right_poses = 0
-
-with gr.Blocks() as demo:
-    gr.Markdown("# 🤖 Dynamic Intelligence - Human Demo Visualizer")
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown(f"""
-            **Stats:**
-            - Frames: {total_frames:,}
-            - Hand detection: {hand_detection_rate:.1f}%
-            - Left poses: {left_poses}
-            - Right poses: {right_poses}
-            - FPS: {fps}
-            """)
-        with gr.Column(scale=2):
-            gr.Markdown("### RGB Video")
-            gr.Video(value=str(video_path) if video_path.exists() else None)
+    
+    video_path = DATA_DIR / "video.mp4"
+    
+    # Build data for left hand
+    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()}
+    
+    # Build data for right hand
+    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()}
+    
+    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>
+"""
+    
+    instruction_text = "LiDAR-based egocentric hand tracking for robot training data"
+    
+    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:
+        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"
+        )
+        
+        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, 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"],
+                    )
+        
+        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)
+        
+        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)
+    
+    return demo
+
+
+def main():
+    demo = build_interface()
+    demo.queue().launch(show_api=False)
+
 
 if __name__ == "__main__":
-    demo.launch()
+    main()