Update pages/Data Collection.py

pages/Data Collection.py

@@ -271,7 +271,7 @@ elif st.session_state.current_page == "explore_images_video":
             <h3 style="color: #5b2c6f;">What is an Image?📊✨</h3>
             <p style="font-size: 16px; color: #333;">
                 An image is a two-dimensional representation of the visible light spectrum, often captured 
-                using devices like cameras or scanners. It can store details such as colors, shapes, and textures, 
+                using devices like cameras or scanners. It can store details such as **colors**, **shapes**, and **textures**, 
                 enabling us to visually interpret and analyze information. 
                 Common formats include JPEG, PNG, and BMP.
             </p>
@@ -296,13 +296,13 @@ 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, 
-                forming a rectangular grid. Each pixel contains information about **shape**, **color**, and **patterns**, which 
+                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.
+                The total number of **pixels** is determined by the image's height and width (resolution), and a higher resolution provides better clarity.
             </p>
             <p style="font-size: 16px; color: #333;">
-                In images, **pixels act as features**, and the entire grid represents a single data point. This combination 
+                In images, **pixels** act as features, and the entire grid represents a single data point. This combination 
                 of features and data points gives images their grid-like nature.
             </p>
             <p style="font-size: 16px; color: #333;">
@@ -314,18 +314,18 @@ 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 = 3,3
+    st.write("<h4 style='color: #BB3385;'>Image as a Grid Structure</h4>", unsafe_allow_html=True)
+    height, width = 6,6
     grid = np.random.rand(height, width)
     
     # Adjust the figure size to make the plot very small
-    fig, ax = plt.subplots(figsize=(1, 1))  # Even smaller figure size
-    cax = ax.imshow(grid, cmap='viridis')
-    
+    fig, ax = plt.subplots(figsize=(3, 3))  # Even smaller figure size
+    cax = ax.imshow(grid, cmap='viridis', interpolation='nearest')
+
     # 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=2)  # Smaller fontsize
+            ax.text(j, i, f'{grid[i, j]:.2f}', ha='center', va='center', color='white', fontsize=4)  # 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=2)  # Adjust the font size of the color bar
+    cbar.ax.tick_params(labelsize=4)  # Adjust the font size of the color bar
     
     # Display the plot
     st.pyplot(fig)