Update app.py

app.py

@@ -7,12 +7,12 @@ import torch
 from gtts import gTTS
 import io
 import time
-import asyncio
 from streamlit.components.v1 import html
+import asyncio
 
 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 = {
@@ -21,11 +21,34 @@ if 'processed_data' not in st.session_state:
         'audio': None
     }
 
-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
+# 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() {
+        var start = Date.now();
+        var timerElement = document.getElementById('timer');
+        
+        var interval = setInterval(function() {
+            var elapsed = Date.now() - start;
+            var minutes = Math.floor(elapsed / 60000);
+            var seconds = Math.floor((elapsed % 60000) / 1000);
+            timerElement.innerHTML = '⏱️ Elapsed: ' + 
+                (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="🦜")
@@ -66,168 +89,88 @@ def text2audio(story_text):
     audio_io.seek(0)
     return {'audio': audio_io, 'sampling_rate': 16000}
 
-# 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()
-
-# JavaScript timer implementation
-def active_timer():
-    timer_html = """
-    <div style="font-size:16px;color:#666;margin-bottom:10px;">
-        <span id="timer-display">⏱️ Elapsed: 00:00</span>
-    </div>
-    
-    <script>
-    // Reset any existing timer
-    if (window.timerInterval) {
-        clearInterval(window.timerInterval);
-        window.timerInterval = null;
-    }
+# 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 a new timer
-    var startTime = new Date().getTime();
-    window.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 formattedTime = 
-            (minutes < 10 ? "0" : "") + minutes + ":" + 
-            (seconds < 10 ? "0" : "") + seconds;
-        
-        var timerElement = document.getElementById("timer-display");
-        if (timerElement) {
-            timerElement.innerHTML = "⏱️ Elapsed: " + formattedTime;
-        }
-    }, 100);
-    </script>
-    """
-    return timer_html
-
-def frozen_timer(time_display):
-    timer_html = """
-    <div style="font-size:16px;color:#00cc00;font-weight:bold;margin-bottom:10px;">
-        <span id="timer-display">⏱️ Elapsed: """ + time_display + """ ✓</span>
-    </div>
+     # Start JavaScript timer
+    html(timer(), height=50)
     
-    <script>
-    // Clear any existing timer
-    if (window.timerInterval) {
-        clearInterval(window.timerInterval);
-        window.timerInterval = null;
-    }
-    </script>
-    """
-    return timer_html
 
-def empty_timer():
-    timer_html = """
-    <div style="font-size:16px;color:#666;margin-bottom:10px;">
-        <span id="timer-display">⏱️ Elapsed: 00:00</span>
-    </div>
-    """
-    return timer_html
+    try:
+        # Save uploaded file
+        bytes_data = uploaded_file.getvalue()
+        with open(uploaded_file.name, "wb") as file:
+            file.write(bytes_data)
 
-# Display empty timer initially
-if not st.session_state.timer_active:
-    timer_container.markdown(empty_timer(), unsafe_allow_html=True)
+        if st.session_state.get('current_file') != uploaded_file.name:
+            st.session_state.current_file = uploaded_file.name
 
-# 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 image
+            st.image(uploaded_file, caption="Uploaded Image", use_container_width=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:
-    # Save the image data to session state
-    bytes_data = uploaded_file.getvalue()
-    st.session_state.image_data = bytes_data
-    
-    # Display the image
-    image_container.image(bytes_data, caption="Uploaded Image", use_container_width=True)
-    
-    if st.session_state.get('current_file') != uploaded_file.name:
-        st.session_state.current_file = uploaded_file.name
-        
-        # Start timer
-        st.session_state.timer_active = True
-        timer_container.markdown(active_timer(), unsafe_allow_html=True)
-        
-        # Progress indicators
-        status_text = status_container.empty()
-        progress_bar = progress_container.progress(0)
-        
-        try:
-            # Save uploaded file
-            with open(uploaded_file.name, "wb") as file:
-                file.write(bytes_data)
-                
             # 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']
             )
             progress_bar.progress(66)
-            
+
             # 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']
             )
             progress_bar.progress(100)
-            
-            # Final status
+
+            # Final status and stop timer
             status_text.success("**✅ Generation complete!**")
-            
-            # Show results
-            with results_container:
-                st.write("**Caption:**", st.session_state.processed_data['scenario'])
-                st.write("**Story:**", st.session_state.processed_data['story'])
-                
-        except Exception as e:
-            status_text.error(f"**❌ Error:** {str(e)}")
-            progress_bar.empty()
-            raise e
-
-# Display results if available
-if st.session_state.processed_data.get('scenario'):
-    with results_container:
-        st.write("**Caption:**", st.session_state.processed_data['scenario'])
+            html("<script>document.getElementById('timer').style.color = '#00cc00';</script>")
 
-if st.session_state.processed_data.get('story'):
-    with results_container:
+        # Show results
+        # st.subheader("Results")
+        st.write("**Caption:**", st.session_state.processed_data['scenario'])
         st.write("**Story:**", st.session_state.processed_data['story'])
 
-# Audio playback with timer freezing
+    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
+
+
+# Audio playback
 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'):
-        # 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)
-        
-        # Freeze the timer (with a default value since we can't easily get the real time)
-        timer_container.markdown(frozen_timer("00:30"), unsafe_allow_html=True)
-        
-        # Set timer as inactive since we've frozen it
-        st.session_state.timer_active = False
-        
-        # Play the audio
         audio_data = st.session_state.processed_data['audio']
-        st.audio(
-            audio_data['audio'].getvalue(),
-            format="audio/mp3"
-        )
+        st.audio(audio_data['audio'].getvalue(), format="audio/mp3")
     else:
-        st.warning("Please generate a story first!")
+        st.warning("Please generate a story first!")