Update pages/Data Collection.py

pages/Data Collection.py

@@ -345,26 +345,40 @@ elif st.session_state.current_page == "explore_images_video":
     # Display the plot
     st.pyplot(fig)
 
-    st.write("""
+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;">
             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>
+
+        <h4 style="color: #2a52be;">For Example: How Machine Learning Models Work With Images 🖼️</h4>
         <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.
+            Imagine you're building a machine learning model to classify images of dogs and cats. You provide the model with images, but since the machine cannot understand images directly, you need to convert them into numerical data. This is where color spaces play a vital role. They help convert the color information in the images into numbers that the machine can process, allowing it to learn from the data and make accurate predictions.
         </p>
+        
+        <h4 style="color: #5b2c6f;">Common Color Spaces</h4>
         <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.
+            Below are some common color spaces used in image processing:
         </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)
+        
+        <h5 style="color: #333;">1. Black and White</h5>
+        <p style="font-size: 16px; color: #333;">
+            This color space represents an image with just two colors—black and white. It is often used to simplify images by focusing on brightness or contrast, removing the color information.
+        </p>
+
+        <h5 style="color: #333;">2. Grayscale</h5>
+        <p style="font-size: 16px; color: #333;">
+            Grayscale images use different shades of gray to represent the colors in an image. It has 256 levels, ranging from black to white, with varying intensities of gray in between. This color space is often used in tasks where color is not essential.
+        </p>
+
+        <h5 style="color: #333;">3. Red, Green, Blue (RGB)</h5>
+        <p style="font-size: 16px; color: #333;">
+            RGB is one of the most common color spaces used in digital imaging. It represents colors by combining red, green, and blue light. Each channel has values between 0 and 255, and by mixing these three colors, we can create a wide range of colors.
+        </p>
+    </div>
+""", unsafe_allow_html=True)
+