Update pages/Data Collection.py

pages/Data Collection.py

@@ -352,8 +352,9 @@ elif st.session_state.current_page == "explore_images_video":
         <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.
+            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>
     </div>
     """, unsafe_allow_html=True)
@@ -361,7 +362,7 @@ elif st.session_state.current_page == "explore_images_video":
     # Section: Example of How ML Models Work with Images
     st.write("""
     <div style="text-align: left; margin-top: 20px;">
-        <h4 style="color: #2a52be;">For Example: How Machine Learning Models Work With Images 🖼️</h4>
+        <h4 style="color: #e25822;">For Example:</h4>
         <p style="font-size: 16px; color: #333;">
             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 
@@ -371,51 +372,19 @@ elif st.session_state.current_page == "explore_images_video":
     </div>
     """, unsafe_allow_html=True)
     
-    # Section: Common Color Spaces
     st.write("""
     <div style="text-align: left; margin-top: 20px;">
         <h4 style="color: #5b2c6f;">Common Color Spaces</h4>
         <p style="font-size: 16px; color: #333;">
-            Below are some common color spaces used in image processing:
+            These are some of the common color spaces used in image processing:
         </p>
+        <ol style="font-size: 16px; color: #333;">
+            <li>Black and White</li>
+            <li>Grayscale</li>
+            <li>Red, Green, Blue (RGB)</li>
+        </ol>
     </div>
     """, unsafe_allow_html=True)
-    
-    # Subsection: Black and White
-    st.write("""
-    <div style="text-align: left; margin-top: 10px;">
-        <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>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Subsection: Grayscale
-    st.write("""
-    <div style="text-align: left; margin-top: 10px;">
-        <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>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Subsection: RGB
-    st.write("""
-    <div style="text-align: left; margin-top: 10px;">
-        <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)
-
 
     # Go Back Button
     if st.button("Go Back"):