Update app.py

app.py

@@ -1,6 +1,6 @@
 # ------------------ 导入库 ------------------
 import dash
-from dash import dcc, html, Input, Output, State, callback_context, no_update
+from dash import dcc, html, Input, Output, State, no_update
 import plotly.graph_objects as go
 import pandas as pd
 import numpy as np
@@ -11,19 +11,11 @@ import requests
 import json
 import tempfile
 import os
-from pathlib import Path
-from typing import Tuple, Optional
 from urllib.parse import urljoin
 import subprocess
-import shutil
-
-
-# ------------------ 下载数据 ------------------
-DOWNLOAD_DIR = tempfile.mkdtemp()
 
+# ------------------ 数据下载与处理 ------------------
 class RemoteDatasetLoader:
-    """从 Hugging Face Hub 远程加载数据集的类"""
-
     def __init__(self, repo_id: str, timeout: int = 30):
         self.repo_id = repo_id
         self.timeout = timeout
@@ -45,9 +37,27 @@ class RemoteDatasetLoader:
                 return episode
         raise ValueError(f"Episode {episode_id} not found")
 
+    def _is_valid_mp4(self, file_path):
+        if not os.path.exists(file_path) or os.path.getsize(file_path) < 1024 * 100:
+            return False
+        # 用ffprobe检查是否为有效mp4
+        try:
+            result = subprocess.run([
+                'ffprobe', '-v', 'error', '-select_streams', 'v:0',
+                '-show_entries', 'stream=codec_name', '-of', 'default=noprint_wrappers=1:nokey=1', file_path
+            ], capture_output=True, text=True, timeout=10)
+            if result.returncode == 0 and '264' in result.stdout:
+                return True
+        except Exception as e:
+            print(f"ffprobe检查视频失败: {e}")
+        return False
+
     def _download_video(self, video_url: str, save_path: str) -> str:
         response = requests.get(video_url, timeout=self.timeout, stream=True)
         response.raise_for_status()
+        # 检查Content-Type
+        if 'video' not in response.headers.get('Content-Type', ''):
+            raise ValueError(f"URL {video_url} 返回的不是视频内容，Content-Type: {response.headers.get('Content-Type')}")
         os.makedirs(os.path.dirname(save_path), exist_ok=True)
         with open(save_path, 'wb') as f:
             for chunk in response.iter_content(chunk_size=8192):
@@ -55,10 +65,10 @@ class RemoteDatasetLoader:
         return save_path
 
     def load_episode_data(self, episode_id: int,
-                          video_keys: Optional[list] = None,
-                          download_dir: Optional[str] = None) -> Tuple[list, pd.DataFrame]:
+                          video_keys=None,
+                          download_dir=None):
         dataset_info = self._get_dataset_info()
-        episode_info = self._get_episode_info(episode_id)
+        self._get_episode_info(episode_id)  # 检查episode是否存在
 
         if download_dir is None:
             download_dir = tempfile.mkdtemp(prefix="lerobot_videos_")
@@ -79,10 +89,14 @@ class RemoteDatasetLoader:
             )
             video_filename = f"episode_{episode_id}_{video_key}.mp4"
             local_path = os.path.join(download_dir, video_filename)
+            # 优先加载本地有效mp4
+            if self._is_valid_mp4(local_path):
+                print(f"本地已存在有效视频: {local_path}")
+                video_paths.append(local_path)
+                continue
             try:
                 downloaded_path = self._download_video(video_url, local_path)
                 video_paths.append(downloaded_path)
-                print(f"Downloaded video {i+1}: {downloaded_path}")
             except Exception as e:
                 print(f"Failed to download video {video_key}: {e}")
                 video_paths.append(video_url)
@@ -93,17 +107,13 @@ class RemoteDatasetLoader:
         )
         try:
             df = pd.read_parquet(data_url)
-            print(f"Loaded data with {len(df)} rows and {len(df.columns)} columns")
         except Exception as e:
             print(f"Failed to load data: {e}")
             df = pd.DataFrame()
 
         return video_paths, df
 
