Spaces:

cyberorigin
/

episode-visualizer

Running

App Files Files Community

ghosthcp516 commited on Feb 18

Commit

30d37a3

verified ·

1 Parent(s): afae829

Optimize styles and layout

Browse files

Files changed (1) hide show

index.html +426 -439

index.html CHANGED Viewed

@@ -2,449 +2,436 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Motion Capture Visualization</title>
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
-    <!--'Orbitron', sans-serif;Arial, Helvetica, sans-serif-->
-    <style>
-        body {
-            font-family: 'Orbitron', sans-serif;
-            margin: 0;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background-color: #000;
-            color: #fff;
-        }
-        h1 {
-            color: gold;
-            text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.5);
-        }
-        .main-container {
-            display: flex;
-            width: 100%;
-            max-width: 1500px;
-            margin-top: 100px;
-        }
-        .episode-list {
-            width: 150px;
-            margin-right: 0px;
-        }
-        .episode-list label {
-            display: block;
-            margin-bottom: 10px;
-            color: #ddd;
-        }
-        .content-container {
-            display: flex;
-            justify-content: space-between;
-            flex-grow: 1;
-            margin-left: 120px;
-        }
-        .video-container {
-            width: 58%;
-        }
-        #plotDiv {
-            width: 460px;
-            height: 485px;
-        }
-        #episodes-container {
-            max-height: 500px;
-            width: 210px;
-            overflow-y: auto;
-            overflow-x: hidden;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            background-color: #222;
-            margin-left: 10px;
-        }
-        #episodes-title {
-            background-color: #222;
-            color: #fff;
-            padding: 10px;
-            margin: 0;
-            position: sticky;
-            top: 0;
-            z-index: 1;
-        }
-        #episodes-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 2px;
-            padding: 10px;
-        }
-        .episode-radio {
-            display: flex;
-            align-items: center;
-        }
-        video {
-            width: 100%;
-            height: auto;
-        }
-        .controls {
-            display: flex;
-            justify-content: center;
-            margin-top: 2px;
-        }
-        · button {
-            margin: 0 5px;
-            font-size: 20px;
-            background-color: #333;
-            color: #fff;
-            border: none;
-            padding: 5px 10px;
-            cursor: pointer;
-        }
-        .checkbox-container label {
-            display: block;
-            margin-bottom: 20px;
-        }
-        #loadingIndicator {
-            display: none;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: rgba(0, 0, 0, 0.7);
-            color: rgb(255, 255, 255);
-            padding: 20px;
-            border-radius: 5px;
-            z-index: 1000;
-        }
-        .checkbox-list {
-            max-height: 400px;
-            /* 设置最大高度，超过此高度会出现滚动条 */
-            overflow-y: auto;
-            /* 添加垂直滚动条 */
-            padding-right: 10px;
-            /* 为滚动条留出空间 */
-        }
-        .checkbox-list label {
-            display: block;
-            margin-bottom: 0px;
-            color: #ddd;
-        }
-        .checkbox-list input[type="checkbox"] {
-            margin-right: 10px;
-        }
-        /* 自定义滚动条样式（针对WebKit浏览器） */
-        .checkbox-list::-webkit-scrollbar {
-            width: 0px;
-        }
-        .checkbox-list::-webkit-scrollbar-track {
-            background: #333;
-            border-radius: 4px;
-        }
-        .checkbox-list::-webkit-scrollbar-thumb {
-            background: #666;
-            border-radius: 4px;
-        }
-        .checkbox-list::-webkit-scrollbar-thumb:hover {
-            background: #888;
-        }
-    </style>
 </head>
 <body>
