Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,84 +1,84 @@
 import streamlit as st
 
-# Initialize session state
+# Initialize session state for navigation
 if "page" not in st.session_state:
     st.session_state.page = "main"
 
-# Navigation function
 def navigate_to(page_name):
     st.session_state.page = page_name
 
 # Main page
 if st.session_state.page == "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="background-color: #f0f0f5; padding: 15px; border-radius: 10px; text-align: center;">
+            <h2 style="color: #4a90e2; font-family: Arial, sans-serif;">Machine Learning Project Life Cycle</h2>
         </div>
         """,
-        unsafe_allow_html=True,
+        unsafe_allow_html=True
     )
 
-    # Circular Life Cycle Visualization
+    # Circular visualization of ML lifecycle
     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 style="display: flex; justify-content: center; align-items: center; height: auto;">
+        <div style="position: relative; width: 350px; height: 350px; border: 3px solid #4a90e2; border-radius: 50%;">
+            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
+                <h4 style="color: #4a90e2;">ML Steps</h4>
+            </div>
+            <div style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">
+                <div style="background-color: #ff5733; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    1. Problem Statement
                 </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; top: 30%; left: 85%; transform: translate(-50%, -50%);">
+                <div style="background-color: #33b5ff; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    2. Data Collection
                 </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; top: 70%; left: 85%; transform: translate(-50%, -50%);">
+                <div style="background-color: #33ff57; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    3. Simple EDA
                 </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; top: 90%; left: 50%; transform: translate(-50%, -50%);">
+                <div style="background-color: #ff33cc; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    4. Data Pre-Processing
                 </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; top: 70%; left: 15%; transform: translate(-50%, -50%);">
+                <div style="background-color: #ffcc33; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    5. EDA
                 </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; top: 30%; left: 15%; transform: translate(-50%, -50%);">
+                <div style="background-color: #33ccff; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    6. Feature Engineering
                 </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 style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">
+                <div style="background-color: #ff33a1; color: white; padding: 8px 15px; border-radius: 5px; text-align: center;">
+                    7. Training the Model
                 </div>
             </div>
         </div>
     </div>
     """
+
     st.markdown(html_code, unsafe_allow_html=True)
 
-    # Descriptions
+    # Descriptions for each step
     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."
+        "1. Problem Statement": "**Define the aim or goal of your ML model.**",
+        "2. Data Collection": "**Gather data from various sources like APIs, web scraping, etc.**",
+        "3. Simple EDA": "**Explore data for missing values and outliers.**",
+        "4. Data Pre-Processing": "**Clean and transform the data.**",
+        "5. EDA": "**Gain deeper insights and visualize the data.**",
+        "6. Feature Engineering": "**Create new features for better model performance.**",
+        "7. Training the Model": "**Train your model using the prepared dataset.**"
     }
 
-    # Select step
-    step = st.selectbox("Select a step to learn more:", descriptions.keys())
-    st.write(f"**{step}:** {descriptions[step]}")
+    step = st.selectbox("Select a step in the ML lifecycle to learn more:", list(descriptions.keys()))
+    st.write(descriptions[step])
 
-    # Additional navigation for Data Collection
-    if step == "Data Collection" and st.button("Learn More About Data Collection"):
+    if st.button("Learn More About Data Collection"):
         navigate_to("data_collection")