Update app.py

app.py

@@ -24,6 +24,12 @@ 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_to_freeze' not in st.session_state:
+    st.session_state.timer_to_freeze = 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")
@@ -65,15 +71,20 @@ def text2audio(story_text):
 
 # Create fixed containers for UI elements
 image_container = st.empty()
+timer_container = st.empty()
 status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# JavaScript timer component - using streamlit.components.v1.html
-def start_timer():
+# JavaScript timer component
+def active_timer():
     timer_html = """
     <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
     <script>
+    // Generate a unique ID for this timer instance
+    var timerId = 'timer_' + Date.now();
+    
+    // Initialize the timer
     var startTime = new Date().getTime();
     var timerInterval = setInterval(function() {
         var now = new Date().getTime();
@@ -81,42 +92,41 @@ def start_timer():
         var minutes = Math.floor(elapsed / (1000 * 60));
         var seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
         
-        document.getElementById("timer").innerHTML = "⏱️ Elapsed: " + 
-            (minutes < 10 ? "0" : "") + minutes + ":" + 
-            (seconds < 10 ? "0" : "") + seconds;
+        var timerElement = document.getElementById("timer");
+        if (timerElement) {
+            timerElement.innerHTML = "⏱️ Elapsed: " + 
+                (minutes < 10 ? "0" : "") + minutes + ":" + 
+                (seconds < 10 ? "0" : "") + seconds;
+        }
     }, 1000);
     
-    // Store the interval ID in window object
-    window.myTimerInterval = timerInterval;
+    // Store the interval ID in window object with unique ID
+    window[timerId] = timerInterval;
+    window.currentTimerId = timerId;
     </script>
     """
     return html(timer_html, height=50)
 
-def stop_timer():
-    stop_html = """
+def freeze_timer():
+    freeze_html = """
     <script>
-    // Stop the timer interval
-    if (window.myTimerInterval) {
-        clearInterval(window.myTimerInterval);
-        window.myTimerInterval = null;
-    }
-    
-    // Get the current timer text and freeze it
-    var timerEl = document.getElementById("timer");
-    if (timerEl) {
-        // Save the current time display
-        var currentTimeDisplay = timerEl.innerText;
-        
-        // Apply completion styling
-        timerEl.style.color = "#00cc00";
-        timerEl.style.fontWeight = "bold";
+    // Find the current timer ID
+    if (window.currentTimerId && window[window.currentTimerId]) {
+        // Stop the interval
+        clearInterval(window[window.currentTimerId]);
+        window[window.currentTimerId] = null;
         
-        // Make sure the text doesn't change anymore
-        timerEl.innerText = currentTimeDisplay + " ✓";
+        // Get and style the timer element
+        var timerElement = document.getElementById("timer");
+        if (timerElement) {
+            timerElement.style.color = "#00cc00";
+            timerElement.style.fontWeight = "bold";
+            timerElement.innerHTML = timerElement.innerHTML + " ✓";
+        }
     }
     </script>
     """
-    return html(stop_html, height=0)
+    return html(freeze_html, height=0)
 
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
@@ -125,15 +135,6 @@ 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)
 
-# Display results if available
-if st.session_state.processed_data.get('scenario'):
-    with results_container:
-        st.write("**Caption:**", st.session_state.processed_data['scenario'])
-
-if st.session_state.processed_data.get('story'):
-    with results_container:
-        st.write("**Story:**", st.session_state.processed_data['story'])
-
 # Process new uploaded file
 if uploaded_file is not None:
     # Save the image data to session state
@@ -145,9 +146,12 @@ 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
+        st.session_state.timer_to_freeze = False
         
-        # Start timer using v1.html
-        timer_placeholder = start_timer()
+        # Display timer
+        timer_container.empty()
+        timer_container.write(active_timer())
         
         # Progress indicators
         status_text = status_container.empty()
@@ -183,8 +187,8 @@ if uploaded_file is not None:
             # Final status
             status_text.success("**✅ Generation complete!**")
             
-            # Stop timer
-            stop_timer()
+            # Mark timer to be frozen when audio is played
+            st.session_state.timer_to_freeze = True
             
             # Show results
             with results_container:
@@ -192,18 +196,32 @@ if uploaded_file is not None:
                 st.write("**Story:**", st.session_state.processed_data['story'])
                 
         except Exception as e:
-            stop_timer()
             status_text.error(f"**❌ Error:** {str(e)}")
             progress_bar.empty()
             raise e
 
+# Display results if available
+if st.session_state.processed_data.get('scenario'):
+    with results_container:
+        st.write("**Caption:**", st.session_state.processed_data['scenario'])
+
+if st.session_state.processed_data.get('story'):
+    with results_container:
+        st.write("**Story:**", st.session_state.processed_data['story'])
+
 # Audio playback
 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_container_width=True)
+        
+        # Freeze the timer if it's active and marked to be frozen
+        if st.session_state.timer_active and st.session_state.timer_to_freeze:
+            freeze_timer()
+            st.session_state.timer_active = False
             
+        # Play the audio
         audio_data = st.session_state.processed_data['audio']
         st.audio(
             audio_data['audio'].getvalue(),