Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,85 +1,93 @@
 import streamlit as st
 from graphviz import Digraph
 
-# Custom CSS for circular buttons
 custom_css = """
 <style>
-    .circular-button {
-        width: 100px;
-        height: 100px;
+    html, body, [data-testid="stAppViewContainer"] {
+        background: linear-gradient(to right, #f8fbff, #eef2f3);
+        font-family: 'Arial', sans-serif;
+        color: #333;
+    }
+    h1 {
+        color: #34495e;
+        text-align: center;
+        font-size: 2.8rem;
+        margin-top: 20px;
+        text-shadow: 1px 1px 3px rgba(200, 200, 255, 0.8);
+    }
+    .stButton button {
         background-color: #4CAF50;
-        color: white;
-        font-size: 14px;
-        font-weight: bold;
         border: none;
-        border-radius: 50%;
+        color: white;
+        padding: 12px 24px;
         text-align: center;
-        line-height: 100px;
-        margin: 10px;
-        display: inline-block;
+        font-size: 16px;
+        border-radius: 8px;
         cursor: pointer;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+        transition: background-color 0.3s ease, transform 0.3s ease;
     }
-    .circular-button:hover {
+    .stButton button:hover {
         background-color: #45a049;
+        transform: scale(1.05);
     }
-    .container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-    .arrow {
-        font-size: 24px;
-        color: #2c3e50;
+    .stMarkdown {
         text-align: center;
-        margin: 0 15px;
+        margin-top: 10px;
     }
 </style>
 """
 
-# Apply custom CSS
 st.markdown(custom_css, unsafe_allow_html=True)
 
-# Title
-st.markdown("<h1 style='text-align:center;'>Machine Learning Lifecycle</h1>", unsafe_allow_html=True)
-st.write("Explore the 10 steps of the ML lifecycle by clicking on the buttons below.")
+st.markdown("<h1>🚀 Lifecycle of an ML Project</h1>", unsafe_allow_html=True)
+
+st.markdown("<p style='text-align:center;'>Explore each phase of the ML lifecycle by clicking on the buttons below</p>", unsafe_allow_html=True)
 
-# Define lifecycle steps and descriptions
-lifecycle_steps = [
-    "Problem Statement", "Data Collection", "Simple EDA", "Data Pre-Processing", 
-    "EDA", "Feature Engineering", "Model Training", "Testing", 
-    "Hyperparameter Tuning", "Deployment and Maintenance"
+steps = [
+    "Problem Statement",
+    "Data Collection",
+    "Simple EDA",
+    "Data Pre-Processing",
+    "EDA",
+    "Feature Engineering",
+    "Model Training",
+    "Testing",
+    "Deployment and Maintenance"
 ]
-lifecycle_descriptions = {
-    "Problem Statement": "Define the objective of the project.",
-    "Data Collection": "Gather data from various sources.",
-    "Simple EDA": "Summarize data to understand its quality.",
-    "Data Pre-Processing": "Clean data by removing missing or null values.",
-    "EDA": "Visualize data and uncover insights.",
-    "Feature Engineering": "Create and analyze features and labels.",
-    "Model Training": "Train the model to learn feature-label relationships.",
-    "Testing": "Evaluate the model's performance.",
-    "Hyperparameter Tuning": "Optimize the model for best performance.",
-    "Deployment and Maintenance": "Deploy and monitor the model in production."
+
+descriptions = {
+    "Problem Statement": "Objective of the project.",
+    "Data Collection": "Collecting data from various sources.",
+    "Simple EDA": "Describing the quality of the data.",
+    "Data Pre-Processing": "It is a technique by which we can convert raw data into pre-procesed data --->1.Clean the data  2.Transform the data",
+    "EDA": "Transforming insights into a clean dataset and providing proper visualizations.",
+    "Feature Engineering": "Creating and analyzing features and labels.",
+    "Model Training": "Training the machine about relationships between features and labels.",
+    "Testing": "Testing how efficiently the machine learned.",
+    "Deployment and Maintenance": "Deploying the machine to the client and ensuring maintenance for accurate results."
 }
 
-# Generate Graphviz Circular Diagram
-def generate_graph():
-    dot = Digraph()
-    dot.attr(rankdir="LR", size="8,8", layout="circo")
-    for i, step in enumerate(lifecycle_steps):
-        dot.node(f"{i+1}", step)
-    for i in range(len(lifecycle_steps)):
-        dot.edge(f"{i+1}", f"{(i+1) % len(lifecycle_steps) + 1}")
-    return dot
 
-st.graphviz_chart(generate_graph(), use_container_width=True)
+graph = Digraph(engine="neato", format="svg")
+graph.attr(splines="true", nodesep="0.8", ranksep="1.2", rankdir="LR")
+graph.attr("node", shape="ellipse", style="filled", color="#b3cde0", fontname="Arial", fontsize="12")
+
+
+for i, step in enumerate(steps):
+    graph.node(str(i), step)
+    if i < len(steps) - 1:
+        graph.edge(str(i), str(i+1), color="#34495e", penwidth="2", arrowhead="vee", arrowsize="1.2")
+
+st.graphviz_chart(graph)
+
+st.markdown("<hr>", unsafe_allow_html=True)
+
+selected_step = None
+for step in steps:
+    if st.button(step):
+        selected_step = step
+        break
 
-# Circular interactive buttons for each step
-st.markdown("<div class='container'>", unsafe_allow_html=True)
-for step in lifecycle_steps:
-    if st.button(step, key=step):
-        st.write(f"### {step}")
-        st.write(lifecycle_descriptions[step])
-st.markdown("</div>", unsafe_allow_html=True)
+if selected_step:
+    st.markdown(f"<h2>{selected_step}</h2>", unsafe_allow_html=True)
+    st.markdown(f"<p style='font-size:1.1rem; text-align:center;'>{descriptions[selected_step]}</p>", unsafe_allow_html=True)