Update app.py

app.py

@@ -21,53 +21,64 @@ if 'processed_data' not in st.session_state:
         'audio': None
     }
 
+
 # Modified JavaScript timer component
 def timer():
     return """
-    <script>
-    // Remove existing timer if present
-    var existingTimer = window.parent.document.getElementById('parent-timer');
-    if (existingTimer) {
-        existingTimer.remove();
-        clearInterval(window.parent.timerInterval);
-    }
-    
-    // Create new timer element in parent document
-    var timerDiv = window.parent.document.createElement('div');
-    timerDiv.id = 'parent-timer';
-    timerDiv.style.cssText = `
+    <div id="main-timer" style="
+        position: fixed;
+        top: 20px;
+        right: 20px;
         font-size: 16px;
         color: #666;
-        margin: 10px 0;
-        padding: 8px;
+        padding: 8px 15px;
         background: #f0f2f6;
-        border-radius: 4px;
-        position: sticky;
-        top: 0;
-        z-index: 999;
-    `;
-    timerDiv.innerHTML = '⏱️ Elapsed: 00:00';
+        border-radius: 20px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        z-index: 1000000;
+        border: 1px solid #ddd;
+    ">
+        ⏱️ <span id="time-display">00:00</span>
+    </div>
+    <script>
+    // Timer system
+    let shouldRun = true;
+    const startTime = Date.now();
+    const timerElement = document.getElementById('time-display');
     
-    // Insert timer just below the header
-    var header = window.parent.document.querySelector('[data-testid="stHeader"]');
-    if (header) {
-        header.insertAdjacentElement('afterend', timerDiv);
-    } else {
-        window.parent.document.body.prepend(timerDiv);
+    function updateTimer() {
+        if (!shouldRun) return;
+        
+        const elapsed = Math.floor((Date.now() - startTime) / 1000);
+        const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
+        const seconds = (elapsed % 60).toString().padStart(2, '0');
+        
+        timerElement.textContent = `${minutes}:${seconds}`;
+        requestAnimationFrame(updateTimer);
     }
     
-    var start = Date.now();
-    var timerInterval = setInterval(function() {
-        var elapsed = Date.now() - start;
-        var minutes = Math.floor(elapsed / 60000);
-        var seconds = Math.floor((elapsed % 60000) / 1000);
-        timerDiv.innerHTML = '⏱️ Elapsed: ' + 
-            (minutes < 10 ? '0' : '') + minutes + ':' + 
-            (seconds < 10 ? '0' : '') + seconds;
-    }, 1000);
+    // Store control in parent window
+    window.parent.timerControls = {
+        stop: () => {
+            shouldRun = false;
+            document.getElementById('main-timer').style.backgroundColor = '#e6ffe6';
+            document.getElementById('main-timer').style.borderColor = '#99ff99';
+        }
+    };
     
-    // Store the interval ID in the parent window
-    window.parent.timerInterval = timerInterval;
+    // Start updates
+    updateTimer();
+    </script>
+    """
+
+# Modified stop command
+def stop_timer():
+    return """
+    <script>
+    // Safely stop timer if exists
+    if (window.parent.timerControls) {
+        window.parent.timerControls.stop();
+    }
     </script>
     """
 
@@ -112,14 +123,14 @@ def text2audio(story_text):
 
 # 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 JavaScript timer
-    html(timer(), height=50)
+    html(timer(), height=0)
 
     try:
         # Save uploaded file
@@ -134,7 +145,7 @@ if uploaded_file is not None:
             st.image(uploaded_file, caption="Uploaded Image", use_container_width=True)
 
             # Stage 1: Image to Text
-            status_text.markdown("**🖼️ Analyzing image...**")
+            status_text.markdown("**🖼️ Generating caption...**")
             progress_bar.progress(0)
             st.session_state.processed_data['scenario'] = img2text(uploaded_file.name)
             progress_bar.progress(33)
@@ -157,15 +168,7 @@ if uploaded_file is not None:
 
             # Final status and stop timer
             status_text.success("**✅ Generation complete!**")
-            html("""
-                <script>
-                    clearInterval(window.parent.timerInterval);
-                    var timerDiv = window.parent.document.getElementById('parent-timer');
-                    if (timerDiv) {
-                        timerDiv.style.color = '#00cc00';
-                    }
-                </script>
-            """)
+            html(stop_timer())
 
         # Show results
         # st.subheader("Results")
@@ -173,15 +176,7 @@ if uploaded_file is not None:
         st.write("**Story:**", st.session_state.processed_data['story'])
 
     except Exception as e:
-        html("""
-            <script>
-                clearInterval(window.parent.timerInterval);
-                var timerDiv = window.parent.document.getElementById('parent-timer');
-                if (timerDiv) {
-                    timerDiv.remove();
-                }
-            </script>
-        """)
+        html(stop_timer())
         status_text.error(f"**❌ Error:** {str(e)}")
         progress_bar.empty()
         raise e