Home.py

import random
import streamlit as st
import base64
import string
from facts import show_fun_fact
import nltk
# Download necessary resources
nltk.download('punkt_tab')
nltk.download('stopwords')

from nltk.corpus import stopwords
from nltk.tokenize import word_tokenize

# Set Streamlit page config
st.set_page_config(layout="centered")


# Encode image for the title
def encode_image(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode()

def add_bg_from_local(image_file):
    encoded_string = encode_image(image_file)
    st.markdown(
        f"""
        <style>
        .stApp {{
            background-image: url(data:image/{"png"};base64,{encoded_string});
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }}
        </style>
        """,
        unsafe_allow_html=True
    )

# Set the background image
add_bg_from_local("Images/backgroud.jpg")

file_ = open("Images/title-icon-unscreen.gif", "rb").read()
base64_gif = base64.b64encode(file_).decode("utf-8")

st.markdown(
    f"""
    <h1 style='text-align: center; color: white;'>
        Natural Language Processing
        <img src="data:image/gif;base64,{base64_gif}" alt="Icon" style="width: 85px; margin-right: 10px;">
    </h1>
    """,
    unsafe_allow_html=True
)

title_image_base64 = encode_image(r"Images/NLP_title_img.jpg")
st.image("Images/NLP_title_img.jpg", caption="Unlocking the power of language with NLP", use_container_width=True)

# Introduction section with emojis and styled text
st.markdown("<h2 style='text-align: center; color: white;'>What You'll Discover Here 🕵️‍♂️</h2>", unsafe_allow_html=True)

st.markdown("""
- 🌐 **Introduction to NLP**: Learn the fundamentals of how machines understand human language.
- 🛠️ **Life Cycle of NLP Projects**: Understand the step-by-step process of building NLP solutions.
""")

st.markdown("<h2 style='text-align: center; color: white;'> Why NLP Matters? 🌍</h2>", unsafe_allow_html=True)
st.markdown("""
From understanding human emotions to powering search engines, Natural Language Processing (NLP) is everywhere.  
Some real-world applications include:
- Chatbots and virtual assistants (e.g., Siri, Alexa).
- Sentiment analysis in social media.
- Language translation (e.g., Google Translate).
- Text summarization for news and articles.
- Personalized recommendations.
""")

st.markdown("<h2 style='text-align: center; color: white;'> Try It Yourself! 🧑‍🔬</h2>", unsafe_allow_html=True)
user_input = st.text_area("Enter any text to see how it's processed:", "Natural Language Processing is amazing!")

if user_input:
    # Tokenization
    tokens = word_tokenize(user_input)
    st.write("### Tokens:")
    st.write(tokens)

    # Stopword and punctuation removal
    stop_words = set(stopwords.words("english"))
    cleaned_tokens = [word for word in tokens if word.lower() not in stop_words and word not in string.punctuation]
    
    st.write("### After Removing Stopwords and Punctuation:")
    st.write(cleaned_tokens)

st.markdown("## Ready to Get Started with NLP? 🚀")
st.markdown("""
Let’s get started and explore the exciting Introduction to NLP! 🌟
""")

# fun fact
show_fun_fact()

# Credir Section
st.markdown("""
    <style>
    .footer {
        width: 100%;
        text-align: center;
        color: white;
        padding: 20px 0;
        background: linear-gradient(135deg, #f36f6f, #FF7F50); /* Gradient background */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Adds shadow for a 3D effect */
        margin-top: 50px;
        border-radius: 10px 10px 0 0; /* Rounded corners */
    }
    
    .footer p {
        font-size: 18px;
        font-weight: bold;
    }
    
    .footer a {
        color: white;
        text-decoration: none;
        margin: 0 10px;
        transition: transform 0.3s ease, scale 0.2s;
    }

    .footer a:hover {
        transform: scale(1.2);
        transition: transform 0.3s ease;
    }

    .footer img {
        margin-left: 8px;
    }
    
    .footer a:active {
        transform: scale(1);
    }

    .footer span {
        font-size: 14px;
        display: block;
        margin-top: 8px;
    }

    .footer .icons {
        margin-top: 15px;
    }
    </style>

    <div class="footer">
        <p>Created with 💡 by Aamer
            <a href='https://linkedin.com/mohd-suhaib-aamer' target='_blank'>
                <img src='https://img.icons8.com/fluent/48/000000/linkedin.png' width='24' height='24'/>
            </a>
            <a href='https://github.com/Suhaib-Aamer' target='_blank'>
                <img src='https://img.icons8.com/fluent/48/000000/github.png' width='24' height='24'/>
            </a>
        </p>
        <span>Thank you for exploring NLP with me!</span>
    </div>
""", unsafe_allow_html=True)