Update app.py

app.py

@@ -7,7 +7,6 @@ import torch
 from gtts import gTTS
 import io
 import time
-from streamlit.components.v1 import html
 import asyncio
 
 if not asyncio.get_event_loop().is_running():
@@ -24,11 +23,14 @@ if 'processed_data' not in st.session_state:
 if 'image_data' not in st.session_state:
     st.session_state.image_data = None
 
-if 'timer_active' not in st.session_state:
-    st.session_state.timer_active = False
+if 'timer_value' not in st.session_state:
+    st.session_state.timer_value = "00:00"
 
-if 'timer_to_freeze' not in st.session_state:
-    st.session_state.timer_to_freeze = False
+if 'timer_frozen' not in st.session_state:
+    st.session_state.timer_frozen = False
+
+if 'timer_start_time' not in st.session_state:
+    st.session_state.timer_start_time = None
 
 # Page setup
 st.set_page_config(page_title="Your Image to Audio Story", page_icon="🦜")
@@ -76,57 +78,13 @@ status_container = st.empty()
 progress_container = st.empty()
 results_container = st.container()
 
-# JavaScript timer component
-def active_timer():
-    timer_html = """
-    <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
-    <script>
-    // Generate a unique ID for this timer instance
-    var timerId = 'timer_' + Date.now();
-    
-    // Initialize the timer
-    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);
-        
-        var timerElement = document.getElementById("timer");
-        if (timerElement) {
-            timerElement.innerHTML = "⏱️ Elapsed: " + 
-                (minutes < 10 ? "0" : "") + minutes + ":" + 
-                (seconds < 10 ? "0" : "") + seconds;
-        }
-    }, 1000);
-    
-    // Store the interval ID in window object with unique ID
-    window[timerId] = timerInterval;
-    window.currentTimerId = timerId;
-    </script>
-    """
-    return html(timer_html, height=50)
-
-def freeze_timer():
-    freeze_html = """
-    <script>
-    // Find the current timer ID
-    if (window.currentTimerId && window[window.currentTimerId]) {
-        // Stop the interval
-        clearInterval(window[window.currentTimerId]);
-        window[window.currentTimerId] = null;
-        
-        // Get and style the timer element
-        var timerElement = document.getElementById("timer");
-        if (timerElement) {
-            timerElement.style.color = "#00cc00";
-            timerElement.style.fontWeight = "bold";
-            timerElement.innerHTML = timerElement.innerHTML + " ✓";
-        }
-    }
-    </script>
-    """
-    return html(freeze_html, height=0)
+# Update timer value (simple, native Streamlit approach)
+def update_timer():
+    if st.session_state.timer_start_time and not st.session_state.timer_frozen:
+        elapsed = time.time() - st.session_state.timer_start_time
+        minutes = int(elapsed // 60)
+        seconds = int(elapsed % 60)
+        st.session_state.timer_value = f"{minutes:02d}:{seconds:02d}"
 
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
@@ -135,6 +93,15 @@ uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...
 if st.session_state.image_data is not None:
     image_container.image(st.session_state.image_data, caption="Uploaded Image", use_container_width=True)
 
+# Update and display timer
+update_timer()
+
+# Style the timer based on whether it's frozen
+if st.session_state.timer_frozen:
+    timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {st.session_state.timer_value} ✓</div>", unsafe_allow_html=True)
+else:
+    timer_container.markdown(f"<div style='font-size:16px;color:#666;margin-bottom:10px;'>⏱️ Elapsed: {st.session_state.timer_value}</div>", unsafe_allow_html=True)
+
 # Process new uploaded file
 if uploaded_file is not None:
     # Save the image data to session state
@@ -146,12 +113,11 @@ if uploaded_file is not None:
     
     if st.session_state.get('current_file') != uploaded_file.name:
         st.session_state.current_file = uploaded_file.name
-        st.session_state.timer_active = True
-        st.session_state.timer_to_freeze = False
         
-        # Display timer
-        timer_container.empty()
-        timer_container.write(active_timer())
+        # Reset and start timer
+        st.session_state.timer_start_time = time.time()
+        st.session_state.timer_frozen = False
+        st.session_state.timer_value = "00:00"
         
         # Progress indicators
         status_text = status_container.empty()
@@ -187,9 +153,6 @@ if uploaded_file is not None:
             # Final status
             status_text.success("**✅ Generation complete!**")
             
-            # Mark timer to be frozen when audio is played
-            st.session_state.timer_to_freeze = True
-            
             # Show results
             with results_container:
                 st.write("**Caption:**", st.session_state.processed_data['scenario'])
@@ -216,11 +179,12 @@ if st.button("Play Audio of the Story Generated"):
         if st.session_state.image_data is not None:
             image_container.image(st.session_state.image_data, caption="Uploaded Image", use_container_width=True)
         
-        # Freeze the timer if it's active and marked to be frozen
-        if st.session_state.timer_active and st.session_state.timer_to_freeze:
-            freeze_timer()
-            st.session_state.timer_active = False
-            
+        # Freeze the timer
+        st.session_state.timer_frozen = True
+        
+        # Display final timer value with completion styling
+        timer_container.markdown(f"<div style='font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;'>⏱️ Elapsed: {st.session_state.timer_value} ✓</div>", unsafe_allow_html=True)
+        
         # Play the audio
         audio_data = st.session_state.processed_data['audio']
         st.audio(
@@ -228,4 +192,9 @@ if st.button("Play Audio of the Story Generated"):
             format="audio/mp3"
         )
     else:
-        st.warning("Please generate a story first!")
+        st.warning("Please generate a story first!")
+
+# Trigger rerun to update timer every second if timer is running
+if st.session_state.timer_start_time and not st.session_state.timer_frozen:
+    time.sleep(1)
+    st.experimental_rerun()