pages/Life Cycle of ML.py

import streamlit as st

# Custom CSS for styled boxes and centering buttons
st.markdown("""
    <style>
    .step-box {
        border: 2px solid #00FFFF;
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0;
        background-color: #e0f7fa;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
        font-size: 22px;
        font-weight: bold;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    .step-box:hover {
        background-color: #b2ebf2;
        transform: scale(1.05);
    }
    .button-back {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 15px;
        font-size: 16px;
        color: white;
        background-color: #00bcd4;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    .button-back:hover {
        background-color: #0097a7;
    }
    .main-title {
        color: #00796b;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30px;
    }
    .intro-text {
        font-size: 18px;
        text-align: center;
        color: #004d40;
        margin-bottom: 40px;
    }

    /* Center buttons container */
    .buttons-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .button {
        margin: 10px;
        padding: 15px 25px;
        font-size: 16px;
        font-weight: bold;
        background-color: #00bcd4;  /* Light blue button color */
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button:hover {
        background-color: #0097a7;
    }

    </style>
    """, unsafe_allow_html=True)

# Initialize session state for navigation
if "selected_step" not in st.session_state:
    st.session_state["selected_step"] = "Main Page"

# Steps of the ML lifecycle
steps = [
    "Problem Statement",
    "Collect the Data (Data Collection)",
    "Simple EDA (Exploratory Data Analysis)",
    "Data Processing",
    "Main EDA",
    "Feature Engineering",
    "Training the Model",
    "Testing the Model",
    "Deployment",
    "Monitoring",
]

# Sidebar navigation
st.sidebar.title("Return")
if st.session_state["selected_step"] != "Main Page":
    st.sidebar.button("🔙 Back to Main Page", on_click=lambda: st.session_state.update({"selected_step": "Main Page"}))

# Main Page layout
if st.session_state["selected_step"] == "Main Page":
    st.markdown('<h1 class="main-title"> Lifecycle of a Machine Learning Projects 🌟</h1>', unsafe_allow_html=True)
    st.markdown('<p class="intro-text">Explore the steps that are involved in an ML project\'s lifecycle by clicking on the boxes below</p>', unsafe_allow_html=True)

    # Centered buttons container
    st.markdown('<div class="buttons-container">', unsafe_allow_html=True)
    for i, step in enumerate(steps, start=1):
        if st.button(f"{i}. {step}", key=f"button_{i}", help=f"Click", use_container_width=True):
            st.session_state["selected_step"] = step
    st.markdown('</div>', unsafe_allow_html=True)

# Detailed Summary Pages
elif st.session_state["selected_step"] in steps:
    selected_step = st.session_state["selected_step"]
    st.title(f"🔎 Step: {selected_step}")
    summaries = {
    "Problem Statement": "📍 Clearly state the problem you're solving with ML. Example: Predict house prices based on size, location, and number of rooms. 🤔",
    "Collect the Data (Data Collection)": "📂 Gather data from various sources such as databases, websites, or APIs.The Data can be of different forms like xslx,json,xml. Example: Use housing price data or collect information from a real estate site.📥",
    "Simple EDA (Exploratory Data Analysis)": "🔍 Analyze the data to find trends, outliers, and missing values. Example: Create histograms and boxplots to see how the data is distributed. 🛠️",
    "Data Processing": "🧹 Clean the data by fixing missing values, normalizing, and transforming it. Example: Fill missing values with the average or scale the features. ✨",
    "Main EDA": "🔎 Do a deeper analysis using advanced techniques like correlation and pair plots. Example: Check how features like square footage and price are related. 🔬",
    "Feature Engineering": "⚙️ Create new features or change existing ones to improve the model's performance. Example: Image Augmentation (Resizing, Shifting, Scaling) 🧩",
    "Training the Model": "🧠 Split the data into training and testing sets, then train a machine learning model. 🏋️‍♀️",
    "Testing the Model": "🧪 Check how well the model performs on new, unseen data. Use accuracy, precision, recall, or RMSE to evaluate a model's performance. 📊",
    "Deployment": "🚀 Put the model into production so people can use it. Host the model on the cloud and create an API for users to get predictions. 🌐",
    "Monitoring": "📈 Track the model's performance over time and retrain if needed.📡",

    }
    st.write(summaries.get(selected_step, "No summary available for this step."))