Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -1,98 +1,8 @@
 import streamlit as st
 
-# Initialize session state for tracking the current lifecycle step
-if "step" not in st.session_state:
-    st.session_state.step = 0
-
-# Define ML lifecycle steps with detailed descriptions
-ml_lifecycle = [
-    {
-        "title": "📋 **Problem Statement**",
-        "description": """
-        **Info**:
-        Understand the challenge at hand, establish clear objectives, and set criteria for success.
-        """
-    },
-    {
-        "title": "🧑‍💻 **Data Collection**",
-        "description": """
-        **Info**: Gather relevant data to train the model, utilizing sources such as surveys, web scraping, and APIs.
-        
-        """
-    },
-     {
-        "title": "🔍**Simple EDA**",
-        "description": """
-        **Info**:  Perform a preliminary analysis to examine the dataset’s key features.
-        """
-    },
-    {
-        "title": "🧹 **Data Preprocessing**",
-        "description": """
-        **Info**: Clean the data to make sure it is in an appropriate format for further analysis.
-        """
-    },
-    {
-        "title": "🔎 **EDA**",
-        "description": """
-        **Info**:Conduct deeper analysis to extract valuable insights and uncover patterns within the data. 
-        """
-    },
-    {
-        "title": "🔧 **Feature Engineering**",
-        "description": """
-        **Info**: Develop new features or refine existing ones to enhance the model’s performance.
-        """
-    },
-    {
-        "title": "🛠️ **Training**",
-        "description": """
-        **Info**:Train machine learning models using the preprocessed data.
-        """
-    },
-    {
-        "title": "🧪 **Testing**",
-        "description": """
-        **Info**:Assess the model’s performance using a separate test dataset to determine its effectiveness.
-        """
-    },
-    {
-        "title": "🚀 **Deploying**",
-        "description": """
-        **Info**:Deploy the trained model into a production environment for real-world use.
-        """
-    },
-    {
-        "title": "📊 **Monitoring**",
-        "description": """
-        **Info**:Continuously track the model’s performance in production to ensure it remains effective over time
-        """
-    },
-]
-
-# Display title and description
-st.title("📊 Machine Learning Life Cycle")
-st.write("Explore the detailed life cycle of a Machine Learning project by clicking through the steps below:")
-
-# Buttons for navigation
-col1, col2, col3 = st.columns([1, 1, 1])
-with col1:
-    if st.button("⬅️ Previous", disabled=st.session_state.step == 0):
-        st.session_state.step -= 1
-with col3:
-    if st.button("➡️ Next", disabled=st.session_state.step == len(ml_lifecycle) - 1):
-        st.session_state.step += 1
-
-# Display the current lifecycle step with details
-current_step = ml_lifecycle[st.session_state.step]
-st.markdown(f"### {current_step['title']}")
-st.markdown(current_step['description'])
-
-# Reset button
-if st.button("🔄 Restart"):
-    st.session_state.step = 0
-
-# HTML content for shapes and buttons
+import streamlit as st
+
+# HTML content inside a string for correct syntax
 html_content = """
 # Life Cycle of ML
 
@@ -157,8 +67,8 @@ The life cycle of Machine Learning (ML) involves several stages, from defining t
   <!-- Deploying (Ellipse) -->
   <ellipse cx="500" cy="375" rx="80" ry="40" fill="#F0E68C" stroke="#000" />
   <text x="500" y="380" fill="#000" font-size="14" text-anchor="middle">Deploying</text>
-
-<!-- Arrows between Training, Testing, and Deploying -->
+  
+  <!-- Arrows between Training, Testing, and Deploying -->
   <line x1="125" y1="400" x2="260" y2="375" stroke="#000" marker-end="url(#arrow)" />
   <line x1="380" y1="375" x2="460" y2="375" stroke="#000" marker-end="url(#arrow)" />
   
@@ -177,7 +87,38 @@ The life cycle of Machine Learning (ML) involves several stages, from defining t
   </defs>
 </svg>
 
+<!-- Buttons below shapes -->
+
+<!-- Problem Statement Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FFB6C1; border: 1px solid #000; text-align: center;">Problem Statement</button>
+
+<!-- Data Collection Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #ADD8E6; border-radius: 40px; border: 1px solid #000; text-align: center;">Data Collection</button>
+
+<!-- Simple EDA Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #90EE90; border-radius: 40px; border: 1px solid #000; text-align: center;">Simple EDA</button>
+
+<!-- Data Preprocessing Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FFD700; border: 1px solid #000; text-align: center;">Data Preprocessing</button>
+
+<!-- EDA Button (Circle) -->
+<button style="width: 80px; height: 80px; background-color: #FF7F50; border-radius: 50%; border: 1px solid #000; text-align: center;">EDA</button>
+
+<!-- Feature Engineering Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #9370DB; border-radius: 40px; border: 1px solid #000; text-align: center;">Feature Engineering</button>
+
+<!-- Training Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FF6347; border: 1px solid #000; text-align: center;">Training</button>
+
+<!-- Testing Button (Circle) -->
+<button style="width: 80px; height: 80px; background-color: #98FB98; border-radius: 50%; border: 1px solid #000; text-align: center;">Testing</button>
+
+<!-- Deploying Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #F0E68C; border-radius: 40px; border: 1px solid #000; text-align: center;">Deploying</button>
+
+<!-- Monitoring Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #B0E0E6; border: 1px solid #000; text-align: center;">Monitoring</button>
 """
 
-# Add the HTML content to the streamlit app
-st.markdown(html_content, unsafe_allow_html=True)
+# Render HTML content in Streamlit
+st.markdown(html_content, unsafe_allow_html=True)