Update pages/2_Life cycle of NLP.py

pages/2_Life cycle of NLP.py

@@ -0,0 +1,121 @@
+import streamlit as st
+
+# Custom CSS for styling, animations, and a light background
+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,
+)
+
+# Title with animation
+st.markdown("<div class='title'>NLP Life Cycle</div>", unsafe_allow_html=True)
+
+# Caption with animation
+st.markdown(
+    "<div class='caption'>***Explore the Journey from Problem Statement to Deployment in NLP!***</div>",
+    unsafe_allow_html=True,
+)
+
+# Radio buttons for navigation through the steps
+step = st.radio(
+    "Choose a step in the NLP Life Cycle:",
+    ["Problem Statement", "Data Collection", "Simple EDA", "Data Pre-processing", 
+     "EDA", "Feature Engineering", "Training", "Testing", "Deployment/Monitoring"],
+)
+
+# Step-by-step description with animations
+if step == "Problem Statement":
+    st.markdown(
+        "<div class='section'><b>1. Problem Statement</b><br>In this initial stage, we define the problem to be solved using NLP. The problem statement sets the direction for the entire project, ensuring that all efforts align with the objectives and scope.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Data Collection":
+    st.markdown(
+        "<div class='section'><b>2. Data Collection</b><br>Here, we gather the necessary data from various sources such as text, audio, or images. High-quality, relevant data is crucial to the success of the model and the problem-solving process.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Simple EDA":
+    st.markdown(
+        "<div class='section'><b>3. Simple EDA</b><br>Exploratory Data Analysis (EDA) is performed to understand the dataset better. Simple statistical summaries and visualizations help to identify data patterns, anomalies, and initial insights.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Data Pre-processing":
+    st.markdown(
+        "<div class='section'><b>4. Data Pre-processing</b><br>At this stage, the data is cleaned and transformed for model compatibility. This involves tasks like tokenization, lowercasing, removing stop words, and handling missing values.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "EDA":
+    st.markdown(
+        "<div class='section'><b>5. EDA</b><br>In-depth Exploratory Data Analysis is performed to gain further insights. Visualizations like word clouds, bar plots, and histograms are used to understand relationships and distributions in the dataset.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Feature Engineering":
+    st.markdown(
+        "<div class='section'><b>6. Feature Engineering</b><br>Feature engineering involves creating new features or modifying existing ones to improve model performance. Techniques like word embeddings, TF-IDF, and vectorization are commonly used.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Training":
+    st.markdown(
+        "<div class='section'><b>7. Training</b><br>In this step, the data is split into training and validation sets, and machine learning models are trained using the processed features. Model selection and hyperparameter tuning are key parts of this phase.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Testing":
+    st.markdown(
+        "<div class='section'><b>8. Testing</b><br>Once the model is trained, it is tested on unseen data to evaluate its performance. Metrics like accuracy, precision, recall, and F1 score are used to assess the model's quality.</div>",
+        unsafe_allow_html=True,
+    )
+elif step == "Deployment/Monitoring":
+    st.markdown(
+        "<div class='section'><b>9. Deployment/Monitoring</b><br>After testing, the model is deployed into a production environment where it can make predictions. Continuous monitoring ensures the model performs well and adapts to new data over time.</div>",
+        unsafe_allow_html=True,
+    )
+