Update app.py

app.py

@@ -20,18 +20,21 @@ if 'processed_data' not in st.session_state:
         'story': None,
         'audio': None
     }
-
+if 'timer_frozen' not in st.session_state:
+    st.session_state.timer_frozen = False
+if 'timer_started' not in st.session_state:
+    st.session_state.timer_started = False
 
 # JavaScript timer component
 def timer():
     return """
     <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
     <script>
-    function updateTimer() {
+    (function() {
         var start = Date.now();
         var timerElement = document.getElementById('timer');
-        
-        var interval = setInterval(function() {
+        // Save the interval id globally
+        window.myTimerInterval = setInterval(function() {
             var elapsed = Date.now() - start;
             var minutes = Math.floor(elapsed / 60000);
             var seconds = Math.floor((elapsed % 60000) / 1000);
@@ -39,17 +42,10 @@ def timer():
                 (minutes < 10 ? '0' : '') + minutes + ':' + 
                 (seconds < 10 ? '0' : '') + seconds;
         }, 1000);
-        
-        // Make the cleanup function available globally
-        window.stopTimer = function() {
-            clearInterval(interval);
-        };
-    }
-    updateTimer();
+    })();
     </script>
     """
 
-
 # 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")
@@ -80,6 +76,7 @@ def text2story(text):
         do_sample=True,
         temperature=0.7
     )[0]["generated_text"]
+    # Adjust response extraction as needed (this was in your original code)
     return response[2]["content"]
 
 def text2audio(story_text):
@@ -89,18 +86,19 @@ def text2audio(story_text):
     audio_io.seek(0)
     return {'audio': audio_io, 'sampling_rate': 16000}
 
+# Only start the timer once (when image is uploaded) if not frozen.
+if not st.session_state.timer_started and not st.session_state.timer_frozen:
+    html(timer(), height=50)
+    st.session_state.timer_started = True
+
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
- 
+
 if uploaded_file is not None:
     # Initialize progress containers
     status_text = st.empty()
     progress_bar = st.progress(0)
     
-     # Start JavaScript timer
-    html(timer(), height=50)
-    
-
     try:
         # Save uploaded file
         bytes_data = uploaded_file.getvalue()
@@ -135,41 +133,28 @@ if uploaded_file is not None:
             )
             progress_bar.progress(100)
 
-            # Final status and stop timer
+            # Final status and optionally change timer color
             status_text.success("**✅ Generation complete!**")
             html("<script>document.getElementById('timer').style.color = '#00cc00';</script>")
-
-        # Show results
-        # st.subheader("Results")
-        st.write("**Caption:**", st.session_state.processed_data['scenario'])
-        st.write("**Story:**", st.session_state.processed_data['story'])
-
     except Exception as e:
         html("<script>document.getElementById('timer').remove();</script>")
         status_text.error(f"**❌ Error:** {str(e)}")
         progress_bar.empty()
         raise e
 
-    
-    finally:
-        pass  # Timer cleanup handled by JavaScript
-
+    st.write("**Caption:**", st.session_state.processed_data['scenario'])
+    st.write("**Story:**", st.session_state.processed_data['story'])
 
-# Audio playback
+# Audio playback with timer freeze
 if st.button("Play Audio of the Story Generated"):
-    # Stop the timer
-    st.markdown(
-        """
-        <script>
-        if (window.stopTimer) {
-            window.stopTimer();
-        }
-        </script>
-        """,
-        unsafe_allow_html=True
-    )
-    
     if st.session_state.processed_data.get('audio'):
+        # Stop the timer by clearing the interval
+        st.markdown(
+            "<script>if(window.myTimerInterval){ clearInterval(window.myTimerInterval); }</script>",
+            unsafe_allow_html=True
+        )
+        # Set flag so that timer HTML is not re-rendered
+        st.session_state.timer_frozen = True
         audio_data = st.session_state.processed_data['audio']
         st.audio(audio_data['audio'].getvalue(), format="audio/mp3")
     else: