Update app.py

app.py

@@ -23,7 +23,7 @@ if 'timer_started' not in st.session_state:
 if 'timer_frozen' not in st.session_state:
     st.session_state.timer_frozen = False
 
-# JavaScript timer component (defines window.myTimerInterval for later stopping)
+# Timer component with explicit freeze function
 def timer():
     return """
     <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
@@ -31,6 +31,7 @@ def timer():
     (function() {
         var start = Date.now();
         var timerElement = document.getElementById('timer');
+        // Start the timer and store the interval ID globally.
         window.myTimerInterval = setInterval(function() {
             var elapsed = Date.now() - start;
             var minutes = Math.floor(elapsed / 60000);
@@ -39,6 +40,12 @@ def timer():
                 (minutes < 10 ? '0' : '') + minutes + ':' + 
                 (seconds < 10 ? '0' : '') + seconds;
         }, 1000);
+        // Expose a function to freeze the timer.
+        window.freezeTimer = function() {
+            clearInterval(window.myTimerInterval);
+            // Change the timer color to indicate it’s frozen.
+            timerElement.style.color = '#00cc00';
+        };
     })();
     </script>
     """
@@ -86,7 +93,7 @@ def text2audio(story_text):
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
 
 if uploaded_file is not None:
-    # Only inject the timer once after an image is uploaded
+    # Only inject the timer once after an image is uploaded (if not already frozen).
     if not st.session_state.timer_started and not st.session_state.timer_frozen:
         st.session_state.timer_started = True
         html(timer(), height=50)
@@ -128,10 +135,11 @@ if uploaded_file is not None:
                 st.session_state.processed_data['story']
             )
             progress_bar.progress(100)
-            html("<script>if(window.myTimerInterval){ clearInterval(window.myTimerInterval); }</script>", height=0)
+
             status_text.success("**✅ Generation complete!**")
-            html("<script>document.getElementById('timer').style.color = '#00cc00';</script>")
-    
+            # Freeze the timer immediately now that generation is complete.
+            html("<script>if(window.freezeTimer){ window.freezeTimer(); }</script>", height=0)
+            st.session_state.timer_frozen = True  # Prevent re-injecting the timer.
     except Exception as e:
         html("<script>document.getElementById('timer').remove();</script>")
         status_text.error(f"**❌ Error:** {str(e)}")
@@ -141,15 +149,9 @@ if uploaded_file is not None:
     st.write("**Caption:**", st.session_state.processed_data['scenario'])
     st.write("**Story:**", st.session_state.processed_data['story'])
 
-# Audio playback and timer freeze
 if st.button("Play Audio of the Story Generated"):
     if st.session_state.processed_data.get('audio'):
-        # Inject JS to stop the timer and freeze it
-        st.markdown(
-            "<script>if(window.myTimerInterval){ clearInterval(window.myTimerInterval); }</script>",
-            unsafe_allow_html=True
-        )
-        st.session_state.timer_frozen = True
+        # Since the timer is already frozen, simply play the audio.
         audio_data = st.session_state.processed_data['audio']
         st.audio(audio_data['audio'].getvalue(), format="audio/mp3")
     else: