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

pages/3Life Cycle of Machine Learning Project.py

@@ -45,9 +45,7 @@ st.markdown("""
             <h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
 
 
-import streamlit as st
 
-# Inject custom CSS for the vertical flowchart
 st.markdown(
     """
     <style>
@@ -59,6 +57,7 @@ st.markdown(
             flex-direction: column;
             align-items: center;
         }
+
         /* Styling for each phase (rectangle button) */
         .phase {
             position: relative;
@@ -79,7 +78,8 @@ st.markdown(
             transition: transform 0.3s ease, background-color 0.3s ease;
             color: black; /* Always black text */
         }
-        /* Colors for each phase (original colors) */
+
+        /* Colors for each phase */
         .phase-1 { background-color: #E6F4EA; } /* Light Green */
         .phase-2 { background-color: #E0F7FA; } /* Light Blue */
         .phase-3 { background-color: #FFF9C4; } /* Light Yellow */
@@ -90,46 +90,95 @@ 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 */
+            width: 300px;
+            margin-top: -10px;
+            background-color: #F9F9F9;
+            color: #333;
+            font-size: 14px;
+            border-radius: 5px;
+            padding: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+
+        .phase:hover + .description {
+            display: block; /* Show description on hover */
+        }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# HTML structure for the vertical flowchart
+# HTML structure for the vertical flowchart with descriptions
 st.markdown(
     """
     <div class="vertical-flowchart">
-        <!-- Buttons for each phase -->
+        <!-- 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="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="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="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="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="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="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="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="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="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>
     """,
     unsafe_allow_html=True,