Update app.py

app.py

@@ -1093,15 +1093,55 @@ async () => {{
         var el = gradioEl.querySelector('.deadline-timer');
         var html = 'Preparing...';
         el.innerHTML = html;
+
+        gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = 1000000 + 's';
+        gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'idle-fill';
+        gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'idle-fill';
+        gradioEl.querySelector('#death-group').style['animation-duration'] = 1000000 + 's';
+        gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'idle';
+        gradioEl.querySelector('#death-group').style['animation-name'] = 'idle';
+        gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'idle-flames';
+        gradioEl.querySelector('#red-flame').style['animation-name'] = 'idle-flames';
+        gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'idle-flames';
+        gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'idle-flames';
+        gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'idle-flames';
+        gradioEl.querySelector('#white-flame').style['animation-name'] = 'idle-flames';
     }};
 
     var deadlineTextFinished = function () {{
         var el = gradioEl.querySelector('.deadline-timer');
         var html = 'Done! Retry?';
         el.innerHTML = html;
+
+        gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = 1000000 + 's';
+        gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'finished-fill';
+        gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'finished-fill';
+        gradioEl.querySelector('#death-group').style['animation-duration'] = 1000000 + 's';
+        gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'finished';
+        gradioEl.querySelector('#death-group').style['animation-name'] = 'finished';
+        gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'finished-flames';
+        gradioEl.querySelector('#red-flame').style['animation-name'] = 'finished-flames';
+        gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'finished-flames';
+        gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'finished-flames';
+        gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'finished-flames';
+        gradioEl.querySelector('#white-flame').style['animation-name'] = 'finished-flames';
     }};
 
     var deadlineText = function (remainingTime) {{
+        if (remainingTime == days) {{
+            gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = animationTime + 's';
+            gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'progress-fill';
+            gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'progress-fill';
+            gradioEl.querySelector('#death-group').style['animation-duration'] = animationTime + 's';
+            gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'walk';
+            gradioEl.querySelector('#death-group').style['animation-name'] = 'show-flames';
+            gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'show-flames';
+            gradioEl.querySelector('#red-flame').style['animation-name'] = 'show-flames';
+            gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'show-flames';
+            gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'show-flames';
+            gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'show-flames';
+            gradioEl.querySelector('#white-flame').style['animation-name'] = 'show-flames';
+        }}
         var el = gradioEl.querySelector('.deadline-timer');
         var htmlBase = 'Remaining <span class="day">' + remainingTime + '</span> <span class="days">s</span>';
         // var html = '<div class="mask-red"><div class="inner">' + htmlBase + '</div></div><div class="mask-white"><div class="inner">' + htmlBase + '</div></div>';
@@ -1118,34 +1158,6 @@ async () => {{
 
         function countTime() {{
             --actualDay;
-            if (actualDay + 1 > deadline && actualDay <= deadline) {{
-                gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = animationTime + 's';
-                gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'progress-fill';
-                gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'progress-fill';
-                gradioEl.querySelector('#death-group').style['animation-duration'] = animationTime + 's';
-                gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'walk';
-                gradioEl.querySelector('#death-group').style['animation-name'] = 'show-flames';
-                gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'show-flames';
-                gradioEl.querySelector('#red-flame').style['animation-name'] = 'show-flames';
-                gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'show-flames';
-                gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'show-flames';
-                gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'show-flames';
-                gradioEl.querySelector('#white-flame').style['animation-name'] = 'show-flames';
-            }}
-            if (actualDay + 1 > 0 && actualDay <= 0) {{
-                gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = 1000000 + 's';
-                gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'finished-fill';
-                gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'finished-fill';
-                gradioEl.querySelector('#death-group').style['animation-duration'] = 1000000 + 's';
-                gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'finished';
-                gradioEl.querySelector('#death-group').style['animation-name'] = 'finished';
-                gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'finished-flames';
-                gradioEl.querySelector('#red-flame').style['animation-name'] = 'finished-flames';
-                gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'finished-flames';
-                gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'finished-flames';
-                gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'finished-flames';
-                gradioEl.querySelector('#white-flame').style['animation-name'] = 'finished-flames';
-            }}
             if (actualDay > deadline) {{
                 deadlineTextBegin();
             }} else if (actualDay > 0) {{
@@ -1170,18 +1182,6 @@ async () => {{
                 if (imgSrc == imgSrcNew) {{
                     // Do nothing.
                     deadlineTextBegin();
-                    gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = 1000000 + 's';
-                    gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'idle-fill';
-                    gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'idle-fill';
-                    gradioEl.querySelector('#death-group').style['animation-duration'] = 1000000 + 's';
-                    gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'idle';
-                    gradioEl.querySelector('#death-group').style['animation-name'] = 'idle';
-                    gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'idle-flames';
-                    gradioEl.querySelector('#red-flame').style['animation-name'] = 'idle-flames';
-                    gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'idle-flames';
-                    gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'idle-flames';
-                    gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'idle-flames';
-                    gradioEl.querySelector('#white-flame').style['animation-name'] = 'idle-flames';
                 }} else {{
                     // Running = True
                     state = true;