Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,49 +1,65 @@
 import streamlit as st
-from graphviz import Digraph
 
+# Custom CSS for styling
 custom_css = """
 <style>
     html, body, [data-testid="stAppViewContainer"] {
-        background: linear-gradient(to right, #f8fbff, #eef2f3);
-        font-family: 'Arial', sans-serif;
-        color: #333;
+        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: #34495e;
+        color: #2c3e50;
         text-align: center;
-        font-size: 2.8rem;
+        font-size: 3rem;
         margin-top: 20px;
-        text-shadow: 1px 1px 3px rgba(200, 200, 255, 0.8);
+        text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
     }
-    .stButton button {
+    .circle-container {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 20px;
+        margin-top: 30px;
+    }
+    .circle-button {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
         background-color: #4CAF50;
-        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         color: white;
-        padding: 12px 24px;
-        text-align: center;
         font-size: 16px;
-        border-radius: 8px;
+        text-align: center;
         cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
+        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
     }
-    .stButton button:hover {
+    .circle-button:hover {
         background-color: #45a049;
-        transform: scale(1.05);
+        transform: scale(1.1);
     }
-    .stMarkdown {
-        text-align: center;
-        margin-top: 10px;
+    .selected {
+        background-color: #2c3e50 !important;
     }
 </style>
 """
 
+# Apply CSS
 st.markdown(custom_css, unsafe_allow_html=True)
 
-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)
+# Title
+st.markdown("<h1>ML Project Lifecycle</h1>", unsafe_allow_html=True)
+st.write("Click on a lifecycle step below to learn more.")
 
-steps = [
+# Lifecycle stages
+stages = [
     "Problem Statement",
     "Data Collection",
     "Simple EDA",
@@ -52,42 +68,47 @@ steps = [
     "Feature Engineering",
     "Model Training",
     "Testing",
-    "Deployment and Maintenance"
+    "Deployment",
+    "Maintenance",
 ]
 
-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."
+# 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.",
 }
 
+# State management for the selected stage
+if "selected_stage" not in st.session_state:
+    st.session_state.selected_stage = None
 
-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)
+# 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)
 
-selected_step = None
-for step in steps:
-    if st.button(step):
-        selected_step = step
-        break
+# 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])
 
-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)