Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -4,79 +4,81 @@ import streamlit as st
 if "page" not in st.session_state:
     st.session_state.page = "main"
 
-# Function to navigate between pages
+# Navigation function
 def navigate_to(page_name):
     st.session_state.page = page_name
 
-# Page content
+# Main page
 if st.session_state.page == "main":
+    # Page header
     st.markdown(
         """
-        <div style="text-align: center; margin-top: 20px;">
-            <h2 style="color: #4a90e2; font-family: Arial, sans-serif;">Machine Learning Project Life Cycle</h2>
+        <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>
         """,
         unsafe_allow_html=True,
     )
 
-    # 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."),
-    ]
+    # Circular Life Cycle Visualization
+    html_code = """
+    <div style="display: flex; justify-content: center; align-items: center; margin: 20px;">
+        <div style="position: relative; width: 350px; height: 350px; border-radius: 50%;">
+            <div style="position: absolute; width: 100%; height: 100%;">
+                <div style="position: absolute; transform: rotate(0deg) translateX(130px);">
+                    <div style="background: #ff5733; color: white; padding: 10px; border-radius: 5px; text-align: center;">Problem Statement</div>
+                </div>
+                <div style="position: absolute; transform: rotate(36deg) translateX(130px);">
+                    <div style="background: #33b5ff; color: white; padding: 10px; border-radius: 5px; text-align: center;">Data Collection</div>
+                </div>
+                <div style="position: absolute; transform: rotate(72deg) translateX(130px);">
+                    <div style="background: #33ff57; color: white; padding: 10px; border-radius: 5px; text-align: center;">Simple EDA</div>
+                </div>
+                <div style="position: absolute; transform: rotate(108deg) translateX(130px);">
+                    <div style="background: #ff33cc; color: white; padding: 10px; border-radius: 5px; text-align: center;">Data Pre-Processing</div>
+                </div>
+                <div style="position: absolute; transform: rotate(144deg) translateX(130px);">
+                    <div style="background: #ffcc33; color: white; padding: 10px; border-radius: 5px; text-align: center;">EDA</div>
+                </div>
+                <div style="position: absolute; transform: rotate(180deg) translateX(130px);">
+                    <div style="background: #33ccff; color: white; padding: 10px; border-radius: 5px; text-align: center;">Feature Engineering</div>
+                </div>
+                <div style="position: absolute; transform: rotate(216deg) translateX(130px);">
+                    <div style="background: #ff33a1; color: white; padding: 10px; border-radius: 5px; text-align: center;">Training</div>
+                </div>
+                <div style="position: absolute; transform: rotate(252deg) translateX(130px);">
+                    <div style="background: #66ff33; color: white; padding: 10px; border-radius: 5px; text-align: center;">Testing</div>
+                </div>
+                <div style="position: absolute; transform: rotate(288deg) translateX(130px);">
+                    <div style="background: #9933ff; color: white; padding: 10px; border-radius: 5px; text-align: center;">Deployment</div>
+                </div>
+                <div style="position: absolute; transform: rotate(324deg) translateX(130px);">
+                    <div style="background: #f7a500; color: white; padding: 10px; border-radius: 5px; text-align: center;">Monitoring</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+    st.markdown(html_code, unsafe_allow_html=True)
 
-    # Display steps as buttons in a grid layout
-    st.markdown(
-        """
-        <style>
-        .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: all 0.3s ease;
-        }
-        .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 )
+    # Descriptions
+    descriptions = {
+        "Problem Statement": "Define the goal of the ML model.",
+        "Data Collection": "Gather data from various sources.",
+        "Simple EDA": "Identify missing values and outliers.",
+        "Data Pre-Processing": "Clean and transform the data.",
+        "EDA": "Gain insights through visualizations.",
+        "Feature Engineering": "Extract and create useful features.",
+        "Training": "Train the model with prepared data.",
+        "Testing": "Evaluate the model's performance.",
+        "Deployment": "Deploy the model for real-world use.",
+        "Monitoring": "Track and update model performance."
+    }
 
-    # 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
+    # Select step
+    step = st.selectbox("Select a step to learn more:", descriptions.keys())
+    st.write(f"**{step}:** {descriptions[step]}")
 
-    # Navigation for detailed pages
-    if selected_step == "Data Collection" and st.button("Learn More About Data Collection"):
+    # Additional navigation for Data Collection
+    if 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")
-