-
-# ------------------ 视频重编码函数 ------------------
 def check_ffmpeg_available():
-    """检查ffmpeg是否可用"""
     try:
         result = subprocess.run(['ffmpeg', '-version'], 
                               capture_output=True, text=True, timeout=5)
@@ -112,13 +122,11 @@ def check_ffmpeg_available():
         return False
 
 def get_video_codec_info(video_path):
-    """获取视频编码信息"""
     try:
         result = subprocess.run([
             'ffprobe', '-v', 'quiet', '-print_format', 'json', 
             '-show_streams', video_path
         ], capture_output=True, text=True, timeout=10)
-        
         if result.returncode == 0:
             info = json.loads(result.stdout)
             for stream in info.get('streams', []):
@@ -126,43 +134,32 @@ def get_video_codec_info(video_path):
                     return stream.get('codec_name', 'unknown')
     except Exception as e:
         print(f"获取视频编码信息失败: {e}")
-    
     return 'unknown'
 
 def reencode_video_to_h264(input_path, output_path=None, quality='medium'):
-    """将视频重编码为H.264格式"""
     if output_path is None:
         base_name = os.path.splitext(input_path)[0]
         output_path = f"{base_name}_h264.mp4"
-    
-    # 根据质量选择参数
     quality_params = {
         'fast': ['-preset', 'ultrafast', '-crf', '28'],
         'medium': ['-preset', 'medium', '-crf', '23'],
         'high': ['-preset', 'slow', '-crf', '18']
     }
-    
     params = quality_params.get(quality, quality_params['medium'])
-    
     try:
         cmd = [
             'ffmpeg', '-i', input_path,
-            '-c:v', 'libx264',  # 使用H.264编码器
-            '-c:a', 'aac',      # 音频编码器
-            '-movflags', '+faststart',  # 优化网络播放
-            '-y',  # 覆盖输出文件
+            '-c:v', 'libx264',
+            '-c:a', 'aac',
+            '-movflags', '+faststart',
+            '-y',
         ] + params + [output_path]
-        
-        print(f"重编码视频: {input_path} -> {output_path}")
         result = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
-        
         if result.returncode == 0:
-            print(f"重编码成功: {output_path}")
             return output_path
         else:
             print(f"重编码失败: {result.stderr}")
             return input_path
-            
     except subprocess.TimeoutExpired:
         print("重编码超时")
         return input_path
@@ -171,122 +168,105 @@ def reencode_video_to_h264(input_path, output_path=None, quality='medium'):
         return input_path
 
 def process_video_for_compatibility(video_path):
-    """处理视频以确保兼容性"""
     if not os.path.exists(video_path):
         print(f"视频文件不存在: {video_path}")
         return video_path
-    
-    # 检查ffmpeg是否可用
     if not check_ffmpeg_available():
         print("ffmpeg不可用，跳过重编码")
         return video_path
-    
-    # 获取视频编码信息
     codec = get_video_codec_info(video_path)
-    print(f"视频编码格式: {codec}")
-    
-    # 如果是AV1或其他不兼容的编码，重编码为H.264
     if codec in ['av01', 'av1', 'vp9', 'vp8'] or codec == 'unknown':
-        print(f"检测到不兼容的编码格式 ({codec})，开始重编码...")
         reencoded_path = reencode_video_to_h264(video_path, quality='fast')
-        
-        # 检查重编码后的文件是否存在且大小合理
         if os.path.exists(reencoded_path) and os.path.getsize(reencoded_path) > 1024:
             return reencoded_path
         else:
             print("重编码失败，使用原始文件")
             return video_path
     else:
-        print(f"视频编码 ({codec}) 兼容，无需重编码")
         return video_path
 
-
 def load_remote_dataset(repo_id: str,
                         episode_id: int = 0,
-                        video_keys: Optional[list] = None,
-                        download_dir: Optional[str] = None) -> Tuple[list, pd.DataFrame]:
+                        video_keys=None,
+                        download_dir=None):
     loader = RemoteDatasetLoader(repo_id)
     video_paths, df = loader.load_episode_data(episode_id, video_keys, download_dir)
