Update app.py

app.py

@@ -22,26 +22,36 @@ if 'processed_data' not in st.session_state:
     }
 
 
-# Timer component with direct DOM manipulation
+# JavaScript timer component
 def timer():
     return """
-    <div id="streamlit-timer" style="
-        position: fixed;
-        top: 15px;
-        right: 15px;
-        padding: 10px 20px;
-        background: #ffffff;
-        border-radius: 25px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        z-index: 999999;
-        border: 1px solid #e0e0e0;
-        font-family: Arial, sans-serif;
-        font-size: 16px;
-        color: #333;
-    ">
-        ⏱️ <span id="timer-display">00:00</span>
-    </div>
-    <script src="https://gist.githubusercontent.com/streamlit-resources/1837910cd9e3d5f8b7e4a/raw/timer.js"></script>
+    <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
+    <script>
+    function updateTimer() {
+        var start = Date.now();
+        var timerElement = document.getElementById('timer');
+        
+        var interval = 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);
+        
+        // Cleanup when component is removed
+        return function() {
+            clearInterval(interval);
+        }
+    }
+    var cleanup = updateTimer();
+    
+    // Handle Streamlit's component cleanup
+    window.addEventListener('beforeunload', function() {
+        cleanup();
+    });
+    </script>
     """
 
 
@@ -92,14 +102,9 @@ if uploaded_file is not None:
     status_text = st.empty()
     progress_bar = st.progress(0)
     
-    # Inject timer HTML
-    st.markdown("""
-    <div id="timer-container"></div>
-    """, unsafe_allow_html=True)
+     # Start JavaScript timer
+    html(timer(), height=50)
     
-    # Load timer system
-    html(timer(), height=0, width=0)
-
 
     try:
         # Save uploaded file
@@ -137,15 +142,7 @@ if uploaded_file is not None:
 
             # Final status and stop timer
             status_text.success("**✅ Generation complete!**")
-            html("""
-            <script>
-            if (window.timerInterval) {
-                clearInterval(window.timerInterval);
-                document.getElementById('streamlit-timer').style.background = '#e8f5e9';
-                document.getElementById('streamlit-timer').style.color = '#2e7d32';
-            }
-            </script>
-            """)
+            html("<script>document.getElementById('timer').style.color = '#00cc00';</script>")
 
         # Show results
         # st.subheader("Results")
@@ -153,18 +150,16 @@ if uploaded_file is not None:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
     except Exception as e:
-        html("""
-        <script>
-        if (window.timerInterval) {
-            clearInterval(window.timerInterval);
-            document.getElementById('streamlit-timer').remove();
-        }
-        </script>
-        """)
+        html("<script>document.getElementById('timer').remove();</script>")
         status_text.error(f"**❌ Error:** {str(e)}")
         progress_bar.empty()
         raise e
 
+    
+    finally:
+        pass  # Timer cleanup handled by JavaScript
+
+
 # Audio playback
 if st.button("Play Audio of the Story Generated"):
     if st.session_state.processed_data.get('audio'):