Update app.py

app.py

@@ -49,7 +49,7 @@ class RemoteDatasetLoader:
             if result.returncode == 0 and '264' in result.stdout:
                 return True
         except Exception as e:
-            print(f"ffprobe检查视频失败: {e}")
+            print(f"ffprobe video check failed: {e}")
         return False
 
     def _download_video(self, video_url: str, save_path: str) -> str:
@@ -91,7 +91,7 @@ class RemoteDatasetLoader:
             local_path = os.path.join(download_dir, video_filename)
             # 优先加载本地有效mp4
             if self._is_valid_mp4(local_path):
-                print(f"本地已存在有效视频: {local_path}")
+                print(f"Local valid video found: {local_path}")
                 video_paths.append(local_path)
                 continue
             try:
@@ -203,21 +203,135 @@ server = app.server
 
 # ------------------ 页面布局 ------------------
 app.layout = html.Div([
-    html.H1("机器人数据可视化 - 视频兼容性优化", style={"textAlign": "center", "marginBottom": "20px"}),
+    # Header with gradient background
     html.Div([
-        html.Label("repo_id:"),
-        dcc.Input(id="input-repo-id", type="text", value="zijian2022/sortingtest", style={"width": "300px"}),
-        html.Label("episode_id:", style={"marginLeft": "20px"}),
-        dcc.Input(id="input-episode-id", type="number", value=0, min=0, style={"width": "80px"}),
-        html.Button("加载", id="btn-load", n_clicks=0, style={"marginLeft": "20px"}),
-    ], style={"textAlign": "center", "marginBottom": "30px"}),
+        html.H1("Robot Data Visualization", 
+                style={
+                    "textAlign": "center", 
+                    "marginBottom": "10px",
+                    "color": "white",
+                    "fontSize": "2.5rem",
+                    "fontWeight": "300",
+                    "textShadow": "2px 2px 4px rgba(0,0,0,0.3)"
+                }),
+        html.P("Interactive Joint Analysis with Video Synchronization", 
+               style={
+                   "textAlign": "center", 
+                   "color": "rgba(255,255,255,0.9)",
+                   "fontSize": "1.1rem",
+                   "marginBottom": "0"
+               })
+    ], style={
+        "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        "padding": "30px 20px",
+        "marginBottom": "30px",
+        "borderRadius": "0 0 15px 15px",
+        "boxShadow": "0 4px 20px rgba(0,0,0,0.1)"
+    }),
+    
+    # Control Panel
+    html.Div([
+        html.Div([
+            html.Label("Repository ID:", 
+                      style={
+                          "fontWeight": "600",
+                          "color": "#333",
+                          "marginRight": "10px",
+                          "fontSize": "1rem"
+                      }),
+            dcc.Input(
+                id="input-repo-id", 
+                type="text", 
+                value="zijian2022/sortingtest", 
+                style={
+                    "width": "350px",
+                    "padding": "12px 15px",
+                    "border": "2px solid #e1e5e9",
+                    "borderRadius": "8px",
+                    "fontSize": "14px",
+                    "transition": "border-color 0.3s ease",
+                    "outline": "none"
+                },
+                placeholder="Enter HuggingFace dataset repository ID"
+            ),
+        ], style={"marginBottom": "15px"}),
+        
+        html.Div([
+            html.Label("Episode ID:", 
+                      style={
+                          "fontWeight": "600",
+                          "color": "#333",
+                          "marginRight": "10px",
+                          "fontSize": "1rem"
+                      }),
+            dcc.Input(
+                id="input-episode-id", 
+                type="number", 
+                value=0, 
+                min=0, 
+                style={
+                    "width": "120px",
+                    "padding": "12px 15px",
+                    "border": "2px solid #e1e5e9",
+                    "borderRadius": "8px",
+                    "fontSize": "14px",
+                    "transition": "border-color 0.3s ease",
+                    "outline": "none"
+                }
+            ),
+            html.Button(
+                "Load Data", 
+                id="btn-load", 
+                n_clicks=0, 
+                style={
+                    "marginLeft": "20px",
+                    "padding": "12px 25px",
+                    "backgroundColor": "#667eea",
+                    "color": "white",
+                    "border": "none",
+                    "borderRadius": "8px",
+                    "fontSize": "14px",
+                    "fontWeight": "600",
+                    "cursor": "pointer",
+                    "transition": "all 0.3s ease",
+                    "boxShadow": "0 2px 10px rgba(102, 126, 234, 0.3)"
+                }
+            ),
+        ]),
+    ], style={
+        "textAlign": "center",
+        "marginBottom": "40px",
+        "padding": "25px",
+        "backgroundColor": "white",
+        "borderRadius": "12px",
+        "boxShadow": "0 4px 20px rgba(0,0,0,0.08)",
+        "border": "1px solid #f0f0f0"
+    }),
+    
+    # Loading and Data Store
     dcc.Loading(
         id="loading",
-        type="default",
+        type="circle",
+        style={"margin": "20px auto"},
         children=dcc.Store(id="store-data")
     ),