-    
-    # 处理视频兼容性
     processed_video_paths = []
     for video_path in video_paths:
         processed_path = process_video_for_compatibility(video_path)
         processed_video_paths.append(processed_path)
-    
     return processed_video_paths, df
 
-
-# ------------------ 加载数据 ------------------
-print("正在加载数据集...")
-video_paths, data_df = load_remote_dataset(
-    repo_id="zijian2022/sortingtest",
-    episode_id=0,
-    download_dir="./downloaded_videos"
-)
-
-df = data_df
-columns = ["shoulder_pan", "shoulder_pitch", "elbow", "wrist_pitch", "wrist_roll", "gripper"]
-timestamps = df["timestamp"].values
-delta_t = np.diff(timestamps)
-time_for_plot = timestamps[1:]
-action_df = pd.DataFrame(df["action"].tolist(), columns=columns)
-
-# ------------------ 视频路径 ------------------
-video_path_1 = video_paths[0]
-video_path_2 = video_paths[1] 
-
-print(f"视频路径1: {video_path_1}")
-print(f"视频路径2: {video_path_2}")
-
 # ------------------ Dash 初始化 ------------------
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, suppress_callback_exceptions=True)
 server = app.server
 
-# ------------------ 全局变量存储阴影信息 ------------------
-all_shadows = {}  # 存储所有关节的阴影信息
+# ------------------ 页面布局 ------------------
+app.layout = html.Div([
+    html.H1("机器人数据可视化 - 视频兼容性优化", style={"textAlign": "center", "marginBottom": "20px"}),
+    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"}),
+    dcc.Loading(
+        id="loading",
+        type="default",
+        children=dcc.Store(id="store-data")
+    ),
+    html.Div(id="main-content")
+])
 
-# ------------------ 视频帧提取函数 ------------------
-def get_video_frame(video_path, time_in_seconds):
-    """从视频中提取指定时间的帧"""
+# ------------------ 数据加载回调 ------------------
+@app.callback(
+    Output("store-data", "data"),
+    Input("btn-load", "n_clicks"),
+    State("input-repo-id", "value"),
+    State("input-episode-id", "value"),
+    prevent_initial_call=True
+)
+def load_data_callback(n_clicks, repo_id, episode_id):
     try:
-        cap = cv2.VideoCapture(video_path)
-        if not cap.isOpened():
-            print(f"❌ 无法打开视频: {video_path}")
-            return None
-        
-        fps = cap.get(cv2.CAP_PROP_FPS)
-        if fps <= 0:
-            print(f"❌ 无法获取视频帧率: {video_path}")
-            cap.release()
-            return None
-        
-        frame_num = int(time_in_seconds * fps)
-        cap.set(cv2.CAP_PROP_POS_FRAMES, frame_num)
-        success, frame = cap.read()
-        cap.release()
-        
-        if success and frame is not None:
-            # 调整图像大小以减少数据传输
-            height, width = frame.shape[:2]
-            if width > 640:  # 如果宽度大于640，则缩放
-                new_width = 640
-                new_height = int(height * (new_width / width))
-                frame = cv2.resize(frame, (new_width, new_height))
-            
-            # 编码为JPEG
-            encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 85]  # 85%质量
-            _, buffer = cv2.imencode('.jpg', frame, encode_param)
-            encoded = base64.b64encode(buffer).decode('utf-8')
-            return f"data:image/jpeg;base64,{encoded}"
-        else:
-            print(f"❌ 无法读取帧: {video_path}, 时间: {time_in_seconds}s")
-            return None
-            
+        video_paths, data_df = load_remote_dataset(
+            repo_id=repo_id,
+            episode_id=int(episode_id),
+            download_dir="./downloaded_videos"
+        )
+        if data_df is None or data_df.empty:
+            return {}
+        return {
+            "video_paths": video_paths,
+            "data_df": data_df.to_dict("records"),
+            "columns": ["shoulder_pan", "shoulder_pitch", "elbow", "wrist_pitch", "wrist_roll", "gripper"],
+            "timestamps": data_df["timestamp"].tolist()
+        }
     except Exception as e:
