Update pages/Life cycle of ML.py

pages/Life cycle of ML.py

@@ -1,191 +1,94 @@
 import streamlit as st
 from graphviz import Digraph
 
-if "current_page" not in st.session_state:
-    st.session_state.current_page = "home"
-
-def navigate_to(page):
-    st.session_state.current_page = page
-
-# Custom CSS for styling
-def add_custom_css():
-    st.markdown("""
-    <style>
-    .arrow-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 20px;
-        margin-top: 50px;
-        flex-wrap: wrap;
+custom_css = """
+<style>
+    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);
     }
-    .arrow {
+    .stButton button {
         background-color: #4CAF50;
+        border: none;
         color: white;
-        padding: 10px 20px;
+        padding: 12px 24px;
         text-align: center;
-        border-radius: 5px;
         font-size: 16px;
-        font-weight: bold;
+        border-radius: 8px;
         cursor: pointer;
-        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
-        transition: all 0.2s ease;
+        transition: background-color 0.3s ease, transform 0.3s ease;
     }
-    .arrow:hover {
+    .stButton button:hover {
         background-color: #45a049;
-        transform: scale(1.1);
-    }
-    .arrow:after {
-        content: "→";
-        margin-left: 10px;
+        transform: scale(1.05);
     }
-    .arrow:last-child:after {
-        content: "";
-    }
-    .back-btn {
-        margin-top: 20px;
-        background-color: #007BFF;
-        color: white;
-        padding: 10px 20px;
+    .stMarkdown {
         text-align: center;
-        border-radius: 5px;
-        font-size: 16px;
-        cursor: pointer;
-        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
-        transition: all 0.2s ease;
-    }
-    .back-btn:hover {
-        background-color: #0056b3;
-        transform: scale(1.1);
+        margin-top: 10px;
     }
-    </style>
-    """, unsafe_allow_html=True)
+</style>
+"""
 
-graph = Digraph()
+st.markdown(custom_css, unsafe_allow_html=True)
 
-graph.edges([
-    ("Problem Statement", "Data Collection"), 
-    ("Data Collection", "Simple EDA"),  
-    ("Simple EDA", "Data Pre-Processing"),  
-    ("Data Pre-Processing", "EDA"),  
-    ("EDA", "Feature Engineering"),  
-    ("Feature Engineering", "Model Training"),  
-    ("Model Training", "Testing"),  
-    ("Testing", "Deployement and maintenance"),
-])
-st.graphviz_chart(graph)
-    
-def home_page():
-    st.title("🚀 Machine Learning Lifecycle")
-    
-    st.markdown('<div class="arrow-container">', unsafe_allow_html=True)
-    if st.button("1. Problem Statement", key="problem_statement"):
-        navigate_to("problem_definition")
-    if st.button("2. Data Collection", key="data_collection"):
-        navigate_to("data_collection")
-    if st.button("3. Simple EDA", key="simple_eda"):
-        navigate_to("simple_eda")
-    if st.button("4. Data Pre-processing", key="data_pre_processing"):
-        navigate_to("data_pre_processing")
-    if st.button("5. EDA", key="eda"):
-        navigate_to("eda")
-    if st.button("6. Feature Engineering", key="feature_engineering"):
-        navigate_to("feature_engineering")
-    if st.button("7. Training Model", key="training_model"):
-        navigate_to("training_model")
-    if st.button("8. Testing", key="testing"):
-        navigate_to("testing")
-    if st.button("9. Deployment", key="deployment"):
-        navigate_to("deployment")
-    if st.button("10. Monitoring", key="monitoring"):
-        navigate_to("monitoring")
-    st.markdown('</div>', 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)
 
-def problem_statement_page():
-    st.title("📌 Problem Statement")
-    st.write()
-    st.markdown('<div class="back-btn" onclick="location.href=\'#\'">⬅️ Back to Home</div>', unsafe_allow_html=True)
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
+steps = [
+    "Problem Statement",
+    "Data Collection",
+    "Simple EDA",
+    "Data Pre-Processing",
+    "EDA",
+    "Feature Engineering",
+    "Model Training",
+    "Testing",
+    "Deployment and Maintenance"
+]
 
-def data_collection_page():
-    st.title("📊 Data Collection")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
+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": "Removing unnecessary data like missing and null values.",
+    "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."
+}
 
-def simple_eda_page():
-    st.title("🔧 Simple EDA")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
 
-def data_pre_processing_page():
-    st.title("🤖 Data Pre-processing")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
+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")
 
-def eda_page():
-    st.title("📈 EDA")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
 
-def feature_engineering_page():
-    st.title("🌐Feature Engineering")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
-        
-def training_model_page():
-    st.title("Training Model")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
-        
-def testing_page():
-    st.title("🌐Testing")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
+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)
 
-def deployment_page():
-    st.title("🔧Deployment")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
+st.markdown("<hr>", unsafe_allow_html=True)
+st.markdown("<div style='text-align:center; font-size:1.2rem;'>Select a phase to learn more:</div>", unsafe_allow_html=True)
 
-def monitoring_page():
-    st.title("🤖Monitoring")
-    st.write("")
-    if st.button("⬅️ Back to Home"):
-        navigate_to("home")
-def main():
-    add_custom_css()
-    
-    if st.session_state.current_page == "home":
-        home_page()
-    elif st.session_state.current_page == "problem_statement":
-        problem_statement_page()
-    elif st.session_state.current_page == "data_collection":
-        data_collection_page()
-    elif st.session_state.current_page == "simple_eda":
-        simple_eda_page()
-    elif st.session_state.current_page == "data_pre_processing":
-        data_pre_processing_page()
-    elif st.session_state.current_page == "eda":
-        eda_page()
-    elif st.session_state.current_page == "feature_engineering":
-        feature_engineering_page()
-    elif st.session_state.current_page == "training_model":
-        training_model_page()
-    elif st.session_state.current_page == "testing":
-        testing_page()
-    elif st.session_state.current_page == "deployment":
-        deployment_page()
-    elif st.session_state.current_page == "monitoring":
-        monitoring_page()
+selected_step = None
+for step in steps:
+    if st.button(step):
+        selected_step = step
+        break
 
-if __name__ == "__main__":
-    main()
+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)