import streamlit as st

st.markdown(
    """
    <style>
        body {
            background-color: #f9f9f9; /* Light gray background */
            font-family: 'Arial', sans-serif;
        }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .title {
            text-align: center;
            color: #2c3e50; /* Deep gray-blue */
            font-size: 3rem;
            font-weight: bold;
            animation: fadeIn 1s ease-in-out;
        }
        .caption {
            text-align: center;
            font-style: italic;
            font-size: 1.2rem;
            color: #7f8c8d; /* Soft gray */
            animation: fadeIn 1.5s ease-in-out;
        }
        .section {
            font-size: 1.1rem;
            text-align: justify;
            line-height: 1.8;
            color: #34495e; /* Muted gray */
            background: #ffffff; /* White card-style background */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            animation: fadeIn 2s ease-in-out;
            margin: 10px 0;
        }
        .image-container {
            text-align: center;
            margin: 20px 0;
            animation: fadeIn 2.5s ease-in-out;
        }
        .image-container img {
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out;
        }
        .image-container img:hover {
            transform: scale(1.05); /* Subtle zoom effect */
        }
    </style>
    """,
    unsafe_allow_html=True,
)


st.markdown("<div class='title'>Introduction to Natural Language Processing</div>", unsafe_allow_html=True)


st.markdown(
    "<div class='caption'>Empowering Machines to Understand and Communicate in Human Language!</div>",
    unsafe_allow_html=True,
)

st.markdown(
    """
    <div class='image-container'>
        <img src="https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/AYjss7I_gYg8OuSg5rqq3.jpeg" alt="NLP Image" width="400">
    </div>
    """,
    unsafe_allow_html=True,
)

st.subheader(":blue[What is NLP?]")
st.markdown(
    '''
    <div class='section'>
        <b>Natural Language Processing (NLP)</b> is a dynamic field of Artificial Intelligence (AI) focused on enabling computers 
        to understand, interpret, and generate human language. It bridges the gap between how humans communicate and how machines process information.
    </div>
    ''',
    unsafe_allow_html=True,
)
st.markdown('''
- To represent text in numerical and tabular format it is going to use a field known as NLP.
- It is a sub-field in AI which guides the machine to process and analyze the natural language
''')


st.subheader(":red[Applications of NLP]")
st.markdown(
    '''
    <div class='section'>
        NLP powers many everyday applications, including:
        <ul>
            <li><b>Chatbots and Virtual Assistants:</b> Enhancing customer support with intelligent responses.</li>
            <li><b>Language Translation:</b> Breaking language barriers with tools like Google Translate.</li>
            <li><b>Sentiment Analysis:</b> Analyzing opinions and emotions in social media and reviews.</li>
            <li><b>Search Engines:</b> Understanding queries to deliver relevant results.</li>
        </ul>
    </div>
    ''',
    unsafe_allow_html=True,
)

st.markdown(
    """
    <div class='caption'>Step into the world of NLP and discover the endless possibilities of language-driven innovation!...</div>
    """,
    unsafe_allow_html=True,
)