Update app.py

app.py

@@ -7,8 +7,8 @@ import torch
 from gtts import gTTS
 import io
 import time
+from streamlit.components.v1 import html
 import asyncio
-import datetime
 
 if not asyncio.get_event_loop().is_running():
     asyncio.set_event_loop(asyncio.new_event_loop())
@@ -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' not in st.session_state:
-    st.session_state.timer_start = None
-    
-if 'timer_running' not in st.session_state:
-    st.session_state.timer_running = False
-
-if 'timer_complete' not in st.session_state:
-    st.session_state.timer_complete = False
-    
 # 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")
@@ -74,28 +65,58 @@ def text2audio(story_text):
 
 # Create fixed containers for UI elements
 image_container = st.empty()
-timer_container = st.empty()
 status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# Native Streamlit timer display
-def display_timer():
-    if st.session_state.timer_start is not None and st.session_state.timer_running:
-        elapsed = datetime.datetime.now() - st.session_state.timer_start
-        elapsed_seconds = int(elapsed.total_seconds())
-        minutes = elapsed_seconds // 60
-        seconds = elapsed_seconds % 60
+# JavaScript timer component - using streamlit.components.v1.html
+def start_timer():
+    timer_html = """
+    <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
+    <script>
+    var startTime = new Date().getTime();
+    var timerInterval = setInterval(function() {
+        var now = new Date().getTime();
+        var elapsed = now - startTime;
+        var minutes = Math.floor(elapsed / (1000 * 60));
+        var seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
         
-        if st.session_state.timer_complete:
-            timer_container.markdown(f"⏱️ **Elapsed: {minutes:02d}:{seconds:02d}**", unsafe_allow_html=True)
-        else:
-            timer_container.markdown(f"⏱️ Elapsed: {minutes:02d}:{seconds:02d}")
-            
-            # Keep updating timer while running
-            if not st.session_state.timer_complete:
-                time.sleep(0.1)  # Small delay to reduce CPU usage
-                st.experimental_rerun()
+        document.getElementById("timer").innerHTML = "⏱️ Elapsed: " + 
+            (minutes < 10 ? "0" : "") + minutes + ":" + 
+            (seconds < 10 ? "0" : "") + seconds;
+    }, 1000);
+    
+    // Store the interval ID in window object
+    window.myTimerInterval = timerInterval;
+    </script>
+    """
+    return html(timer_html, height=50)
+
+def stop_timer():
+    stop_html = """
+    <script>
+    // Stop the timer interval
+    if (window.myTimerInterval) {
+        clearInterval(window.myTimerInterval);
+        window.myTimerInterval = null;
+    }
+    
+    // Get the current timer text and freeze it
+    var timerEl = document.getElementById("timer");
+    if (timerEl) {
+        // Save the current time display
+        var currentTimeDisplay = timerEl.innerText;
+        
+        // Apply completion styling
+        timerEl.style.color = "#00cc00";
+        timerEl.style.fontWeight = "bold";
+        
+        // Make sure the text doesn't change anymore
+        timerEl.innerText = currentTimeDisplay + " ✓";
+    }
+    </script>
+    """
+    return html(stop_html, height=0)
 
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
@@ -113,10 +134,6 @@ if st.session_state.processed_data.get('story'):
     with results_container:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
-# Display timer if running
-if st.session_state.timer_running:
-    display_timer()
-
 # Process new uploaded file
 if uploaded_file is not None:
     # Save the image data to session state
@@ -129,10 +146,8 @@ if uploaded_file is not None:
     if st.session_state.get('current_file') != uploaded_file.name:
         st.session_state.current_file = uploaded_file.name
         
-        # Start timer
-        st.session_state.timer_start = datetime.datetime.now()
-        st.session_state.timer_running = True
-        st.session_state.timer_complete = False
+        # Start timer using v1.html
+        timer_placeholder = start_timer()
         
         # Progress indicators
         status_text = status_container.empty()
@@ -169,7 +184,7 @@ if uploaded_file is not None:
             status_text.success("**✅ Generation complete!**")
             
             # Stop timer
-            st.session_state.timer_complete = True
+            stop_timer()
             
             # Show results
             with results_container:
@@ -177,7 +192,7 @@ if uploaded_file is not None:
                 st.write("**Story:**", st.session_state.processed_data['story'])
                 
         except Exception as e:
-            st.session_state.timer_complete = True
+            stop_timer()
             status_text.error(f"**❌ Error:** {str(e)}")
             progress_bar.empty()
             raise e