Update pages/Data Collection.py

pages/Data Collection.py

@@ -266,8 +266,7 @@ elif st.session_state.current_page == "explore_images_video":
         <h2 style="color: #BB3385;">Introduction to Images and Videos📸🖼️</h2>
     """, unsafe_allow_html=True)
 
-    # Subheading 1: What is an Image?
-    st.markdown("""
+    st.write("""
         <div style="text-align: left; margin-top: 20px;">
             <h3 style="color: #5b2c6f;">What is an Image?📊✨</h3>
             <p style="font-size: 16px; color: #333;">
@@ -279,8 +278,7 @@ elif st.session_state.current_page == "explore_images_video":
         </div>
     """, unsafe_allow_html=True)
 
-    # Subheading 2: What is a Video?
-    st.markdown("""
+    st.write("""
         <div style="text-align: left; margin-top: 20px;">
             <h3 style="color: #5b2c6f;">What is a Video?🎥✨</h3>
             <p style="font-size: 16px; color: #333;">
@@ -294,12 +292,11 @@ elif st.session_state.current_page == "explore_images_video":
         </div>
     """, unsafe_allow_html=True)
 
-    # Subheading 3: Why is an Image Called a Grid-Like Structure?
-    st.markdown("""
+    st.write("""
         <div style="text-align: left; margin-top: 20px;">
             <h3 style="color: #5b2c6f;">Why is an Image Called a Grid-Like Structure?🔲✨</h3>
             <p style="font-size: 16px; color: #333;">
-                Images are called **grid-like structures** because they are composed of **pixels** arranged in rows and columns, 
+                Images are called **grid-like structures because they are composed of **pixels** arranged in rows and columns, 
                 forming a rectangular grid. Each pixel contains information about **shape**, **color**, and **patterns**, which 
                 together define the image's content. 
                 The total number of pixels is determined by the image's height and width (resolution), and a higher resolution provides better clarity.
@@ -314,7 +311,7 @@ elif st.session_state.current_page == "explore_images_video":
             </p>
         </div>
     """, unsafe_allow_html=True)
-    import streamlit as st
+
 
     # Visualization for Grid-Like Structure
     st.markdown("<h4 style='color: #BB3385;'>Image as a Grid Structure</h4>", unsafe_allow_html=True)
@@ -339,13 +336,15 @@ elif st.session_state.current_page == "explore_images_video":
     ax.set_xticklabels([f'Col {j+1}' for j in range(width)], fontsize=4)  # Smaller label size
     ax.set_yticklabels([f'Row {i+1}' for i in range(height)], fontsize=4)  # Smaller label size
     ax.grid(color='white', linestyle='-', linewidth=0.5)  # Thinner grid lines
-    fig.colorbar(cax, ax=ax, orientation='vertical', label='Pixel Value', fontsize=4)
+    
+    # Color bar setup without fontsize argument
+    cbar = fig.colorbar(cax, ax=ax, orientation='vertical', label='Pixel Value')
+    cbar.ax.tick_params(labelsize=4)  # Adjust the font size of the color bar
     
     # Display the plot
     st.pyplot(fig)
 
 
-
     # Go Back Button
     if st.button("Go Back"):
         navigate_to("main")