Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,84 +1,50 @@
 import streamlit as st
-
-# Initialize session state for navigation
-if "page" not in st.session_state:
-    st.session_state.page = "main"
-
-def navigate_to(page_name):
-    st.session_state.page = page_name
-
-# Main page
-if st.session_state.page == "main":
-    st.markdown(
-        """
-        <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
-    )
-
-    # Circular visualization of ML lifecycle
-    html_code = """
-    <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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 for each step
-    descriptions = {
-        "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.**"
-    }
-
-    step = st.selectbox("Select a step in the ML lifecycle to learn more:", list(descriptions.keys()))
-    st.write(descriptions[step])
-
-    if st.button("Learn More About Data Collection"):
-        navigate_to("data_collection")
+from PIL import Image
+
+def main():
+    # Set up the app title and layout
+    st.set_page_config(page_title="ML Lifecycle", layout="wide")
+
+    # Header section with title and subtitle
+    st.title("🚀 Machine Learning Lifecycle: 10 Steps")
+    st.markdown("### A visually engaging journey through the ML lifecycle")
+
+    # Step descriptions and icons
+    steps = [
+        {"title": "1. Problem Definition", "description": "Define the problem, goals, and success criteria.", "icon": "🔍"},
+        {"title": "2. Data Collection", "description": "Gather data from various sources.", "icon": "📊"},
+        {"title": "3. Data Cleaning", "description": "Handle missing values, remove duplicates, and fix errors.", "icon": "🧹"},
+        {"title": "4. Exploratory Data Analysis (EDA)", "description": "Understand data patterns and relationships.", "icon": "📈"},
+        {"title": "5. Feature Engineering", "description": "Create, transform, or select important features.", "icon": "🛠️"},
+        {"title": "6. Model Selection", "description": "Choose a suitable algorithm for the task.", "icon": "🤖"},
+        {"title": "7. Model Training", "description": "Train the model using the training dataset.", "icon": "🎯"},
+        {"title": "8. Model Evaluation", "description": "Assess the model's performance using metrics.", "icon": "📋"},
+        {"title": "9. Deployment", "description": "Deploy the model for real-world use.", "icon": "🌐"},
+        {"title": "10. Monitoring & Maintenance", "description": "Monitor the model and update as needed.", "icon": "📡"}
+    ]
+
+    # Sidebar with navigation
+    st.sidebar.title("Navigate the Lifecycle")
+    selected_step = st.sidebar.radio("Steps", [step['title'] for step in steps])
+
+    # Display the selected step's details
+    for step in steps:
+        if step['title'] == selected_step:
+            st.subheader(f"{step['icon']} {step['title']}")
+            st.markdown(step['description'])
+
+    # Full timeline view
+    st.markdown("### Full Timeline")
+    cols = st.columns(10)
+
+    for idx, step in enumerate(steps):
+        with cols[idx]:
+            st.markdown(f"{step['icon']} **{step['title']}**")
+
+    # Footer section with images or a final message
+    st.markdown("---")
+    st.markdown("**Tip:** The ML lifecycle is iterative; revisit steps as needed!")
+    st.image("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Machine_learning_lifecycle_diagram.jpg/1200px-Machine_learning_lifecycle_diagram.jpg", caption="Machine Learning Lifecycle", use_column_width=True)
+
+if __name__ == "__main__":
+    main()