Update app.py

app.py

@@ -1066,45 +1066,43 @@ async () => {{
     const days = {opt.run_time};
 
     const gradioEl = document.querySelector('body > gradio-app');
-    console.log(gradioEl);
-    var $ = gradioEl.querySelector;
 
     var deadlineAnimation = function () {{
         setTimeout(function() {{
-            $('#designer-arm-grop').css({{'animation-duration': '1.5s'}});
+            gradioEl.querySelector('#designer-arm-grop').css({{'animation-duration': '1.5s'}});
         }}, 0);
 
         setTimeout(function() {{
-            $('#designer-arm-grop').css({{'animation-duration': '1.0s'}});
+            gradioEl.querySelector('#designer-arm-grop').css({{'animation-duration': '1.0s'}});
         }}, {int((opt.run_time + opt.prep_time) * 1000 * 0.2)});
 
         setTimeout(function() {{
-            $('#designer-arm-grop').css({{'animation-duration': '0.7s'}});
+            gradioEl.querySelector('#designer-arm-grop').css({{'animation-duration': '0.7s'}});
         }}, {int((opt.run_time + opt.prep_time) * 1000 * 0.4)});
 
         setTimeout(function() {{
-            $('#designer-arm-grop').css({{'animation-duration': '0.3s'}});
+            gradioEl.querySelector('#designer-arm-grop').css({{'animation-duration': '0.3s'}});
         }}, {int((opt.run_time + opt.prep_time) * 1000 * 0.6)});
 
         setTimeout(function() {{
-            $('#designer-arm-grop').css({{'animation-duration': '0.2s'}});
+            gradioEl.querySelector('#designer-arm-grop').css({{'animation-duration': '0.2s'}});
         }}, {int((opt.run_time + opt.prep_time) * 1000 * 0.75)});
     }};
 
     var deadlineTextBegin = function () {{
-        var el = $('.deadline-timer');
+        var el = gradioEl.querySelector('.deadline-timer');
         var html = 'Preparing...';
         el.html(html);
     }};
 
     var deadlineTextFinished = function () {{
-        var el = $('.deadline-timer');
+        var el = gradioEl.querySelector('.deadline-timer');
         var html = 'Done! Retry?';
         el.html(html);
     }};
 
     var deadlineText = function (remainingTime) {{
-        var el = $('.deadline-timer');
+        var el = gradioEl.querySelector('.deadline-timer');
         var htmlBase = 'Remaining <span class="day">' + remainingTime + '</span> <span class="days">s</span>';
         el.html(html);
         var html = '<div class="mask-red"><div class="inner">' + htmlBase + '</div></div><div class="mask-white"><div class="inner">' + htmlBase + '</div></div>';
@@ -1124,25 +1122,25 @@ async () => {{
                 deadlineTextBegin();
             }} else if (actualDay > 0) {{
                 deadlineText(actualDay);
-                // $('.deadline-timer .day').text(actualDay - {opt.prep_time});
+                // gradioEl.querySelector('.deadline-timer .day').text(actualDay - {opt.prep_time});
             }} else {{
                 clearInterval(timer);
-                // $('.deadline-timer .day').text(deadline);
+                // gradioEl.querySelector('.deadline-timer .day').text(deadline);
                 deadlineTextFinished();
             }}
         }}
     }}
 
-    var imgSrc1 = $('#output-screen > button > div > img').src;
+    var imgSrc1 = gradioEl.querySelector('#output-screen > button > div > img').src;
     console.log(imgSrc1);
 
     var runAnimation = function() {{
-        var imgSrc = $('#output-screen > button > div > img').src;
+        var imgSrc = gradioEl.querySelector('#output-screen > button > div > img').src;
         var state = false;
         var timerMain = setInterval(checkAndRun, 250);
 
         function checkAndRun() {{
-            var imgSrcNew = $('#output-screen > button > div > img').src;
+            var imgSrcNew = gradioEl.querySelector('#output-screen > button > div > img').src;
 
             console.log('state', state, 'src', imgSrc, 'src_new', imgSrcNew);
             if (!state) {{
@@ -1154,7 +1152,7 @@ async () => {{
                     state = true;
 
                     // Run the main animation just once.
-                    $('#progress-time-fill, #death-group').css({{'animation-duration': animationTime+'s'}});
+                    gradioEl.querySelector('#progress-time-fill, #death-group').css({{'animation-duration': animationTime+'s'}});
                     timer(animationTime, days);
                     deadlineAnimation();
                     deadlineText({opt.run_time});