Implement autoplay

pskl · Aug 25, 2024 · ab0e353 · ab0e353
1 parent 25cca8b
commit ab0e353
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 5 deletions.
diff --git a/docs/script.js b/docs/script.js
@@ -1,18 +1,23 @@
 const folderFiles = {
-  "interlink_mistral_big5": "test_8346320627440787020.json",
   "interlink_gpt-4_darktriad": "test_12232222970715529377.json",
+  "interlink_mistral_big5": "test_8346320627440787020.json",
   "interlink_dolphin-mixtral_darktriad": "test_13083007193134711326.json"
 };
+
 var folderPath;
+var currentFolder;
 
 document.addEventListener('DOMContentLoaded', function () {
-  const startButton = document.getElementById('startContainer');
-  Object.keys(folderFiles).forEach(folder => {
+  const startContainer = document.getElementById('startContainer');
+  const folders = Object.keys(folderFiles);
+
+  folders.forEach(folder => {
     const button = document.createElement('button');
     button.textContent = folder;
     button.addEventListener('click', () => loadFolder(folder, folderFiles[folder]));
-    startButton.appendChild(button);
+    startContainer.appendChild(button);
   });
+  autoInit(folders);
 });
 
 const strokeWidth = 1.5
@@ -25,6 +30,7 @@ var lineGenerator = d3.line().curve(d3.curveBasis)
   .y(function (d) { return yScale(d.y) });
 
 function loadFolder(folderName, fileName) {
+    currentFolder = folderName;
     folderPath = `answers/${folderName}`;
     fetch(`${folderPath}/${fileName}`)
     .then(response => response.json())
@@ -43,6 +49,48 @@ function loadFolder(folderName, fileName) {
     });
 }
 
+function autoInit(folders) {
+  if (folders.length > 0) {
+    let currentIndex = 0;
+    const buttons = document.querySelectorAll('button');
+
+    function simulateHover() {
+      buttons.forEach(btn => btn.classList.remove('hover'));
+      buttons[currentIndex].classList.add('hover');
+      currentIndex = (currentIndex + 1) % buttons.length;
+    }
+
+    const hoverInterval = setInterval(simulateHover, 1000);
+
+    setTimeout(() => {
+      clearInterval(hoverInterval);
+      buttons.forEach(btn => btn.classList.remove('hover'));
+      const firstButton = buttons[0];
+      if (firstButton) {
+        firstButton.classList.add('hover');
+        setTimeout(() => {
+          firstButton.classList.remove('hover');
+          firstButton.click();
+        }, 200);
+      }
+    }, folders.length * 3000);
+  }
+}
+
+
+function startNextTest() {
+  const folders = Object.keys(folderFiles);
+  const currentIndex = folders.indexOf(currentFolder);
+  const nextIndex = (currentIndex + 1) % folders.length;
+  const nextFolder = folders[nextIndex];
+
+  document.getElementById('chat-container').innerHTML = '';
+  document.getElementById('image-display').innerHTML = '';
+  d3.select('#intensityGraph').selectAll('*').remove();
+
+  loadFolder(nextFolder, folderFiles[nextFolder]);
+}
+
 function displayBanner(data) {
   document.getElementById('testNameContent').textContent = `${data.test}`;
   document.getElementById('modelContent').textContent = `${data.model}`;
@@ -144,6 +192,9 @@ function displayScore(score) {
     scoreDiv.textContent = scoreText;
     container.appendChild(scoreDiv);
   }
+  setTimeout(() => {
+    startNextTest();
+  }, 5000);
 }
 
 function scrollToBottom(el) {

diff --git a/docs/serve.sh b/docs/serve.sh
@@ -11,4 +11,9 @@ fi
 
 python3 -m http.server 8069 --directory "$DIR" > /dev/null 2>&1 &
 sleep 1
-chromium-browser --start-fullscreen --disable-session-crashed-bubble --disable-infobars "http://localhost:8069"
+chromium-browser --start-fullscreen \
+                 --disable-session-crashed-bubble \
+                 --disable-infobars \
+                 --autoplay-policy=no-user-gesture-required \
+                 --disable-features=PreloadMediaEngagementData,MediaEngagementBypassAutoplayPolicies \
+                 "http://localhost:8069"
diff --git a/docs/style.css b/docs/style.css
@@ -233,6 +233,12 @@ html {
   color: black;
 }
 
+/* Pseudo classes cant be manipulated in JS */
+#startContainer button.hover {
+  background-color: white;
+  color: black;
+}
+
 #startContainer button:focus {
   outline: none;
 }