Update pages/Data Collection.py

pages/Data Collection.py

@@ -296,7 +296,7 @@ elif st.session_state.current_page == "explore_images_video":
         <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.
@@ -315,17 +315,17 @@ elif st.session_state.current_page == "explore_images_video":
 
     # Visualization for Grid-Like Structure
     st.markdown("<h4 style='color: #BB3385;'>Image as a Grid Structure</h4>", unsafe_allow_html=True)
-    height, width = 6, 6 
+    height, width = 3,3
     grid = np.random.rand(height, width)
     
     # Adjust the figure size to make the plot very small
-    fig, ax = plt.subplots(figsize=(3, 3))  # Even smaller figure size
+    fig, ax = plt.subplots(figsize=(1, 1))  # Even smaller figure size
     cax = ax.imshow(grid, cmap='viridis')
     
     # Annotate the grid with pixel labels
     for i in range(height):
         for j in range(width):
-            ax.text(j, i, f'{grid[i, j]:.2f}', ha='center', va='center', color='white', fontsize=4)  # Smaller fontsize
+            ax.text(j, i, f'{grid[i, j]:.2f}', ha='center', va='center', color='white', fontsize=2)  # Smaller fontsize
     
     # Set axis labels and title
     ax.set_title("Image as a Grid-Like Structure", fontsize=6)  # Smaller title size
@@ -339,7 +339,7 @@ elif st.session_state.current_page == "explore_images_video":
     
     # 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
+    cbar.ax.tick_params(labelsize=2)  # Adjust the font size of the color bar
     
     # Display the plot
     st.pyplot(fig)