Update pages/Data Collection.py

pages/Data Collection.py

@@ -55,13 +55,17 @@ def navigate_to(page_name):
 
 # Main Page
 if st.session_state.current_page == "main":
+    # Reset scroll to top
+    st.query_params.update({})
+
     # Page Title
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h2 style="color: #BB3385;">What is Data?📊✨</h2>
+            <h2 style="color: #BB3385;">What is Data? 📊✨</h2>
         </div>
     """, unsafe_allow_html=True)
 
+
     # Introduction Text
     st.write("""
     **Data** is the measurements that are collected as a source of Information.
@@ -75,29 +79,32 @@ if st.session_state.current_page == "main":
         </div>
     """, unsafe_allow_html=True)
 
-    # Radio Button for Data Type Selection
+   # Radio Button for Data Type Selection
     data_type = st.radio(
         "Select the type of Data:",
         ("Structured Data", "Unstructured Data", "Semi-Structured Data")
     )
-
+    
     if data_type == "Structured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
                 <h3 style="color: #e25822;">What is Structured Data?</h3>
             </div>
         """, unsafe_allow_html=True)
-
+    
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
                 <h4 style="color: #5b2c6f;">Definition:</h4>
             </div>
         """, unsafe_allow_html=True)
-        st.write("""
-        **Structured data** refers to information that is organized and formatted in a predefined manner, making it easy to store, retrieve, and analyze.
-        It is typically stored in tabular formats like rows and columns, where each field contains a specific type of information.
+    
+        st.markdown("""
+            **Structured data** refers to information that is organized and formatted in a predefined manner, 
+            making it easy to store, retrieve, and analyze. 
+            It is typically stored in tabular formats like rows and columns, where each field contains a specific type of information.
         """)
 
+
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
                 <h4 style="color: #5b2c6f;">Characteristics:</h4>
@@ -139,9 +146,13 @@ if st.session_state.current_page == "main":
         st.write("Click to explore Structured Data Formats:")
         col1, col2 = st.columns(2)  # Define two columns using Streamlit's columns method
         
+        col1, col2 = st.columns(2)
+
         with col1:
             if st.button("📊 Explore Excel"):
                 navigate_to("explore_excel")
+                st.query_params.update({})  # Ensure page starts from the top after navigation
+
 
 
 
@@ -198,14 +209,18 @@ if st.session_state.current_page == "main":
         with col1:
             if st.button("📸 Images & Videos"):
                 navigate_to("explore_images_video")
+                st.query_params.update({})
         
         with col2:
             if st.button("🎵 Audio"):
                 navigate_to("explore_audio")
+                st.query_params.update({})
         
         with col3:
             if st.button("✍️ Text"):
                 navigate_to("explore_text")
+                st.query_params.update({})
+
 
     elif data_type == "Semi-Structured Data":
         st.markdown("""
@@ -256,23 +271,28 @@ if st.session_state.current_page == "main":
         """, unsafe_allow_html=True)
 
         st.write("Click to explore Semi-Structured Data Formats:")
+        
         col1, col2, col3, col4 = st.columns(4)
         
         with col1:
             if st.button("📄 CSV"):
                 navigate_to("explore_csv")
+                st.query_params.update({})
         
         with col2:
             if st.button("📋 JSON"):
                 navigate_to("explore_json")
+                st.query_params.update({})
         
         with col3:
             if st.button("📜 XML"):
                 navigate_to("explore_xml")
+                st.query_params.update({})
         
         with col4:
             if st.button("🌐 HTML"):
                 navigate_to("explore_html")
+                st.query_params.update({})
 
 
                 
