import streamlit as st
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd

st.set_page_config(
    page_title="HomePage",
    page_icon="🚀",
    layout="wide"
)

# Global CSS for consistent styling across all pages
st.markdown("""
    <style>
    body, .stApp {
        color: #4F4F4F; /* Replace with your desired font color */
        background-color: #FFFFFF;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #BB3385;
    }
    p {
        color: #4F4F4F;
    }
    ul li {
        color: #4F4F4F;
    }
    </style>
""", unsafe_allow_html=True)

st.markdown(
    """
    <style>
    .stApp {
        background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Ensure session state for navigation
if "current_page" not in st.session_state:
    st.session_state.current_page = "main"

# Navigation function
def navigate_to(page_name):
    st.session_state.current_page = page_name

# Main Page
if st.session_state.current_page == "main":
    # Page Title
    st.markdown("""
        <div style="text-align: left; margin-top: 20px;">
            <h2 style="color: #BB3385;">What is Data?📊✨</h2>
        </div>
    """, unsafe_allow_html=True)

    # Introduction Text
    st.write("""
    **Data** is the measurements that are collected as a source of Information.
    It refers raw facts, figures, and observations that can be collected, stored, and processed. 
    It has no meaning on its own until it is organized or analyzed to derive useful information.""")

    # Types of Data Section
    st.markdown("""
        <div style="text-align: left; margin-top: 20px;">
            <h2 style="color: #2a52be;">Types of Data</h2>
        </div>
    """, unsafe_allow_html=True)

    # Radio Button for Data Type Selection
    data_type = st.radio(
        "Select the type of Data:",
        ("Structured Data", "Unstructured Data", "Semi-Structured Data")
    )

    if data_type == "Structured Data":
        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h3 style="color: #e25822;">What is Structured Data?</h3>
            </div>
        """, unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Definition:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        **Structured data** refers to information that is organized and formatted in a predefined manner, making it easy to store, retrieve, and analyze.
        It is typically stored in tabular formats like rows and columns, where each field contains a specific type of information.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Characteristics:</h4>
            </div>
        """, unsafe_allow_html=True)
        
        st.write("""
        - Follows a fixed schema.
        - Can be easily searched using query languages like SQL.
        - Suitable for quantitative analysis.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Examples:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        A database of students with fields like ID, name, age, and gender:
        """)

        student_data = {
            "Id": [100, 101, 102, 103],
            "Name": ["Lakshmi Harika", "Varshitha", "Hari Chandan", "Shamitha"],
            "Age": [22, 23, 22, 23],
            "Gender": ["Female", "Female", "Male", "Female"]
        }
        df = pd.DataFrame(student_data)
        st.markdown(df.style.set_table_styles(
            [{'selector': 'thead th', 'props': 'font-weight: bold;'}]
        ).hide(axis="index").to_html(), unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Data Formats in Structured Data:</h4>
            </div>
        """, unsafe_allow_html=True)

        st.write("Click to explore Structured Data Formats:")
        if st.button("Explore Excel"):
            navigate_to("explore_excel")

    elif data_type == "Unstructured Data":
        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h3 style="color: #e25822;">What is Unstructured Data?</h3>
            </div>
        """, unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Definition:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        **Unstructured data** refers to information that does not follow a predefined format or structure.
        It is typically raw data that lacks a clear, organized schema, making it harder to store and analyze using traditional tools.
        Examples include multimedia files (images, videos, audio), emails, and social media posts.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Characteristics:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - Does not follow a specific schema or structure.
        - Cannot be stored in traditional tabular formats like rows and columns.
        - Requires advanced tools like machine learning or natural language processing (NLP) for analysis.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Examples:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - **Images**: Photos, screenshots, or scanned documents.
        - **Audio**: Podcasts, voice recordings, or music files.
        - **Videos**: Recorded lectures, surveillance footage, or YouTube videos.
        - **Text**: Emails, social media posts, and blog articles.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Data Formats in UnStructured Data:</h4>
            </div>
        """, unsafe_allow_html=True)

        st.write("Click to explore Unstructured Data Formats:")
        col1, col2, col3 = st.columns(3)
        
        with col1:
            if st.button("📸 Images & Videos"):
                navigate_to("explore_images_video")
        
        with col2:
            if st.button("🎵 Audio"):
                navigate_to("explore_audio")
        
        with col3:
            if st.button("✍️ Text"):
                navigate_to("explore_text")

    elif data_type == "Semi-Structured Data":
        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h3 style="color: #e25822;">What is Semi-Structured Data?</h3>
            </div>
        """, unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Definition:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        **Semi-Structured data** refers to information that does not follow a strict tabular format but contains tags or markers to separate data elements.
        This type of data is more flexible than structured data but still organized enough to allow for easier analysis than unstructured data.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Characteristics:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - Contains markers or tags (e.g., XML, JSON keys) to provide structure.
        - More flexible than structured data, allowing for varying schemas.
        - Easier to process than unstructured data.
        - Can store hierarchical relationships.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Examples:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        Examples of semi-structured data include:
        - **CSV**: Comma-separated values in plain-text files.
        - **JSON**: A lightweight data-interchange format used in web applications.
        - **XML**: Extensible Markup Language for structured document encoding.
        - **HTML**: Markup language for web pages.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Data Formats in Semi-Structured Data:</h4>
            </div>
        """, unsafe_allow_html=True)

        st.write("Click to explore Semi-Structured Data Formats:")
        col1, col2, col3, col4 = st.columns(4)
        
        with col1:
            if st.button("📄 CSV"):
                navigate_to("explore_csv")
        
        with col2:
            if st.button("📋 JSON"):
                navigate_to("explore_json")
        
        with col3:
            if st.button("📜 XML"):
                navigate_to("explore_xml")
        
        with col4:
            if st.button("🌐 HTML"):
                navigate_to("explore_html")

