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

pages/3Life Cycle of Machine Learning Project.py

@@ -7,6 +7,14 @@ 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 consistent styling
 st.markdown(""" 
     <style>
@@ -22,137 +30,123 @@ st.markdown("""
         margin-top: 20px;
         margin-bottom: 10px;
     }
-    .button-container {
+    .circle-container {
         display: flex;
-        flex-wrap: wrap;
         justify-content: center;
-        gap: 20px;
-        margin-top: 20px;
+        align-items: center;
+        margin-top: 50px;
     }
-    .stButton > button {
-        background-color: #f0f8ff; /* Light background color */
-        color: black; /* Black text */
+    .circle {
+        position: relative;
+        width: 1100px;
+        height: 1100px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .steps {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .step {
+        position: absolute;
+        width: 160px;
+        height: 60px;
         font-size: 16px;
-        font-weight: bold;
-        border: none;
+        background-color: #f0f8ff;
+        color: black;
         border-radius: 30px;
-        padding: 10px 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
         cursor: pointer;
-        transition: 0.3s;
+        transform-origin: 50% 50%;
+        transition: transform 0.3s ease, background-color 0.3s ease;
+        font-weight: bold;
     }
-    .stButton > button:hover {
-        background-color: #e6e6fa; /* Slightly darker on hover */
+    .step:hover {
+        background-color: #e6e6fa;
     }
+    #step1 { transform: rotate(0deg) translateX(320px) rotate(-0deg); }
+    #step2 { transform: rotate(36deg) translateX(320px) rotate(-36deg); }
+    #step3 { transform: rotate(72deg) translateX(320px) rotate(-72deg); }
+    #step4 { transform: rotate(108deg) translateX(320px) rotate(-108deg); }
+    #step5 { transform: rotate(144deg) translateX(320px) rotate(-144deg); }
+    #step6 { transform: rotate(180deg) translateX(320px) rotate(-180deg); }
+    #step7 { transform: rotate(216deg) translateX(320px) rotate(-216deg); }
+    #step8 { transform: rotate(252deg) translateX(320px) rotate(-252deg); }
+    #step9 { transform: rotate(288deg) translateX(320px) rotate(-288deg); }
+    #step10 { transform: rotate(324deg) translateX(320px) rotate(-324deg); }
     </style>
 """, unsafe_allow_html=True)
 
-# Function to navigate between pages
-def navigate_to(page_name):
-    st.experimental_set_query_params(page=page_name)
-
-# Get the current page from query parameters
-query_params = st.experimental_get_query_params()
-current_page = query_params.get("page", ["Home"])[0]
-
-# Main content
-if current_page == "Home":
+# Check current page and render content
+if st.session_state.page == "Home":
     # Home Page Content
     st.markdown('<h1>Life Cycle of End-to-End ML Project</h1>', unsafe_allow_html=True)
-    st.markdown(
-        """
-        <div class="description">
-        - In this page, I will take you through the 10 crucial steps involved in the life cycle of a Machine Learning project.<br>
-        - These steps outline the entire process:
-            - Starting from defining the problem and collecting data.<br>
-            - Building, deploying, and monitoring the model.<br>
-        - Each step plays a significant role in ensuring the success of the project:
-            - Addressing technical and practical challenges along the way.<br>
-        - By following these steps, you can create a robust and efficient ML solution.
+    # Circular button layout
+    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>
         </div>
-        """,
-        unsafe_allow_html=True,
-    )
-    # Buttons for navigation
-    st.markdown('<div class="button-container">', unsafe_allow_html=True)
-    if st.button("Problem Statement"):
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Invisible buttons for navigation
+    if st.button("Problem Statement", key="step1"):
         navigate_to("ProblemStatement")
-    if st.button("Data Collection"):
+    if st.button("Data Collection", key="step2"):
         navigate_to("DataCollection")
-    if st.button("Simple EDA"):
+    if st.button("Simple EDA", key="step3"):
         navigate_to("SimpleEDA")
-    if st.button("Data Preprocessing"):
+    if st.button("Data Preprocessing", key="step4"):
         navigate_to("DataPreprocessing")
-    if st.button("EDA"):
+    if st.button("EDA", key="step5"):
         navigate_to("EDA")
-    if st.button("Feature Engineering"):
+    if st.button("Feature Engineering", key="step6"):
         navigate_to("FeatureEngineering")
-    if st.button("Model Training"):
+    if st.button("Model Training", key="step7"):
         navigate_to("ModelTraining")
-    if st.button("Model Testing"):
+    if st.button("Model Testing", key="step8"):
         navigate_to("ModelTesting")
-    if st.button("Model Deployment"):
+    if st.button("Model Deployment", key="step9"):
         navigate_to("ModelDeployment")
-    if st.button("Monitoring"):
+    if st.button("Monitoring", key="step10"):
         navigate_to("Monitoring")
-    st.markdown('</div>', unsafe_allow_html=True)
 
-# Individual Page Content
-elif current_page == "ProblemStatement":
-    st.markdown("<h1>Problem Statement</h1>", unsafe_allow_html=True)
-    st.write("Define the objective, scope, and constraints of the machine learning project.")
+# Page content for each step
+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 current_page == "DataCollection":
-    st.markdown("<h1>Data Collection</h1>", unsafe_allow_html=True)
-    st.write("Collect and gather relevant data from various sources for analysis.")
+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 current_page == "SimpleEDA":
-    st.markdown("<h1>Simple EDA</h1>", unsafe_allow_html=True)
-    st.write("Perform basic exploratory data analysis to understand the dataset structure.")
+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 pages...
 
-elif current_page == "DataPreprocessing":
-    st.markdown("<h1>Data Preprocessing</h1>", unsafe_allow_html=True)
-    st.write("Clean and preprocess the collected data to make it suitable for modeling.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-
-elif current_page == "EDA":
-    st.markdown("<h1>EDA</h1>", unsafe_allow_html=True)
-    st.write("Perform advanced exploratory data analysis to identify patterns and insights.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-
-elif current_page == "FeatureEngineering":
-    st.markdown("<h1>Feature Engineering</h1>", unsafe_allow_html=True)
-    st.write("Create, select, or transform features to improve model performance.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-
-elif current_page == "ModelTraining":
-    st.markdown("<h1>Model Training</h1>", unsafe_allow_html=True)
-    st.write("Train machine learning models on the preprocessed data.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-
-elif current_page == "ModelTesting":
-    st.markdown("<h1>Model Testing</h1>", unsafe_allow_html=True)
-    st.write("Test the trained models using validation or test datasets.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-
-elif current_page == "ModelDeployment":
-    st.markdown("<h1>Model Deployment</h1>", unsafe_allow_html=True)
-    st.write("Deploy the model to production for real-world usage.")
-    if st.button("Go Back"):
-        navigate_to("Home")
-
-elif current_page == "Monitoring":
-    st.markdown("<h1>Monitoring</h1>", unsafe_allow_html=True)
-    st.write("Monitor the model's performance in production and retrain if needed.")
-    if st.button("Go Back"):
-        navigate_to("Home")