Update pages/home.py

pages/home.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import streamlit.components.v1 as components
 
 st.title("📘Named Entity Recognition")
 
@@ -45,7 +46,74 @@ st.header("Tags the below 41 medical entities")
 'VOLUME'
 'WEIGHT'
 
-
+def scrollToBottom():
+  # JavaScript to scroll to bottom
+  JS_code = """
+  <script>
+  // Wrap the code in an Immediately Invoked Function Expression (IIFE)
+  // to create a private scope and potentially avoid conflicts.
+  (function() {
+    // Function to scroll to the bottom of a specific container
+    function scrollToBottom() {
+      console.log("Attempting to scroll container to bottom."); // Log when scroll function is called
+      // --- Identify the scrollable container ---
+      // Streamlit often uses a main container div. We'll try to find it.
+      // YOU NEED TO INSPECT YOUR DEPLOYED APP'S HTML TO FIND THE CORRECT SELECTOR
+      // FOR THE ELEMENT THAT ACTUALLY HAS THE SCROLLBAR.
+      //
+      // Common candidates based on Streamlit versions and structure:
+      // - '.stAppViewContainer'
+      // - '.main'
+      // - '.block-container'
+      // - Look for divs with class names starting with 'st-emotion-cache-' followed by random characters.
+      // - A div directly containing your dynamic content (check its class or ID)
+      // *** REPLACE THE SELECTOR BELOW with the correct one you found by inspecting your app's HTML ***
+      // Use document.querySelector('.your-class-name') for a class, or document.getElementById('your-id') for an ID.
+      const scrollableContainer = document.querySelector('.stMain'); // <--- REPLACE THIS ENTIRE LINE IF USING getElementById 
+      // const scrollableContainer = document.getElementById('stMainBlockContainer'); // <--- REPLACE THIS ENTIRE LINE IF USING querySelector 
+      if (scrollableContainer) {
+        console.log("Scrollable container found. Scrolling...");
+        // Scroll the found container to its bottom
+        scrollableContainer.scrollTo({
+          top: scrollableContainer.scrollHeight,
+          behavior: 'smooth'
+        });
+      } else {
+        console.warn("Scrollable container not found using the specified selector. Please inspect your app's HTML to find the correct class or ID.");
+        // Fallback to body scroll (less likely to work for Streamlit's main content area)
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: 'smooth'
+        });
+      }
+    }
+    // --- Logic for handling dynamically added content ---
+    // Create a MutationObserver instance.
+    // This observer will watch for changes in the DOM.
+    const observer = new MutationObserver(function(mutations) {
+      console.log("MutationObserver detected changes."); // Log when observer fires
+      // Use requestAnimationFrame to ensure the scroll happens after the browser
+      // has potentially rendered the new content.
+      requestAnimationFrame(scrollToBottom);
+    });
+    // Configure the observer to watch for changes to the child list of the body element.
+    // We keep observing the body because Streamlit adds content there,
+    // even if a child element is the one that scrolls.
+    const config = { childList: true, subtree: true };
+    console.log("Starting MutationObserver on document.body."); // Log when observer starts
+    // Start observing the document body for the configured mutations.
+    observer.observe(document.body, config);
+    // --- Initial scroll on page load ---
+    window.addEventListener('load', function() {
+        console.log("Window loaded. Initial scroll attempt."); // Log on window load
+        requestAnimationFrame(scrollToBottom);
+    });
+  })(); // End of IIFE
+  </script>
+  """
+  # Render the JavaScript code
+  html = f'<div style="display:none">{JS_code}</div>'
+  st.components.v1.html(html, height=0, width=0)