pages/Life_cycle_of_ML.py

import streamlit as st

# Initialize session state for tracking the current lifecycle step
if "step" not in st.session_state:
    st.session_state.step = 0

# Define ML lifecycle steps with detailed descriptions
ml_lifecycle = [
    {
        "title": "📋 **Problem Statement**",
        "description": """
        **Info**:
        Understand the challenge at hand, establish clear objectives, and set criteria for success.
        """
    },
    {
        "title": "🧑‍💻 **Data Collection**",
        "description": """
        **Info**: Gather relevant data to train the model, utilizing sources such as surveys, web scraping, and APIs.
        
        """
    },
     {
        "title": "🔍**Simple EDA**",
        "description": """
        **Info**:  Perform a preliminary analysis to examine the dataset’s key features.
        """
    },
    {
        "title": "🧹 **Data Preprocessing**",
        "description": """
        **Info**: Clean the data to make sure it is in an appropriate format for further analysis.
        """
    },
    {
        "title": "🔎 **EDA**",
        "description": """
        **Info**:Conduct deeper analysis to extract valuable insights and uncover patterns within the data. 
        """
    },
    {
        "title": "🔧 **Feature Engineering**",
        "description": """
        **Info**: Develop new features or refine existing ones to enhance the model’s performance.
        """
    },
    {
        "title": "🛠️ **Training**",
        "description": """
        **Info**:Train machine learning models using the preprocessed data.
        """
    },
    {
        "title": "🧪 **Testing**",
        "description": """
        **Info**:Assess the model’s performance using a separate test dataset to determine its effectiveness.
        """
    },
    {
        "title": "🚀 **Deploying**",
        "description": """
        **Info**:Deploy the trained model into a production environment for real-world use.
        """
    },
    {
        "title": "📊 **Monitoring**",
        "description": """
        **Info**:Continuously track the model’s performance in production to ensure it remains effective over time
        """
    },
]

# Display title and description
st.title("📊 Machine Learning Life Cycle")
st.write("Explore the detailed life cycle of a Machine Learning project by clicking through the steps below:")

# Buttons for navigation
col1, col2, col3 = st.columns([1, 1, 1])
with col1:
    if st.button("⬅️ Previous", disabled=st.session_state.step == 0):
        st.session_state.step -= 1
with col3:
    if st.button("➡️ Next", disabled=st.session_state.step == len(ml_lifecycle) - 1):
        st.session_state.step += 1

# Display the current lifecycle step with details
current_step = ml_lifecycle[st.session_state.step]
st.markdown(f"### {current_step['title']}")
st.markdown(current_step['description'])

# Reset button
if st.button("🔄 Restart"):
    st.session_state.step = 0

# HTML content for shapes and buttons
html_content = """
# Life Cycle of ML

The life cycle of Machine Learning (ML) involves several stages, from defining the problem to deploying and monitoring the model. Here's an overview of each stage:

1. **Problem Statement:** Understanding the problem and setting objectives for the ML model.
2. **Data Collection:** Gathering relevant data for model training.
3. **Simple EDA (Exploratory Data Analysis):** Initial analysis to understand the dataset's basic properties.
4. **Data Preprocessing:** Cleaning the data to ensure it's in a usable format.
5. **EDA (Exploratory Data Analysis):** Deeper analysis to gain insights and find patterns in the data.
6. **Feature Engineering:** Creating new features or modifying existing ones to improve model performance.
7. **Training:** Training machine learning models using the processed data.
8. **Testing:** Evaluating the trained model using a test set to assess its performance.
9. **Deploying:** Deploying the model to a production environment.
10. **Monitoring:** Continuously monitoring the model's performance in the production environment.

---

## Shapes Representing the ML Life Cycle

<svg width="800" height="600">
  <!-- Problem Statement (Rectangle) -->
  <rect x="50" y="50" width="150" height="50" fill="#FFB6C1" stroke="#000" />
  <text x="125" y="80" fill="#000" font-size="14" text-anchor="middle">Problem Statement</text>
  
  <!-- Data Collection (Ellipse) -->
  <ellipse cx="300" cy="75" rx="80" ry="40" fill="#ADD8E6" stroke="#000" />
  <text x="300" y="80" fill="#000" font-size="14" text-anchor="middle">Data Collection</text>
  
  <!-- Simple EDA (Ellipse) -->
  <ellipse cx="500" cy="75" rx="80" ry="40" fill="#90EE90" stroke="#000" />
  <text x="500" y="80" fill="#000" font-size="14" text-anchor="middle">Simple EDA</text>
  
  <!-- Arrows between Problem Statement, Data Collection, and Simple EDA -->
  <line x1="200" y1="75" x2="260" y2="75" stroke="#000" marker-end="url(#arrow)" />
  <line x1="380" y1="75" x2="460" y2="75" stroke="#000" marker-end="url(#arrow)" />
  
  <!-- Data Preprocessing (Rectangle) -->
  <rect x="50" y="200" width="150" height="50" fill="#FFD700" stroke="#000" />
  <text x="125" y="230" fill="#000" font-size="14" text-anchor="middle">Data Preprocessing</text>
  
  <!-- EDA (Circle) -->
  <circle cx="300" cy="225" r="40" fill="#FF7F50" stroke="#000" />
  <text x="300" y="230" fill="#000" font-size="14" text-anchor="middle">EDA</text>
  
  <!-- Feature Engineering (Ellipse) -->
  <ellipse cx="500" cy="225" rx="80" ry="40" fill="#9370DB" stroke="#000" />
  <text x="500" y="230" fill="#000" font-size="14" text-anchor="middle">Feature Engineering</text>
  
  <!-- Arrows between Data Preprocessing, EDA, and Feature Engineering -->
  <line x1="125" y1="250" x2="260" y2="225" stroke="#000" marker-end="url(#arrow)" />
  <line x1="380" y1="225" x2="460" y2="225" stroke="#000" marker-end="url(#arrow)" />
  
  <!-- Training (Rectangle) -->
  <rect x="50" y="350" width="150" height="50" fill="#FF6347" stroke="#000" />
  <text x="125" y="380" fill="#000" font-size="14" text-anchor="middle">Training</text>
  
  <!-- Testing (Circle) -->
  <circle cx="300" cy="375" r="40" fill="#98FB98" stroke="#000" />
  <text x="300" y="380" fill="#000" font-size="14" text-anchor="middle">Testing</text>
  
  <!-- Deploying (Ellipse) -->
  <ellipse cx="500" cy="375" rx="80" ry="40" fill="#F0E68C" stroke="#000" />
  <text x="500" y="380" fill="#000" font-size="14" text-anchor="middle">Deploying</text>

<!-- Arrows between Training, Testing, and Deploying -->
  <line x1="125" y1="400" x2="260" y2="375" stroke="#000" marker-end="url(#arrow)" />
  <line x1="380" y1="375" x2="460" y2="375" stroke="#000" marker-end="url(#arrow)" />
  
  <!-- Monitoring (Rectangle) -->
  <rect x="250" y="500" width="150" height="50" fill="#B0E0E6" stroke="#000" />
  <text x="325" y="530" fill="#000" font-size="14" text-anchor="middle">Monitoring</text>
  
  <!-- Arrow from Deploying to Monitoring -->
  <line x1="580" y1="375" x2="325" y2="500" stroke="#000" marker-end="url(#arrow)" />
  
  <!-- Define arrow marker -->
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto">
      <polygon points="0,0 10,5 0,10" fill="#000" />
    </marker>
  </defs>
</svg>

"""

# Add the HTML content to the streamlit app
st.markdown(html_content, unsafe_allow_html=True)