Merge branch 'main' of https://github.com/RongLiu-Leo/Video-Style-Tra…

…nsfer
RongLiu-Leo · Sep 20, 2023 · e0e4829 · e0e4829
2 parents 416002a + 144fcaa
commit e0e4829
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -328,24 +328,22 @@ <h4 class="text-center" style="font-weight: bolder;">
         </div>
 
 
-
-
-
         <div class="row">
             <div class="col-md-8 col-md-offset-2">
-                <h3>
-                    BibTeX
+                <h3 class="text-center" style="font-weight: normal;">
+                    BibTex
                 </h3>
+                <hr style="margin-top: 0;">
                 <div class="form-group col-md-10 col-md-offset-1">
                     <textarea id="bibtex" class="form-control" readonly>
-                        @misc{liu2023instant,
-                            title={Instant Photorealistic Style Transfer: A Lightweight and Adaptive Approach}, 
-                            author={Rong Liu and Enyu Zhao and Zhiyuan Liu and Andrew Wei-Wen Feng and Scott John Easley},
-                            year={2023},
-                            eprint={2309.10011},
-                            archivePrefix={arXiv},
-                            primaryClass={cs.CV}
-                      }
+@misc{liu2023instant,
+    title={Instant Photorealistic Style Transfer: A Lightweight and Adaptive Approach}, 
+    author={Rong Liu and Enyu Zhao and Zhiyuan Liu and Andrew Wei-Wen Feng and Scott John Easley},
+    year={2023},
+    eprint={2309.10011},
+    archivePrefix={arXiv},
+    primaryClass={cs.CV}
+}
                 </textarea>
                 </div>
             </div>
@@ -354,35 +352,4 @@ <h3>
     <script src="js/main.js"></script>
 </body>
 
-	<script type="text/javascript">
-        var slideIndex = 1;
-        showSlides(slideIndex);
-
-        // Next/previous controls
-        function plusSlides(n) {
-        showSlides(slideIndex += n);
-        }
-
-        // Thumbnail image controls
-        function currentSlide(n) {
-        showSlides(slideIndex = n);
-        }
-
-        function showSlides(n) {
-        var i;
-        var slides = document.getElementsByClassName("mySlides");
-        var dots = document.getElementsByClassName("dot");
-        if (n > slides.length) {slideIndex = 1}
-        if (n < 1) {slideIndex = slides.length}
-        for (i = 0; i < slides.length; i++) {
-            slides[i].style.display = "none";
-        }
-        for (i = 0; i < dots.length; i++) {
-            dots[i].className = dots[i].className.replace(" active", "");
-        }
-        slides[slideIndex-1].style.display = "block";
-        dots[slideIndex-1].className += " active";
-        }
-	</script>
-
 </html>
diff --git a/js/main.js b/js/main.js
@@ -57,4 +57,64 @@ function showVideo(beforePath, stylePath, afterPath) {
     content.src = beforePath;
     style.src = stylePath;
     after.src = afterPath;
-}
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    const videoPairs = [
+        [document.getElementById('before-vid'), document.getElementById('after-vid')],
+        [document.getElementById('before-nerf'), document.getElementById('after-nerf')],
+        // Add more pairs if needed
+    ];
+
+    videoPairs.forEach(pair => {
+        const [videoA, videoB] = pair;
+
+        videoA.addEventListener('timeupdate', function() {
+            if (Math.abs(videoA.currentTime - videoB.currentTime) > 0.1) {
+                videoB.currentTime = videoA.currentTime;
+            }
+        });
+
+        videoB.addEventListener('timeupdate', function() {
+            if (Math.abs(videoB.currentTime - videoA.currentTime) > 0.1) {
+                videoA.currentTime = videoB.currentTime;
+            }
+        });
+
+        videoA.addEventListener('play', function() {
+            if (videoB.paused && !videoB.ended) {
+                videoB.play();
+            }
+        });
+
+        videoA.addEventListener('pause', function() {
+            if (!videoB.paused && !videoB.ended) {
+                videoB.pause();
+            }
+        });
+
+        videoB.addEventListener('play', function() {
+            if (videoA.paused && !videoA.ended) {
+                videoA.play();
+            }
+        });
+
+        videoB.addEventListener('pause', function() {
+            if (!videoA.paused && !videoA.ended) {
+                videoA.pause();
+            }
+        });
+    });
+});
+
+$(document).ready(function() {
+    var editor = CodeMirror.fromTextArea(document.getElementById("bibtex"), {
+        lineNumbers: false,
+        lineWrapping: true,
+        readOnly:true
+    });
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    });
+});