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

pages/3Life Cycle of Machine Learning Project.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import streamlit as st
 
 # Page configuration
 st.set_page_config(
@@ -7,16 +8,8 @@ st.set_page_config(
     layout="wide"
 )
 
-# Initialize session state for navigation
-if "page" not in st.session_state:
-    st.session_state.page = "Home"
-
-# Function to handle navigation
-def navigate_to(page_name):
-    st.session_state.page = page_name
-
-# Global CSS for styling
-st.markdown("""
+# Global CSS for consistent 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,8 +51,7 @@ st.markdown("""
         width: 160px;
         height: 60px;
         font-size: 16px;
-        font-weight: bold;
-        background-color: #f0f8ff; /* Light background color */
+        background-color: #f0f8ff;
         color: black;
         border-radius: 30px;
         display: flex;
@@ -69,10 +61,10 @@ st.markdown("""
         cursor: pointer;
         transform-origin: 50% 50%;
         transition: transform 0.3s ease, background-color 0.3s ease;
-        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+        font-weight: bold;
     }
     .step:hover {
-        background-color: #e6e6fa; /* Hover color */
+        background-color: #e6e6fa;
     }
     #step1 { transform: rotate(0deg) translateX(320px) rotate(-0deg); }
     #step2 { transform: rotate(36deg) translateX(320px) rotate(-36deg); }
@@ -87,64 +79,24 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# 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">
-                <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>
+
+# Render the circular layout
+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">
+            <div class="step" id="step1">Problem Statement</div>
+            <div class="step" id="step2">Data Collection</div>
+            <div class="step" id="step3">Simple EDA</div>
+            <div class="step" id="step4">Data Preprocessing</div>
+            <div class="step" id="step5">EDA</div>
+            <div class="step" id="step6">Feature Engineering</div>
+            <div class="step" id="step7">Model Training</div>
+            <div class="step" id="step8">Model Testing</div>
+            <div class="step" id="step9">Model Deployment</div>
+            <div class="step" id="step10">Monitoring</div>
         </div>
     </div>
-    """, unsafe_allow_html=True)
-
-    # Handle navigation for each step
-    if st.button("Problem Statement", key="step1"):
-        navigate_to("ProblemStatement")
-    if st.button("Data Collection", key="step2"):
-        navigate_to("DataCollection")
-    if st.button("Simple EDA", key="step3"):
-        navigate_to("SimpleEDA")
-    if st.button("Data Preprocessing", key="step4"):
-        navigate_to("DataPreprocessing")
-    if st.button("EDA", key="step5"):
-        navigate_to("EDA")
-    if st.button("Feature Engineering", key="step6"):
-        navigate_to("FeatureEngineering")
-    if st.button("Model Training", key="step7"):
-        navigate_to("ModelTraining")
-    if st.button("Model Testing", key="step8"):
-        navigate_to("ModelTesting")
-    if st.button("Model Deployment", key="step9"):
-        navigate_to("ModelDeployment")
-    if st.button("Monitoring", key="step10"):
-        navigate_to("Monitoring")
-
-# Individual page content
-elif st.session_state.page == "ProblemStatement":
-    st.write("### Problem Statement")
-    st.write("Define the problem for the ML project.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-elif st.session_state.page == "DataCollection":
-    st.write("### Data Collection")
-    st.write("Collect data for the ML project.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-elif st.session_state.page == "SimpleEDA":
-    st.write("### Simple EDA")
-    st.write("Perform basic exploratory data analysis.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-# Add similar content for other steps...
+</div>
+""", unsafe_allow_html=True)