Update app.py

app.py

@@ -3,10 +3,8 @@ nest_asyncio.apply()
 
 import streamlit as st
 from transformers import pipeline
-import torch
 from gtts import gTTS
 import io
-import time
 from streamlit.components.v1 import html
 import asyncio
 
@@ -20,12 +18,12 @@ 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
+if 'timer_frozen' not in st.session_state:
+    st.session_state.timer_frozen = False
 
-# JavaScript timer component
+# JavaScript timer component (defines window.myTimerInterval for later stopping)
 def timer():
     return """
     <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
@@ -33,7 +31,6 @@ def timer():
     (function() {
         var start = Date.now();
         var timerElement = document.getElementById('timer');
-        // Save the interval id globally
         window.myTimerInterval = setInterval(function() {
             var elapsed = Date.now() - start;
             var minutes = Math.floor(elapsed / 60000);
@@ -76,7 +73,6 @@ 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):
@@ -86,15 +82,15 @@ 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:
+    # Only inject the timer once after an image is uploaded
+    if not st.session_state.timer_started and not st.session_state.timer_frozen:
+        st.session_state.timer_started = True
+        html(timer(), height=50)
+    
     # Initialize progress containers
     status_text = st.empty()
     progress_bar = st.progress(0)
@@ -133,9 +129,9 @@ if uploaded_file is not None:
             )
             progress_bar.progress(100)
 
-            # Final status and optionally change timer color
             status_text.success("**✅ Generation complete!**")
             html("<script>document.getElementById('timer').style.color = '#00cc00';</script>")
+    
     except Exception as e:
         html("<script>document.getElementById('timer').remove();</script>")
         status_text.error(f"**❌ Error:** {str(e)}")
@@ -145,15 +141,14 @@ 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 with timer freeze
+# Audio playback and timer freeze
 if st.button("Play Audio of the Story Generated"):
     if st.session_state.processed_data.get('audio'):
-        # Stop the timer by clearing the interval
+        # Inject JS to stop the timer and freeze it
         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")