-    <h1>Motion Capture Visualization</h1>
-    <div class="main-container">
-        <!--
-        <div class="episode-list">
-            <h3>Episodes</h3>
-            <label><input type="checkbox"> Episode 1</label>
-            <label><input type="checkbox"> Episode 2</label>
-            <label><input type="checkbox"> Episode 29</label>
-            <label><input type="checkbox"> Episode 30</label>
-        </div>
-        -->
-        <div id="episodes-container">
-            <h3 id="episodes-title">Episodes</h3>
-            <div id="episodes-grid"></div>
-        </div>
-        <div class="content-container">
-            <!--
-            <div class="checkbox-container">
-                <h3>Tasks</h3>
-                <label>
-                    <input type="radio" name="videoOption" value="fold_towels" checked> Fold towels
-                </label>
-                <label>
-                    <input type="radio" name="videoOption" value="pipette"> Pipette
-                </label>
-                <label>
-                    <input type="radio" name="videoOption" value="take_the_item"> Take the item
-                </label>
-                <label>
-                    <input type="radio" name="videoOption" value="twist_the_tube"> Twist the tube
-                </label>
-            </div>-->
-            <div class="video-container">
-                <video id="laptopVideo">
-                    <source src="https://huggingface.co/datasets/cyberorigin/fold_towels/resolve/main/Video/video.mp4"
-                        type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
-                <div class="controls">
-                    <button id="playPauseBtn">▶️</button>
-                    <button id="rewindBtn">⏪</button>
-                    <button id="forwardBtn">⏩</button>
-                    <button id="restartBtn">↩️</button>
-                </div>
-            </div>
-            <div id="plotDiv"></div>
-        </div>
     </div>