-        print(f"❌ 提取视频帧异常: {e}")
-        return None
+        print(f"数据加载异常: {e}")
+        return {}
 
+# ------------------ 主内容渲染回调 ------------------
+@app.callback(
+    Output("main-content", "children"),
+    Input("store-data", "data")
+)
+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"})
+    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"}),
+            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"}))
+    return html.Div(rows)
+
+# ------------------ 阴影与高亮工具函数 ------------------
 def find_intervals(mask):
     intervals = []
     start = None
@@ -300,25 +280,17 @@ def find_intervals(mask):
         intervals.append((start, len(mask) - 1))
     return intervals
 
-def get_shadow_info(joint_name):
-    """获取特定关节的所有红色阴影信息"""
+def get_shadow_info(joint_name, action_df, delta_t, time_for_plot):
     angles = action_df[joint_name].values
     velocity = np.diff(angles) / delta_t
-    
     smoothed_velocity = gaussian_filter1d(velocity, sigma=1)
     smoothed_angle = gaussian_filter1d(angles[1:], sigma=1)
-    
-    # 参数
     vel_threshold = 0.5
     highlight_width = 3
     k = 2
-    
     shadows = []
-    
-    # 低速区间阴影
     low_speed_mask = np.abs(smoothed_velocity) < vel_threshold
     low_speed_intervals = find_intervals(low_speed_mask)
-    
     for start, end in low_speed_intervals:
         if end - start + 1 <= k:
             shadows.append({
@@ -328,8 +300,6 @@ def get_shadow_info(joint_name):
                 'start_idx': start,
                 'end_idx': end
             })
-    
-    # 最大值阴影
     max_idx = np.argmax(smoothed_angle)
     s_max = max(0, max_idx - highlight_width)
     e_max = min(len(time_for_plot) - 1, max_idx + highlight_width)
@@ -340,8 +310,6 @@ def get_shadow_info(joint_name):
         'start_idx': s_max,
         'end_idx': e_max
     })
-    
-    # 最小值阴影
     min_idx = np.argmin(smoothed_angle)
     s_min = max(0, min_idx - highlight_width)
     e_min = min(len(time_for_plot) - 1, min_idx + highlight_width)
@@ -352,57 +320,28 @@ def get_shadow_info(joint_name):
         'start_idx': s_min,
         'end_idx': e_min
     })
-    
     return shadows
 
 def is_hover_in_shadow(hover_time, shadows):
-    """检查hover时间是否在任何阴影内"""
     for shadow in shadows:
         if shadow['start_time'] <= hover_time <= shadow['end_time']:
             return True
     return False
 
 def find_shadows_in_range(shadows, start_time, end_time):
-    """找到指定时间范围内的所有阴影"""
     shadows_in_range = []
     for shadow in shadows:
-        # 检查阴影是否与指定范围有重叠
         if not (shadow['end_time'] < start_time or shadow['start_time'] > end_time):
             shadows_in_range.append(shadow)
     return shadows_in_range
 
-# 预计算所有关节的阴影信息
-print("正在预计算阴影信息...")
-for joint in columns:
-    all_shadows[joint] = get_shadow_info(joint)
-
-# ------------------ 图表生成函数 ------------------
-def generate_joint_graph(joint_name, idx, highlighted_shadows=None):
+def generate_joint_graph(joint_name, idx, action_df, delta_t, time_for_plot, all_shadows, highlighted_shadows=None):
     angles = action_df[joint_name].values
     velocity = np.diff(angles) / delta_t
-
     smoothed_velocity = gaussian_filter1d(velocity, sigma=1)
     smoothed_angle = gaussian_filter1d(angles[1:], sigma=1)