# Pages for Each Format
elif st.session_state.current_page == "explore_excel":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring Excel</h3>
    """, unsafe_allow_html=True)
    st.write("""
    Excel is a structured data format used to store and analyze data in tabular form. It supports features like formulas, charts, and pivot tables.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_images_video":
    st.markdown("""
        <h2 style="color: #BB3385;">Introduction to Images and Videos📸🖼️</h2>
    """, unsafe_allow_html=True)

    # Subheading 1: What is an Image?
    st.write("""
        <div style="text-align: left; margin-top: 20px;">
            <h3 style="color: #5b2c6f;">What is an Image?</h3>
            <p style="font-size: 16px; color: #333;">
                An image is a two-dimensional representation of the visible light spectrum, often captured 
                using devices like cameras or scanners. It can store details such as <strong>colors</strong>, <strong>shapes</strong>, and <strong>textures</strong>, 
                enabling us to visually interpret and analyze information. 
                Common formats include JPEG, PNG, and BMP.
            </p>
        </div>
    """, unsafe_allow_html=True)

    # Subheading 2: What is a Video?
    st.write("""
        <div style="text-align: left; margin-top: 20px;">
            <h3 style="color: #5b2c6f;">What is a Video?</h3>
            <p style="font-size: 16px; color: #333;">
                A video is a collection of images, often referred to as frames, displayed one after another quickly 
                to show continuous movement. Each frame captures a moment in time, and when these frames are played 
                sequentially, they show continuous movement. Videos typically have a frame rate (e.g., 30 frames 
                per second or 60 frames per second), which determines how many frames are displayed per second. 
                Common video formats include MP4, AVI, and MOV.
            </p>
        </div>
    """, unsafe_allow_html=True)

    # Subheading 3: Why is an Image Called a Grid-Like Structure?
    st.write("""
        <div style="text-align: left; margin-top: 20px;">
            <h3 style="color: #5b2c6f;">Why is an Image Called a Grid-Like Structure?</h3>
            <p style="font-size: 16px; color: #333;">
                Images are called <strong>grid-like structures</strong> because they are composed of <strong>pixels</strong> arranged in rows and columns, 
                forming a rectangular grid. Each <strong>pixel</strong> contains information about <strong>shape</strong>, <strong>color</strong>, and <strong>patterns</strong>, which 
                together define the image's content. 
                The total number of <strong>pixels</strong> is determined by the image's height and width (resolution), and a higher resolution provides better clarity.
            </p>
            <p style="font-size: 16px; color: #333;">
                In images, <strong>pixels</strong> act as features, and the entire grid represents a single data point. This combination 
                of features and data points gives images their grid-like nature.
            </p>
            <p style="font-size: 16px; color: #333;">
                While images and tabular data are both grid-like, the difference lies in interpretation: in images, the 
                grid represents one data point, while in tabular data, rows represent data points, and columns represent features.
            </p>
        </div>
    """, unsafe_allow_html=True)



    # Interactive Pixel Grid Section
    st.subheader("Interactive Pixel Grid")
    
    # User Input for Height and Width
    height = st.number_input("Enter Image Height (pixels):", min_value=1, max_value=50, value=10, step=1)
    width = st.number_input("Enter Image Width (pixels):", min_value=1, max_value=50, value=10, step=1)
    
    # Display Resolution
    resolution = height * width
    st.write(f"**Image Resolution**: {resolution} pixels")
    
    # Generate and Display Pixel Grid
    st.write("**Pixel Grid Visualization:**")
    grid = np.random.rand(int(height), int(width))  # Generate random grid values
    fig, ax = plt.subplots()
    cax = ax.imshow(grid, cmap="Pastel1")  
    plt.colorbar(cax, ax=ax)  # Add color bar for context
    ax.set_title("Pixel Grid")
    ax.set_xlabel("Width(pixels)", fontsize=8)  # Set smaller font size
    ax.set_ylabel("Height(pixels)", fontsize=8)  # Set smaller font size
    
    # Render the Plot
    st.pyplot(fig)


    # Section: What are Color Spaces?
    st.write("""
    <div style="text-align: left; margin-top: 20px;">
        <h3 style="color: #5b2c6f;">What are Color Spaces?</h3>
        <p style="font-size: 16px; color: #333;">
            A <strong>color space</strong> is a technique used to represent the <strong>colors of an image</strong> in a 
            numerical format. It allows us to preserve the <strong>color information</strong> while converting it into a 
            form that machines can understand. Since machines cannot <strong>"see"</strong> images as humans do, they interpret 
            <strong>numerical values</strong>. Therefore, color spaces are crucial for converting images into a format 
            that can be processed by a machine.
        </p>
    </div>
    """, unsafe_allow_html=True)
    
    # Section: Example of How ML Models Work with Images
    st.write("""
    <div style="text-align: left; margin-top: 20px;">
        <h4 style="color: #e25822;">For Example:</h4>
        <p style="font-size: 16px; color: #333;">
            Imagine you're building a <strong>machine learning model</strong> to classify images of 
            <strong>dogs and cats</strong>. You provide the model with images, but since the machine cannot understand 
            images directly, you need to convert them into <strong>numerical data</strong>. This is where 
            <strong>color spaces</strong> play a vital role. They help convert the <strong>color information</strong> in 
            the images into numbers that the machine can process, allowing it to <strong>learn from the data</strong> 
            and make accurate predictions.
        </p>
    </div>
    """, unsafe_allow_html=True)
    
    # Section: Common Color Spaces
    st.write("""
    <div style="text-align: left; margin-top: 20px;">
        <h4 style="color: #5b2c6f;">Common Color Spaces</h4>
        <p style="font-size: 16px; color: #333;">
            These are some of the <strong>common color spaces</strong> used in <strong>image processing</strong>:
        </p>
        <ol style="font-size: 16px; color: #333;">
            <li><strong>Black and White</strong></li>
            <li><strong>Grayscale</strong></li>
            <li><strong>Red, Green, Blue (RGB)</strong></li>
        </ol>
    </div>
    """, unsafe_allow_html=True)

    st.subheader("What is Black and White Color Space?")
    st.write("""
    Black and White color space, also known as binary color space, represents an image using only two colors: 
    **black** and **white**.
    
    - **0** represents **black**.
    - **1** or **255** (depending on the encoding) represents **white**.
    
    Each pixel in this color space is either completely black or completely white. 
    Black and White color space eliminates all color information, focusing entirely on light intensity.
    """)

    st.image(
        "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/pages/Screenshot%202024-12-23%20175703.png",
        caption="Black and White Color Space.",
        use_container_width=True)

    # Section: What is Grayscale Color Space?
    st.subheader("What is Grayscale Color Space?")
    st.write("""
    Grayscale color space represents an image using different shades of gray, ranging from **black** to **white**.
    
    - **0** represents **black** (no light intensity).
    - **255** represents **white** (maximum light intensity).
    - Values between **0 and 255** represent varying shades of gray.
    
    Grayscale eliminates color information, focusing entirely on the intensity of light in an image. Each pixel has only one intensity value, making it a simpler and more compact representation compared to color images.
    """)

    # Create grayscale gradient with labeled intensity values
    gradient = np.linspace(0, 255, 256)  # Generate gradient values
    gradient = np.tile(gradient, (10, 1))  # Repeat the gradient to make it visually clear
    
    # Plot the gradient
    fig, ax = plt.subplots(figsize=(8, 1), facecolor='none')  # Reduce height by half
    ax.imshow(gradient, cmap='gray', aspect='auto')
    ax.set_xticks(np.linspace(0, 255, 11))  # Set ticks for every 25.5 (0, 25, ..., 255)
    ax.set_xticklabels([str(int(x)) for x in np.linspace(0, 255, 11)], fontsize=8, color='red')  # Adjust font size
    ax.set_yticks([])  # Remove y-axis ticks
    ax.set_title("Grayscale Representation", fontsize=10)
    
    # Save the figure with a transparent background
    plt.savefig('grayscale_representation.png', transparent=True)
    
    # Render the plot in Streamlit
    st.pyplot(fig)

    st.image(
        "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/gray_scale.jpg",
        caption="Gray Scale Color Space.",
        use_container_width=True)


    st.subheader("What is RGB Color Space?")
    st.write("""
    RGB color space represents an image using three primary colors: **Red**, **Green**, and **Blue**. These colors form the basis of digital images and can be combined in different intensities to create a wide range of colors.
    
    A colored image in the RGB color space is split into three separate channels:
    - **Red Channel**: Contains the intensity of the red color at each pixel.
    - **Green Channel**: Contains the intensity of the green color at each pixel.
    - **Blue Channel**: Contains the intensity of the blue color at each pixel.
    
    Each of these channels is represented as a **2D array**, where:
    - Each pixel in the 2D array contains a value ranging from **0** (no intensity) to **255** (maximum intensity) for that color.
    
    By combining the three channels, a wide range of colors can be formed. For example:
    - **(255, 0, 0)** represents pure **Red**.
    - **(0, 255, 0)** represents pure **Green**.
    - **(0, 0, 255)** represents pure **Blue**.
    - **(255, 255, 255)** represents **White**, where all channels are at maximum intensity.
    - **(0, 0, 0)** represents **Black**, where all channels have no intensity.
    - Combining colors, such as **Red + Green = Yellow**, **Green + Blue = Cyan**, and **Blue + Red = Magenta**, creates even more colors. By adjusting the intensity of each channel, millions of unique colors can be generated.
    
    Computers interpret RGB images as **3D arrays**:
    - The **width** and **height** of the 3D array correspond to the dimensions of the image.
    - The **depth** of the 3D array corresponds to the number of color channels.
    
    Altogether, these three channels combine to form a complete color image, enabling vibrant, precise, and dynamic representations of colors in digital media.
    """)

    st.image(
        "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/rgb_1.jpg",
        use_container_width=True)
    st.image(
        "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/rgb_2.jpg",
        use_container_width=True)
    st.image(
        "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/rgb_3.jpg",
        use_container_width=True)

    st.write("""
    In the next section, we'll dive into the exciting world of **image processing using OpenCV**. We'll cover how to:
    - **Read, display, and manipulate images** programmatically.
    - Understand the **core operations** used in computer vision.
    - Transform images to uncover hidden insights.
    
    Curious to see how?👇Click `Image Operations with OpenCV` to start your journey into OpenCV Basics!🚀
    """)

    col1, col2 = st.columns(2)
    
    with col1:
        if st.button("⬅️ Back to Previous Page"):
            navigate_to("main")
    
    with col2:
        if st.button("➡️ Image Operations with OpenCV"):
            navigate_to("opencv_operations")

        
