Update pages/Info _of_Image.py

pages/Info _of_Image.py

@@ -52,123 +52,591 @@ custom_css = """
 """
 
 # Inject the CSS into the app
-st.markdown(custom_css, unsafe_allow_html=True)
-
-# Page content
-st.markdown("<h2 style='text-align: left; color: Black;'>What is IMAGE</h2>", unsafe_allow_html=True)
+st.markdown("<div class='title'>Introduction to Image Data 📊</div>", unsafe_allow_html=True)
+    
 st.markdown(
-    "<p style='font-size: 16px; color: White; font-style: italic;'>"
-    "An image is a visual depiction of a subject, such as a person, object, scene, or idea, created or captured through means like photography, drawing, painting, or digital tools. It can take various forms, including photographs, illustrations, artworks, or computer-generated visuals."
-    "</p>", 
-    unsafe_allow_html=True
+    """
+    <div class="section">
+        <div class="header">What is an Image?</div>
+        <div class="content">An image is a visual representation of something, such as a person, object, scene, or concept.
+        It can be created using various means and exists in different forms.<br>
+        The image is a 2D grid like structure where every grid represents a pixel and each pixel has its own features. <br>
+        The features in a pixel include theinformation like shape, color, pattern etc.<br>
+        The clarity of an image directly depends on the number of pixels it has. <br>
+        Every array cannot be an image. An array can be an image only when:<br>
+        1) It should be in 2D or 3D representation.<br>
+        2) The datatype should only be an integer.
+        </div>
+    </div>
+    <div class="section">
+        <div class="header">What are Color Spaces?</div>
+        <div class="content">
+        Color Space is a technique by which we can represent the colors of an image.<br>
+        There are 3 types of color spaces namely:<br>
+        1) Black & White Color Space
+        2) Grayscale Color Space
+        3) RGB  Color Space
+        </div>
+    </div>
+    <div class="section">
+        <div class="header">Black & White Color Space</div>
+        <div class="content">
+        In this Color Space, there are only 2 colors to represent the image which are black & white.<br>
+        Here, 0 represents black and 1 represents white.
+        </div>
+    </div>
+    <div class="section">
+        <div class="header">Grayscale Color Space</div>
+        <div class="content">
+        In this Color Space, we have black, white and multiple shades of gray to represent the image.<br>
+        Here, 0 represents black, 255 represents white, and 1 to 254 represent various shades of gray.
+        </div>
+    </div>
+    <div class="section">
+        <div class="header">RGB Color Space</div>
+        <div class="content">
+        In this Color Space, we create a 3D structure with three 2D channels namely blue, green and red channels
+        where 0 represents absense of color and 255 represents presense of color.<br>
+        These 3 channels are stacked one after the another like a layered structure.<br>
+        The blue channel has 0 which represents black, 255 which represents blue and 1 to 254 represent multiple shades of blue.<br>
+        The green channel has 0 which represents black, 255 which represents green and 1 to 254 represent multiple shades of green.<br>
+        The red channel has 0 which represents black, 255 which represents red and 1 to 254 represent multiple shades of red.<br>
+        </div><br><br>
+    </div>
+    """,
+    unsafe_allow_html=True,
 )
+if st.button("Next Page: Basic operations on an Image"):
+        st.session_state['page'] = 'image_operations'
 
-st.markdown("<h2 style='text-align: left; color: Black;'>Features of IMAGE</h2>", unsafe_allow_html=True)
-st.markdown(
-    "<p style='font-size: 16px; color: White; font-style: italic;'>"
-    "Pixels: Images are composed of small dots called pixels, each containing color data that together create the overall image."
-    "</p>", 
-    unsafe_allow_html=True
-)
-st.markdown(
-    "<p style='font-size: 16px; color: White; font-style: italic;'>"
-    "File Formats: Images can be stored in different formats,"
-    "JPEG/JPG: Widely used for photographs and online images due to their efficient balance between quality and file size."
-    "PNG: Preferred for high-quality visuals or images requiring transparency, such as logos."
-    "GIF: Commonly utilized for basic animations or compact graphics."
-    "</p>", 
-    unsafe_allow_html=True
-)
+if page == 'image_operations':
+    st.markdown("<div class='title'>Basic Operations on an Image</div>", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">Operations on image  data</div>
+            <div class="content">There are 3 major operations which can be performed on an image namely:<br>
+            1) Reading an image<br>
+            2) Writing an image<br>
+            3) Showing an image
+            </div>
+        <div class="section">
+            <div class="header">Reading an image</div>
+            <div class="content">
+            For this operation, we have to import <code>cv2</code> module and use the method <code>imread()</code>. 
+            The method <code>imread()</code> is used to convert an image file into a numpy array.
+            </div>
+        </div>
+        <div class="section">
+            <div class="header">Writing an image</div>
+            <div class="content">
+            For this operation, we have to import <code>cv2</code> module and use the method <code>imwrite()</code>. 
+            The method <code>imwrite()</code> is used to convert a numpy array back into an image file.
+            </div>
+        </div>
+        <div class="section">
+            <div class="header">Showing an image</div>
+            <div class="content">
+            For this operation, we have to import <code>cv2</code> module and use the method <code>imshow()</code>. 
+            The method <code>imshow()</code> is used to display an array in the form of an image by creating a popup window. 
+            </div>
+        </div><br><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("Open Jupyter Notebook"):
+            st.session_state['jupyter_clicked'] = True
+            st.session_state['pdf_clicked'] = False
+    with col2:
+        if st.button("Open PDF"):
+            st.session_state['pdf_clicked'] = True
+            st.session_state['jupyter_clicked'] = False
 
-# Adding a link to Jupyter
-st.markdown(
-    "<p style='font-size: 16px; color: White;'>"
-    "For more information on Jupyter, visit the official website: "
-    "<a href='https://jupyter.org' target='_blank' style='color: #FFD700;'>Jupyter</a>"
-    "</p>", 
-    unsafe_allow_html=True
-)
+    if st.session_state['jupyter_clicked']:
+        st.markdown(
+            """
+            <div class="section">
+                <div class="header">Jupyter Notebook for Basic Operations on an Image </div>
+                <div class="content">This Jupyter notebook explains the basic operations that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        # Embed the converted HTML file for the notebook
+        notebook_html_path = "pages/basic_img_ops.html"
+        with open(notebook_html_path, "r") as f:
+            notebook_html = f.read()
+        st.components.v1.html(notebook_html, height=500, scrolling=True)
+        
+    elif st.session_state['pdf_clicked']:
+        st.markdown(
+            """
+            <div class="section">
+                <div class="header">PDF file for Basic Operations on an Image</div>
+                <div class="content">This PDFfile explains the basic operations that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        
+        pdf_path = "pages/basic_img_ops.pdf"
+        
+        # Read the PDF file content (binary data)
+        with open(pdf_path, "rb") as file:
+            pdf_data = file.read()  # This is the binary data of the PDF file
 
-st.markdown("<h2 style='text-align: left; color: Black;'>Basic Operations in IMAGE</h2>", unsafe_allow_html=True)
-st.markdown(
-    "<p style='font-size: 16px; color: White; font-style: italic;'>"
-    "For performing this Basic Operations we use cv2 function from opencv library"
-    "cv2 is the Python module for OpenCV (Open Source Computer Vision Library), a powerful library used for computer vision and image processing tasks. It provides a wide range of tools and algorithms for analyzing and manipulating images and videos."
-    "</p>", 
-    unsafe_allow_html=True
-)
+        # Display the PDF in an iframe
+        st.markdown(
+            f'<iframe src="data:application/pdf;base64,{base64.b64encode(pdf_data).decode()}" width="100%" height="600px"></iframe>',
+            unsafe_allow_html=True,
+        )
 
-st.markdown("<h3 style='text-align: left; color: Black;'>Why cv2 is Used</h3>", unsafe_allow_html=True)
-st.markdown(
-    "<p style='font-size: 16px; color: White; font-style: italic;'>"
-    "cv2 is used for various ways like:"
-    "1. Image Processing"
-    "2. Video Analysis"
-    "3. Feature Detection"
-    "4. Image Transformations"
-    "</p>", 
-    unsafe_allow_html=True
-)
+        # Provide download option for the PDF file
+        st.download_button(
+            label="Download PDF",
+            data=pdf_data,  # Provide the binary file data here
+            file_name="basic_img_ops.pdf",  # This is the name that will appear when the user downloads the file
+            mime="application/pdf"
+        )
+    if st.button("Next Page: Working on the Image"):
+        st.session_state['page'] = 'image_working'
 
-st.markdown("<h3 style='text-align: left; color: Black;'>Operations Used</h3>", unsafe_allow_html=True)
-st.markdown("1. imread()")
-st.markdown("2. imshow()")
-st.markdown("3. imwrite()") 
-st.markdown("4. cv2.waitkey()")
-st.markdown("5. destroyAllWindows()")
+elif page == 'image_working':
+    st.markdown("<div class='title'>Working on the Image</div>", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">Understanding split() method</div>
+            <div class="content">
+            For this operation, we have to import <code>cv2</code> module and use the method <code>split()</code>.<br><br>
+            The <code>split()</code> method is used to separate a multi-channel image into its individual single-channel components.<br>
+            </div>
+        <div class="section">
+            <div class="header">Understanding merge() method</div>
+            <div class="content">
+            For this operation, we have to import <code>cv2</code> module and use the method <code>merge()</code>.<br><br> 
+            The <code>merge()</code> method is used to combine multiple single-channel images into a single multi-channel image.<br><br>
+            </div>
+        </div><br><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("Open Jupyter Notebook"):
+            st.session_state['jupyter_clicked'] = True
+            st.session_state['pdf_clicked'] = False
+    with col2:
+        if st.button("Open PDF"):
+            st.session_state['pdf_clicked'] = True
+            st.session_state['jupyter_clicked'] = False
 
-# Buttons for each stage
-st.markdown("###")
-col1, col2, col3 = st.columns(3)
+    if st.session_state['jupyter_clicked']:
+        st.markdown(
+            """
+            <div class="section">
+                <div class="header">Jupyter Notebook for Basic Operations on an Image </div>
+                <div class="content">This Jupyter notebook explains the split and merge methods that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        # Embed the converted HTML file for the notebook
+        notebook_html_path = "pages/working_on_img.html"
+        with open(notebook_html_path, "r") as f:
+            notebook_html = f.read()
+        st.components.v1.html(notebook_html, height=500, scrolling=True)
+        
+    elif st.session_state['pdf_clicked']:
+        st.markdown(
+            """
+            <div class="section">
+                <div class="header">PDF file for Basic Operations on an Image</div>
+                <div class="content">This PDF file explains the split and merge methods that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        
+        pdf_path = "pages/working_on_img.pdf"
+        
+        # Read the PDF file content (binary data)
+        with open(pdf_path, "rb") as file:
+            pdf_data = file.read()  # This is the binary data of the PDF file
 
-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)
+        # Display the PDF in an iframe
         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. Each color space has different uses and is based on distinct principles:"
-            "</p>", 
-            unsafe_allow_html=True
+            f'<iframe src="data:application/pdf;base64,{base64.b64encode(pdf_data).decode()}" width="100%" height="600px"></iframe>',
+            unsafe_allow_html=True,
+        )
+
+        # Provide download option for the PDF file
+        st.download_button(
+            label="Download PDF",
+            data=pdf_data,  # Provide the binary file data here
+            file_name="working_on_img.pdf",  # This is the name that will appear when the user downloads the file
+            mime="application/pdf"
         )
-        st.markdown("<h3 style='text-align: left; color: Black;'>RGB (Red, Green, Blue): </h3>", unsafe_allow_html=True)
+    if st.button("Next Page: Conversion between Color Spaces"):
+        st.session_state['page'] = 'color_space_conversion_on_img'
+
+elif page == 'color_space_conversion_on_img':
+    st.markdown("<div class='title'>Conversion between Color Spaces</div>", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">How to convert one color space to another?</div>
+            <div class="content">
+            In the <code>cv2</code> module, we have an in-built method called <code>cvtColor()</code> 
+            along with in-built parameters for each conversion.<br><br>
+            1) For converting BGR to Grayscale, 
+            We use the parameter <code>COLOR_BGR2GRAY</code> inside the <code>cvtColor()</code> method.<br><br>
+            2) For converting Grayscale to BGR, 
+            We use the parameter <code>COLOR_GRAY2BGR</code> inside the <code>cvtColor()</code> method.<br><br>
+            3) For converting BGR to RGB, 
+            We use the parameter <code>COLOR_BGR2RGB</code> inside the <code>cvtColor()</code> method.<br><br>
+            </div>
+        </div><br><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("Open Jupyter Notebook"):
+            st.session_state['jupyter_clicked'] = True
+            st.session_state['pdf_clicked'] = False
+    with col2:
+        if st.button("Open PDF"):
+            st.session_state['pdf_clicked'] = True
+            st.session_state['jupyter_clicked'] = False
+
+    if st.session_state['jupyter_clicked']:
         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
+            """
+            <div class="section">
+                <div class="header">Jupyter Notebook for Basic Operations on an Image </div>
+                <div class="content">This Jupyter notebook explains the split and merge methods that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
         )
+        # Embed the converted HTML file for the notebook
+        notebook_html_path = "pages/converting_color_spaces.html"
+        with open(notebook_html_path, "r") as f:
+            notebook_html = f.read()
+        st.components.v1.html(notebook_html, height=500, scrolling=True)
+        
+    elif st.session_state['pdf_clicked']:
         st.markdown(
-            "<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
+            """
+            <div class="section">
+                <div class="header">PDF file for Basic Operations on an Image</div>
+                <div class="content">This PDF file explains the split and merge methods that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
         )
-        st.markdown("<h3 style='text-align: left; color: Black;'>CMYK (Cyan, Magenta, Yellow, Key/Black): </h3>", unsafe_allow_html=True)
+        
+        pdf_path = "pages/converting_color_spaces.pdf"
+        
+        # Read the PDF file content (binary data)
+        with open(pdf_path, "rb") as file:
+            pdf_data = file.read()  # This is the binary data of the PDF file
+
+        # Display the PDF in an iframe
         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>",
-            unsafe_allow_html=True
+            f'<iframe src="data:application/pdf;base64,{base64.b64encode(pdf_data).decode()}" width="100%" height="600px"></iframe>',
+            unsafe_allow_html=True,
         )
-        st.markdown("<h3 style='text-align: left; color: Black;'>HSV (Hue, Saturation, Value): </h3>", unsafe_allow_html=True)
+
+        # Provide download option for the PDF file
+        st.download_button(
+            label="Download PDF",
+            data=pdf_data,  # Provide the binary file data here
+            file_name="converting_color_spaces.pdf",  # This is the name that will appear when the user downloads the file
+            mime="application/pdf"
+        )
+    if st.button("Next Page: Affine Transformations on an Image"):
+        st.session_state['page'] = 'affine_transformations'
+
+elif page == 'affine_transformations':
+    st.markdown("<div class='title'>Affine Transformations on an Image</div>", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">What are Affine Transformations?</div>
+            <div class="content">
+            Affine Transformations are a part of Image augmentation.<br>
+            Image augmentation is a technique of creating new images from the existing images.<br>
+            This technique is used to create a balance in the dataset.<br>
+            For a particular label, ff there are less images compared to the other label,
+            we increase the no. of images in that label using Image augmentation.<br><br>
+            Advantages of Affine Transformations include:<br>
+            1) We convert our imbalanced data into balanced data.<br>
+            2) We get new images from old ones<br><br>
+            </div>
+            <div class="header">Types of Affine Transformations?</div>
+            <div class="content">
+            There are 5 types of Affine Transformations namely:<br>
+                1) Translation<br>
+                2) Rotation<br>
+                3) Scaling<br>
+                4) Shearing<br>
+                5) Cropping<br><br>
+            </div>
+            <div class="header">Translation</div>
+            <div class="content">
+            It is a technique of shifting the image by some bits on the X-axis and the Y-axis.<br>
+            The extra bits created are replaced with black color or duplicate pixels.<br>
+            We apply a Translation matrix ( Tm ) for this.<br>
+            </div>
+            <div class="header">Rotation</div>
+            <div class="content">
+            It is a technique of rotating the image by at an angle from the specified position.<br>
+            We apply a Rotation matrix ( Rm ) for this.<br>
+            We can use a combination of Rotation & Translation in the same Rotation matrix ( Rm )<br>
+            </div>
+            <div class="header">Scaling</div>
+            <div class="content">
+            It is a technique of increasing or decreasing the size of the image by a particular scale.<br>
+            We apply a Scaling matrix ( Sm ) for this.<br>
+            We can use a combination of Scaling & Translation in the same Scaling matrix ( Sm )<br>
+            </div>
+            <div class="header">Shearing</div>
+            <div class="content">
+            It is a technique of stretching the image from its edges by a particular value.<br>
+            We apply a Shearing matrix ( Shm ) for this.<br>
+            We can use a combination of Shearing, Scaling & Translation in the same Shearing matrix ( Shm )<br>
+            </div>
+            <div class="header">Cropping</div>
+            <div class="content">
+            It is a technique of extracting or cutting a part of the image from the original image.<br>
+            We don't have a cropping matrix for this  technique.<br>
+            Instead, we have to do it manually using slicing operation on the Numpy array.<br>
+            </div>
+        </div><br><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("Open Jupyter Notebook"):
+            st.session_state['jupyter_clicked'] = True
+            st.session_state['pdf_clicked'] = False
+    with col2:
+        if st.button("Open PDF"):
+            st.session_state['pdf_clicked'] = True
+            st.session_state['jupyter_clicked'] = False
+
+    if st.session_state['jupyter_clicked']:
         st.markdown(
-            "<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
+            """
+            <div class="section">
+                <div class="header">Jupyter Notebook for Basic Operations on an Image </div>
+                <div class="content">This Jupyter notebook explains all the affine transformations that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
         )
+        # Embed the converted HTML file for the notebook
+        notebook_html_path = "pages/affine_transformations.html"
+        with open(notebook_html_path, "r") as f:
+            notebook_html = f.read()
+        st.components.v1.html(notebook_html, height=500, scrolling=True)
+        
+    elif st.session_state['pdf_clicked']:
         st.markdown(
-            "<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
+            """
+            <div class="section">
+                <div class="header">PDF file for Basic Operations on an Image</div>
+                <div class="content">This PDF file explains all the affine transformations that can be performed on an image.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
         )
-        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)
+        
+        pdf_path = "pages/affine_transformations.pdf"
+        
+        # Read the PDF file content (binary data)
+        with open(pdf_path, "rb") as file:
+            pdf_data = file.read()  # This is the binary data of the PDF file
+
+        # Display the PDF in an iframe
         st.markdown(
-            "<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>",
-            unsafe_allow_html=True
+            f'<iframe src="data:application/pdf;base64,{base64.b64encode(pdf_data).decode()}" width="100%" height="600px"></iframe>',
+            unsafe_allow_html=True,
+        )
+
+        # Provide download option for the PDF file
+        st.download_button(
+            label="Download PDF",
+            data=pdf_data,  # Provide the binary file data here
+            file_name="affine_transformations.pdf",  # This is the name that will appear when the user downloads the file
+            mime="application/pdf"
         )
+    if st.button("Next Page: Handling Video Data"):
+        st.session_state['page'] = 'video_data'
+
+elif page == 'video_data':
+    st.markdown("<div class='title'>Handling Video Data</div>", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">What is a Video?</div>
+            <div class="content">
+            A video is a sequence of images, called frames, displayed rapidly one after another to create the illusion of motion.<br><br>
+            To deal with the video data, we import the <code>cv2</code> module and use the <code>VideoCapture()</code> method.<br><br>
+            <code>VideoCapture()</code> method is used to converts a video into list of frames.<br><br>
+            </div>
+            <div class="header">Playing the Video</div>
+            <div class="content">
+            If we specify a path inside <code>VideoCapture()</code> method, it reads the particular video.<br><br>
+            </div>
+            <div class="header">Live Video capturing</div>
+            <div class="content">
+            If we assign 0 inside the <code>VideoCapture()</code> method, it open the Web camera for live video capturing.<br><br>
+        </div><br><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("Open Jupyter Notebook"):
+            st.session_state['jupyter_clicked'] = True
+            st.session_state['pdf_clicked'] = False
+    with col2:
+        if st.button("Open PDF"):
+            st.session_state['pdf_clicked'] = True
+            st.session_state['jupyter_clicked'] = False
+
+    if st.session_state['jupyter_clicked']:
+        st.markdown(
+            """
+            <div class="section">
+                <div class="header">Jupyter Notebook for Basic Operations on an Image </div>
+                <div class="content">This Jupyter notebook explains how to handle video data.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        # Embed the converted HTML file for the notebook
+        notebook_html_path = "pages/handling_video_data.html"
+        with open(notebook_html_path, "r") as f:
+            notebook_html = f.read()
+        st.components.v1.html(notebook_html, height=500, scrolling=True)
+        
+    elif st.session_state['pdf_clicked']:
+        st.markdown(
+            """
+            <div class="section">
+                <div class="header">PDF file for Basic Operations on an Image</div>
+                <div class="content">This PDF file explains how to handle video data.</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        
+        pdf_path = "pages/handling_video_data.pdf"
+        
+        # Read the PDF file content (binary data)
+        with open(pdf_path, "rb") as file:
+            pdf_data = file.read()  # This is the binary data of the PDF file
+
+        # Display the PDF in an iframe
+        st.markdown(
+            f'<iframe src="data:application/pdf;base64,{base64.b64encode(pdf_data).decode()}" width="100%" height="600px"></iframe>',
+            unsafe_allow_html=True,
+        )
+
+        # Provide download option for the PDF file
+        st.download_button(
+            label="Download PDF",
+            data=pdf_data,  # Provide the binary file data here
+            file_name="handling_video_data.pdf",  # This is the name that will appear when the user downloads the file
+            mime="application/pdf"
+        )
+    if st.button("Next Page: Interesting projects on Image & Video data"):
+        st.session_state['page'] = 'projects'
+
+elif page == 'projects':
+    st.markdown("<div class='title'>🎥✨ Interesting Projects on Image & Video Data 🌟🖼️</div>", unsafe_allow_html=True)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">Converting an Image into Tabular data</div>
+            <div class="content">
+            This amazing project explains how we can convert an image into tabular data. Check this out below 👇
+            <br>
+            </div>
+        </div><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    if st.button("Go to Project 1"):
+        js = "window.open('https://github.com/ChaitanyaSubhakar/Handling-Image-and-Video/blob/main/converting_image_into_tabular_data.ipynb')"
+        st.components.v1.html(f"<script>{js}</script>", height=0)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">Converting a Video into Tabular data</div>
+            <div class="content">
+            This amazing project explains how we can convert a video into tabular data. Check this out below 👇
+            <br>
+            </div>
+        </div><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    if st.button("Go to Project 2"):
+        js = "window.open('https://github.com/ChaitanyaSubhakar/Handling-Image-and-Video/blob/main/converting_videos_into_tabular_data.ipynb')"
+        st.components.v1.html(f"<script>{js}</script>", height=0)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">Animation Project</div>
+            <div class="content">
+            This amazing project explains how we can create interesting Animation videos using OpenCV package. Check this out below 👇
+            <br>
+            </div>
+        </div><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    if st.button("Go to Project 3"):
+        js = "window.open('https://github.com/ChaitanyaSubhakar/Handling-Image-and-Video/blob/main/animation_project_opencv.ipynb')"
+        st.components.v1.html(f"<script>{js}</script>", height=0)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">GIF Project</div>
+            <div class="content">
+            This amazing project explains how we can create an interesting GIF using OpenCV package. Check this out below 👇
+            <br>
+            </div>
+        </div><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    if st.button("Go to Project 4"):
+        js = "window.open('https://github.com/ChaitanyaSubhakar/Handling-Image-and-Video/blob/main/GIF_project.ipynb')"
+        st.components.v1.html(f"<script>{js}</script>", height=0)
+    st.markdown(
+        """
+        <div class="section">
+            <div class="header">Cropping Tool</div>
+            <div class="content">
+            This amazing project explains how we can create an interesting GIF using OpenCV package. Check this out below 👇
+            <br>
+            </div>
+        </div><br>
+        """,
+        unsafe_allow_html=True,
+    )
+    if st.button("Go to Project 5"):
+        js = "window.open('https://github.com/ChaitanyaSubhakar/Handling-Image-and-Video/blob/main/cropping_tool.ipynb')"
+        st.components.v1.html(f"<script>{js}</script>", height=0)
+    if st.button("Return to main page.."):
+        st.session_state['page'] = 'unstructured_data'
+