Update pages/Info _of_Image.py

pages/Info _of_Image.py

@@ -116,40 +116,40 @@ with col1:
     if st.button("Color Space"):
         st.markdown("<h2 style='text-align: left; color: Black;'>What is Colour Space?</h2>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
-        "Color space refers to the specific organization of colors, which helps in the reproduction of color in both physical and digital environments. Common color spaces include RGB, CMYK, and HSV.Common color spaces include RGB, CMYK, and HSV. Each color space has different uses and is based on distinct principles:"
-        "</p>", 
-        unsafe_allow_html=True
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "Color space refers to the specific organization of colors, which helps in the reproduction of color in both physical and digital environments. Common color spaces include RGB, CMYK, and HSV. Each color space has different uses and is based on distinct principles:"
+            "</p>", 
+            unsafe_allow_html=True
         )
         st.markdown("<h3 style='text-align: left; color: Black;'>RGB (Red, Green, Blue): </h3>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
-        "This color model is based on the way human vision perceives light. In RGB, colors are created by combining different intensities of red, green, and blue light. It is primarily used for screens and digital displays like monitors and televisions."
-         "</p>",   
-        unsafe_allow_html=True
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "This color model is based on the way human vision perceives light. In RGB, colors are created by combining different intensities of red, green, and blue light. It is primarily used for screens and digital displays like monitors and televisions."
+            "</p>",   
+            unsafe_allow_html=True
         )
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
             "we use cv2.cvtColor() to convert the image from RGB (or BGR in OpenCV) to Grayscale."
             "</p>",
             unsafe_allow_html=True
         )
         st.markdown("<h3 style='text-align: left; color: Black;'>CMYK (Cyan, Magenta, Yellow, Key/Black): </h3>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
-        "The CMYK color space is used in color printing. It relies on the subtractive model, where colors are created by subtracting light through layers of ink. When combined in various proportions, CMYK creates a wide range of colors."
-         "</p>",
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "The CMYK color space is used in color printing. It relies on the subtractive model, where colors are created by subtracting light through layers of ink. When combined in various proportions, CMYK creates a wide range of colors."
+            "</p>",
             unsafe_allow_html=True
         )
-        st.markdown("<h3 style='text-align: left; color: Black;'>HSV (Hue, Saturation, Value): : </h3>", unsafe_allow_html=True)
+        st.markdown("<h3 style='text-align: left; color: Black;'>HSV (Hue, Saturation, Value): </h3>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
             "This model is often used in graphic design and image processing, as it aligns more closely with how humans perceive color. It allows for easier manipulation of color through hue (the type of color), saturation (the intensity), and value (brightness)."
             "</p>",
             unsafe_allow_html=True
         )
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
             "Each color space is suited for different applications, depending on the medium and technology used. Choosing the correct color space is crucial for ensuring that colors appear as intended, whether you're working with digital graphics, web design, or printed materials."
             "</p>",
             unsafe_allow_html=True
@@ -157,7 +157,7 @@ with col1:
         st.markdown("<h3 style='text-align: left; color: Black;'>splitting and merging the image colours </h3>", unsafe_allow_html=True)
         st.markdown("<h4 style='text-align: left; color: Black;'>cv2.cvtColor() & cv2.split() </h4>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
             "This function is used to convert images from one color space to another. You can convert from RGB to Grayscale, RGB to HSV, and many other color spaces."
             "This function splits a color image into its individual channels (e.g., Blue, Green, Red for RGB images)."
             "</p>",
@@ -167,44 +167,20 @@ with col1:
     if st.button("Video"):
         st.markdown("<h2 style='text-align: left; color: Black;'>What is Video</h2>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
-        "A video is a series of images (called frames) displayed sequentially at a certain speed, or frame rate, to create the illusion of motion. Videos can be captured through cameras, created by animation software, or generated from other digital sources."
-        "</p>",
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "A video is a series of images (called frames) displayed sequentially at a certain speed, or frame rate, to create the illusion of motion. Videos can be captured through cameras, created by animation software, or generated from other digital sources."
+            "</p>",
             unsafe_allow_html=True
         )
         st.markdown("<h2 style='text-align: left; color: Black;'>Converting Images into Videos</h2>", unsafe_allow_html=True)
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
             "Converting images into a video involves displaying a sequence of images (frames) in rapid succession to create the effect of motion. The key steps include"
-             "</p>",
+            "</p>",
             unsafe_allow_html=True
         )
         st.markdown(
-        "<p style='font-size: 16px; color: White; font-style: italic;'>"
+            "<p style='font-size: 16px; color: White; font-style: italic;'>"
             "Frame Rate: The number of frames shown per second (fps). Standard rates include 24 fps for cinema, 30 fps for TV, and 60 fps for high-definition videos."
             "Resolution: The size of each frame (e.g., 1920x1080 pixels). All frames in a video must have the same resolution."
-            "Encoding: After the frames are generated, they are encoded into a video file format (e.g., MP4, AVI, etc.) using a codec (e.g., H.264)."
-            "This process makes the images appear as continuous motion, a crucial component of video creation."
-            "</p>",
-            unsafe_allow_html=True
-        )
-      if st.button("Affline Methods"):
-         
-
-        
-            
-        
-    
-
-
-        
-
-
-# Add a link to the code
-st.markdown(
-    "<p style='font-size: 16px; color: White;'>"
-    "You can view and run the code in Colab: "
-    "<a href='https://colab.research.google.com/drive/1fvP-k70HJnp1iCN7Vs-tkfFs8vq--WGc?usp=sharing' target='_blank' style='color: #FFD700;'>Colab Notebook</a>"
-    "</p>", 
-    unsafe_allow_html=True
-)
+            "Encoding: