Update app.py

app.py

@@ -25,52 +25,8 @@ if 'processed_data' not in st.session_state:
 if 'image_data' not in st.session_state:
     st.session_state.image_data = None
 
-# JavaScript timer component with stop function
-def timer():
-    return """
-    <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
-    <script>
-    var timerInterval;
-    
-    function updateTimer() {
-        var start = Date.now();
-        var timerElement = document.getElementById('timer');
-        
-        timerInterval = 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);
-    }
-    
-    function stopTimer() {
-        if (timerInterval) {
-            clearInterval(timerInterval);
-            document.getElementById('timer').style.color = '#00cc00';
-        }
-    }
-    
-    updateTimer();
-    
-    // Handle Streamlit's component cleanup
-    window.addEventListener('beforeunload', function() {
-        if (timerInterval) clearInterval(timerInterval);
-    });
-    </script>
-    """
-
-# Stop timer function
-def stop_timer():
-    html("""
-    <script>
-    if (typeof stopTimer === 'function') {
-        stopTimer();
-    }
-    </script>
-    """, height=0)
+if 'timer_active' not in st.session_state:
+    st.session_state.timer_active = False
 
 # Page setup
 st.set_page_config(page_title="Your Image to Audio Story", page_icon="🦜")
@@ -111,38 +67,109 @@ 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 component with stop function
+def create_timer():
+    return """
+    <div id="timer-container">
+      <div id="timer" style="font-size:16px;color:#666;margin-bottom:10px;">⏱️ Elapsed: 00:00</div>
+    </div>
+    <script>
+    // Create a unique timer ID for this session
+    const timerID = 'timer-' + Date.now();
+    window[timerID] = null;
+    
+    function startTimer() {
+        // Clear any existing timer
+        if (window[timerID]) {
+            clearInterval(window[timerID]);
+        }
+        
+        const start = Date.now();
+        const timerElement = document.getElementById('timer');
+        
+        window[timerID] = setInterval(function() {
+            const elapsed = Date.now() - start;
+            const minutes = Math.floor(elapsed / 60000);
+            const seconds = Math.floor((elapsed % 60000) / 1000);
+            timerElement.innerHTML = '⏱️ Elapsed: ' + 
+                (minutes < 10 ? '0' : '') + minutes + ':' + 
+                (seconds < 10 ? '0' : '') + seconds;
+        }, 1000);
+    }
+    
+    // Start the timer immediately
+    startTimer();
+    
+    // Expose the timer ID so it can be stopped later
+    window.currentTimerID = timerID;
+    </script>
+    """
+
+def stop_timer():
+    return """
+    <script>
+    if (window.currentTimerID && window[window.currentTimerID]) {
+        clearInterval(window[window.currentTimerID]);
+        window[window.currentTimerID] = null;
+        document.getElementById('timer').style.color = '#00cc00';
+    }
+    </script>
+    """
+
 # UI components
 uploaded_file = st.file_uploader("Select an Image After the Models are Loaded...")
- 
+
+# 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 results if available
+if st.session_state.processed_data.get('scenario'):
+    with results_container:
+        st.write("**Caption:**", st.session_state.processed_data['scenario'])
+
+if st.session_state.processed_data.get('story'):
+    with results_container:
+        st.write("**Story:**", st.session_state.processed_data['story'])
+
+# 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
     
-    # Initialize progress containers
-    status_text = st.empty()
-    progress_bar = st.progress(0)
+    # Display the image
+    image_container.image(bytes_data, caption="Uploaded Image", use_container_width=True)
     
-    # Start JavaScript timer
-    html(timer(), height=50)
-    
-    try:
-        # Save uploaded file
-        with open(uploaded_file.name, "wb") as file:
-            file.write(bytes_data)
-
-        if st.session_state.get('current_file') != uploaded_file.name:
-            st.session_state.current_file = uploaded_file.name
-
-            # Display image
-            st.image(uploaded_file, 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
+        st.session_state.timer_active = True
+        
+        # Display timer
+        timer_container.html(create_timer(), height=60)
+        
+        # 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)
@@ -150,7 +177,7 @@ if uploaded_file is not None:
                 st.session_state.processed_data['scenario']
             )
             progress_bar.progress(66)
-
+            
             # Stage 3: Story to Audio
             status_text.markdown("**🔊 Synthesizing audio...**")
             progress_bar.progress(66)
@@ -158,38 +185,31 @@ if uploaded_file is not None:
                 st.session_state.processed_data['story']
             )
             progress_bar.progress(100)
-
-            # Final status and stop timer
+            
+            # Final status
             status_text.success("**✅ Generation complete!**")
-            stop_timer()
-
-        # Show results
-        st.write("**Caption:**", st.session_state.processed_data['scenario'])
-        st.write("**Story:**", st.session_state.processed_data['story'])
-
-    except Exception as e:
-        stop_timer()
-        status_text.error(f"**❌ Error:** {str(e)}")
-        progress_bar.empty()
-        raise e
-    
-    finally:
-        pass
-
-elif st.session_state.image_data is not None:
-    # Display the previously uploaded image from session state
-    st.image(st.session_state.image_data, caption="Uploaded Image", use_container_width=True)
-    
-    # Show previous results if available
-    if st.session_state.processed_data.get('scenario'):
-        st.write("**Caption:**", st.session_state.processed_data['scenario'])
-    if st.session_state.processed_data.get('story'):
-        st.write("**Story:**", st.session_state.processed_data['story'])
-
+            
+            # Stop timer
+            timer_container.html(stop_timer(), height=0)
+            
+            # 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:
+            timer_container.html(stop_timer(), height=0)
+            status_text.error(f"**❌ Error:** {str(e)}")
+            progress_bar.empty()
+            raise e
 
 # 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)
+            
         audio_data = st.session_state.processed_data['audio']
         st.audio(
             audio_data['audio'].getvalue(),