-    html.Div(id="main-content")
-])
+    
+    # Main Content Area
+    html.Div(
+        id="main-content",
+        style={
+            "backgroundColor": "#f8f9fa",
+            "minHeight": "400px",
+            "borderRadius": "12px",
+            "padding": "20px"
+        }
+    )
+], style={
+    "fontFamily": "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+    "backgroundColor": "#f5f7fa",
+    "minHeight": "100vh",
+    "padding": "0"
+})
 
 # ------------------ 数据加载回调 ------------------
 @app.callback(
@@ -243,7 +357,7 @@ def load_data_callback(n_clicks, repo_id, episode_id):
             "timestamps": data_df["timestamp"].tolist()
         }
     except Exception as e:
-        print(f"数据加载异常: {e}")
+        print(f"Data loading error: {e}")
         return {}
 
 # ------------------ 主内容渲染回调 ------------------
@@ -253,17 +367,65 @@ def load_data_callback(n_clicks, repo_id, episode_id):
 )
 def update_main_content(data):
     if not data or "data_df" not in data or len(data["data_df"]) == 0:
-        return html.Div("请点击上方“加载”按钮获取数据", style={"textAlign": "center", "color": "red"})
+        return html.Div([
+            html.Div("📊", style={"fontSize": "3rem", "marginBottom": "20px"}),
+            html.H3("No Data Available", style={"color": "#666", "marginBottom": "10px"}),
+            html.P("Please click the 'Load Data' button above to get data.", 
+                   style={"color": "#888", "fontSize": "1rem"})
+        ], style={
+            "textAlign": "center", 
+            "padding": "60px 20px",
+            "color": "#666"
+        })
+    
     columns = data["columns"]
     rows = []
     for i, joint in enumerate(columns):
         rows.append(html.Div([
-            html.Div(dcc.Graph(id=f"graph-{i}"), style={"width": "60%", "display": "inline-block", "verticalAlign": "top"}),
+            # 关节图 - 左侧50%
+            html.Div([
+                dcc.Graph(id=f"graph-{i}")
+            ], style={
+                "flex": "0 0 50%", 
+                "backgroundColor": "white",
+                "borderRadius": "8px",
+                "padding": "8px",
+                "boxShadow": "0 2px 10px rgba(0,0,0,0.05)",
+                "border": "1px solid #e9ecef",
+                "marginRight": "2%"
+            }),
+            # 视频区域 - 右侧48%
             html.Div([
-                html.Img(id=f"video1-{i}", style={"width": "49%", "height": "180px", "objectFit": "contain", "display": "inline-block"}),
-                html.Img(id=f"video2-{i}", style={"width": "49%", "height": "180px", "objectFit": "contain", "display": "inline-block"})
-            ], style={"width": "38%", "display": "inline-block", "paddingLeft": "2%"})
-        ], style={"marginBottom": "15px"}))
+                html.Img(id=f"video1-{i}", style={
+                    "width": "49%", 
+                    "height": "180px", 
+                    "objectFit": "contain", 
+                    "display": "inline-block",
+                    "borderRadius": "6px",
+                    "border": "2px solid #e9ecef"
+                }),
+                html.Img(id=f"video2-{i}", style={
+                    "width": "49%", 
+                    "height": "180px", 
+                    "objectFit": "contain", 
+                    "display": "inline-block",
+                    "borderRadius": "6px",
+                    "border": "2px solid #e9ecef"
+                })
+            ], style={
+                "flex": "0 0 48%"
+            })
+        ], style={
+            "marginBottom": "25px",
+            "backgroundColor": "white",
+            "borderRadius": "12px",
+            "padding": "12px",
+            "boxShadow": "0 4px 15px rgba(0,0,0,0.08)",
+            "border": "1px solid #f0f0f0",
+            "display": "flex",
+            "alignItems": "flex-start",
+            "minHeight": "250px"
+        }))
     return html.Div(rows)
 
 # ------------------ 阴影与高亮工具函数 ------------------