@@ -476,7 +496,7 @@ if st.session_state.current_page == "explore_excel":
     
     with col1:
         st.markdown("""
-            <a href="https://colab.research.google.com/drive/1qSWM2h-_ND9Nv7GVW9q5onpdcrlFauHc?usp=sharing" target="_blank">
+            <a href="https://colab.research.google.com/drive/1qSWM2h-_ND9Nv7GVW9q5onpdcrlFauHc?usp=sharing" target="_blank" title="Open the associated Google Colab file">
                 <button style="background-color: #4CAF50; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;">
                     Open Google Colab File
                 </button>
@@ -485,7 +505,9 @@ if st.session_state.current_page == "explore_excel":
     
     with col2:
         if st.button("⬅️ Back to Previous Page"):
-            st.session_state.current_page = "main" 
+            st.session_state.current_page = "main"
+            st.query_params.update({})
+ 
             
 
 #--------------------------------------------------------- Images and Video --------------------------------------------------------------------------------
@@ -721,10 +743,12 @@ elif st.session_state.current_page == "explore_images_video":
     with col1:
         if st.button("⬅️ Back to Previous Page"):
             navigate_to("main")
+            st.query_params.update({})
     
     with col2:
         if st.button("➡️ Image Operations with OpenCV"):
             navigate_to("opencv_operations")
+            st.query_params.update({})
 
         
 elif st.session_state.current_page == "opencv_operations":
@@ -904,7 +928,7 @@ elif st.session_state.current_page == "opencv_operations":
     
     with col1:
         st.markdown("""
-            <a href="https://colab.research.google.com/drive/1P9nT1HmOcCah5nTctxCm7hVdqqYPUkzn?usp=sharing" target="_blank">
+            <a href="https://colab.research.google.com/drive/1P9nT1HmOcCah5nTctxCm7hVdqqYPUkzn?usp=sharing" target="_blank" title="Open Colab Notes">
                 <button style="background-color: #4CAF50; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;">
                     Colab Notes
                 </button>
@@ -913,18 +937,22 @@ elif st.session_state.current_page == "opencv_operations":
     
     with col2:
         if st.button("Unstructured Data"):
-            navigate_to("main")  # Main page: Images & Videos
+            navigate_to("main")
+            st.query_params.update({})  # Ensure scroll resets
     
-    # Second row: Previous Page and Next Page
+    # Second row: Previous Page and Explore Operations
     col3, col4 = st.columns(2)
     
     with col3:
-        if st.button("⬅️ Intro Page"):
-            navigate_to("explore_images_video")  # Previous page: Introduction to Images and Videos
+        if st.button("⬅️ Overview Page"):
+            navigate_to("explore_images_video")
+            st.query_params.update({})  # Ensure scroll resets
     
     with col4:
-        if st.button("➡️ Next Page"):
-            navigate_to("image_operations")  # Next page: Explore Image Creation and Manipulation
+        if st.button("➡️ Explore Operations"):
+            navigate_to("image_operations")
+            st.query_params.update({})  # Ensure scroll resets
+
 
 
 elif st.session_state.current_page == "image_operations":
@@ -1095,43 +1123,50 @@ elif st.session_state.current_page == "image_operations":
 
     st.write("Once you upload an image, it will be split into its color channels (Blue, Green, and Red), with each channel displayed separately. You can then download the processed image.")
 
-    # Allow user to upload an image
+   # Allow user to upload an image
     uploaded_file = st.file_uploader("Upload an image", type=["jpg", "png", "jpeg"])
     
     if uploaded_file is not None:
-        # Convert the uploaded image to an OpenCV-compatible format
-        image = np.array(bytearray(uploaded_file.read()), dtype=np.uint8)
-        img = cv2.imdecode(image, 1)  # Decode into an image
+        try:
+            # Convert the uploaded image to an OpenCV-compatible format
+            image = np.array(bytearray(uploaded_file.read()), dtype=np.uint8)
+            img = cv2.imdecode(image, 1)  # Decode into an image
+            
+            if img is None:
+                st.error("Uploaded file is not a valid image. Please upload a valid JPG or PNG file.")
+            else:
+                # Split the image into Blue, Green, and Red channels
+                b, g, r = cv2.split(img)
     
-        # Split the image into Blue, Green, and Red channels
-        b, g, r = cv2.split(img)
+                # Create a zeros array to hold the empty channels
+                zeros = np.zeros(img.shape[:-1], dtype=np.uint8)
     
-        # Create a zeros array to hold the empty channels
-        zeros = np.zeros(img.shape[:-1], dtype=np.uint8)
+                # Merge the Blue channel with zeros for Green and Red
+                blue_channel = cv2.merge([b, zeros, zeros])
+                green_channel = cv2.merge([zeros, g, zeros])
+                red_channel = cv2.merge([zeros, zeros, r])
     
-        # Merge the Blue channel with zeros for Green and Red
-        blue_channel = cv2.merge([b, zeros, zeros])
-        green_channel = cv2.merge([zeros, g, zeros])
-        red_channel = cv2.merge([zeros, zeros, r])
+                # Display the images with captions
+                st.image(blue_channel, caption="Blue Channel", channels="BGR", use_container_width=True)
+                st.image(green_channel, caption="Green Channel", channels="BGR", use_container_width=True)
+                st.image(red_channel, caption="Red Channel", channels="BGR", use_container_width=True)
     
-        # Display the images with captions
-        st.image(blue_channel, caption="Blue Channel", channels="BGR", use_container_width=True)
-        st.image(green_channel, caption="Green Channel", channels="BGR", use_container_width=True)
-        st.image(red_channel, caption="Red Channel", channels="BGR", use_container_width=True)
+                # Merge the channels back together for the original image
+                original_img = cv2.merge([b, g, r])
     
-        # Merge the channels back together for the original image
-        original_img = cv2.merge([b, g, r])
+                # Display the original image
+                st.image(original_img, caption="Original Image", channels="BGR", use_container_width=True)
     
-        # Display the original image
-        st.image(original_img, caption="Original Image", channels="BGR", use_container_width=True)
+                # Provide a download link for the processed image
+                st.download_button(
+                    label="Download Merged Image",
+                    data=cv2.imencode('.jpg', original_img)[1].tobytes(),
+                    file_name="merged_image.jpg",
+                    mime="image/jpeg"
+                )
+        except Exception as e:
+            st.error(f"An error occurred: {e}")
     
-        # Optionally, provide a download link for the processed image
-        st.download_button(
-            label="Download Merged Image",
-            data=cv2.imencode('.jpg', original_img)[1].tobytes(),
-            file_name="merged_image.jpg",
-            mime="image/jpeg"
-        )
     else:
         st.write("Please upload an image to proceed.")
 
@@ -1165,12 +1200,12 @@ elif st.session_state.current_page == "image_operations":
     Stay tuned for an exciting exploration of video handling!
     """)
 
+    # First row: Colab Notes and Main Page
     col1, col2 = st.columns(2)
     
-    # First row: Colab Notes and Main Page
     with col1:
         st.markdown("""
-            <a href="https://colab.research.google.com/drive/126XjnPWAmXB623-1KmerDT_fsJKH6Gc4?usp=sharing" target="_blank">
+            <a href="https://colab.research.google.com/drive/YOUR_COLAB_NOTEBOOK_LINK" target="_blank" title="Open Colab Notes">
                 <button style="background-color: #4CAF50; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;">
                     Colab Notes
                 </button>
@@ -1179,18 +1214,22 @@ elif st.session_state.current_page == "image_operations":
     
     with col2:
         if st.button("Unstructured Data"):
-            navigate_to("main")  # Main page: Images & Videos
+            navigate_to("main")
+            st.query_params.update({})  # Reset scroll position
     
-    # Second row: Previous Page and Next Page
+    # Second row: Custom Navigation Buttons
     col3, col4 = st.columns(2)
     
     with col3:
-        if st.button("⬅️ Prev Page"):
-            navigate_to("opencv_operations")  # Previous page: Image Operations with OpenCV
+        if st.button("⬅️Back to Image Operations"):
+            navigate_to("opencv_operations")  # Replace with the actual previous page identifier
+            st.query_params.update({})  # Reset scroll position
     
     with col4:
-        if st.button("➡️ Next Page"):
-            navigate_to("video_processing")  # Next page: Video Processing with OpenCV
+        if st.button("➡️Explore Video Processing"):
+            navigate_to("video_processing")  # Replace with the actual next page identifier
+            st.query_params.update({})  # Reset scroll position
+
 
             
 
@@ -1489,9 +1528,9 @@ elif st.session_state.current_page == "video_processing":
     Get ready to learn about powerful image transformation techniques!
     """)
 
-    col1, col2 = st.columns(2)
-    
     # First row: Colab Notes and Main Page
+    col1, col2 = st.columns(2)
+
     with col1:
         st.markdown("""
             <a href="https://colab.research.google.com/drive/1zzovaAr4NNJoJSR-lA9ApSyPguLKf3UB?usp=sharing" target="_blank">
@@ -1500,21 +1539,24 @@ elif st.session_state.current_page == "video_processing":
                 </button>
             </a>
         """, unsafe_allow_html=True)
-    
+
     with col2:
         if st.button("Unstructured Data"):
             navigate_to("main")  # Main page: Images & Videos
-    
-    # Second row: Previous Page and Next Page
+            st.query_params.update({})  # Ensure scroll resets
+
+    # Second row: Previous Page and Video Transformations
     col3, col4 = st.columns(2)
-    
+
     with col3:
-        if st.button("⬅️ Prev Page"):
+        if st.button("⬅️ Back to Image Operations"):
             navigate_to("image_operations")  # Previous page: Explore Image Creation and Manipulation
-    
+            st.query_params.update({})  # Ensure scroll resets
+
     with col4:
-        if st.button("➡️ Next Page"):
-            navigate_to("image_transformations")  # Next page: Image Transformations with OpenCV
+        if st.button("➡️ Explore Video Transformations"):
+            navigate_to("video_transformations")  # Next page: Explore Video Transformations with OpenCV
+            st.query_params.update({})  # Ensure scroll resets
 
 
 elif st.session_state.current_page == "image_transformations":
@@ -1931,25 +1973,33 @@ elif st.session_state.current_page == "image_transformations":
         st.warning("Please select a valid transformation type to proceed.")
 
     col1, col2 = st.columns(2)
+    
+    # First row: Colab Notes and Unstructured Data
     with col1:
         st.markdown("""
-            <a href="https://colab.research.google.com/drive/19mQM-7VY0F0y9NyecrhbU5kyOY9j9oIk?usp=sharing" target="_blank">
+            <a href="https://colab.research.google.com/drive/19mQM-7VY0F0y9NyecrhbU5kyOY9j9oIk?usp=sharing" target="_blank" title="Open Colab Notes">
                 <button style="background-color: #4CAF50; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;">
                     Colab Notes
                 </button>
             </a>
         """, unsafe_allow_html=True)
+    
     with col2:
-        if st.button("Unstructured Data"):
+        if st.button("Back to Unstructured Data"):
             st.session_state.current_page = "main"
-
+            st.query_params.update({})
+    
+    # Second row: Back to and Explore Navigation
     col3, col4 = st.columns(2)
     with col3:
-        if st.button("⬅️ Prev Page"):
+        if st.button("⬅️ Back to Video Processing"):
             st.session_state.current_page = "video_processing"
+            st.query_params.update({})
     with col4:
-        if st.button("➡️ Next Page"):
+        if st.button("➡️ Explore OpenCV Projects"):
             st.session_state.current_page = "opencv_projects"
+            st.query_params.update({})
+
 
 
 elif st.session_state.current_page == "opencv_projects":
@@ -2043,13 +2093,16 @@ elif st.session_state.current_page == "opencv_projects":
     
     # Column 1 - Button to go back to the Image Transformations page
     with col1:
-        if st.button("⬅️ Image Transformations with OpenCV"):
+        if st.button("⬅️ Image Transformations with OpenCV", help="Navigate back to the Image Transformations section"):
             navigate_to("image_transformations")
+            st.query_params.update({})  # Ensure scroll resets
     
     # Column 2 - Button for the main page (Images & Videos)
     with col2:
-        if st.button("Unstructured Data"):
-            navigate_to("main")  # Main page: Images & Videos
+        if st.button("Unstructured Data", help="Navigate to the main page for Images & Videos"):
+            navigate_to("main")
+            st.query_params.update({})  # Ensure scroll resets
+
 
 
     
@@ -2246,7 +2299,9 @@ elif st.session_state.current_page == "explore_csv":
     
     with col2:
         if st.button("⬅️ Back to Previous Page"):
-            st.session_state.current_page = "main" 
+            st.session_state.current_page = "main"
+            st.query_params.update({})  # Ensure scroll resets
+
 
 
 #--------------------------------------------------------- Json --------------------------------------------------------------------------------
@@ -2580,7 +2635,9 @@ elif st.session_state.current_page == "explore_json":
     
     with col2:
         if st.button("⬅️ Back to Previous Page"):
-            st.session_state.current_page = "main" 
+            st.session_state.current_page = "main"
+            st.query_params.update({})  # Ensure scroll resets
+
 
 
 #--------------------------------------------------------- XML -------------------------------------------------------------------------------
@@ -2732,7 +2789,9 @@ elif st.session_state.current_page == "explore_xml":
     
     with col2:
         if st.button("⬅️ Back to Previous Page"):
-            st.session_state.current_page = "main" 
+            st.session_state.current_page = "main"
+            st.query_params.update({})  # Ensure scroll resets
+
 
 #--------------------------------------------------------- HTML --------------------------------------------------------------------------------
 
@@ -2800,7 +2859,6 @@ elif st.session_state.current_page == "explore_html":
     data.to_html('output.html', index=False)
     """, language="python")
 
-
     col1, col2 = st.columns(2)
     
     with col1:
@@ -2814,4 +2872,6 @@ elif st.session_state.current_page == "explore_html":
     
     with col2:
         if st.button("⬅️ Back to Previous Page"):
-            st.session_state.current_page = "main" 
+            st.session_state.current_page = "main"
+            st.query_params.update({})  # Ensure scroll resets
+