Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,64 +1,84 @@
 import streamlit as st
 
-# Initialize session state for navigation
+# Initialize session state
 if "page" not in st.session_state:
     st.session_state.page = "main"
 
+# Function to navigate between pages
 def navigate_to(page_name):
     st.session_state.page = page_name
 
+# Page content
 if st.session_state.page == "main":
-    # Main Page Header
     st.markdown(
         """
-        <div style="background-color: #f0f0f5; padding: 10px; border-radius: 5px; text-align: center;">
-            <h2 style="color: #4a90e2; font-family: Arial, sans-serif;">ML Project Life Cycle</h2>
+        <div style="text-align: center; margin-top: 20px;">
+            <h2 style="color: #4a90e2; font-family: Arial, sans-serif;">Machine Learning Project Life Cycle</h2>
         </div>
         """,
         unsafe_allow_html=True,
     )
 
-    # Steps and Descriptions
-    steps = {
-        "1. Problem Statement": "Define the aim/goal of the ML model.",
-        "2. Data Collection": "Gather data from various sources like APIs and web scraping.",
-        "3. Simple EDA": "Explore data for missing values and outliers.",
-        "4. Data Pre-Processing": "Clean and transform the data.",
-        "5. EDA": "Gain further insights and visualize the data.",
-        "6. Feature Engineering": "Create new features for better model performance.",
-        "7. Training the Model": "Train the model using the prepared dataset.",
-        "8. Testing the Data": "Test and evaluate model performance.",
-        "9. Deployment": "Deploy the model for real-world usage.",
-        "10. Monitoring": "Monitor model performance and update as needed.",
-    }
+    # Life cycle steps with descriptions
+    steps = [
+        ("Problem Statement", "Define the aim/goal of the ML model."),
+        ("Data Collection", "Gather data from sources like APIs, web scraping, or Kaggle."),
+        ("Simple EDA", "Quickly explore the data for missing values and outliers."),
+        ("Data Pre-Processing", "Clean and transform the data for model readiness."),
+        ("EDA", "Visualize and analyze data for deeper insights."),
+        ("Feature Engineering", "Create new features to enhance model performance."),
+        ("Training the Model", "Use the prepared dataset to train the model."),
+        ("Testing the Data", "Evaluate the model's performance on test data."),
+        ("Deployment", "Deploy the model for real-world usage."),
+        ("Monitoring", "Monitor and update the model to maintain performance."),
+    ]
 
-    # Step Selector
-    step = st.selectbox("Select a step in the ML life cycle:", list(steps.keys()))
-    st.write(f"**{step}**: {steps[step]}")
-
-    # Navigation Button
-    if step == "2. Data Collection":
-        if st.button("Learn More About Data Collection"):
-            navigate_to("data_collection")
-
-    # Custom Style
+    # Display steps as buttons in a grid layout
     st.markdown(
         """
         <style>
-        .stButton button {
-            font-size: 16px;
-            color: white;
-            background-color: #007bff;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin: 20px;
+        }
+        .grid-item {
+            background-color: #f0f0f5;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
             cursor: pointer;
-            transition: background-color 0.3s ease;
+            transition: all 0.3s ease;
         }
-        .stButton button:hover {
-            background-color: #0056b3;
+        .grid-item:hover {
+            background-color: #e8e8f0;
         }
         </style>
+        <div class="grid-container">
+        """ + 
+        "".join([f'<div class="grid-item" onclick="window.location.href='#{step[0].replace(" ", "-")}';">{step[0]}</div>' for step in steps]) +
+        "</div>"
         """,
         unsafe_allow_html=True,
     )
+
+    # Display description for the selected step
+    selected_step = st.selectbox("Select a step to learn more:", [step[0] for step in steps])
+    st.write(f"### {selected_step}")
+    for step in steps:
+        if step[0] == selected_step:
+            st.write(step[1])
+            break
+
+    # Navigation for detailed pages
+    if selected_step == "Data Collection" and st.button("Learn More About Data Collection"):
+        navigate_to("data_collection")
+
+elif st.session_state.page == "data_collection":
+    st.title("Data Collection")
+    st.write("Here you can provide detailed content about data collection methods.")
+    if st.button("Back to Main Page"):
+        navigate_to("main")
+