@@ -350,8 +512,8 @@ def generate_joint_graph(joint_name, idx, action_df, delta_t, time_for_plot, all
                     shadow['end_time'] == h_shadow['end_time']):
                     is_highlighted = True
                     break
-        color = "blue" if is_highlighted else "red"
-        opacity = 0.6 if is_highlighted else 0.3
+        color = "#3b82f6" if is_highlighted else "#ef4444"  # Blue for highlighted, red for normal
+        opacity = 0.7 if is_highlighted else 0.4
         shapes.append({
             "type": "rect",
             "xref": "x",
@@ -369,19 +531,38 @@ def generate_joint_graph(joint_name, idx, action_df, delta_t, time_for_plot, all
             go.Scatter(
                 x=time_for_plot,
                 y=smoothed_angle,
-                name="Angle",
-                line=dict(color='orange')
+                name="Joint Angle",
+                line=dict(color='#f59e0b', width=2),
+                hovertemplate='<b>Time:</b> %{x:.2f}s<br><b>Angle:</b> %{y:.2f}°<extra></extra>'
             )
         ],
         "layout": go.Layout(
-            title=joint_name,
-            xaxis={"title": "Time (s)"},
-            yaxis={"title": "Angle (deg)"},
+            title={
+                'text': joint_name.replace('_', ' ').title(),
+                'font': {'size': 16, 'color': '#374151'}
+            },
+            xaxis={
+                "title": "Time (seconds)",
+                "titlefont": {"color": "#6b7280"},
+                "tickfont": {"color": "#6b7280"},
+                "gridcolor": "#f3f4f6",
+                "zerolinecolor": "#e5e7eb"
+            },
+            yaxis={
+                "title": "Angle (degrees)",
+                "titlefont": {"color": "#6b7280"},
+                "tickfont": {"color": "#6b7280"},
+                "gridcolor": "#f3f4f6",
+                "zerolinecolor": "#e5e7eb"
+            },
             shapes=shapes,
             hovermode="x unified",
-            height=250,
-            margin=dict(t=30, b=30, l=50, r=50),
+            height=220,
+            margin=dict(t=30, b=30, l=50, r=30),
             showlegend=False,
+            plot_bgcolor='white',
+            paper_bgcolor='white',
+            font={'family': "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"}
         )
     }
 
@@ -493,7 +674,7 @@ for i in range(6):
             else:
                 return no_update, no_update
         except Exception as e:
-            print(f"update_video_frames回调函数异常: {e}")
+            print(f"update_video_frames callback error: {e}")
             return no_update, no_update
 
 # ------------------ 启动应用 ------------------