use dataset API

index.html

@@ -61,14 +61,6 @@
                 Your browser does not support the video tag.
             </video>
         </div>
-        <!--
-        <div class="video-wrapper">
-            <video id="phoneVideo">
-                <source src="video.mp4" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
-        </div>
-    -->
     </div>
 
     <div class="controls">
@@ -81,7 +73,6 @@
     <div id="plotDiv"></div>
 
     <script>
-        const csvFilePath = 'https://huggingface.co/datasets/cyberorigin/fold_towels/blob/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',
@@ -90,7 +81,6 @@
         ];
 
         const laptopVideo = document.getElementById('laptopVideo');
-        //const phoneVideo = document.getElementById('phoneVideo');
         const playPauseBtn = document.getElementById('playPauseBtn');
         const rewindBtn = document.getElementById('rewindBtn');
         const forwardBtn = document.getElementById('forwardBtn');
@@ -98,17 +88,16 @@
 
         let animationFrameId;
         let isPlaying = false;
+        let frames;
 
         function togglePlayPause() {
             if (!isPlaying) {
                 laptopVideo.play();
-                //phoneVideo.play();
                 playPauseBtn.textContent = '⏸️';
                 isPlaying = true;
                 animate3DVisualization();
             } else {
                 laptopVideo.pause();
-                //phoneVideo.pause();
                 playPauseBtn.textContent = '▶️';
                 isPlaying = false;
                 cancelAnimationFrame(animationFrameId);
@@ -117,19 +106,16 @@
 
         function rewind() {
             laptopVideo.currentTime -= 5;
-            //phoneVideo.currentTime -= 5;
             update3DVisualization();
         }
 
         function forward() {
             laptopVideo.currentTime += 5;
-            //phoneVideo.currentTime += 5;
             update3DVisualization();
         }
 
         function restart() {
             laptopVideo.currentTime = 0;
-            //phoneVideo.currentTime = 0;
             update3DVisualization();
         }
 
@@ -142,8 +128,6 @@
             return body_part_names.map(part => parseFloat(data[`${part}_${coordinate}`]));
         }
 
-        let frames;
-
         function processData(results) {
             console.log("Processing data:", results);
 
@@ -196,23 +180,22 @@
             }
         }
 
-        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));
+        async function loadDataset() {
+            const response = await fetch('https://huggingface.co/api/datasets/cyberorigin/fold_towels/resolve/main/MoCap/mocap.csv');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const csvString = await response.text();
+            console.log("CSV data loaded successfully");
+            Papa.parse(csvString, {
+                header: true,
+                dynamicTyping: true,
+                complete: processData
+            });
+        }
+
+        loadDataset().catch(error => console.error('Error loading the CSV file:', error));
     </script>
 </body>
 
-</html>
+</html>