Update app.py

app.py

@@ -8,6 +8,7 @@ from gtts import gTTS
 import io
 import time
 import asyncio
+import datetime
 
 if not asyncio.get_event_loop().is_running():
     asyncio.set_event_loop(asyncio.new_event_loop())
@@ -23,9 +24,15 @@ if 'processed_data' not in st.session_state:
 if 'image_data' not in st.session_state:
     st.session_state.image_data = None
 
-if 'timer_active' not in st.session_state:
-    st.session_state.timer_active = False
+if 'timer_start' not in st.session_state:
+    st.session_state.timer_start = None
+    
+if 'timer_running' not in st.session_state:
+    st.session_state.timer_running = False
 
+if 'timer_complete' not in st.session_state:
+    st.session_state.timer_complete = False
+    
 # Page setup
 st.set_page_config(page_title="Your Image to Audio Story", page_icon="🦜")
 st.header("Turn Your Image to a Short Audio Story for Children")
@@ -72,63 +79,23 @@ status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# More reliable timer implementation
-def create_timer():
-    return """
-    <div id="timer-display" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
-    <script>
-    (function() {
-        // Make sure we have a clean start
-        if (window.timerInterval) {
-            clearInterval(window.timerInterval);
-            window.timerInterval = null;
-        }
-        
-        // Set start time
-        const startTime = new Date().getTime();
-        
-        // 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}`;
-        }
+# Native Streamlit timer display
+def display_timer():
+    if st.session_state.timer_start is not None and st.session_state.timer_running:
+        elapsed = datetime.datetime.now() - st.session_state.timer_start
+        elapsed_seconds = int(elapsed.total_seconds())
+        minutes = elapsed_seconds // 60
+        seconds = elapsed_seconds % 60
         
-        // Initial update
-        updateTimer();
-        
-        // Set interval for updates
-        window.timerInterval = setInterval(updateTimer, 1000);
-    })();
-    </script>
-    """
-
-def stop_timer():
-    return """
-    <script>
-    (function() {
-        if (window.timerInterval) {
-            clearInterval(window.timerInterval);
-            window.timerInterval = null;
+        if st.session_state.timer_complete:
+            timer_container.markdown(f"⏱️ **Elapsed: {minutes:02d}:{seconds:02d}**", unsafe_allow_html=True)
+        else:
+            timer_container.markdown(f"⏱️ Elapsed: {minutes:02d}:{seconds:02d}")
             
-            const timerElement = document.getElementById('timer-display');
-            if (timerElement) {
-                timerElement.style.color = '#00cc00';
-            }
-        }
-    })();
-    </script>
-    """
+            # Keep updating timer while running
+            if not st.session_state.timer_complete:
+                time.sleep(0.1)  # Small delay to reduce CPU usage
+                st.experimental_rerun()
 
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
@@ -146,6 +113,10 @@ if st.session_state.processed_data.get('story'):
     with results_container:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
+# Display timer if running
+if st.session_state.timer_running:
+    display_timer()
+
 # Process new uploaded file
 if uploaded_file is not None:
     # Save the image data to session state
@@ -157,10 +128,11 @@ if uploaded_file is not None:
     
     if st.session_state.get('current_file') != uploaded_file.name:
         st.session_state.current_file = uploaded_file.name
-        st.session_state.timer_active = True
         
-        # Display timer
-        timer_container.html(create_timer())
+        # Start timer
+        st.session_state.timer_start = datetime.datetime.now()
+        st.session_state.timer_running = True
+        st.session_state.timer_complete = False
         
         # Progress indicators
         status_text = status_container.empty()
@@ -197,7 +169,7 @@ if uploaded_file is not None:
             status_text.success("**✅ Generation complete!**")
             
             # Stop timer
-            timer_container.html(stop_timer())
+            st.session_state.timer_complete = True
             
             # Show results
             with results_container:
@@ -205,7 +177,7 @@ if uploaded_file is not None:
                 st.write("**Story:**", st.session_state.processed_data['story'])
                 
         except Exception as e:
-            timer_container.html(stop_timer())
+            st.session_state.timer_complete = True
             status_text.error(f"**❌ Error:** {str(e)}")
             progress_bar.empty()
             raise e