Update index.html

index.html

@@ -8,9 +8,10 @@
     <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-->
     <style>
         body {
-            font-family: 'Orbitron', sans-serif;
+            font-family: Arial, Helvetica, sans-serif;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -47,10 +48,11 @@
             display: flex;
             justify-content: space-between;
             flex-grow: 1;
+            margin-left: 120px;
         }
-        
+
         .video-container {
-            width: 50%;
+            width: 58%;
         }
 
         #plotDiv {
@@ -59,12 +61,34 @@
         }
 
         #episodes-container {
+            max-height: 500px;
+            overflow-y: auto;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            background-color: #222;
+            margin-left: 50px;
+        }
+
+        #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: 0px;
-            background-color: #222;
-            border-radius: 3px;
+            padding: 10px;
+        }
+
+        .episode-radio {
+            display: flex;
+            align-items: center;
         }
 
         video {
@@ -77,8 +101,8 @@
             justify-content: center;
             margin-top: 2px;
         }
-·
-        button {
+
+        · button {
             margin: 0 5px;
             font-size: 20px;
             background-color: #333;
@@ -92,7 +116,7 @@
             display: block;
             margin-bottom: 20px;
         }
-    
+
         #loadingIndicator {
             display: none;
             position: fixed;
@@ -107,9 +131,12 @@
         }
 
         .checkbox-list {
-            max-height: 400px;  /* 设置最大高度，超过此高度会出现滚动条 */
-            overflow-y: auto;   /* 添加垂直滚动条 */
-            padding-right: 10px; /* 为滚动条留出空间 */
+            max-height: 400px;
+            /* 设置最大高度，超过此高度会出现滚动条 */
+            overflow-y: auto;
+            /* 添加垂直滚动条 */
+            padding-right: 10px;
+            /* 为滚动条留出空间 */
         }
 
         .checkbox-list label {
@@ -157,12 +184,11 @@
         </div>
         -->
         <div id="episodes-container">
-            <h3>Episodes</h3>
-            <div class="checkbox-list">
-                <!-- 复选框将在这里动态生成 -->
-            </div>
+            <h3 id="episodes-title">Episodes</h3>
+            <div id="episodes-grid"></div>
         </div>
         <div class="content-container">
+            <!--
             <div class="checkbox-container">
                 <h3>Tasks</h3>
                 <label>
@@ -177,7 +203,7 @@
                 <label>
                     <input type="radio" name="videoOption" value="twist_the_tube"> Twist the tube
                 </label>
-            </div>
+            </div>-->
 
             <div class="video-container">
                 <video id="laptopVideo">
@@ -212,19 +238,50 @@
         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')
         // 循环创建复选框
-        const container = document.querySelector('#episodes-container .checkbox-list');
-        for (let i = 1; i <= totalEpisodes; i++) {
-            const label = document.createElement('label');
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.id = `episode-${i}`;
-            label.appendChild(checkbox);
-            label.appendChild(document.createTextNode(` Episode ${i}`));
-            container.appendChild(label);
-        }
+
         let animationFrameId;
         let isPlaying = false;
         function togglePlayPause() {
@@ -282,27 +339,27 @@
             const layout = {
                 title: {
                     text: '3D Motion Capture',
-                    font: { 
+                    font: {
                         color: 'white',
                         size: 20  // 设置字体大小
                     },
                     x: 0.5,  // 设置标题在x轴的位置（0.5表示居中）
-                    y: 1
+                    y: 1.2
                 },
                 paper_bgcolor: 'black',
                 plot_bgcolor: 'black',
                 scene: {
-                    xaxis: { 
+                    xaxis: {
                         title: 'X',
                         color: 'white',
                         gridcolor: 'gray'
                     },
-                    yaxis: { 
+                    yaxis: {
                         title: 'Y',
                         color: 'white',
                         gridcolor: 'gray'
                     },
-                    zaxis: { 
+                    zaxis: {
                         title: 'Z',
                         color: 'white',
                         gridcolor: 'gray'
@@ -337,16 +394,19 @@
                 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() {
+        //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();
 
@@ -357,9 +417,9 @@
             isPlaying = false;
             playPauseBtn.textContent = '▶️';
             // Fetch and process the new CSV data
-            fetchAndProcessCSV();
+            fetchAndProcessActionCSV();
         }
-        function fetchAndProcessCSV() {
+        function fetchAndProcessActionCSV() {
             fetch(csvFilePath)
                 .then(response => {
                     if (!response.ok) {
@@ -377,11 +437,11 @@
                 })
                 .catch(error => console.error('Error loading the CSV file:', error));
         }
-        radioButtons.forEach(radio => {
-            radio.addEventListener('change', updateVideoAndCSVSource);
-        });
+        //radioButtons.forEach(radio => {
+        //    radio.addEventListener('change', updateVideoAndCSVSource);
+        //});
         // Initial CSV fetch and processing
-        fetchAndProcessCSV();
+        fetchAndProcessActionCSV();
     </script>
 </body>