Update pages/Life cycle of ML.py

pages/Life cycle of ML.py

@@ -1,164 +1,67 @@
 import streamlit as st
+import pandas as pd
+import numpy as np
 
-# Custom CSS styling
-def add_custom_css():
-    st.markdown(
-        """
-        <style>
-        body {
-            font-family: 'Arial', sans-serif;
-            background-color: #f7f9fc;
-        }
-        .title {
-            text-align: center;
-            font-size: 2.5rem;
-            color: #1f77b4;
-            font-weight: bold;
-            margin-bottom: 20px;
-        }
-        .subtitle {
-            text-align: center;
-            font-size: 1.5rem;
-            color: #555555;
-            margin-top: -15px;
-            margin-bottom: 30px;
-        }
-        .button-container {
-            display: flex;
-            justify-content: space-evenly;
-            margin: 20px 0;
-        }
-        .stage-button {
-            background-color: #1f77b4;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            padding: 10px 20px;
-            font-size: 1.2rem;
-            cursor: pointer;
-            text-transform: uppercase;
-            transition: background-color 0.3s ease;
-        }
-        .stage-button:hover {
-            background-color: #145a86;
-        }
-        .back-button {
-            background-color: #ff6347;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            padding: 10px 20px;
-            font-size: 1rem;
-            cursor: pointer;
-            margin-top: 20px;
-            transition: background-color 0.3s ease;
-        }
-        .back-button:hover {
-            background-color: #d9534f;
-        }
-        </style>
-        """,
-        unsafe_allow_html=True,
-    )
+# Apply custom CSS styling
+st.markdown("""
+    <style>
+    /* Custom styling for background, headers, and text */
+    body {
+        background-color: #eef2f7;
+    }
+    h1 {
+        color: #00FFFF;
+        font-family: 'Roboto', sans-serif;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 25px;
+    }
+    h2, h3 {
+        font-family: 'Roboto', sans-serif;
+        font-weight: 600;
+    }
+    h2 {
+        color: #FFFACD;
+    }
+    h3 {
+        color: #ba95b0;
+    }
+    p {
+        font-family: 'Georgia', serif;
+        line-height: 1.8;
+        color: #495057;
+    }
+    .icon-bullet {
+        list-style-type: none;
+        padding-left: 20px;
+    }
+    .icon-bullet li {
+        font-family: 'Georgia', serif;
+        font-size: 1.1em;
+        margin-bottom: 10px;
+        color: #495057;
+    }
+    .icon-bullet li::before {
+        content: "✔️";
+        padding-right: 10px;
+        color: #00FFFF;
+    }
+    </style>
+    """, unsafe_allow_html=True)
 
-# Functions for each page
-def home_page():
-    st.markdown("<div class='title'>Machine Learning Lifecycle</div>", unsafe_allow_html=True)
-    st.markdown("<div class='subtitle'>Explore the stages of an ML project!</div>", unsafe_allow_html=True)
+st.title("**Lifecycle of Machine Learning**")
 
-    st.image("https://via.placeholder.com/800x400?text=ML+Lifecycle", caption="Visual Representation of ML Lifecycle")
+steps = [
+    "Problem Statement",
+    "Data Collection",
+    "Simple EDA",
+    "Data pre-processing",
+    "EDA",
+    "Feature Engineering",
+    "Training Model",
+    "Testing",
+    "Deployment",
+    "Monitoring",]
 
-    st.markdown(
-        """
-        <div class="button-container">
-            <button class="stage-button" onclick="location.href='?page=problem_definition'">1. Problem Definition</button>
-            <button class="stage-button" onclick="location.href='?page=data_collection'">2. Data Collection</button>
-            <button class="stage-button" onclick="location.href='?page=data_preparation'">3. Data Preparation</button>
-        </div>
-        <div class="button-container">
-            <button class="stage-button" onclick="location.href='?page=modeling'">4. Modeling</button>
-            <button class="stage-button" onclick="location.href='?page=evaluation'">5. Evaluation</button>
-            <button class="stage-button" onclick="location.href='?page=deployment'">6. Deployment</button>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
-def problem_definition_page():
-    st.markdown("<div class='title'>🎯 Problem Definition</div>", unsafe_allow_html=True)
-    st.write("Define the problem your machine learning model aims to solve.")
-    st.image("https://via.placeholder.com/600x300?text=Define+Problem", caption="Example: Problem Definition")
-    st.markdown(
-        "<button class='back-button' onclick=\"location.href='?page=home'\">Back to Home</button>",
-        unsafe_allow_html=True,
-    )
-
-def data_collection_page():
-    st.markdown("<div class='title'>📊 Data Collection</div>", unsafe_allow_html=True)
-    st.write("Gather data relevant to the problem and verify data sources.")
-    st.image("https://via.placeholder.com/600x300?text=Data+Collection", caption="Data Sources Overview")
-    st.markdown(
-        "<button class='back-button' onclick=\"location.href='?page=home'\">Back to Home</button>",
-        unsafe_allow_html=True,
-    )
-
-def data_preparation_page():
-    st.markdown("<div class='title'>🔄 Data Preparation</div>", unsafe_allow_html=True)
-    st.write("Preprocess, clean, and split the data into train, validation, and test sets.")
-    st.image("https://via.placeholder.com/600x300?text=Data+Preparation", caption="Data Preparation Overview")
-    st.markdown(
-        "<button class='back-button' onclick=\"location.href='?page=home'\">Back to Home</button>",
-        unsafe_allow_html=True,
-    )
-
-def modeling_page():
-    st.markdown("<div class='title'>🤖 Modeling</div>", unsafe_allow_html=True)
-    st.write("Train machine learning models and tune hyperparameters.")
-    st.image("https://via.placeholder.com/600x300?text=Modeling", caption="Model Training Visualization")
-    st.markdown(
-        "<button class='back-button' onclick=\"location.href='?page=home'\">Back to Home</button>",
-        unsafe_allow_html=True,
-    )
-
-def evaluation_page():
-    st.markdown("<div class='title'>✅ Evaluation</div>", unsafe_allow_html=True)
-    st.write("Evaluate model performance using standard metrics.")
-    st.image("https://via.placeholder.com/600x300?text=Evaluation", caption="Evaluation Metrics Overview")
-    st.markdown(
-        "<button class='back-button' onclick=\"location.href='?page=home'\">Back to Home</button>",
-        unsafe_allow_html=True,
-    )
-
-def deployment_page():
-    st.markdown("<div class='title'>🚀 Deployment</div>", unsafe_allow_html=True)
-    st.write("Deploy your model for real-world use.")
-    st.image("https://via.placeholder.com/600x300?text=Deployment+Pipeline", caption="Deployment Pipeline")
-    st.markdown(
-        "<button class='back-button' onclick=\"location.href='?page=home'\">Back to Home</button>",
-        unsafe_allow_html=True,
-    )
-
-def main():
-    add_custom_css()
-    query_params = st.get_query_params()
-    page = query_params.get("page", ["home"])[0]
-
-    if page == "home":
-        home_page()
-    elif page == "problem_definition":
-        problem_definition_page()
-    elif page == "data_collection":
-        data_collection_page()
-    elif page == "data_preparation":
-        data_preparation_page()
-    elif page == "modeling":
-        modeling_page()
-    elif page == "evaluation":
-        evaluation_page()
-    elif page == "deployment":
-        deployment_page()
-    else:
-        st.error("Page not found!")
-
-if __name__ == "__main__":
-    main()
+st.sidebar.title("Navigation")
+selected_step = st.sidebar.radio("Steps in ML Lifecycle", steps)