Update app.py

app.py

@@ -21,37 +21,38 @@ if 'processed_data' not in st.session_state:
         'audio': None
     }
 
-# JavaScript timer component
+# Modified JavaScript timer component
 def timer():
     return """
-    <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
     <script>
-    var timerInterval;
-    function updateTimer() {
-        var start = Date.now();
-        var timerElement = document.getElementById('timer');
-        
-        timerInterval = setInterval(function() {
-            var elapsed = Date.now() - start;
-            var minutes = Math.floor(elapsed / 60000);
-            var seconds = Math.floor((elapsed % 60000) / 1000);
-            timerElement.innerHTML = '⏱️ Elapsed: ' + 
-                (minutes < 10 ? '0' : '') + minutes + ':' + 
-                (seconds < 10 ? '0' : '') + seconds;
-        }, 1000);
+    // Remove existing timer if present
+    var existingTimer = window.parent.document.getElementById('parent-timer');
+    if (existingTimer) {
+        existingTimer.remove();
+        clearInterval(window.parent.timerInterval);
     }
-    updateTimer();
     
-    // Listen for custom stop event
-    document.addEventListener('stopTimer', function() {
-        clearInterval(timerInterval);
-        document.getElementById('timer').style.color = '#00cc00';
-    });
+    // Create new timer element in parent document
+    var timerDiv = window.parent.document.createElement('div');
+    timerDiv.id = 'parent-timer';
+    timerDiv.style.fontSize = '16px';
+    timerDiv.style.color = '#666';
+    timerDiv.style.marginBottom = '10px';
+    timerDiv.innerHTML = '⏱️ Elapsed: 00:00';
+    window.parent.document.body.appendChild(timerDiv);
     
-    // Cleanup on error or page unload
-    window.addEventListener('beforeunload', function() {
-        clearInterval(timerInterval);
-    });
+    var start = Date.now();
+    var timerInterval = setInterval(function() {
+        var elapsed = Date.now() - start;
+        var minutes = Math.floor(elapsed / 60000);
+        var seconds = Math.floor((elapsed % 60000) / 1000);
+        timerDiv.innerHTML = '⏱️ Elapsed: ' + 
+            (minutes < 10 ? '0' : '') + minutes + ':' + 
+            (seconds < 10 ? '0' : '') + seconds;
+    }, 1000);
+    
+    // Store the interval ID in the parent window
+    window.parent.timerInterval = timerInterval;
     </script>
     """
 
@@ -143,7 +144,11 @@ if uploaded_file is not None:
             status_text.success("**✅ Generation complete!**")
             html("""
                 <script>
-                    document.dispatchEvent(new Event('stopTimer'));
+                    clearInterval(window.parent.timerInterval);
+                    var timerDiv = window.parent.document.getElementById('parent-timer');
+                    if (timerDiv) {
+                        timerDiv.style.color = '#00cc00';
+                    }
                 </script>
             """)
 
@@ -155,8 +160,11 @@ if uploaded_file is not None:
     except Exception as e:
         html("""
             <script>
-                document.dispatchEvent(new Event('stopTimer'));
-                document.getElementById('timer').remove();
+                clearInterval(window.parent.timerInterval);
+                var timerDiv = window.parent.document.getElementById('parent-timer');
+                if (timerDiv) {
+                    timerDiv.remove();
+                }
             </script>
         """)
         status_text.error(f"**❌ Error:** {str(e)}")