Update pages/Data Collection.py

pages/Data Collection.py

@@ -346,38 +346,50 @@ 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;">
-                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>
+    <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;">
-                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: #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, 
+            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;">
-                Below are some common color spaces used in image processing:
-            </p>
-    
-            <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>
+        <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>
     
-            <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;">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;">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)
+        <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)
+