Update pages/3Life Cycle of Machine Learning Project.py

pages/3Life Cycle of Machine Learning Project.py

@@ -1,11 +1,11 @@
 import streamlit as st
 
-
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
     layout="wide"
 )
+
 # Global CSS for consistent styling across all pages
 st.markdown("""
     <style>
@@ -39,13 +39,10 @@ st.markdown(
     unsafe_allow_html=True
 )
 
+# Title of the page
+st.markdown("""<div style="text-align: center; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
 
-st.markdown("""
-        <div style="text-align: center; margin-top: 20px;">
-            <h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
-
-
-
+# Inject custom CSS for the vertical flowchart
 st.markdown(
     """
     <style>
@@ -57,7 +54,6 @@ st.markdown(
             flex-direction: column;
             align-items: center;
         }
-
         /* Styling for each phase (rectangle button) */
         .phase {
             position: relative;
@@ -78,7 +74,6 @@ st.markdown(
             transition: transform 0.3s ease, background-color 0.3s ease;
             color: black; /* Always black text */
         }
-
         /* Colors for each phase */
         .phase-1 { background-color: #E6F4EA; } /* Light Green */
         .phase-2 { background-color: #E0F7FA; } /* Light Blue */
@@ -90,20 +85,17 @@ st.markdown(
         .phase-8 { background-color: #CFD8DC; } /* Light Gray-Blue */
         .phase-9 { background-color: #B2EBF2; } /* Light Cyan */
         .phase-10 { background-color: #FFE082; } /* Light Amber */
-
         .phase:hover {
             transform: scale(1.05);
             background-color: #F0F0F0; /* Slightly lighter on hover */
             color: black; /* Ensure text remains black */
         }
-
         /* Arrow styling */
         .arrow {
             font-size: 24px; /* Arrow size */
             color: #4F4F4F; /* Dark arrow color */
             margin: 10px 0; /* Space for arrow */
         }
-
         /* Styling for descriptions */
         .description {
             display: none; /* Hidden by default */
@@ -116,7 +108,6 @@ st.markdown(
             padding: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
-
         .phase:hover + .description {
             display: block; /* Show description on hover */
         }
@@ -131,54 +122,52 @@ st.markdown(
     <div class="vertical-flowchart">
         <!-- Problem Statement -->
         <a href="/problem-statement" class="phase phase-1" target="_self">Problem Statement</a>
-        <div class="description"> Problem Statement clearly state what the ML model will do, the data it will use, and the result it aims to deliver. Focus on its main goal and how it addresses the specific problem. .</div>
+        <div class="description">Clearly define the issue, the data used, and the expected outcome.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Data Collection -->
         <a href="/data-collection" class="phase phase-2" target="_self">Data Collection</a>
-        <div class="description">GCollect relevant data from multiple sources like APIs, databases, or user-generated content. Ensure the data aligns with the problem statement..</div>
+        <div class="description">Collect relevant data from multiple sources, ensuring it aligns with the problem statement.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Simple EDA -->
         <a href="/simple-eda" class="phase phase-3" target="_self">Simple EDA</a>
-        <div class="description">Perform an initial exploratory analysis to understand data quality, structure, and how the data looks.div>
+        <div class="description">Perform initial exploratory analysis to assess data quality, structure, and appearance.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Data Preprocessing -->
         <a href="/data-preprocessing" class="phase phase-4" target="_self">Data Preprocessing</a>
-        <div class="description">Clean the dataset by handling missing values, outliers, and inconsistencies. Transform data into a format suitable for analysis and modeling.
-
-</div>
+        <div class="description">Clean the dataset by handling missing values, outliers, and inconsistencies, transforming it into a suitable format.</div>
         <div class="arrow">⬇️</div>
 
         <!-- EDA -->
         <a href="/eda" class="phase phase-5" target="_self">EDA</a>
-        <div class="description">Perform a detailed analysis of the data to uncover trends, relationships, and patterns that will guide the model-building process..</div>
+        <div class="description">Perform detailed analysis to uncover trends, patterns, and relationships that will guide model building.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Feature Engineering -->
         <a href="/feature-engineering" class="phase phase-6" target="_self">Feature Engineering</a>
-        <div class="description">Create or select meaningful features, scale variables, and reduce dimensionality to improve the model’s learning process and accuracy.</div>
+        <div class="description">Create or select meaningful features, scale variables, and reduce dimensionality to enhance model performance.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Model Training -->
         <a href="/model-training" class="phase phase-7" target="_self">Model Training</a>
-        <div class="description">Use the prepared dataset to train machine learning algorithms. Optimize parameters to achieve the best possible model performance.</div>
+        <div class="description">Train machine learning models on the prepared data and optimize parameters for improved performance.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Model Testing -->
         <a href="/model-testing" class="phase phase-8" target="_self">Model Testing</a>
-        <div class="description">Evaluate the trained model on a validation or test dataset. Assess performance metrics like accuracy, precision, recall, and F1 score.</div>
+        <div class="description">Evaluate the trained model on a validation or test dataset to assess accuracy, precision, and other metrics.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Deployment -->
         <a href="/deployment" class="phase phase-9" target="_self">Deployment</a>
-        <div class="description">Deploy the trained model into a live production system or application, ensuring it can process real-time or batch inputs..</div>
+        <div class="description">Deploy the model into a live system for real-time or batch processing of new data.</div>
         <div class="arrow">⬇️</div>
 
         <!-- Monitoring -->
         <a href="/monitoring" class="phase phase-10" target="_self">Monitoring</a>
-        <div class="description">Continuously track the model’s performance in production. Identify and address issues like data drift or model degradation to maintain reliability.</div>
+        <div class="description">Track model performance in production, addressing issues like data drift and performance degradation.</div>
     </div>
     """,
     unsafe_allow_html=True,