Update pages/Data Collection.py

pages/Data Collection.py

@@ -269,7 +269,7 @@ elif st.session_state.current_page == "explore_images_video":
     # 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>
+            <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 <strong>colors</strong>, <strong>shapes</strong>, and <strong>textures</strong>, 
@@ -282,7 +282,7 @@ elif st.session_state.current_page == "explore_images_video":
     # 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>
+            <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 
@@ -296,7 +296,7 @@ elif st.session_state.current_page == "explore_images_video":
     # 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 <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 
@@ -346,15 +346,26 @@ elif st.session_state.current_page == "explore_images_video":
     st.pyplot(fig)
 
     st.write("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #5b2c6f;">What are color spaces?🎥✨</h3>
-            <p style="font-size: 16px; color: #333;">
-
-            </p>
+    <div style="text-align: left; margin-top: 20px;">
+        <h3 style="color: #5b2c6f;">What are Color Spaces?</h3>
+        <p style="font-size: 16px; color: #333;">
+            A <strong>color space</strong> is a technique used to represent the colors of an image in a numerical format. It allows us to preserve the color information while converting it into a form that machines can understand. Since machines cannot "see" images as humans do, they interpret numerical values. Therefore, color spaces are crucial for converting images into a format that can be processed by a machine.
+        </p>
+        <p style="font-size: 16px; color: #333;">
+            For example, when building a machine learning model to classify images of dogs and cats, we provide the model with images. However, the machine cannot directly understand these images. To help the machine "understand," we need to convert the image data into numbers. Color spaces play a key role here by transforming the colors in the image into numerical values.
+        </p>
+        <p style="font-size: 16px; color: #333;">
+            Color spaces are essential in image processing because they enable the machine to work with pixel data. These spaces help preserve the color information while making it computationally possible for the model to learn from the images and classify them accurately.
+        </p>
+        <h4 style="color: #5b2c6f;">Common Color Spaces</h4>
+        <ul style="font-size: 16px; color: #333;">
+            <li><strong>Black and White:</strong> This color space represents an image with just two colors—black and white. It is used to simplify images by focusing on brightness or contrast, often by removing color.</li>
+            <li><strong>Grayscale:</strong> Grayscale images use various shades of gray to represent the colors in an image. It has 256 levels, ranging from black to white, with different intensities of gray in between. This is often used in tasks where color is not needed.</li>
+            <li><strong>Red, Green, Blue (RGB):</strong> RGB is one of the most common color spaces in digital imaging. It represents colors by combining red, green, and blue light, with each channel having a value between 0 and 255. Different combinations of these three colors can produce various shades and tones.</li>
+            </ul>
         </div>
     """, unsafe_allow_html=True)
 
-