pages/Info _of_Image.py

import streamlit as st
import pandas as pd
import numpy as np

# Custom CSS for styling
custom_css = """
<style>
    html, body, [data-testid="stAppViewContainer"] {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url("https://www.istockphoto.com/photo/tech-or-space-background-abstract-3d-illustration-gm1367865109-437999705?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fbackground%2520datascience%2F&utm_term=background+datascience.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: white;  /* Ensures all text is readable */
    }
    h2, h3 {
        color: #FFD700; /* Gold color for headings */
    }
    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(
    """
    <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'

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'