Update pages/Data Collection.py

pages/Data Collection.py

@@ -345,16 +345,18 @@ elif st.session_state.current_page == "explore_images_video":
     # Display the plot
     st.pyplot(fig)
 
+import streamlit as st
+
     # Section: What are Color Spaces?
     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.
+            A <strong>color space</strong> is a technique used to represent the <strong>colors of an image</strong> in a 
+            numerical format. It allows us to preserve the <strong>color information</strong> while converting it into a 
+            form that machines can understand. Since machines cannot <strong>"see"</strong> images as humans do, they interpret 
+            <strong>numerical values</strong>. Therefore, color spaces are crucial for converting images into a format 
+            that can be processed by a machine.
         </p>
     </div>
     """, unsafe_allow_html=True)
@@ -364,28 +366,32 @@ elif st.session_state.current_page == "explore_images_video":
     <div style="text-align: left; margin-top: 20px;">
         <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 
-            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.
+            Imagine you're building a <strong>machine learning model</strong> to classify images of 
+            <strong>dogs and cats</strong>. You provide the model with images, but since the machine cannot understand 
+            images directly, you need to convert them into <strong>numerical data</strong>. This is where 
+            <strong>color spaces</strong> play a vital role. They help convert the <strong>color information</strong> in 
+            the images into numbers that the machine can process, allowing it to <strong>learn from the data</strong> 
+            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;">
-            These are some of the common color spaces used in image processing:
+            These are some of the <strong>common color spaces</strong> used in <strong>image processing</strong>:
         </p>
         <ol style="font-size: 16px; color: #333;">
-            <li>Black and White</li>
-            <li>Grayscale</li>
-            <li>Red, Green, Blue (RGB)</li>
+            <li><strong>Black and White</strong></li>
+            <li><strong>Grayscale</strong></li>
+            <li><strong>Red, Green, Blue (RGB)</strong></li>
         </ol>
     </div>
     """, unsafe_allow_html=True)
 
+
     # Go Back Button
     if st.button("Go Back"):
         navigate_to("main")