Upload index.js with huggingface_hub

index.js

@@ -29,6 +29,8 @@ class VideoCaptionApp {
       results: document.getElementById('results'),
       frameCaptions: document.getElementById('frameCaptions'),
       controls: document.getElementById('controls'),
+      controlsContent: document.getElementById('controlsContent'),
+      controlsToggle: document.getElementById('controlsToggle'),
       copyBtn: document.getElementById('copyBtn'),
       downloadBtn: document.getElementById('downloadBtn'),
       changeVideoBtn: document.getElementById('changeVideoBtn'),
@@ -112,6 +114,10 @@ class VideoCaptionApp {
     this.elements.changeVideoBtn.addEventListener('click', () => {
       this.changeVideo();
     });
+
+    this.elements.controlsToggle.addEventListener('click', () => {
+      this.toggleControls();
+    });
   }
 
   async checkWebGPUSupport() {
@@ -246,7 +252,7 @@ class VideoCaptionApp {
     this.isLiveCaptioning = true;
     this.elements.processBtn.classList.add('loading');
     this.elements.processBtn.querySelector('.btn-text').textContent = 'Stop Captions';
-    this.elements.controls.style.display = 'none';
+    this.elements.controls.classList.add('collapsed');
     this.elements.liveCaption.style.display = 'block';
     this.elements.results.style.display = 'block';
     
@@ -368,7 +374,11 @@ class VideoCaptionApp {
     
     this.elements.videoPlayer.pause();
     this.elements.liveCaption.style.display = 'none';
-    this.elements.controls.style.display = 'block';
+    this.elements.controls.classList.remove('collapsed');
+  }
+
+  toggleControls() {
+    this.elements.controls.classList.toggle('collapsed');
   }
 
   displayFrameCaption(captionData) {