Update pages/Data Collection.py

pages/Data Collection.py

@@ -266,43 +266,45 @@ 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.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;">
                 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 <strong>colors</strong>, <strong>shapes</strong>, and <strong>textures</strong>, 
                 enabling us to visually interpret and analyze information. 
                 Common formats include JPEG, PNG, and BMP.
             </p>
         </div>
     """, unsafe_allow_html=True)
 
+    # Subheading 2: What is a Video?
     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;">
                 A video is a collection of images, often referred to as frames, displayed one after another quickly 
                 to show continuous movement. Each frame captures a moment in time, and when these frames are played 
-                sequentially, they show continuous movement. 
-                Videos typically have a frame rate (e.g., 30 frames 
+                sequentially, they show continuous movement. Videos typically have a frame rate (e.g., 30 frames 
                 per second or 60 frames per second), which determines how many frames are displayed per second. 
                 Common video formats include MP4, AVI, and MOV.
             </p>
         </div>
     """, unsafe_allow_html=True)
 
+    # Subheading 3: Why is an Image Called a Grid-Like Structure?
     st.write("""
         <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #5b2c6f;">Why is an Image Called a Grid-Like Structure?</h3>
+            <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 <strong>grid-like structures</strong> because they are composed of <strong>pixels</strong> arranged in rows and columns, 
+                forming a rectangular grid. Each <strong>pixel</strong> contains information about <strong>shape</strong>, <strong>color</strong>, and <strong>patterns</strong>, 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 <strong>pixels</strong> 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, <strong>pixels</strong> 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;">
@@ -324,7 +326,7 @@ elif st.session_state.current_page == "explore_images_video":
     # 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', fontsize=4)  # Smaller fontsize
     
     # Set axis labels and title
     ax.set_title("Image as a Grid-Like Structure", fontsize=5)  # Smaller title size