elif st.session_state.current_page == "opencv_operations":
    # Introduction to OpenCV Page
    st.markdown("""
        <h2 style="color: #BB3385;">OpenCV(Open Source Computer Vision Library)</h2>
    """, unsafe_allow_html=True)
    
    # Informative Content
    st.write("""
    Before diving into OpenCV basics, let's understand a few key points:
    - In Python, we have several libraries to work with images. One of the most powerful and popular libraries is **OpenCV**.
    - With **OpenCV**, we can provide machines with **artificial vision**, enabling them to perceive and process visual information.
    - OpenCV allows us to work with both **images and videos**, making it a versatile tool for various computer vision applications.
    """)

    # What is OpenCV Section
    st.markdown("""
        <h3 style="color: #9400d3;">What is OpenCV?</h3>
    """, unsafe_allow_html=True)
    
    st.write("""
    OpenCV, short for **Open Source Computer Vision Library**, is a popular open-source library designed for real-time computer vision and image processing tasks. 
    
    **Key Points**:
    - **Purpose**: OpenCV helps provide artificial vision to machines, enabling them to understand and process visual information like images and videos.
    - **Features**: OpenCV allows you to work with images and videos for tasks like transformation, filtering, and enhancement. It also supports real-time processing, making it ideal for dynamic applications.
    - **Applications**: Commonly used in tasks such as image recognition, motion detection, video analytics, and robotics.
    
    OpenCV is cross-platform, free to use, and designed for high performance, making it an essential tool for computer vision projects.
    """)

    # Installing OpenCV Section
    st.markdown("""
        <h3 style="color: #9400d3;">Installing OpenCV</h3>
    """, unsafe_allow_html=True)
    
    st.write("""
    To start working with OpenCV, you need to install it in your Python environment. Here’s how:
    """)
    
    st.write("1. Install OpenCV using pip:")
    st.code("pip install opencv-python", language="bash")
    
    st.write("2. Import OpenCV in your Python script:")
    st.code("""
    import cv2
    print(cv2.__version__)  # This will display the installed OpenCV version
    """, language="python")

    st.write("With OpenCV installed, let's learn basic image handling in OpenCV.")
    st.write("## Basic Operations in OpenCV")

    # Heading for Reading Images with Custom Color
    st.markdown("""
        <h3 style="color: #9400d3;">Reading an Image</h3>
    """, unsafe_allow_html=True)

    
    # About imread() function
    st.write("""
    To read an image and convert it into a machine-readable format, we use the **imread()** function from the cv2 module.  
    It reads the image file and converts it into a numerical array, where each element represents pixel intensity.
    """)
    
    # Code example
    st.code("""
    import cv2
    
    # Read the image
    img = cv2.imread('path_to_image.jpg')  # Replace 'path_to_image.jpg' with the image file path
    
    # Display the numerical matrix
    print(img)  # This will print the image as an array of pixel values
    """, language="python")
    
    # Explanation for Grayscale Conversion
    st.write("""
    By default, the `imread()` function reads an image as a 3D array in the RGB color space.  
    To convert the image to grayscale, pass `0` as the second argument to the `imread()` function. This will return a 2D array where each pixel value represents intensity.
    """)
    
    # Code example for Grayscale Conversion
    st.code("""
    import cv2
    
    # Read the image in grayscale
    gray_img = cv2.imread('path_to_image.jpg', 0)  # Replace 'path_to_image.jpg' with your image file path
    
    # Display the numerical matrix for the grayscale image
    print(gray_img)  # This will print the 2D array representing pixel intensity
    """, language="python")

    # Displaying Images with OpenCV in Custom Color
    st.markdown("""
        <h3 style="color: #9400d3;">Displaying Images with OpenCV</h3>
    """, unsafe_allow_html=True)

    
    # Explanation of the functions
    st.write("""
    After creating or reading an image, we can display it using OpenCV. Here’s how the key functions work together:
    
    #### imshow()
    - The `imshow()` function creates a **pop-up window** to display the image.
    - Internally, it converts the numerical array into a visual image.
    - **Parameters**:
      1. `Window Name`: Title of the pop-up window (string).
      2. `Image Array`: The array representing the image.
    
    #### waitKey()
    - **Purpose**: Waits for a key press and adds a delay before closing the pop-up window.
    - **Key Modes**:
      - `waitKey(0)` or `waitKey()`: Keeps the window open indefinitely until a key is pressed.
      - `waitKey(n)`: Delays for `n` milliseconds, closing the window after the delay if no key is pressed.
    
    #### destroyAllWindows()
    - The `destroyAllWindows()` function is used to close the pop-up window from **RAM**.
    - It ensures that all windows opened by `imshow()` are completely removed.
    - Without this, the window may stay allocated in memory even after being closed visually.
    
    These three functions must work together to display and manage images effectively.
    """)
    
    st.code("""
    # imshow()
    cv2.imshow(window_name, img_array)
    # window_name: The title of the pop-up window
    # img_array: The image data (Array)
    
    # waitKey()
    cv2.waitKey(delay_in_milliseconds)
    # delay_in_milliseconds: Time in milliseconds to keep the window open
    # Use 0 for infinite delay until a key is pressed
    
    # destroyAllWindows()
    cv2.destroyAllWindows()
    # This ensures all windows opened by imshow() are cleared from RAM
    """, language="python")

    # Heading for Saving Images
    st.markdown("""
        <h3 style="color: #9400d3;">Saving an Image</h3>
    """, unsafe_allow_html=True)
    
    # About imwrite() function
    st.write("""
    To save an image file in OpenCV, we use the **imwrite()** function.  
    It converts the numerical array (image data) back into an image file format, such as `.jpg`, `.png`, or `.bmp`.
    """)
    
    # Code example
    st.code("""
    import cv2
    
    # Example: Save an image
    cv2.imwrite('saved_image.jpg', image_array)  # 'saved_image.jpg' is the name of the output file
    print("Image saved successfully!")
    """, language="python")

    st.write("""
    In the next section, we'll take a closer look at **image creation and manipulation using OpenCV**. We'll discuss:
    - **Creating different types of images** (black-and-white, grayscale, and RGB).
    - **Splitting images** into individual channels.
    - **Converting images** between various color spaces.
    
    Curious to learn more?👇Click `Explore Image Creation and Manipulation` to continue your journey with OpenCV! 🚀
    """)
    
    col1, col2, col3 = st.columns(3)
    
    with col1:
        if st.button("📸 Images & Videos"):
            navigate_to("explore_images_video")  # Main page: Images & Videos
    
    with col2:
        if st.button("⬅️ Image Operations with OpenCV"):
            navigate_to("opencv_operations")  # Previous page: Image Operations with OpenCV
    
    with col3:
        if st.button("➡️ Explore Image Creation and Manipulation"):
            navigate_to("image_operations") 
    



elif st.session_state.current_page == "explore_audio":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring Audio</h3>
    """, unsafe_allow_html=True)
    st.write("""
    Audio formats include MP3 and WAV for storing sound.
    """)
    if st.button("Go Back"):
        navigate_to("main")


elif st.session_state.current_page == "explore_text":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring Text</h3>
    """, unsafe_allow_html=True)
    st.write("""
    Text includes unstructured data like emails or plain-text files.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_csv":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring CSV</h3>
    """, unsafe_allow_html=True)
    st.write("""
    CSV is a simple text-based format where data fields are separated by commas.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_json":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring JSON</h3>
    """, unsafe_allow_html=True)
    st.write("""
    JSON is a semi-structured format used for APIs and data exchange.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_xml":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring XML</h3>
    """, unsafe_allow_html=True)
    st.write("""
    XML uses tags to structure semi-structured data.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_html":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring HTML</h3>
    """, unsafe_allow_html=True)
    st.write("""
    HTML structures web pages using elements like <div> and <p>.
    """)
    if st.button("Go Back"):
        navigate_to("main")