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

pages/3Life Cycle of Machine Learning Project.py

@@ -22,109 +22,137 @@ st.markdown("""
         margin-top: 20px;
         margin-bottom: 10px;
     }
-    .description {
-        margin: 0px;
-        text-align: center;
-    }
-    .circle-container {
+    .button-container {
         display: flex;
+        flex-wrap: wrap;
         justify-content: center;
-        align-items: center;
-        margin: 0px;
-    }
-    .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;
+        gap: 20px;
+        margin-top: 20px;
     }
-    .step {
-        position: absolute;
-        width: 170px;
-        height: 60px;
+    .stButton > button {
+        background-color: #f0f8ff; /* Light background color */
+        color: black; /* Black text */
         font-size: 16px;
         font-weight: bold;
+        border: none;
         border-radius: 30px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
+        padding: 10px 20px;
         cursor: pointer;
-        transform-origin: 50% 50%;
-        transition: transform 0.3s ease, background-color 0.3s ease;
-        text-decoration: none;
-        color: black; /* Black text */
+        transition: 0.3s;
+    }
+    .stButton > button:hover {
+        background-color: #e6e6fa; /* Slightly darker on hover */
     }
-    .step1 { background-color: #FFDDC1; } /* Light Orange */
-    .step2 { background-color: #D4F1F4; } /* Light Blue */
-    .step3 { background-color: #D5ECC2; } /* Light Green */
-    .step4 { background-color: #F8C3DF; } /* Light Pink */
-    .step5 { background-color: #FFF7C0; } /* Light Yellow */
-    .step6 { background-color: #CDE7FF; } /* Sky Blue */
-    .step7 { background-color: #FEE9B2; } /* Light Peach */
-    .step8 { background-color: #FFCBCB; } /* Light Red */
-    .step9 { background-color: #E4F9F5; } /* Mint Green */
-    .step10 { background-color: #FFD9E8; } /* Soft Pink */
-    #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)
 
-# Page title and description
-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.
-    </div>
-    """,
-    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]
 
-# HTML for buttons in circular layout
-html_code = """
-<div class="circle-container">
-    <div class="circle">
-        <div class="steps">
-            <div class="step step1" id="step1"><a href="/?page=ProblemStatement" style="color:black;">Problem Statement</a></div>
-            <div class="step step2" id="step2"><a href="/?page=DataCollection" style="color:black;">Data Collection</a></div>
-            <div class="step step3" id="step3"><a href="/?page=SimpleEDA" style="color:black;">Simple EDA</a></div>
-            <div class="step step4" id="step4"><a href="/?page=DataPreprocessing" style="color:black;">Data Preprocessing</a></div>
-            <div class="step step5" id="step5"><a href="/?page=EDA" style="color:black;">EDA</a></div>
-            <div class="step step6" id="step6"><a href="/?page=FeatureEngineering" style="color:black;">Feature Engineering</a></div>
-            <div class="step step7" id="step7"><a href="/?page=ModelTraining" style="color:black;">Model Training</a></div>
-            <div class="step step8" id="step8"><a href="/?page=ModelTesting" style="color:black;">Model Testing</a></div>
-            <div class="step step9" id="step9"><a href="/?page=ModelDeployment" style="color:black;">Model Deployment</a></div>
-            <div class="step step10" id="step10"><a href="/?page=Monitoring" style="color:black;">Monitoring</a></div>
+# Main content
+if current_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.
         </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"):
+        navigate_to("ProblemStatement")
+    if st.button("Data Collection"):
+        navigate_to("DataCollection")
+    if st.button("Simple EDA"):
+        navigate_to("SimpleEDA")
+    if st.button("Data Preprocessing"):
+        navigate_to("DataPreprocessing")
+    if st.button("EDA"):
+        navigate_to("EDA")
+    if st.button("Feature Engineering"):
+        navigate_to("FeatureEngineering")
+    if st.button("Model Training"):
+        navigate_to("ModelTraining")
+    if st.button("Model Testing"):
+        navigate_to("ModelTesting")
+    if st.button("Model Deployment"):
+        navigate_to("ModelDeployment")
+    if st.button("Monitoring"):
+        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.")
+    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.")
+    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.")
+    if st.button("Go Back"):
+        navigate_to("Home")
+
+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")
 
-# Render the circular layout
-st.markdown(html_code, unsafe_allow_html=True)
+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")