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
 
-# Timer component with explicit freeze function
+# Timer component that uses localStorage to check for a freeze flag
 def timer():
     return """
     <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
@@ -31,8 +31,15 @@ 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() {
+        // Clear any previous freeze flag
+        localStorage.removeItem("freezeTimer");
+        var interval = setInterval(function() {
+            // Check if freeze flag is set in localStorage.
+            if(localStorage.getItem("freezeTimer") === "true"){
+                clearInterval(interval);
+                timerElement.style.color = '#00cc00'; // Change color to indicate frozen.
+                return;
+            }
             var elapsed = Date.now() - start;
             var minutes = Math.floor(elapsed / 60000);
             var seconds = Math.floor((elapsed % 60000) / 1000);
@@ -40,12 +47,6 @@ 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>
     """
@@ -93,10 +94,10 @@ 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 (if not already frozen).
+    # Inject the timer only once, right after image upload.
     if not st.session_state.timer_started and not st.session_state.timer_frozen:
         st.session_state.timer_started = True
-        html(timer(), height=50)
+        html(timer(), height=50, key="timer_component")
     
     # Initialize progress containers
     status_text = st.empty()
@@ -137,9 +138,9 @@ if uploaded_file is not None:
             progress_bar.progress(100)
 
             status_text.success("**✅ Generation complete!**")
-            # 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.
+            # Immediately freeze the timer by setting the freeze flag.
+            html("<script>localStorage.setItem('freezeTimer', 'true');</script>", height=0)
+            st.session_state.timer_frozen = True
     except Exception as e:
         html("<script>document.getElementById('timer').remove();</script>")
         status_text.error(f"**❌ Error:** {str(e)}")
@@ -149,9 +150,10 @@ if uploaded_file is not None:
     st.write("**Caption:**", st.session_state.processed_data['scenario'])
     st.write("**Story:**", st.session_state.processed_data['story'])
 
+# Optionally, you can still have the Play Audio button.
 if st.button("Play Audio of the Story Generated"):
     if st.session_state.processed_data.get('audio'):
-        # Since the timer is already frozen, simply play the audio.
+        # Since the timer is already frozen by now, just play the audio.
         audio_data = st.session_state.processed_data['audio']
         st.audio(audio_data['audio'].getvalue(), format="audio/mp3")
     else: