Update pages/Info _of_Image.py

pages/Info _of_Image.py

@@ -23,620 +23,65 @@ custom_css = """
     p {
         color: #FFFFFF; /* White text for paragraphs */
     }
-    .stButton>button {
-        background-color: #4CAF50; /* Green */
-        color: white;
-        padding: 10px 24px;
-        border: none;
-        border-radius: 5px;
-        text-align: center;
-        font-size: 16px;
-        margin: 4px 2px;
-        transition-duration: 0.4s;
-        cursor: pointer;
-    }
-    .stButton>button:hover {
-        background-color: #45a049; /* Darker Green on hover */
-        color: white;
-    }
-    .stButton>div:nth-child(1)>button {
-        background-color: #2196F3; /* Blue */
-    }
-    .stButton>div:nth-child(2)>button {
-        background-color: #f44336; /* Red */
-    }
-    .stButton>div:nth-child(3)>button {
-        background-color: #FF9800; /* Orange */
-    }
 </style>
 """
 
 # Inject the CSS into the app
-st.markdown("<div class='title'>Introduction to Image Data 📊</div>", unsafe_allow_html=True)
-    
+st.markdown(custom_css, unsafe_allow_html=True)
+st.markdown("<h2 style='text-align: left; color: Black;'>What is IMAGE</h2>", unsafe_allow_html=True)
 st.markdown(
-    """
-    <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,
+    "<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
+)
+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
+)
+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
+)
+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
+)
+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()")
+
+# 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
 )
-if st.button("Next Page: Basic operations on an Image"):
-        st.session_state['page'] = 'image_operations'
-
-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
-
-    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
-
-        # 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="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'
-
-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
-
-    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
-
-        # 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="working_on_img.pdf",  # This is the name that will appear when the user downloads the file
-            mime="application/pdf"
-        )
-    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(
-            """
-            <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(
-            """
-            <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/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(
-            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="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(
-            """
-            <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(
-            """
-            <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,
-        )
-        
-        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(
-            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'
-