import streamlit as st

st.markdown("""
    <style>
    /* Set a soft background color */
    body {
        background-color: #eef2f7;
    }
    /* Style for main title */
    h1 {
        color: black;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        text-align: center;
        margin-bottom: 25px;
    }
    /* Style for headers */
    h2 {
        color: black;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-top: 30px;
    }
    
    /* Style for subheaders */
     h3 {
        color: red;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        margin-top: 20px;
    }
    .custom-subheader {
        color: black;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-bottom: 15px;
    }
    /* Paragraph styling */
    p {
        font-family: 'Georgia', serif;
        line-height: 1.8;
        color: black;
        margin-bottom: 20px;
    }
    /* List styling with checkmark bullets */
    .icon-bullet {
        list-style-type: none;
        padding-left: 20px;
    }
    .icon-bullet li {
        font-family: 'Georgia', serif;
        font-size: 1.1em;
        margin-bottom: 10px;
        color: black;
    }
    .icon-bullet li::before {
        content: "◆";
        padding-right: 10px;
        color: black;
    }
    /* Sidebar styling */
    .sidebar .sidebar-content {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 15px;
    }
    .sidebar h2 {
        color: #495057;
    }
    /* Custom button style */
    .streamlit-button {
        background-color: #00FFFF;
        color: #000000;
        font-weight: bold;
    }
    </style>
    """, unsafe_allow_html=True)

st.markdown("<h1 class='header-title'>🛠️ Feature Engineering 📌</h1>", unsafe_allow_html=True)

st.markdown(
    """
    <div class='info-box'>
        <p>🔹 When we take existing features from collected data and create new useful features, where this is automatically engineered made from existing features and the technique of creating the features is known as <span class='highlight'>Feature Engineering</span>.</p>
        <p> These engineered features enhance machine learning models.</p>
        <p> A subpart of feature engineering is Feature Extraction.</p>
    </div>
    """,
    unsafe_allow_html=True
)

st.subheader(":violet[Feature Extraxtion]")
st.markdown(
    """
    <div class='info-box'>
        <p>📝 Feature Extraction is the process where text data which is natural language is given to machine to understand the natural language.</p>
        <ul>
            <li>Text is converted into vectors using specific algorithms.</li>
            <li>Preserving meaningful information is key.</li>
            <li>Helps in better text analysis & machine learning</li>
        </ul>
    </div>
    """,
    unsafe_allow_html=True
)

st.header("Vectorization🧭")
st.markdown(
    """
    <div class='info-box'>
        <p>Vectorization is the process of converting text into vector.</p>
        <p>This allows ML models to process text data effectively.</p>
    </div>
    """,
    unsafe_allow_html=True
)

st.subheader(":violet[Vectorization techniques]")
st.markdown("""
    There a different techniques to convert text into vector format.They are :
    <ul class="icon-bullet">
        <li>One-Hot Vectorization </li>
        <li>Bag of Words(BOW) </li>
        <li>Term Frequency - Inverse Document Frequency(TF-IDF)</li>
    </ul>
""", unsafe_allow_html=True)

st.markdown("""
    There are advance vectorization techniques.They are :
    <ul class="icon-bullet">
        <li>Word Embedding </li>
            <li>Word2Vec </li>
            <li>Fasttext</li>
    </ul>
""", unsafe_allow_html=True) 

st.sidebar.title("Navigation 🧭")
file_type = st.sidebar.radio(
    "Choose a Vectorization technique :",
    ("One-Hot Vectorization", "Bag of Words(BOW)", "Term Frequency - Inverse Document Frequency(TF-IDF)"))

if file_type == "One-Hot Vectorization":
    st.title(":red[One-Hot Vectorization]")
    st.markdown("""
        ### 📌 What is One-Hot Vectorization?
        -  It is a type of vectorization technique where text is converted into a numerical vector.
        -  This technique helps in representing words as unique vectors for machine learning models.
    """)

    st.markdown("""
        ### 🛠️ Steps in One-Hot Vectorization:
         - Create a Vocabulary ➡️ (A set of all unique words in the collected corpus).  
         - Find the Length of Vocabulary ➡️ (Total number of unique words = d-dimensions).  
         - Convert Each Word into a Vector:
           -  Every unique word is transformed into a vector.
           -  Each vector has d-dimensions, where each dimension corresponds to a unique word.
           -  Words are converted individually, and then combined to form a vector.

         This technique ensures that each word is treated uniquely and efficiently in NLP tasks.
        """)

    st.markdown("""
        -  Each word gets a unique vector representation.
        -  The number of dimensions = total vocabulary size.
        -  Words are vectorized separately, then combined into document vectors.
    """)

    st.markdown("""
        | **Word** | **Vector Representation** |
        |----------|--------------------------|
        |  **toy**  | [1,0,0,0,0] |
        |  **is**   | [0,1,0,0,0] |
        |  **good** | [0,0,1,0,0] |
        |  **not**  | [0,0,0,1,0] |
        |  **bad**  | [0,0,0,0,1] |
    """, unsafe_allow_html=True)

    st.markdown("""
        - d₁ → v₁ → `[[1,0,0,0,0] , [0,1,0,0,0] , [0,0,1,0,0]]`  
        - d₂ → v₂ → `[[1,0,0,0,0] , [0,1,0,0,0] , [0,0,0,1,0] , [0,0,1,0,0]]`  
        - d₃ → v₃ → `[[0,0,0,0,1], [1,0,0,0,0]]`  

     This One-Hot Vectorization technique converts words into numerical vectors while preserving their uniqueness.  
    """)

    st.markdown("""
        ###  Key Takeaways:
        -  Each word is represented as a 5-dimensional vector.  
        -  Every dimension corresponds to a unique word in the vocabulary.  
        -  This method is useful for transforming text into a numerical format for Machine Learning tasks.
    """)