-    <div id="loadingIndicator">Loading...</div>
-    <script>
-        let csvFilePath = 'https://huggingface.co/datasets/cyberorigin/fold_towels/resolve/main/MoCap/mocap.csv';
-        const body_part_names = [
-            'Left Shoulder', 'Right Upper Arm', 'Left Lower Leg', 'Spine1', 'Right Upper Leg',
-            'Spine3', 'Right Lower Arm', 'Left Foot', 'Right Lower Leg', 'Right Shoulder',
-            'Left Hand', 'Left Upper Leg', 'Right Foot', 'Spine', 'Spine2', 'Left Lower Arm',
-            'Left Toe', 'Neck', 'Right Hand', 'Right Toe', 'Head', 'Left Upper Arm', 'Hips'
-        ];
-        const laptopVideo = document.getElementById('laptopVideo');
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        const rewindBtn = document.getElementById('rewindBtn');
-        const forwardBtn = document.getElementById('forwardBtn');
-        const restartBtn = document.getElementById('restartBtn');
-        const radioButtons = document.querySelectorAll('input[name="videoOption"]');
-        const episodeContainer = document.getElementById('episodes-container');
-        const episodesGrid = document.getElementById('episodes-grid');
-        document.addEventListener('DOMContentLoaded', loadEpisodesCsv);
-        function loadEpisodesCsv() {
-            fetch("https://huggingface.co/datasets/cyberorigin/test/resolve/main/episodes.csv")
-                .then(response => response.text())
-                .then(data => {
-                    const lines = data.split('\n');
-                    processEpisodes(lines);
-                })
-                .catch(error => console.error('Error loading CSV file:', error));
-        }
-        function processEpisodes(lines) {
-            episodesGrid.innerHTML = '';
-            lines.forEach((line, index) => {
-                if (line.trim() !== '' && index != 0) {
-                    const id = line.split(',')[0];
-                    const episodeNumber = index;
-                    const radioDiv = document.createElement('div');
-                    radioDiv.className = 'episode-radio';
-                    const radio = document.createElement('input');
-                    radio.type = 'radio';
-                    radio.id = `episode${episodeNumber}`;
-                    radio.name = 'episodeGroup';
-                    radio.addEventListener('change', () => updateVideoAndCSVSource(id));
-                    const label = document.createElement('label');
-                    label.htmlFor = `episode${episodeNumber}`;
-                    label.textContent = `Episode ${episodeNumber}`;
-                    radioDiv.appendChild(radio);
-                    radioDiv.appendChild(label);
-                    episodesGrid.appendChild(radioDiv);
-                }
-            });
-        }
-        let totalEpisodes = 100; //获取episode的数量
-        // const container = document.getElementById('episodes-container')
-        // 循环创建复选框
-        let animationFrameId;
-        let isPlaying = false;
-        function togglePlayPause() {
-            if (!isPlaying) {
-                laptopVideo.play();
-                playPauseBtn.textContent = '⏸️';
-                isPlaying = true;
-                animate3DVisualization();
-            } else {
-                laptopVideo.pause();
-                playPauseBtn.textContent = '▶️';
-                isPlaying = false;
-                cancelAnimationFrame(animationFrameId);
-            }
-        }
-        function rewind() {
-            laptopVideo.currentTime -= 5;
-            update3DVisualization();
-        }
-        function forward() {
-            laptopVideo.currentTime += 5;
-            update3DVisualization();
-        }
-        function restart() {
-            laptopVideo.currentTime = 0;
-            update3DVisualization();
-        }
-        playPauseBtn.addEventListener('click', togglePlayPause);
-        rewindBtn.addEventListener('click', rewind);
-        forwardBtn.addEventListener('click', forward);
-        restartBtn.addEventListener('click', restart);
-        function getCoordinates(data, coordinate) {
-            return body_part_names.map(part => parseFloat(data[`${part}_${coordinate}`]));
-        }
-        let frames;
-        function processData(results) {
-            console.log("Processing data:", results);
-            const motion_capture_data = results.data.filter((_, index) => index % 3 === 0);
-            frames = motion_capture_data.map((row, index) => ({
-                name: index.toString(),
-                data: [{
-                    x: getCoordinates(row, 'x'),
-                    y: getCoordinates(row, 'y'),
-                    z: getCoordinates(row, 'z'),
-                    mode: 'markers',
-                    type: 'scatter3d',
-                    marker: { size: 4.8, color: "blue" }
-                }]
-            }));
-            if (frames.length === 0) {
-                console.error("No frames were created from the data");
-                return;
-            }
-            const initialFrame = frames[0].data[0];
-            const layout = {
-                title: {
-                    text: '3D Motion Capture',
-                    font: {
-                        color: 'white',
-                        size: 20  // 设置字体大小
-                    },
-                    x: 0.5,  // 设置标题在x轴的位置（0.5表示居中）
-                    y: 1.2
-                },
-                paper_bgcolor: 'black',
-                plot_bgcolor: 'black',
-                scene: {
-                    xaxis: {
-                        title: 'X',
-                        color: 'white',
-                        gridcolor: 'gray'
-                    },
-                    yaxis: {
-                        title: 'Y',
-                        color: 'white',
-                        gridcolor: 'gray'
-                    },
-                    zaxis: {
-                        title: 'Z',
-                        color: 'white',
-                        gridcolor: 'gray'
-                    },
-                    bgcolor: 'black'
-                },
-                font: { color: 'white' },
-                margin: {
-                    l: 2,    // 左边距
-                    r: 2,    // 右边距
-                    b: 2,    // 底部边距
-                    t: 50,   // 顶部边距
-                    pad: 4   // 图表内边距
-                }
-            };
-            Plotly.newPlot('plotDiv', [initialFrame], layout);
-        }
-        function update3DVisualization() {
-            if (!frames) return;
-            const currentTime = laptopVideo.currentTime;
-            const totalDuration = laptopVideo.duration;
-            const frameIndex = Math.floor((currentTime / totalDuration) * frames.length);
-            const frame = frames[Math.min(frameIndex, frames.length - 1)];
-            Plotly.animate('plotDiv', frame, {
-                transition: { duration: 0 },
-                frame: { duration: 0, redraw: true }
-            });
-        }
-        function animate3DVisualization() {
-            update3DVisualization();
-            if (isPlaying) {
-                animationFrameId = requestAnimationFrame(animate3DVisualization);
-            }
-        }
-        //function updateVideoAndCSVSource() {
-        //const selectedOption = document.querySelector('input[name="videoOption"]:checked').value;
-        //const videoUrl = `https://huggingface.co/datasets/cyberorigin/${selectedOption}/resolve/main/Video/video.mp4`;
-        //if (selectedOption != "twist_the_tube") {
-        //     csvFilePath = `https://huggingface.co/datasets/cyberorigin/${selectedOption}/resolve/main/MoCap/mocap.csv`;
-        //}
-        //else {
-        //   csvFilePath = `https://huggingface.co/datasets/cyberorigin/${selectedOption}/resolve/main/MoCap/MoCap.csv`;
-        //}
-        function updateVideoAndCSVSource(id) {
-            const selectedOption = document.querySelector('input[name="episodeGroup"]:checked').value;
-            const videoUrl = `https://huggingface.co/datasets/cyberorigin/pick_and_place/resolve/main/color/${id}.mp4`;
-            csvFilePath = `https://huggingface.co/datasets/cyberorigin/pick_and_place/resolve/main/motion_capture/${id}.csv`;
-            laptopVideo.pause();
-            laptopVideo.querySelector('source').src = videoUrl;
-            laptopVideo.load();
-            isPlaying = false;
-            playPauseBtn.textContent = '▶️';
-            // Fetch and process the new CSV data
-            fetchAndProcessActionCSV();
-        }
-        function fetchAndProcessActionCSV() {
-            fetch(csvFilePath)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    return response.text();
-                })
-                .then(csvString => {
-                    console.log("CSV data loaded successfully");
-                    Papa.parse(csvString, {
-                        header: true,
-                        dynamicTyping: true,
-                        complete: processData
-                    });
-                })
-                .catch(error => console.error('Error loading the CSV file:', error));
-        }
-        //radioButtons.forEach(radio => {
-        //    radio.addEventListener('change', updateVideoAndCSVSource);
-        //});
-        // Initial CSV fetch and processing
-        fetchAndProcessActionCSV();
-    </script>
 </body>
 </html>

 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Motion Capture Visualization</title>
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
+  <!--'Orbitron', sans-serif;Arial, Helvetica, sans-serif-->
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: 'Orbitron', 'Arial', sans-serif;
+      background-color: #1a1a1a;
+      color: #ffffff;
+      min-height: 90vh;
+    }
+    h1 {
+      width: 1280px;
+      color: #ffffff;
+      margin: 0 auto 30px;
+      font-size: 30px;
+      text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5)
+    }
+    .main-container {
+      display: grid;
+      grid-template-columns: 250px 1fr;
+      gap: 20px;
+      max-width: 1280px;
+      margin: 0 auto;
+      height: calc(100vh - 80px);
+    }
+    /* Panel A: Episodes List */
+    #episodes-container {
+      background-color: #2a2a2a;
+      border-radius: 10px;
+      padding: 15px;
+      height: 90%;
+      overflow-y: auto;
+    }
+    #episodes-title {
+      color: #ffffff;
+      margin-top: 0;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #3a3a3a;
+    }
+    #episodes-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 15px;
+    }
+    .episode-radio {
+      padding: 8px;
+      border-radius: 6px;
+      transition: background-color 0.2s;
+    }
+    .episode-radio:hover {
+      background-color: #3a3a3a;
+    }
+    .episode-radio input[type="radio"] {
+      margin-right: 10px;
+    }
+    .episode-radio label {
+      cursor: pointer;
+    }
+    /* Right Content Container */
+    .content-container {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr;
+      gap: 20px;
+      height: 100%;
+    }
+    /* Video Container */
+    .video-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #2a2a2a;
+      border-radius: 10px;
+      padding: 22px;
+      height: fit-content;
+    }
+    video {
+      width: 720px;
+      border-radius: 6px;
+      margin-bottom: 15px;
+      background-color: #000;
+    }
+    .controls {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      padding: 10px 0;
+    }
+    .controls button {
+      background-color: #3a3a3a;
+      border: none;
+      border-radius: 6px;
+      padding: 4px 8px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      font-size: 18px;
+    }
+    .controls button:hover {
+      background-color: #4a4a4a;
+    }
+    /* Plot Container */
+    #plotDiv {
+      background-color: #2a2a2a;
+      border-radius: 10px;
+      padding: 15px;
+      width: 720px;
+      height: 550px;
+    }
+    #loadingIndicator {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.8);
+      padding: 20px 40px;
+      border-radius: 10px;
+      display: none;
+    }
+    /* Scrollbar Styling */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #2a2a2a;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #4a4a4a;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #5a5a5a;
+    }
+  </style>
 </head>
 <body>
