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

pages/3Life Cycle of Machine Learning Project.py

@@ -47,27 +47,26 @@ st.markdown("""
 
 import streamlit as st
 
-# Inject custom CSS for the circular flowchart
+# Inject custom CSS for the straight vertical flowchart
 st.markdown(
     """
     <style>
-        .circular-flowchart {
+        .vertical-flowchart {
             position: relative;
-            width: 1000px; /* Layout size */
-            height: 900px; /* Reduced height to adjust bottom spacing */
+            width: 400px; /* Layout width */
             margin: 0 auto;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
             align-items: center;
         }
 
         /* Styling for each phase (circle) */
         .phase {
-            position: absolute;
+            position: relative;
             width: 130px; /* Circle size */
             height: 130px;
             background-color: #F8F9FA; /* Light background */
-            color: #343A40; /* Dark text */
+            color: #000000; /* Black text */
             border-radius: 50%;
             display: flex;
             justify-content: center;
@@ -76,21 +75,31 @@ st.markdown(
             font-weight: bold;
             text-align: center;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-            transition: transform 0.3s ease, background 0.3s ease;
+            margin-bottom: 10px; /* Space between steps */
+            font-family: Arial, sans-serif;
+        }
+
+        /* Arrow styling */
+        .arrow {
+            position: relative;
+            width: 20px;
+            height: 20px;
+            margin: 10px 0;
+            font-size: 24px;
+            color: #000000; /* Black arrow */
         }
 
-        /* Adjusted positions for better flow */
-        .phase-1 { top: 100px; left: 500px; background-color: #4CAF50; } /* Top-center */
-        .phase-2 { top: 180px; left: 650px; background-color: #03A9F4; } /* Top-right */
-        .phase-3 { top: 300px; left: 750px; background-color: #FFC107; } /* Mid-right */
-        .phase-4 { top: 500px; left: 680px; background-color: #FF7043; } /* Lower-right */
-        .phase-5 { top: 640px; left: 500px; background-color: #8BC34A; } /* Bottom-center */
-        .phase-6 { top: 500px; left: 320px; background-color: #673AB7; } /* Lower-left */
-        .phase-7 { top: 300px; left: 220px; background-color: #E91E63; } /* Mid-left */
-        .phase-8 { top: 180px; left: 300px; background-color: #607D8B; } /* Top-left */
-        .phase-9 { top: 130px; left: 420px; background-color: #00BCD4; } /* Between Top-left and Top */
-        .phase-10 { top: 130px; left: 580px; background-color: #FF9800; } /* Between Top and Top-right */
+        /* Custom colors for each phase */
+        .phase-1 { background-color: #4CAF50; } /* Green */
+        .phase-2 { background-color: #03A9F4; } /* Blue */
+        .phase-3 { background-color: #FFC107; } /* Yellow */
+        .phase-4 { background-color: #FF7043; } /* Orange */
+        .phase-5 { background-color: #8BC34A; } /* Light Green */
+        .phase-6 { background-color: #673AB7; } /* Purple */
+        .phase-7 { background-color: #E91E63; } /* Pink */
+        .phase-8 { background-color: #607D8B; } /* Gray-Blue */
+        .phase-9 { background-color: #00BCD4; } /* Cyan */
+        .phase-10 { background-color: #FF9800; } /* Amber */
 
         .phase:hover {
             transform: scale(1.1);
@@ -101,21 +110,30 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# HTML structure for the circular flowchart
+# HTML structure for the straight flowchart
 st.markdown(
     """
-    <div class="circular-flowchart">
+    <div class="vertical-flowchart">
         <!-- Phases -->
-        <a class="phase phase-1" href="/problem-statement" target="_self">Problem Statement</a>
-        <a class="phase phase-2" href="/data-collection" target="_self">Data Collection</a>
-        <a class="phase phase-3" href="/simple-eda" target="_self">Simple EDA</a>
-        <a class="phase phase-4" href="/data-preprocessing" target="_self">Data Preprocessing</a>
-        <a class="phase phase-5" href="/eda" target="_self">EDA</a>
-        <a class="phase phase-6" href="/feature-engineering" target="_self">Feature Engineering</a>
-        <a class="phase phase-7" href="/model-training" target="_self">Model Training</a>
-        <a class="phase phase-8" href="/model-testing" target="_self">Model Testing</a>
-        <a class="phase phase-9" href="/deployment" target="_self">Deployment</a>
-        <a class="phase phase-10" href="/monitoring" target="_self">Monitoring</a>
+        <div class="phase phase-1">Problem Statement</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-2">Data Collection</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-3">Simple EDA</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-4">Data Preprocessing</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-5">EDA</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-6">Feature Engineering</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-7">Model Training</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-8">Model Testing</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-9">Deployment</div>
+        <div class="arrow">⬇️</div>
+        <div class="phase phase-10">Monitoring</div>
     </div>
     """,
     unsafe_allow_html=True,