Update app.py

app.py

@@ -8,11 +8,11 @@ from gtts import gTTS
 import io
 import time
 import asyncio
-import datetime
+from streamlit.components.v1 import html
 
 if not asyncio.get_event_loop().is_running():
     asyncio.set_event_loop(asyncio.new_event_loop())
-    
+
 # Initialize session state
 if 'processed_data' not in st.session_state:
     st.session_state.processed_data = {
@@ -24,15 +24,6 @@ if 'processed_data' not in st.session_state:
 if 'image_data' not in st.session_state:
     st.session_state.image_data = None
 
-if 'timer_start_time' not in st.session_state:
-    st.session_state.timer_start_time = None
-
-if 'timer_frozen' not in st.session_state:
-    st.session_state.timer_frozen = False
-
-if 'last_update_time' not in st.session_state:
-    st.session_state.last_update_time = None
-
 # 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")
@@ -79,38 +70,112 @@ status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# Get current timer value
-def get_formatted_timer():
-    if st.session_state.timer_start_time is None:
-        return "00:00"
+# JavaScript timer that continues to run until frozen
+def start_timer():
+    timer_html = """
+    <div id="timer-display" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
     
-    current_time = time.time()
-    if st.session_state.timer_frozen:
-        # Use the last update time if timer is frozen
-        elapsed_seconds = int(st.session_state.last_update_time - st.session_state.timer_start_time)
-    else:
-        elapsed_seconds = int(current_time - st.session_state.timer_start_time)
-        # Update the last update time
-        st.session_state.last_update_time = current_time
+    <script>
+    // Only create a timer if one doesn't exist already
+    if (!window.timerInterval) {
+        console.log("Starting timer");
+        var startTime = new Date().getTime();
+        
+        // Store the start time in localStorage to persist across reruns
+        localStorage.setItem('timerStartTime', startTime);
+        
+        window.timerInterval = setInterval(function() {
+            var now = new Date().getTime();
+            var startTimeFromStorage = parseInt(localStorage.getItem('timerStartTime') || startTime);
+            var elapsed = now - startTimeFromStorage;
+            
+            var minutes = Math.floor(elapsed / (1000 * 60));
+            var seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
+            
+            var formattedTime = 
+                (minutes < 10 ? "0" : "") + minutes + ":" + 
+                (seconds < 10 ? "0" : "") + seconds;
+                
+            var timerElement = document.getElementById("timer-display");
+            if (timerElement) {
+                timerElement.innerHTML = "⏱️ Elapsed: " + formattedTime;
+            }
+            
+            // Store current display for potential freezing
+            localStorage.setItem('timerCurrentDisplay', formattedTime);
+        }, 100);
+        
+        // Flag that timer is running
+        localStorage.setItem('timerRunning', 'true');
+    }
+    </script>
+    """
+    return html(timer_html, height=50)
+
+def freeze_timer():
+    freeze_html = """
+    <script>
+    console.log("Freezing timer");
+    
+    // Clear the interval if it exists
+    if (window.timerInterval) {
+        clearInterval(window.timerInterval);
+        window.timerInterval = null;
+    }
+    
+    // Get the last timer display
+    var lastTimerDisplay = localStorage.getItem('timerCurrentDisplay') || "00:00";
     
-    minutes = elapsed_seconds // 60
-    seconds = elapsed_seconds % 60
-    return f"{minutes:02d}:{seconds:02d}"
+    // Update the timer display with frozen styling
+    var timerElement = document.getElementById("timer-display");
+    if (timerElement) {
+        timerElement.style.color = "#00cc00";
+        timerElement.style.fontWeight = "bold";
+        timerElement.innerHTML = "⏱️ Elapsed: " + lastTimerDisplay + " ✓";
+    }
+    
+    // Set flag that timer is frozen
+    localStorage.setItem('timerRunning', 'false');
+    </script>
+    """
+    return html(freeze_html, height=0)
 
-# UI components
-uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
+def reset_timer():
+    reset_html = """
+    <script>
+    console.log("Resetting timer");
+    
+    // Clear any existing interval
+    if (window.timerInterval) {
+        clearInterval(window.timerInterval);
+        window.timerInterval = null;
+    }
+    
+    // Clear localStorage timer data
+    localStorage.removeItem('timerStartTime');
+    localStorage.removeItem('timerCurrentDisplay');
+    localStorage.removeItem('timerRunning');
+    
+    // Reset the display
+    var timerElement = document.getElementById("timer-display");
+    if (timerElement) {
+        timerElement.style.color = "#666";
+        timerElement.style.fontWeight = "normal";
+        timerElement.innerHTML = "���️ Elapsed: 00:00";
+    }
+    </script>
+    """
+    return html(reset_html, height=0)
+
+# Always show timer container
+timer_container.write(start_timer())
 
 # Always display the image if we have image data
 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 timer - update the display based on current state
-current_time_str = get_formatted_timer()
-
-if st.session_state.timer_frozen:
-    timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {current_time_str} ✓</div>", unsafe_allow_html=True)
-else:
-    timer_container.markdown(f"<div style='font-size:16px;color:#666;margin-bottom:10px;'>⏱️ Elapsed: {current_time_str}</div>", unsafe_allow_html=True)
+# UI components
+uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
 
 # Process new uploaded file
 if uploaded_file is not None:
@@ -125,9 +190,8 @@ if uploaded_file is not None:
         st.session_state.current_file = uploaded_file.name
         
         # Reset and start timer
-        st.session_state.timer_start_time = time.time()
-        st.session_state.last_update_time = time.time()
-        st.session_state.timer_frozen = False
+        reset_timer()
+        timer_container.write(start_timer())
         
         # Progress indicators
         status_text = status_container.empty()
@@ -140,13 +204,11 @@ if uploaded_file is not None:
                 
             # Stage 1: Image to Text
             status_text.markdown("**🖼️ Generating caption...**")
-            progress_bar.progress(0)
             st.session_state.processed_data['scenario'] = img2text(uploaded_file.name)
             progress_bar.progress(33)
             
             # Stage 2: Text to Story
             status_text.markdown("**📖 Generating story...**")
-            progress_bar.progress(33)
             st.session_state.processed_data['story'] = text2story(
                 st.session_state.processed_data['scenario']
             )
@@ -154,7 +216,6 @@ if uploaded_file is not None:
             
             # Stage 3: Story to Audio
             status_text.markdown("**🔊 Synthesizing audio...**")
-            progress_bar.progress(66)
             st.session_state.processed_data['audio'] = text2audio(
                 st.session_state.processed_data['story']
             )
@@ -182,19 +243,15 @@ if st.session_state.processed_data.get('story'):
     with results_container:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
-# Audio playback - this will freeze the timer
+# 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)
+            image_container.image(st.session_state.image_data, caption="Uploaded Image", use_column_width=True)
         
         # Freeze the timer
-        st.session_state.timer_frozen = True
-        
-        # Update the timer display with frozen styling
-        final_time = get_formatted_timer()
-        timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {final_time} ✓</div>", unsafe_allow_html=True)
+        freeze_timer()
         
         # Play the audio
         audio_data = st.session_state.processed_data['audio']
@@ -203,23 +260,4 @@ if st.button("Play Audio of the Story Generated"):
             format="audio/mp3"
         )
     else:
-        st.warning("Please generate a story first!")
-
-# Force a rerun every second while the timer is active (not frozen)
-if st.session_state.timer_start_time is not None and not st.session_state.timer_frozen:
-    # Create a placeholder for our hidden component that triggers the rerun
-    rerun_trigger = st.empty()
-    
-    # Add a hidden element that will automatically trigger a rerun after 0.5 seconds
-    rerun_trigger.markdown(
-        f"""
-        <div style="display:none;">
-        <script>
-            setTimeout(function() {{
-                window.parent.postMessage({{type: "streamlit:rerun"}}, "*");
-            }}, 500);
-        </script>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
+        st.warning("Please generate a story first!")