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

pages/3Life Cycle of Machine Learning Project.py

@@ -11,14 +11,14 @@ st.set_page_config(
 st.markdown("""
     <style>
     body, .stApp {
-        color: #4F4F4F; /* Replace with your desired font color */
-        background-color: #FFFFFF; /* Optional: Set a fixed background color */
+        color: #4F4F4F; /* Text color */
+        background-color: #FFFFFF; /* Background color */
     }
     h1, h2, h3, h4, h5, h6 {
-        color: #BB3385; /* Replace with your heading color */
+        color: #BB3385; /* Heading color */
     }
     p {
-        color: #4F4F4F; /* Replace with your paragraph text color */
+        color: #4F4F4F; /* Text color for paragraphs */
     }
     ul li {
         color: #4F4F4F; /* List item color */
@@ -26,183 +26,111 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-st.markdown(
-    """
-    <style>
-    .stApp {
-        background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-    }
-    </style>
-    """, 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)
 
-# Inject custom CSS for the vertical flowchart
+# Inject custom CSS for the flowchart layout
 st.markdown(
     """
     <style>
-        .vertical-flowchart {
-            position: relative;
-            width: 400px; /* Layout width */
-            margin: 0 auto;
+        .flowchart-container {
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: 20px;
+            margin-top: 50px;
         }
+
         /* Styling for each phase (rectangle button) */
         .phase {
-            position: relative;
             width: 300px; /* Rectangle width */
             height: 60px; /* Rectangle height */
-            border: none; /* Remove border */
             border-radius: 8px; /* Rounded edges */
             font-size: 16px; /* Text size */
             font-weight: bold;
             text-align: center;
             cursor: pointer;
-            margin-bottom: 10px; /* Space between steps */
-            font-family: Arial, sans-serif;
             display: flex;
             justify-content: center;
             align-items: center;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
             transition: transform 0.3s ease, background-color 0.3s ease;
-            color: black; /* Always black text */
+            color: black; /* Text color */
         }
+
         /* 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 */
-        .phase-4 { background-color: #FFE0B2; } /* Light Orange */
-        .phase-5 { background-color: #DCEDC8; } /* Light Green */
-        .phase-6 { background-color: #D1C4E9; } /* Light Purple */
-        .phase-7 { background-color: #F8BBD0; } /* Light Pink */
-        .phase-8 { background-color: #CFD8DC; } /* Light Gray-Blue */
-        .phase-9 { background-color: #B2EBF2; } /* Light Cyan */
-        .phase-10 { background-color: #FFE082; } /* Light Amber */
+        .phase-1 { background-color: #FF7043; } /* Red */
+        .phase-2 { background-color: #42A5F5; } /* Blue */
+        .phase-3 { background-color: #66BB6A; } /* Green */
+        .phase-4 { background-color: #FFEB3B; } /* Yellow */
+        .phase-5 { background-color: #F06292; } /* Pink */
+        .phase-6 { background-color: #42A5F5; } /* Blue */
+        .phase-7 { background-color: #FF7043; } /* Red */
+        .phase-8 { background-color: #66BB6A; } /* Green */
+        .phase-9 { background-color: #FFEB3B; } /* Yellow */
+        .phase-10 { background-color: #F06292; } /* Pink */
+
         .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 */
+            font-size: 24px;
+            color: #4F4F4F;
+        }
+
+        .description {
+            font-size: 14px;
+            color: #4F4F4F;
+            margin-top: -5px;
         }
     </style>
     """, unsafe_allow_html=True
 )
 
-# HTML structure for the vertical flowchart with descriptions using Streamlit's expander
+# HTML structure for the flowchart
 st.markdown(
     """
-    <div class="vertical-flowchart">
+    <div class="flowchart-container">
         <!-- Problem Statement -->
-        <a href="/problem-statement" class="phase phase-1" target="_self">Problem Statement</a>
+        <a href="/problem-statement" class="phase phase-1" target="_self">1. Problem Statement</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Clearly define the issue, the data used, and the expected outcome.
-            </details>
-        </div>
 
         <!-- Data Collection -->
-        <a href="/data-collection" class="phase phase-2" target="_self">Data Collection</a>
+        <a href="/data-collection" class="phase phase-2" target="_self">2. Data Collection</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Collect relevant data from multiple sources, ensuring it aligns with the problem statement.
-            </details>
-        </div>
 
         <!-- Simple EDA -->
-        <a href="/simple-eda" class="phase phase-3" target="_self">Simple EDA</a>
+        <a href="/simple-eda" class="phase phase-3" target="_self">3. Simple EDA</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Perform initial exploratory analysis to assess data quality, structure, and appearance.
-            </details>
-        </div>
 
         <!-- Data Preprocessing -->
-        <a href="/data-preprocessing" class="phase phase-4" target="_self">Data Preprocessing</a>
+        <a href="/data-preprocessing" class="phase phase-4" target="_self">4. Data Preprocessing</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Clean the dataset by handling missing values, outliers, and inconsistencies, transforming it into a suitable format.
-            </details>
-        </div>
 
         <!-- EDA -->
-        <a href="/eda" class="phase phase-5" target="_self">EDA</a>
+        <a href="/eda" class="phase phase-5" target="_self">5. EDA</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Perform detailed analysis to uncover trends, patterns, and relationships that will guide model building.
-            </details>
-        </div>
 
         <!-- Feature Engineering -->
-        <a href="/feature-engineering" class="phase phase-6" target="_self">Feature Engineering</a>
+        <a href="/feature-engineering" class="phase phase-6" target="_self">6. Feature Engineering</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Create or select meaningful features, scale variables, and reduce dimensionality to enhance model performance.
-            </details>
-        </div>
 
         <!-- Model Training -->
-        <a href="/model-training" class="phase phase-7" target="_self">Model Training</a>
+        <a href="/model-training" class="phase phase-7" target="_self">7. Training the Model</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Train machine learning models on the prepared data and optimize parameters for improved performance.
-            </details>
-        </div>
 
         <!-- Model Testing -->
-        <a href="/model-testing" class="phase phase-8" target="_self">Model Testing</a>
+        <a href="/model-testing" class="phase phase-8" target="_self">8. Testing the Data</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Evaluate the trained model on a validation or test dataset to assess accuracy, precision, and other metrics.
-            </details>
-        </div>
 
         <!-- Deployment -->
-        <a href="/deployment" class="phase phase-9" target="_self">Deployment</a>
+        <a href="/deployment" class="phase phase-9" target="_self">9. Deployment</a>
         <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Deploy the trained model into a live system for real-time or batch processing of new data.
-            </details>
-        </div>
 
         <!-- Monitoring -->
-        <a href="/monitoring" class="phase phase-10" target="_self">Monitoring</a>
-        <div class="arrow">⬇️</div>
-        <div>
-            <details>
-                <summary>Click to View Description</summary>
-                Track model performance in production, addressing issues like data drift and performance degradation.
-            </details>
-        </div>
+        <a href="/monitoring" class="phase phase-10" target="_self">10. Monitoring</a>
     </div>
     """, unsafe_allow_html=True
 )