Update pages/home.py

pages/home.py

@@ -5,126 +5,6 @@ import base64
 
 st.title("📘Named Entity Recognition")
 
-#def scroll_to_bottom():
-#    st.write('Reached Bottom of page!')
-#button('Scroll_to_Bottom', 'Ctrl+End', scroll_to_bottom)
-
-#add_keyboard_shortcuts({'Ctrl+End': 'Scroll to End',})
-#if st.button("Scroll to End"):
-#    st.success("Reached End of page! (You can also press Ctrl+End)")
-
-def auto_scroll_to_bottom():
-    # JavaScript to scroll to bottom
-    js_code = """
-    <script>
-        // Wait for the page to fully render
-        const scrollToBottom = () => {
-            // Get the main Streamlit iframe
-            const streamlitDoc = window.parent.document;
-            // Get the app container
-            const appContainer = streamlitDoc.querySelector('.main');
-            if (appContainer) {
-                // Scroll the app container to the bottom
-                appContainer.scrollTop = appContainer.scrollHeight;
-            } else {
-                // Fallback to scrolling the entire page
-                window.parent.scrollTo(0, streamlitDoc.body.scrollHeight);
-            }
-        };
-        
-        // Try immediately
-        scrollToBottom();
-        
-        // Also try after a short delay to ensure content is rendered
-        setTimeout(scrollToBottom, 200);
-        
-        // And after a longer delay just to be safe
-        setTimeout(scrollToBottom, 500);
-    </script>
-    """
-    
-    # Render the JavaScript code
-    html = f'<div style="display:none">{js_code}</div>'
-    st.components.v1.html(html, height=0)
-
-# Then in your button click handler, add this:
-if st.button("Scroll Down"):    
-    # Call the scroll function at the end
-    auto_scroll_to_bottom()
-
-
-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('.flex flex-1 flex-col'); // <--- 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)
-
-scrollToBottom()
-
-
 st.header("Tags the below 41 medical entities")
 
 'ACTIVITY'
@@ -167,3 +47,18 @@ st.header("Tags the below 41 medical entities")
 'TIME'
 'VOLUME'
 'WEIGHT'
+
+# Create scrollable content
+for i in range(100):
+    st.write(f"This is scrollable content line {i}")
+
+# Add JavaScript to automatically scroll to the bottom
+st.markdown("""
+<script>
+    // Set a timeout to ensure the page has loaded
+    setTimeout(function() {
+        // Get the window object and scroll to the bottom
+        window.scrollTo(0, document.body.scrollHeight);
+    }, 500);
+</script>
+""", unsafe_allow_html=True)