Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,114 +1,85 @@
 import streamlit as st
+from graphviz import Digraph
 
-# Custom CSS for styling
+# Custom CSS for circular buttons
 custom_css = """
 <style>
-    html, body, [data-testid="stAppViewContainer"] {
-        background: linear-gradient(
-            rgba(255, 255, 255, 0.9),
-            rgba(200, 200, 255, 0.8)
-        ),
-        url('https://i.imgur.com/vIszbgs.jpeg') no-repeat center center fixed;
-        background-size: cover;
-        font-family: Arial, sans-serif;
-        color: #333333;
-    }
-    h1 {
-        color: #2c3e50;
-        text-align: center;
-        font-size: 3rem;
-        margin-top: 20px;
-        text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
-    }
-    .circle-container {
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: 20px;
-        margin-top: 30px;
-    }
-    .circle-button {
+    .circular-button {
         width: 100px;
         height: 100px;
-        border-radius: 50%;
         background-color: #4CAF50;
-        display: flex;
-        justify-content: center;
-        align-items: center;
         color: white;
-        font-size: 16px;
+        font-size: 14px;
+        font-weight: bold;
+        border: none;
+        border-radius: 50%;
         text-align: center;
+        line-height: 100px;
+        margin: 10px;
+        display: inline-block;
         cursor: pointer;
-        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     }
-    .circle-button:hover {
+    .circular-button:hover {
         background-color: #45a049;
-        transform: scale(1.1);
     }
-    .selected {
-        background-color: #2c3e50 !important;
+    .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    .arrow {
+        font-size: 24px;
+        color: #2c3e50;
+        text-align: center;
+        margin: 0 15px;
     }
 </style>
 """
 
-# Apply CSS
+# Apply custom CSS
 st.markdown(custom_css, unsafe_allow_html=True)
 
 # Title
-st.markdown("<h1>ML Project Lifecycle</h1>", unsafe_allow_html=True)
-st.write("Click on a lifecycle step below to learn more.")
+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.")
 
-# Lifecycle stages
-stages = [
-    "Problem Statement",
-    "Data Collection",
-    "Simple EDA",
-    "Data Pre-Processing",
-    "EDA",
-    "Feature Engineering",
-    "Model Training",
-    "Testing",
-    "Deployment",
-    "Maintenance",
+# 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"
 ]
-
-# Descriptions for each stage
-stage_descriptions = {
-    "Problem Statement": "Define the objective and scope of the project.",
-    "Data Collection": "Gather data from various reliable sources.",
-    "Simple EDA": "Summarize and understand the quality of the data.",
-    "Data Pre-Processing": "Clean and prepare the data by removing noise.",
-    "EDA": "Visualize and analyze data to uncover patterns.",
-    "Feature Engineering": "Create, transform, and select features for modeling.",
-    "Model Training": "Train the ML model using prepared data.",
-    "Testing": "Evaluate the model's performance and accuracy.",
-    "Deployment": "Integrate the model into a production environment.",
-    "Maintenance": "Monitor and update the model to ensure performance.",
+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."
 }
 
-# State management for the selected stage
-if "selected_stage" not in st.session_state:
-    st.session_state.selected_stage = None
-
-# Display lifecycle steps as circular buttons
-st.markdown('<div class="circle-container">', unsafe_allow_html=True)
-for stage in stages:
-    is_selected = st.session_state.selected_stage == stage
-    btn_class = "circle-button selected" if is_selected else "circle-button"
-    if st.markdown(
-        f"""
-        <div class="{btn_class}" onclick="window.parent.streamlit.runOnClick({repr(stage)})">
-            {stage}
-        </div>
-        """,
-        unsafe_allow_html=True,
-    ):
-        st.session_state.selected_stage = stage
-st.markdown('</div>', unsafe_allow_html=True)
+# 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
 
-# Display description of the selected stage
-if st.session_state.selected_stage:
-    selected_stage = st.session_state.selected_stage
-    st.markdown(f"### {selected_stage}")
-    st.write(stage_descriptions[selected_stage])
+st.graphviz_chart(generate_graph(), use_container_width=True)
 
+# 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)