Update app.py

app.py

@@ -22,53 +22,26 @@ if 'processed_data' not in st.session_state:
     }
 
 
-# Modified JavaScript timer component
+# Timer component with direct DOM manipulation
 def timer():
     return """
-    <div id="main-timer" style="
+    <div id="streamlit-timer" style="
         position: fixed;
-        top: 20px;
-        right: 20px;
+        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: #666;
-        padding: 8px 15px;
-        background: #f0f2f6;
-        border-radius: 20px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        z-index: 1000000;
-        border: 1px solid #ddd;
+        color: #333;
     ">
-        ⏱️ <span id="time-display">00:00</span>
+        ⏱️ <span id="timer-display">00:00</span>
     </div>
-    <script>
-    // Timer system
-    let shouldRun = true;
-    const startTime = Date.now();
-    const timerElement = document.getElementById('time-display');
-    
-    function updateTimer() {
-        if (!shouldRun) return;
-        
-        const elapsed = Math.floor((Date.now() - startTime) / 1000);
-        const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
-        const seconds = (elapsed % 60).toString().padStart(2, '0');
-        
-        timerElement.textContent = `${minutes}:${seconds}`;
-        requestAnimationFrame(updateTimer);
-    }
-    
-    // Store control in parent window
-    window.parent.timerControls = {
-        stop: () => {
-            shouldRun = false;
-            document.getElementById('main-timer').style.backgroundColor = '#e6ffe6';
-            document.getElementById('main-timer').style.borderColor = '#99ff99';
-        }
-    };
-    
-    // Start updates
-    updateTimer();
-    </script>
+    <script src="https://gist.githubusercontent.com/streamlit-resources/1837910cd9e3d5f8b7e4a/raw/timer.js"></script>
     """
 
 # Modified stop command
@@ -129,8 +102,14 @@ if uploaded_file is not None:
     status_text = st.empty()
     progress_bar = st.progress(0)
     
-    # Start JavaScript timer
-    html(timer(), height=0)
+    # Inject timer HTML
+    st.markdown("""
+    <div id="timer-container"></div>
+    """, unsafe_allow_html=True)
+    
+    # Load timer system
+    html(timer(), height=0, width=0)
+
 
     try:
         # Save uploaded file
@@ -168,7 +147,15 @@ if uploaded_file is not None:
 
             # Final status and stop timer
             status_text.success("**✅ Generation complete!**")
-            html(stop_timer())
+            html("""
+            <script>
+            if (window.timerInterval) {
+                clearInterval(window.timerInterval);
+                document.getElementById('streamlit-timer').style.background = '#e8f5e9';
+                document.getElementById('streamlit-timer').style.color = '#2e7d32';
+            }
+            </script>
+            """)
 
         # Show results
         # st.subheader("Results")
@@ -176,7 +163,14 @@ if uploaded_file is not None:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
     except Exception as e:
-        html(stop_timer())
+        html("""
+        <script>
+        if (window.timerInterval) {
+            clearInterval(window.timerInterval);
+            document.getElementById('streamlit-timer').remove();
+        }
+        </script>
+        """)
         status_text.error(f"**❌ Error:** {str(e)}")
         progress_bar.empty()
         raise e