Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,147 +1,66 @@
 import streamlit as st
 
-custom_css = """
-<style>
-    html, body, [data-testid="stAppViewContainer"] {
-        font-family: Arial, sans-serif;
-        background: linear-gradient(to right, #ffefba, #ffffff); /* Warm gradient */
-        color: #333;
+# Function for displaying lifecycle steps with details
+def display_lifecycle_step(step_name):
+    steps = {
+        "Problem Statement": "The first step is to define the problem clearly. It involves identifying the objective of the machine learning model, whether it's classification, regression, or another type of problem.",
+        "Data Collection": "Data is collected from various sources like APIs, databases, or web scraping. It's crucial to have enough data for the model to learn effectively.",
+        "Simple EDA": "At this stage, we do a simple Exploratory Data Analysis (EDA) to understand the data better, identify patterns, and detect anomalies or missing values.",
+        "Data Pre-Processing": "This step includes cleaning the data: handling missing values, encoding categorical variables, normalizing numerical features, and splitting the data into training and testing sets.",
+        "EDA": "A deeper EDA helps to identify relationships between features, correlation, and insights that guide feature engineering and model selection.",
+        "Feature Engineering": "In this step, you create new features or modify existing features to improve the model's performance. Techniques like scaling, encoding, or creating polynomial features are common.",
+        "Model Training": "You select an appropriate algorithm and train the model using the training dataset. Common algorithms include decision trees, linear regression, or neural networks.",
+        "Testing": "After training the model, you test it using unseen data to assess its performance using evaluation metrics like accuracy, precision, recall, or mean squared error.",
+        "Deployment and Maintenance": "Once the model is deployed, it’s integrated into an application or system, and continuous monitoring is required to ensure it performs well and is updated as needed."
     }
-    h1 {
-        color: #4CAF50;  /* Green */
-        text-align: center;
-        font-size: 3rem;
-        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
-    }
-    .circle-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        width: 500px;
-        height: 500px;
-        margin: 50px auto;
-        background: transparent;
-    }
-    .circle-container .button {
-        position: absolute;
-        width: 120px;
-        height: 120px;
-        background: #8A2BE2; /* Blue-violet */
-        color: white;
-        border: none;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 1rem;
-        text-align: center;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        cursor: pointer;
-        transition: transform 0.3s, box-shadow 0.3s;
-        text-decoration: none;
-    }
-    .circle-container .button:hover {
-        transform: scale(1.1);
-        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-    }
-    .center {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.5rem;
-        color: #4CAF50;  /* Green */
-        text-align: center;
-    }
-</style>
-"""
-
-st.markdown(custom_css, unsafe_allow_html=True)
-
-# Define HTML content for ML lifecycle
-ml_lifecycle_html = """
-<div class="circle-container">
-    <a href="?page=problem_statement" class="button">Problem Statement</a>
-    <a href="?page=data_collection" class="button">Data Collection</a>
-    <a href="#" class="button">Simple EDA</a>
-    <a href="#" class="button">Pre-Processing</a>
-    <a href="#" class="button">EDA</a>
-    <a href="#" class="button">Feature Engineering</a>
-    <a href="#" class="button">Model Training</a>
-    <a href="#" class="button">Testing</a>
-    <a href="#" class="button">Deployment</a>
-    <a href="#" class="button">Monitoring</a>
-    <div class="center"><strong>ML Lifecycle</strong></div>
-</div>
-"""
-
-
-def main_page():
-    st.markdown("<h1>Machine Learning Lifecycle</h1>", unsafe_allow_html=True)
-    st.markdown(ml_lifecycle_html, unsafe_allow_html=True)
+    st.write(f"### {step_name}")
+    st.write(steps[step_name])
 
-def data_collection_page():
-    st.title("Data Collection")
-    st.write("""
-    ### What is Data?
-    Data refers to raw facts and figures that can be processed for generating insights. It can be categorized as:
-    - **Structured Data**
-    - **Semi-Structured Data**
-    - **Unstructured Data**
-    """)
+# Sidebar with buttons for lifecycle steps
+st.sidebar.title("ML Lifecycle Steps")
 
-    # Buttons for different types of data
-    if st.button("Structured Data"):
-        st.session_state.data_type = "structured"
-    elif st.button("Semi-Structured Data"):
-        st.session_state.data_type = "semi_structured"
-    elif st.button("Unstructured Data"):
-        st.session_state.data_type = "unstructured"
+# Create buttons for each lifecycle step
+steps_list = [
+    "Problem Statement", "Data Collection", "Simple EDA", 
+    "Data Pre-Processing", "EDA", "Feature Engineering", 
+    "Model Training", "Testing", "Deployment and Maintenance"
+]
 
-    if "data_type" in st.session_state:
-        if st.session_state.data_type == "structured":
-            st.subheader("Structured Data")
-            if st.button("Excel"):
-                st.write("""
-                ### Excel
-                - **What is it?** Spreadsheet software for storing tabular data.
-                - **How to read?** Use Python libraries like `pandas`:
-                ```python
-                import pandas as pd
-                df = pd.read_excel("file.xlsx")
-                ```
-                - **Common Issues:**
-                  - Large file sizes causing memory errors.
-                  - Formatting errors.
-                - **Solutions:**
-                  - Use lightweight libraries like `openpyxl`.
-                  - Pre-clean the data before analysis.
-                """)
-            elif st.button("CSV"):
-                st.write("""
-                ### CSV
-                - **What is it?** Comma-separated values for tabular data.
-                - **How to read?**
-                ```python
-                import pandas as pd
-                df = pd.read_csv("file.csv")
-                ```
-                - **Common Issues:**
-                  - Delimiter inconsistencies.
-                  - Missing values.
-                - **Solutions:**
-                  - Specify the `delimiter` parameter.
-                  - Use methods like `fillna` to handle missing values.
-                """)
+# Displaying the lifecycle steps as buttons
+selected_step = st.sidebar.radio(
+    "Choose a step in the ML lifecycle:",
+    steps_list,
+    index=0  # Default selected step
+)
 
-    if st.button("Back to Main Page"):
-        st.query_params(page="main")
+# Main content area displaying the corresponding step details
+st.title("Machine Learning Lifecycle")
 
-# Page routing
-if current_page == "data_collection":
-    data_collection_page()
-else:
-    main_page()
+# Show corresponding step details when a button is selected
+display_lifecycle_step(selected_step)
 
+# Add custom styling to make it look like a circular structure
+st.markdown("""
+    <style>
+        .stApp {
+            background-color: #f0f0f5;
+            font-family: 'Arial', sans-serif;
+        }
+        .stSidebar .sidebar-content {
+            background-color: #e3e4e8;
+            border-radius: 10px;
+            padding: 10px;
+        }
+        .stButton > button {
+            background-color: #008CBA;
+            color: white;
+            border-radius: 50px;
+            font-size: 18px;
+            padding: 12px 24px;
+        }
+        .stButton > button:hover {
+            background-color: #007B8C;
+        }
+    </style>
+""", unsafe_allow_html=True)