Update app.py

app.py

@@ -24,6 +24,9 @@ if 'processed_data' not in st.session_state:
 if 'image_data' not in st.session_state:
     st.session_state.image_data = None
 
+if 'timer_started' not in st.session_state:
+    st.session_state.timer_started = 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")
@@ -70,11 +73,15 @@ status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# JavaScript timer that continues to run until frozen
+# Display initial timer placeholder (empty timer)
+timer_container.markdown(
+    '<div id="timer-display" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>', 
+    unsafe_allow_html=True
+)
+
+# JavaScript timer functions
 def start_timer():
     timer_html = """
-    <div id="timer-display" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
-    
     <script>
     // Only create a timer if one doesn't exist already
     if (!window.timerInterval) {
@@ -110,7 +117,7 @@ def start_timer():
     }
     </script>
     """
-    return html(timer_html, height=50)
+    html(timer_html, height=0)
 
 def freeze_timer():
     freeze_html = """
@@ -138,7 +145,7 @@ def freeze_timer():
     localStorage.setItem('timerRunning', 'false');
     </script>
     """
-    return html(freeze_html, height=0)
+    html(freeze_html, height=0)
 
 def reset_timer():
     reset_html = """
@@ -165,10 +172,7 @@ def reset_timer():
     }
     </script>
     """
-    return html(reset_html, height=0)
-
-# Always show timer container
-timer_container.write(start_timer())
+    html(reset_html, height=0)
 
 # Always display the image if we have image data
 if st.session_state.image_data is not None:
@@ -191,7 +195,8 @@ if uploaded_file is not None:
         
         # Reset and start timer
         reset_timer()
-        timer_container.write(start_timer())
+        start_timer()  # Start the timer ONLY when a new file is uploaded
+        st.session_state.timer_started = True
         
         # Progress indicators
         status_text = status_container.empty()
@@ -233,6 +238,10 @@ if uploaded_file is not None:
             status_text.error(f"**❌ Error:** {str(e)}")
             progress_bar.empty()
             raise e
+# If we have a previously started timer but a new page load, restart it
+elif st.session_state.timer_started:
+    # Don't reset, just restart the timer to continue from where it was
+    start_timer()
 
 # Display results if available
 if st.session_state.processed_data.get('scenario'):
@@ -248,10 +257,11 @@ if st.button("Play Audio of the Story Generated"):
     if st.session_state.processed_data.get('audio'):
         # Make sure the image is still displayed
         if st.session_state.image_data is not None:
-            image_container.image(st.session_state.image_data, caption="Uploaded Image", use_column_width=True)
+            image_container.image(st.session_state.image_data, caption="Uploaded Image", use_container_width=True)
         
-        # Freeze the timer
-        freeze_timer()
+        # Freeze the timer if it was started
+        if st.session_state.timer_started:
+            freeze_timer()
         
         # Play the audio
         audio_data = st.session_state.processed_data['audio']