-
-    # 参数
-    vel_threshold = 0.5
-    highlight_width = 3
-    k = 2
-
-    # 找低速区间
-    low_speed_mask = np.abs(smoothed_velocity) < vel_threshold
-    low_speed_intervals = find_intervals(low_speed_mask)
-
-    # 找最大最小点
-    max_idx = np.argmax(smoothed_angle)
-    min_idx = np.argmin(smoothed_angle)
-
     shapes = []
-    
-    # 获取当前关节的阴影信息
     current_shadows = all_shadows[joint_name]
-    
-    # 正常的红色阴影
     for shadow in current_shadows:
         is_highlighted = False
         if highlighted_shadows:
@@ -411,10 +350,8 @@ def generate_joint_graph(joint_name, idx, highlighted_shadows=None):
                     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
-        
         shapes.append({
             "type": "rect",
             "xref": "x",
@@ -427,163 +364,138 @@ def generate_joint_graph(joint_name, idx, highlighted_shadows=None):
             "opacity": opacity,
             "line": {"width": 0}
         })
-
-    return dcc.Graph(
-        id=f"graph-{idx}",
-        figure={
-            "data": [
-                go.Scatter(
-                    x=time_for_plot,
-                    y=smoothed_angle,
-                    name="Angle",
-                    line=dict(color='orange')
-                )
-            ],
-            "layout": go.Layout(
-                title=joint_name,
-                xaxis={"title": "Time (s)"},
-                yaxis={"title": "Angle (deg)"},
-                shapes=shapes,
-                hovermode="x unified",
-                height=250,
-                margin=dict(t=30, b=30, l=50, r=50),
-                showlegend=False,
+    return {
+        "data": [
+            go.Scatter(
+                x=time_for_plot,
+                y=smoothed_angle,
+                name="Angle",
+                line=dict(color='orange')
             )
-        },
-        style={"height": "250px"}
-    )
-
-# ------------------ 布局 ------------------
-rows = []
-
-# 关节图 + 双视频帧
-for i, joint in enumerate(columns):
-    rows.append(html.Div([
-        html.Div(generate_joint_graph(joint, i), style={"width": "60%", "display": "inline-block", "verticalAlign": "top"}),
-        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"}))
-
-# 设置 layout
-app.layout = html.Div([
-    html.H1("机器人数据可视化 - 视频兼容性优化", style={"textAlign": "center", "marginBottom": "20px"}),
-    html.Div(rows)
-])
+        ],
+        "layout": go.Layout(
+            title=joint_name,
+            xaxis={"title": "Time (s)"},
+            yaxis={"title": "Angle (deg)"},
+            shapes=shapes,
+            hovermode="x unified",
+            height=250,
+            margin=dict(t=30, b=30, l=50, r=50),
+            showlegend=False,
+        )
+    }
 
-# ------------------ 回调：监听 hoverData 并更新阴影高亮 ------------------
+# ------------------ 联动高亮回调 ------------------
 @app.callback(
     [Output(f"graph-{i}", "figure") for i in range(6)],
-    [Input(f"graph-{i}", "hoverData") for i in range(6)],
-    [State(f"graph-{i}", "figure") for i in range(6)],
+    [Input("store-data", "data")] + [Input(f"graph-{i}", "hoverData") for i in range(6)],
+    prevent_initial_call=True
 )
-def update_shadow_highlighting(*args):
-    hover_datas = args[:6]
-    current_figures = args[6:]
-    
-    ctx = dash.callback_context
-    
-    # 检查是否有hover触发
-    if not ctx.triggered:
-        return [no_update] * 6
-    
-    trigger_id = ctx.triggered[0]['prop_id']
-    
-    # 如果不是hover触发，不更新
-    if 'hoverData' not in trigger_id:
-        return [no_update] * 6
-    
-    # 提取触发的图表索引
-    graph_idx = int(trigger_id.split('-')[1].split('.')[0])
-    hover_data = hover_datas[graph_idx]
-    
-    # 如果没有hover数据，恢复正常状态
-    if not hover_data or "points" not in hover_data or len(hover_data["points"]) == 0:
-        updated_figures = []
-        for i, joint in enumerate(columns):
-            updated_figures.append(generate_joint_graph(joint, i).figure)
-        return updated_figures
-    
-    try:
-        hover_time = float(hover_data["points"][0]["x"])
-        triggered_joint = columns[graph_idx]
-        
-        # 检查hover是否在红色阴影内
-        if not is_hover_in_shadow(hover_time, all_shadows[triggered_joint]):
-            # 如果不在阴影内，恢复正常状态
-            updated_figures = []
-            for i, joint in enumerate(columns):
-                updated_figures.append(generate_joint_graph(joint, i).figure)
-            return updated_figures
-        
-        # 找到hover时间对应的时间戳索引
-        hover_idx = np.searchsorted(time_for_plot, hover_time)
-        
-        # 计算前后10个时间戳的范围
-        start_idx = max(0, hover_idx - 20)
-        end_idx = min(len(time_for_plot) - 1, hover_idx + 20)
-        start_time = time_for_plot[start_idx]
-        end_time = time_for_plot[end_idx]
-        
-        # 为每个关节生成更新的图表
-        updated_figures = []
-        for i, joint in enumerate(columns):
-            # 找到该关节在指定时间范围内的阴影
-            shadows_in_range = find_shadows_in_range(all_shadows[joint], start_time, end_time)
-            
-            # 生成带有高亮的图表
-            updated_figure = generate_joint_graph(joint, i, shadows_in_range)
-            updated_figures.append(updated_figure.figure)
-        
-        return updated_figures
-        
-    except Exception as e:
-        print(f"处理阴影高亮异常: {e}")
+def update_all_graphs(data, *hover_datas):
+    if not data or "data_df" not in data or len(data["data_df"]) == 0:
         return [no_update] * 6
+    columns = data["columns"]
+    df = pd.DataFrame.from_records(data["data_df"])
+    action_df = pd.DataFrame(df["action"].tolist(), columns=columns)
+    timestamps = df["timestamp"].values
+    delta_t = np.diff(timestamps)
+    time_for_plot = timestamps[1:]
+    all_shadows = {}
+    for joint in columns:
+        all_shadows[joint] = get_shadow_info(joint, action_df, delta_t, time_for_plot)
+
+    # 查找是否有任何一个hover落在阴影内
+    for idx, hover_data in enumerate(hover_datas):
+        if hover_data and "points" in hover_data and len(hover_data["points"]) > 0:
+            hover_time = float(hover_data["points"][0]["x"])
+            triggered_joint = columns[idx]
+            if is_hover_in_shadow(hover_time, all_shadows[triggered_joint]):
+                hover_idx = np.searchsorted(time_for_plot, hover_time)
+                start_idx = max(0, hover_idx - 20)
+                end_idx = min(len(time_for_plot) - 1, hover_idx + 20)
+                start_time = time_for_plot[start_idx]
+                end_time = time_for_plot[end_idx]
+                figures = []
+                for i, joint in enumerate(columns):
+                    shadows_in_range = find_shadows_in_range(all_shadows[joint], start_time, end_time)
+                    fig = generate_joint_graph(joint, i, action_df, delta_t, time_for_plot, all_shadows, shadows_in_range)
+                    figures.append(fig)
+                return figures
+    # 没有hover或不在阴影内，全部正常显示
+    return [
+        generate_joint_graph(joint, i, action_df, delta_t, time_for_plot, all_shadows)
+        for i, joint in enumerate(columns)
+    ]
 
-# ------------------ 回调：监听 hoverData 更新视频帧 ------------------
-@app.callback(
-    [Output(f"video1-{i}", "src") for i in range(6)] + 
-    [Output(f"video2-{i}", "src") for i in range(6)],
-    [Input(f"graph-{i}", "hoverData") for i in range(6)]
-)
-def update_video_frames(*args):
-    hover_datas = args
-    
-    # 获取触发回调的上下文
-    ctx = dash.callback_context
-    
+# ------------------ 视频帧提取函数 ------------------
+def get_video_frame(video_path, time_in_seconds):
     try:
-        # 检查是否有hover触发了回调
-        if ctx.triggered:
-            trigger_id = ctx.triggered[0]['prop_id']
-            
-            # 如果是图表hover触发的
-            if 'hoverData' in trigger_id:
-                # 从trigger_id中提取图表索引
-                graph_idx = int(trigger_id.split('-')[1].split('.')[0])
-                hover_data = hover_datas[graph_idx]
-                
-                if hover_data and "points" in hover_data and len(hover_data["points"]) > 0:
-                    try:
-                        hover_time = float(hover_data["points"][0]["x"])
-                        frame1 = get_video_frame(video_path_1, hover_time)
-                        frame2 = get_video_frame(video_path_2, hover_time)
-                        
-                        # 如果成功获取帧，返回所有视频的帧
-                        if frame1 and frame2:
-                            return [frame1]*6 + [frame2]*6
-                    except Exception as e:
-                        print(f"处理hover数据异常: {e}")
-
-        return [no_update]*12
-
+        cap = cv2.VideoCapture(video_path)
+        if not cap.isOpened():
+            print(f"❌ 无法打开视频: {video_path}")
+            return None
+        fps = cap.get(cv2.CAP_PROP_FPS)
+        if fps <= 0:
+            cap.release()
+            return None
+        frame_num = int(time_in_seconds * fps)
+        cap.set(cv2.CAP_PROP_POS_FRAMES, frame_num)
+        success, frame = cap.read()
+        cap.release()
+        if success and frame is not None:
+            height, width = frame.shape[:2]
+            if width > 640:
+                new_width = 640
+                new_height = int(height * (new_width / width))
+                frame = cv2.resize(frame, (new_width, new_height))
+            encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 85]
+            _, buffer = cv2.imencode('.jpg', frame, encode_param)
+            encoded = base64.b64encode(buffer).decode('utf-8')
+            return f"data:image/jpeg;base64,{encoded}"
+        else:
+            return None
     except Exception as e:
-        print(f"update_video_frames回调函数异常: {e}")
-        return [no_update]*12
+        print(f"❌ 提取视频帧异常: {e}")
+        return None
+
+# ------------------ 视频帧回调 ------------------
+for i in range(6):
+    @app.callback(
+        Output(f"video1-{i}", "src"),
+        Output(f"video2-{i}", "src"),
+        Input("store-data", "data"),
+        Input(f"graph-{i}", "hoverData"),
+        prevent_initial_call=True
+    )
+    def update_video_frames(data, hover_data, idx=i):
+        if not data or "data_df" not in data or len(data["data_df"]) == 0:
+            return no_update, no_update
+        columns = data["columns"]
+        df = pd.DataFrame.from_records(data["data_df"])
+        timestamps = df["timestamp"].values
+        time_for_plot = timestamps[1:]
+        video_paths = data["video_paths"]
+        
+        # 确定要显示的时间点
+        display_time = 0.0  # 默认显示开始时间
+        if hover_data and "points" in hover_data and len(hover_data["points"]) > 0:
+            # 如果有hover数据，使用hover时间
+            display_time = float(hover_data["points"][0]["x"])
+        elif len(time_for_plot) > 0:
+            # 如果没有hover数据，使用时间轴开始时间
+            display_time = time_for_plot[0]
+        
+        try:
+            frame1 = get_video_frame(video_paths[0], display_time)
+            frame2 = get_video_frame(video_paths[1], display_time)
+            if frame1 and frame2:
+                return frame1, frame2
+            else:
+                return no_update, no_update
+        except Exception as e:
+            print(f"update_video_frames回调函数异常: {e}")
+            return no_update, no_update
 
 # ------------------ 启动应用 ------------------
 if __name__ == "__main__":
-    print("应用启动中...")
     app.run(debug=True, host='0.0.0.0', port=7860)