Update pages/Data Collection.py

pages/Data Collection.py

@@ -1,6 +1,8 @@
 import streamlit as st
 import pandas as pd
 import numpy as np
+import matplotlib.pyplot as plt
+
 
 st.set_page_config(
     page_title="HomePage",
@@ -273,7 +275,9 @@ elif st.session_state.current_page == "explore_images_video":
             <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, 
-                enabling us to visually interpret and analyze information. Common formats include JPEG, PNG, and BMP.
+                enabling us to visually interpret and analyze information. 
+                
+                Common formats include JPEG, PNG, and BMP.
             </p>
         </div>
     """, unsafe_allow_html=True)
@@ -285,7 +289,9 @@ elif st.session_state.current_page == "explore_images_video":
             <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>
@@ -297,13 +303,15 @@ 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 
-                together define the image's content. The total number of pixels is determined by the image's height 
+                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 
+                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;">