Update app.py

app.py

@@ -72,53 +72,61 @@ status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# JavaScript timer component with stop function
+# More reliable timer implementation
 def create_timer():
     return """
-    <div style="height:60px;">
-      <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
-    </div>
+    <div id="timer-display" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
     <script>
-    // Create a unique timer ID for this session
-    const timerID = 'timer-' + Date.now();
-    window[timerID] = null;
-    
-    function startTimer() {
-        // Clear any existing timer
-        if (window[timerID]) {
-            clearInterval(window[timerID]);
+    (function() {
+        // Make sure we have a clean start
+        if (window.timerInterval) {
+            clearInterval(window.timerInterval);
+            window.timerInterval = null;
         }
         
-        const start = Date.now();
-        const timerElement = document.getElementById('timer');
+        // Set start time
+        const startTime = new Date().getTime();
         
-        window[timerID] = setInterval(function() {
-            const elapsed = Date.now() - start;
-            const minutes = Math.floor(elapsed / 60000);
-            const seconds = Math.floor((elapsed % 60000) / 1000);
-            timerElement.innerHTML = '⏱️ Elapsed: ' + 
-                (minutes < 10 ? '0' : '') + minutes + ':' + 
-                (seconds < 10 ? '0' : '') + seconds;
-        }, 1000);
-    }
-    
-    // Start the timer immediately
-    startTimer();
-    
-    // Expose the timer ID so it can be stopped later
-    window.currentTimerID = timerID;
+        // Update function
+        function updateTimer() {
+            const timerElement = document.getElementById('timer-display');
+            if (!timerElement) return; // Safety check
+            
+            const currentTime = new Date().getTime();
+            const elapsedMs = currentTime - startTime;
+            
+            const minutes = Math.floor(elapsedMs / 60000);
+            const seconds = Math.floor((elapsedMs % 60000) / 1000);
+            
+            const minStr = (minutes < 10) ? '0' + minutes : minutes;
+            const secStr = (seconds < 10) ? '0' + seconds : seconds;
+            
+            timerElement.innerHTML = `⏱️ Elapsed: ${minStr}:${secStr}`;
+        }
+        
+        // Initial update
+        updateTimer();
+        
+        // Set interval for updates
+        window.timerInterval = setInterval(updateTimer, 1000);
+    })();
     </script>
     """
 
 def stop_timer():
     return """
-    <div style="height:0px;"></div>
     <script>
-    if (window.currentTimerID && window[window.currentTimerID]) {
-        clearInterval(window[window.currentTimerID]);
-        window[window.currentTimerID] = null;
-        document.getElementById('timer').style.color = '#00cc00';
-    }
+    (function() {
+        if (window.timerInterval) {
+            clearInterval(window.timerInterval);
+            window.timerInterval = null;
+            
+            const timerElement = document.getElementById('timer-display');
+            if (timerElement) {
+                timerElement.style.color = '#00cc00';
+            }
+        }
+    })();
     </script>
     """
 
@@ -151,7 +159,7 @@ if uploaded_file is not None:
         st.session_state.current_file = uploaded_file.name
         st.session_state.timer_active = True
         
-        # Display timer (removed height parameter)
+        # Display timer
         timer_container.html(create_timer())
         
         # Progress indicators
@@ -188,7 +196,7 @@ if uploaded_file is not None:
             # Final status
             status_text.success("**✅ Generation complete!**")
             
-            # Stop timer (removed height parameter)
+            # Stop timer
             timer_container.html(stop_timer())
             
             # Show results