Update pages/Data Collection.py

pages/Data Collection.py

@@ -345,6 +345,7 @@ elif st.session_state.current_page == "explore_images_video":
     # Display the plot
     st.pyplot(fig)
 
+    # Section: What are Color Spaces?
     st.write("""
     <div style="text-align: left; margin-top: 20px;">
         <h3 style="color: #5b2c6f;">What are Color Spaces?</h3>
@@ -354,7 +355,12 @@ elif st.session_state.current_page == "explore_images_video":
             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)
     
+    # 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>
         <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, 
@@ -362,37 +368,53 @@ elif st.session_state.current_page == "explore_images_video":
             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>
+    </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:
         </p>
+    </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>
-
-    <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)
-
-
-
+    </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