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,14 +24,14 @@ if 'processed_data' not in st.session_state:
 if 'image_data' not in st.session_state:
     st.session_state.image_data = None
 
-if 'timer_value' not in st.session_state:
-    st.session_state.timer_value = "00:00"
+if 'timer_start_time' not in st.session_state:
+    st.session_state.timer_start_time = None
 
 if 'timer_frozen' not in st.session_state:
     st.session_state.timer_frozen = False
 
-if 'timer_start_time' not in st.session_state:
-    st.session_state.timer_start_time = None
+if 'last_update_time' not in st.session_state:
+    st.session_state.last_update_time = None
 
 # Page setup
 st.set_page_config(page_title="Your Image to Audio Story", page_icon="🦜")
@@ -78,13 +79,23 @@ status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# Update timer value (simple, native Streamlit approach)
-def update_timer():
-    if st.session_state.timer_start_time and not st.session_state.timer_frozen:
-        elapsed = time.time() - st.session_state.timer_start_time
-        minutes = int(elapsed // 60)
-        seconds = int(elapsed % 60)
-        st.session_state.timer_value = f"{minutes:02d}:{seconds:02d}"
+# Get current timer value
+def get_formatted_timer():
+    if st.session_state.timer_start_time is None:
+        return "00:00"
+    
+    current_time = time.time()
+    if st.session_state.timer_frozen:
+        # Use the last update time if timer is frozen
+        elapsed_seconds = int(st.session_state.last_update_time - st.session_state.timer_start_time)
+    else:
+        elapsed_seconds = int(current_time - st.session_state.timer_start_time)
+        # Update the last update time
+        st.session_state.last_update_time = current_time
+    
+    minutes = elapsed_seconds // 60
+    seconds = elapsed_seconds % 60
+    return f"{minutes:02d}:{seconds:02d}"
 
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
@@ -93,14 +104,13 @@ uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...
 if st.session_state.image_data is not None:
     image_container.image(st.session_state.image_data, caption="Uploaded Image", use_container_width=True)
 
-# Update and display timer
-update_timer()
+# Display timer - update the display based on current state
+current_time_str = get_formatted_timer()
 
-# Style the timer based on whether it's frozen
 if st.session_state.timer_frozen:
-    timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {st.session_state.timer_value} ✓</div>", unsafe_allow_html=True)
+    timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {current_time_str} ✓</div>", unsafe_allow_html=True)
 else:
-    timer_container.markdown(f"<div style='font-size:16px;color:#666;margin-bottom:10px;'>⏱️ Elapsed: {st.session_state.timer_value}</div>", unsafe_allow_html=True)
+    timer_container.markdown(f"<div style='font-size:16px;color:#666;margin-bottom:10px;'>⏱️ Elapsed: {current_time_str}</div>", unsafe_allow_html=True)
 
 # Process new uploaded file
 if uploaded_file is not None:
@@ -116,8 +126,8 @@ if uploaded_file is not None:
         
         # Reset and start timer
         st.session_state.timer_start_time = time.time()
+        st.session_state.last_update_time = time.time()
         st.session_state.timer_frozen = False
-        st.session_state.timer_value = "00:00"
         
         # Progress indicators
         status_text = status_container.empty()
@@ -172,7 +182,7 @@ if st.session_state.processed_data.get('story'):
     with results_container:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
-# Audio playback
+# Audio playback - this will freeze the timer
 if st.button("Play Audio of the Story Generated"):
     if st.session_state.processed_data.get('audio'):
         # Make sure the image is still displayed
@@ -182,8 +192,9 @@ if st.button("Play Audio of the Story Generated"):
         # Freeze the timer
         st.session_state.timer_frozen = True
         
-        # Display final timer value with completion styling
-        timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {st.session_state.timer_value} ✓</div>", unsafe_allow_html=True)
+        # Update the timer display with frozen styling
+        final_time = get_formatted_timer()
+        timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {final_time} ✓</div>", unsafe_allow_html=True)
         
         # Play the audio
         audio_data = st.session_state.processed_data['audio']
@@ -194,7 +205,21 @@ if st.button("Play Audio of the Story Generated"):
     else:
         st.warning("Please generate a story first!")
 
-# Trigger rerun to update timer every second if timer is running
-if st.session_state.timer_start_time and not st.session_state.timer_frozen:
-    time.sleep(1)
-    st.experimental_rerun()
+# Force a rerun every second while the timer is active (not frozen)
+if st.session_state.timer_start_time is not None and not st.session_state.timer_frozen:
+    # Create a placeholder for our hidden component that triggers the rerun
+    rerun_trigger = st.empty()
+    
+    # Add a hidden element that will automatically trigger a rerun after 0.5 seconds
+    rerun_trigger.markdown(
+        f"""
+        <div style="display:none;">
+        <script>
+            setTimeout(function() {{
+                window.parent.postMessage({{type: "streamlit:rerun"}}, "*");
+            }}, 500);
+        </script>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )