Update pages/Data Collection.py

pages/Data Collection.py

@@ -258,10 +258,16 @@ elif st.session_state.current_page == "explore_excel":
     if st.button("Go Back"):
         navigate_to("main")
 
+import streamlit as st
+import matplotlib.pyplot as plt
+import numpy as np
+
 elif st.session_state.current_page == "explore_images_video":
     st.markdown("""
         <h2 style="color: #BB3385;">Introduction to Images and Videos📸🖼️</h2>
     """, unsafe_allow_html=True)
+
+    # Subheading 1: What is an Image?
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
             <h3 style="color: #5b2c6f;">What is an Image?📊✨</h3>
@@ -272,22 +278,74 @@ elif st.session_state.current_page == "explore_images_video":
             </p>
         </div>
     """, unsafe_allow_html=True)
+
+    # Subheading 2: What is a Video?
     st.markdown("""
         <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 
+                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 
-                per second, 60 frames per second), which determines how many frames are displayed per second, influencing the smoothness 
-                of the video. Formats such as MP4, AVI, and MOV are commonly used for storing and sharing videos.
+                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.markdown("""
+        <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 
+                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.
+            </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 
+                of features and data points gives images their grid-like nature.
+            </p>
+            <p style="font-size: 16px; color: #333;">
+                While images and tabular data are both grid-like, the difference lies in interpretation: in images, the 
+                grid represents one data point, while in tabular data, rows represent data points, and columns represent features.
+            </p>
+        </div>
+    """, unsafe_allow_html=True)
+
+    # 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
+    grid = np.random.rand(height, width)
+    fig, ax = plt.subplots()
+    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=6)
+
+    # Set axis labels and title
+    ax.set_title("Image as a Grid-Like Structure", fontsize=12)
+    ax.set_xlabel("Width (Pixels)", fontsize=10)
+    ax.set_ylabel("Height (Pixels)", fontsize=10)
+    ax.set_xticks(range(width))
+    ax.set_yticks(range(height))
+    ax.set_xticklabels([f'Col {j+1}' for j in range(width)])
+    ax.set_yticklabels([f'Row {i+1}' for i in range(height)])
+    ax.grid(color='white', linestyle='-', linewidth=1)
+    fig.colorbar(cax, ax=ax, orientation='vertical', label='Pixel Value')
+
+    st.pyplot(fig)
+
+    # Go Back Button
     if st.button("Go Back"):
         navigate_to("main")
 
 
 
+
 elif st.session_state.current_page == "explore_audio":
     st.markdown("""
         <h3 style="color: #e25822;">Exploring Audio</h3>