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

pages/3Life Cycle of Machine Learning Project.py

@@ -15,8 +15,8 @@ if "page" not in st.session_state:
 def navigate_to(page_name):
     st.session_state.page = page_name
 
-# Global CSS for consistent styling
-st.markdown(""" 
+# Global CSS for styling
+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");
@@ -58,7 +58,8 @@ st.markdown("""
         width: 160px;
         height: 60px;
         font-size: 16px;
-        background-color: #f0f8ff;
+        font-weight: bold;
+        background-color: #f0f8ff; /* Light background color */
         color: black;
         border-radius: 30px;
         display: flex;
@@ -68,10 +69,10 @@ st.markdown("""
         cursor: pointer;
         transform-origin: 50% 50%;
         transition: transform 0.3s ease, background-color 0.3s ease;
-        font-weight: bold;
+        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
     }
     .step:hover {
-        background-color: #e6e6fa;
+        background-color: #e6e6fa; /* Hover color */
     }
     #step1 { transform: rotate(0deg) translateX(320px) rotate(-0deg); }
     #step2 { transform: rotate(36deg) translateX(320px) rotate(-36deg); }
@@ -86,29 +87,29 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# Render circular flowchart
+# Render the circular flowchart
 if st.session_state.page == "Home":
     st.markdown('<h1>Life Cycle of End-to-End ML Project</h1>', unsafe_allow_html=True)
     st.markdown("""
     <div class="circle-container">
         <div class="circle">
             <div class="steps">
-                <button class="step" id="step1" onclick="document.querySelector('button[name=step1]').click()">Problem Statement</button>
-                <button class="step" id="step2" onclick="document.querySelector('button[name=step2]').click()">Data Collection</button>
-                <button class="step" id="step3" onclick="document.querySelector('button[name=step3]').click()">Simple EDA</button>
-                <button class="step" id="step4" onclick="document.querySelector('button[name=step4]').click()">Data Preprocessing</button>
-                <button class="step" id="step5" onclick="document.querySelector('button[name=step5]').click()">EDA</button>
-                <button class="step" id="step6" onclick="document.querySelector('button[name=step6]').click()">Feature Engineering</button>
-                <button class="step" id="step7" onclick="document.querySelector('button[name=step7]').click()">Model Training</button>
-                <button class="step" id="step8" onclick="document.querySelector('button[name=step8]').click()">Model Testing</button>
-                <button class="step" id="step9" onclick="document.querySelector('button[name=step9]').click()">Model Deployment</button>
-                <button class="step" id="step10" onclick="document.querySelector('button[name=step10]').click()">Monitoring</button>
+                <div class="step" id="step1" onclick="document.querySelector('button[name=step1]').click()">Problem Statement</div>
+                <div class="step" id="step2" onclick="document.querySelector('button[name=step2]').click()">Data Collection</div>
+                <div class="step" id="step3" onclick="document.querySelector('button[name=step3]').click()">Simple EDA</div>
+                <div class="step" id="step4" onclick="document.querySelector('button[name=step4]').click()">Data Preprocessing</div>
+                <div class="step" id="step5" onclick="document.querySelector('button[name=step5]').click()">EDA</div>
+                <div class="step" id="step6" onclick="document.querySelector('button[name=step6]').click()">Feature Engineering</div>
+                <div class="step" id="step7" onclick="document.querySelector('button[name=step7]').click()">Model Training</div>
+                <div class="step" id="step8" onclick="document.querySelector('button[name=step8]').click()">Model Testing</div>
+                <div class="step" id="step9" onclick="document.querySelector('button[name=step9]').click()">Model Deployment</div>
+                <div class="step" id="step10" onclick="document.querySelector('button[name=step10]').click()">Monitoring</div>
             </div>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
-    # Invisible buttons for navigation
+    # Handle navigation for each step
     if st.button("Problem Statement", key="step1"):
         navigate_to("ProblemStatement")
     if st.button("Data Collection", key="step2"):
@@ -130,7 +131,7 @@ if st.session_state.page == "Home":
     if st.button("Monitoring", key="step10"):
         navigate_to("Monitoring")
 
-# Page content for each step
+# Individual page content
 elif st.session_state.page == "ProblemStatement":
     st.write("### Problem Statement")
     st.write("Define the problem for the ML project.")
@@ -146,4 +147,4 @@ elif st.session_state.page == "SimpleEDA":
     st.write("Perform basic exploratory data analysis.")
     if st.button("Go Back"):
         navigate_to("Home")
-# Add similar content for other pages...
+# Add similar content for other steps...