+<h1>Motion Capture Visualization</h1>
+<div class="main-container">
+  <!-- Panel A: Episodes List -->
+  <div id="episodes-container">
+    <h3 id="episodes-title">Episodes</h3>
+    <div id="episodes-grid"></div>
+  </div>
+  <div class="content-container">
+    <!-- Panel B: Video Player -->
+    <div class="video-container">
+      <video id="laptopVideo">
+        <source src="https://huggingface.co/datasets/cyberorigin/fold_towels/resolve/main/Video/video.mp4"
+                type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+      <div class="controls">
+        <button id="playPauseBtn">▶️</button>
+        <button id="rewindBtn">⏪</button>
+        <button id="forwardBtn">⏩</button>
+        <button id="restartBtn">↩️</button>
+      </div>
+      <!-- Panel C: Plot Visualization -->
+      <div id="plotDiv"></div>
     </div>
+  </div>
+</div>
+<div id="loadingIndicator">Loading...</div>
+<script>
+  let csvFilePath = 'https://huggingface.co/datasets/cyberorigin/fold_towels/resolve/main/MoCap/mocap.csv'
+  const body_part_names = [
+    'Left Shoulder', 'Right Upper Arm', 'Left Lower Leg', 'Spine1', 'Right Upper Leg',
+    'Spine3', 'Right Lower Arm', 'Left Foot', 'Right Lower Leg', 'Right Shoulder',
+    'Left Hand', 'Left Upper Leg', 'Right Foot', 'Spine', 'Spine2', 'Left Lower Arm',
+    'Left Toe', 'Neck', 'Right Hand', 'Right Toe', 'Head', 'Left Upper Arm', 'Hips',
+  ]
+  const laptopVideo = document.getElementById('laptopVideo')
+  const playPauseBtn = document.getElementById('playPauseBtn')
+  const rewindBtn = document.getElementById('rewindBtn')
+  const forwardBtn = document.getElementById('forwardBtn')
+  const restartBtn = document.getElementById('restartBtn')
+  const radioButtons = document.querySelectorAll('input[name="videoOption"]')
+  const episodeContainer = document.getElementById('episodes-container')
+  const episodesGrid = document.getElementById('episodes-grid')
+  document.addEventListener('DOMContentLoaded', loadEpisodesCsv)
+  function loadEpisodesCsv() {
+    fetch('https://huggingface.co/datasets/cyberorigin/test/resolve/main/episodes.csv')
+      .then(response => response.text())
+      .then(data => {
+        const lines = data.split('\n')
+        processEpisodes(lines)
+      })
+      .catch(error => console.error('Error loading CSV file:', error))
+  }
+  function processEpisodes(lines) {
+    episodesGrid.innerHTML = ''
+    lines.forEach((line, index) => {
+      if (line.trim() !== '' && index != 0) {
+        const id = line.split(',')[0]
+        const episodeNumber = index
+        const radioDiv = document.createElement('div')
+        radioDiv.className = 'episode-radio'
+        const radio = document.createElement('input')
+        radio.type = 'radio'
+        radio.id = `episode${episodeNumber}`
+        radio.name = 'episodeGroup'
+        radio.addEventListener('change', () => updateVideoAndCSVSource(id))
+        const label = document.createElement('label')
+        label.htmlFor = `episode${episodeNumber}`
+        label.textContent = `Episode ${episodeNumber}`
+        radioDiv.appendChild(radio)
+        radioDiv.appendChild(label)
+        episodesGrid.appendChild(radioDiv)
+      }
+    })
+  }
+  let totalEpisodes = 100 //获取episode的数量
+  // const container = document.getElementById('episodes-container')
+  // 循环创建复选框
+  let animationFrameId
+  let isPlaying = false
+  function togglePlayPause() {
+    if (!isPlaying) {
+      laptopVideo.play()
+      playPauseBtn.textContent = '⏸️'
+      isPlaying = true
+      animate3DVisualization()
+    } else {
+      laptopVideo.pause()
+      playPauseBtn.textContent = '▶️'
+      isPlaying = false
+      cancelAnimationFrame(animationFrameId)
+    }
+  }
+  function rewind() {
+    laptopVideo.currentTime -= 5
+    update3DVisualization()
+  }
+  function forward() {
+    laptopVideo.currentTime += 5
+    update3DVisualization()
+  }
+  function restart() {
+    laptopVideo.currentTime = 0
+    update3DVisualization()
+  }
+  playPauseBtn.addEventListener('click', togglePlayPause)
+  rewindBtn.addEventListener('click', rewind)
+  forwardBtn.addEventListener('click', forward)
+  restartBtn.addEventListener('click', restart)
+  function getCoordinates(data, coordinate) {
+    return body_part_names.map(part => parseFloat(data[`${part}_${coordinate}`]))
+  }
+  let frames
+  function processData(results) {
+    console.log('Processing data:', results)
+    const motion_capture_data = results.data.filter((_, index) => index % 3 === 0)
+    frames = motion_capture_data.map((row, index) => ({
+      name: index.toString(),
+      data: [{
+        x: getCoordinates(row, 'x'),
+        y: getCoordinates(row, 'y'),
+        z: getCoordinates(row, 'z'),
+        mode: 'markers',
+        type: 'scatter3d',
+        marker: { size: 4.8, color: 'blue' },
+      }],
+    }))
+    if (frames.length === 0) {
+      console.error('No frames were created from the data')
+      return
+    }
+    const initialFrame = frames[0].data[0]
+    const layout = {
+      title: {
+        text: '3D Motion Capture',
+        font: {
+          color: 'white',
+          size: 20,  // 设置字体大小
+        },
+        x: 0.5,  // 设置标题在x轴的位置（0.5表示居中）
+        y: 1.2,
+      },
+      paper_bgcolor: 'black',
+      plot_bgcolor: 'black',
+      scene: {
+        xaxis: {
+          title: 'X',
+          color: 'white',
+          gridcolor: 'gray',
+        },
+        yaxis: {
+          title: 'Y',
+          color: 'white',
+          gridcolor: 'gray',
+        },
+        zaxis: {
+          title: 'Z',
+          color: 'white',
+          gridcolor: 'gray',
+        },
+        bgcolor: 'black',
+      },
+      font: { color: 'white' },
+      margin: {
+        l: 2,    // 左边距
+        r: 2,    // 右边距
+        b: 2,    // 底部边距
+        t: 50,   // 顶部边距
+        pad: 4,   // 图表内边距
+      },
+    }
+    Plotly.newPlot('plotDiv', [initialFrame], layout)
+  }
+  function update3DVisualization() {
+    if (!frames) return
+    const currentTime = laptopVideo.currentTime
+    const totalDuration = laptopVideo.duration
+    const frameIndex = Math.floor((currentTime / totalDuration) * frames.length)
+    const frame = frames[Math.min(frameIndex, frames.length - 1)]
+    Plotly.animate('plotDiv', frame, {
+      transition: { duration: 0 },
+      frame: { duration: 0, redraw: true },
+    })
+  }
+  function animate3DVisualization() {
+    update3DVisualization()
+    if (isPlaying) {
+      animationFrameId = requestAnimationFrame(animate3DVisualization)
+    }
+  }
+  //function updateVideoAndCSVSource() {
+  //const selectedOption = document.querySelector('input[name="videoOption"]:checked').value;
+  //const videoUrl = `https://huggingface.co/datasets/cyberorigin/${selectedOption}/resolve/main/Video/video.mp4`;
+  //if (selectedOption != "twist_the_tube") {
+  //     csvFilePath = `https://huggingface.co/datasets/cyberorigin/${selectedOption}/resolve/main/MoCap/mocap.csv`;
+  //}
+  //else {
+  //   csvFilePath = `https://huggingface.co/datasets/cyberorigin/${selectedOption}/resolve/main/MoCap/MoCap.csv`;
+  //}
+  function updateVideoAndCSVSource(id) {
+    const selectedOption = document.querySelector('input[name="episodeGroup"]:checked').value
+    const videoUrl = `https://huggingface.co/datasets/cyberorigin/pick_and_place/resolve/main/color/${id}.mp4`
+    csvFilePath = `https://huggingface.co/datasets/cyberorigin/pick_and_place/resolve/main/motion_capture/${id}.csv`
+    laptopVideo.pause()
+    laptopVideo.querySelector('source').src = videoUrl
+    laptopVideo.load()
+    isPlaying = false
+    playPauseBtn.textContent = '▶️'
+    // Fetch and process the new CSV data
+    fetchAndProcessActionCSV()
+  }
+  function fetchAndProcessActionCSV() {
+    fetch(csvFilePath)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`)
+        }
+        return response.text()
+      })
+      .then(csvString => {
+        console.log('CSV data loaded successfully')
+        Papa.parse(csvString, {
+          header: true,
+          dynamicTyping: true,
+          complete: processData,
+        })
+      })
+      .catch(error => console.error('Error loading the CSV file:', error))
+  }
+  //radioButtons.forEach(radio => {
+  //    radio.addEventListener('change', updateVideoAndCSVSource);
+  //});
+  // Initial CSV fetch and processing
+  fetchAndProcessActionCSV()
+</script>
 </body>
 </html>