Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -1,91 +1,91 @@
 import streamlit as st
 
-# HTML content inside a string for correct syntax
-html_content = """
-# Life Cycle of ML
-
-The life cycle of Machine Learning (ML) involves several stages, from defining the problem to deploying and monitoring the model. Here's an overview of each stage:
-
-1. **Problem Statement:** Understanding the problem and setting objectives for the ML model.
-2. **Data Collection:** Gathering relevant data for model training.
-3. **Simple EDA (Exploratory Data Analysis):** Initial analysis to understand the dataset's basic properties.
-4. **Data Preprocessing:** Cleaning the data to ensure it's in a usable format.
-5. **EDA (Exploratory Data Analysis):** Deeper analysis to gain insights and find patterns in the data.
-6. **Feature Engineering:** Creating new features or modifying existing ones to improve model performance.
-7. **Training:** Training machine learning models using the processed data.
-8. **Testing:** Evaluating the trained model using a test set to assess its performance.
-9. **Deploying:** Deploying the model to a production environment.
-10. **Monitoring:** Continuously monitoring the model's performance in the production environment.
+# Render the life cycle process with interactive buttons
+st.title("Machine Learning Life Cycle")
 
----
-
-## Shapes Representing the ML Life Cycle
-
-<svg width="800" height="600">
-  <!-- Problem Statement (Rectangle) -->
-  <rect x="50" y="50" width="150" height="50" fill="#FFB6C1" stroke="#000" />
-  <text x="75" y="80" fill="#000" font-size="14">Problem Statement</text>
-  
-  <!-- Data Collection (Circle) -->
-  <circle cx="300" cy="75" r="40" fill="#ADD8E6" stroke="#000" />
-  <text x="270" y="80" fill="#000" font-size="14">Data Collection</text>
-  
-  <!-- Simple EDA (Ellipse) -->
-  <ellipse cx="500" cy="75" rx="80" ry="40" fill="#90EE90" stroke="#000" />
-  <text x="445" y="80" fill="#000" font-size="14">Simple EDA</text>
-  
-  <!-- Arrows between Problem Statement, Data Collection, and Simple EDA -->
-  <line x1="200" y1="75" x2="260" y2="75" stroke="#000" marker-end="url(#arrow)" />
-  <line x1="380" y1="75" x2="460" y2="75" stroke="#000" marker-end="url(#arrow)" />
-  
-  <!-- Data Preprocessing (Rectangle) -->
-  <rect x="50" y="200" width="150" height="50" fill="#FFD700" stroke="#000" />
-  <text x="75" y="230" fill="#000" font-size="14">Data Preprocessing</text>
-  
-  <!-- EDA (Circle) -->
-  <circle cx="300" cy="225" r="40" fill="#FF7F50" stroke="#000" />
-  <text x="275" y="230" fill="#000" font-size="14">EDA</text>
-  
-  <!-- Feature Engineering (Ellipse) -->
-  <ellipse cx="500" cy="225" rx="80" ry="40" fill="#9370DB" stroke="#000" />
-  <text x="445" y="230" fill="#000" font-size="14">Feature Engineering</text>
-  
-  <!-- Arrows between Data Preprocessing, EDA, and Feature Engineering -->
-  <line x1="125" y1="250" x2="260" y2="225" stroke="#000" marker-end="url(#arrow)" />
-  <line x1="380" y1="225" x2="460" y2="225" stroke="#000" marker-end="url(#arrow)" />
-  
-  <!-- Training (Rectangle) -->
-  <rect x="50" y="350" width="150" height="50" fill="#FF6347" stroke="#000" />
-  <text x="75" y="380" fill="#000" font-size="14">Training</text>
-  
-  <!-- Testing (Circle) -->
-  <circle cx="300" cy="375" r="40" fill="#98FB98" stroke="#000" />
-  <text x="275" y="380" fill="#000" font-size="14">Testing</text>
-  
-  <!-- Deploying (Ellipse) -->
-  <ellipse cx="500" cy="375" rx="80" ry="40" fill="#F0E68C" stroke="#000" />
-  <text x="445" y="380" fill="#000" font-size="14">Deploying</text>
-  
-  <!-- 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)" />
-  
-  <!-- Monitoring (Rectangle) -->
-  <rect x="250" y="500" width="150" height="50" fill="#B0E0E6" stroke="#000" />
-  <text x="275" y="530" fill="#000" font-size="14">Monitoring</text>
-  
-  <!-- Arrow from Deploying to Monitoring -->
-  <line x1="580" y1="375" x2="325" y2="500" stroke="#000" marker-end="url(#arrow)" />
-  
-  <!-- Define arrow marker -->
-  <defs>
-    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto">
-      <polygon points="0,0 10,5 0,10" fill="#000" />
-    </marker>
-  </defs>
+# HTML content inside a string for correct SVG rendering
+html_content = """
+<svg width="800" height="650">
+    <!-- Problem Statement -->
+    <rect x="50" y="50" width="200" height="50" fill="#FFB6C1" stroke="#000" />
+    <text x="75" y="80" fill="#000" font-size="14" text-anchor="middle">Problem Statement</text>
+    
+    <!-- Data Collection -->
+    <circle cx="400" cy="75" r="50" fill="#ADD8E6" stroke="#000" />
+    <text x="400" y="80" fill="#000" font-size="14" text-anchor="middle">Data Collection</text>
+    
+    <!-- Simple EDA -->
+    <ellipse cx="700" cy="75" rx="100" ry="50" fill="#90EE90" stroke="#000" />
+    <text x="700" y="80" fill="#000" font-size="14" text-anchor="middle">Simple EDA</text>
+    
+    <!-- Data Preprocessing -->
+    <rect x="50" y="200" width="200" height="50" fill="#FFD700" stroke="#000" />
+    <text x="150" y="230" fill="#000" font-size="14" text-anchor="middle">Data Preprocessing</text>
+    
+    <!-- EDA -->
+    <circle cx="400" cy="225" r="50" fill="#FF7F50" stroke="#000" />
+    <text x="400" y="230" fill="#000" font-size="14" text-anchor="middle">EDA</text>
+    
+    <!-- Feature Engineering -->
+    <ellipse cx="700" cy="225" rx="100" ry="50" fill="#9370DB" stroke="#000" />
+    <text x="700" y="230" fill="#000" font-size="14" text-anchor="middle">Feature Engineering</text>
+    
+    <!-- Training -->
+    <rect x="50" y="350" width="200" height="50" fill="#FF6347" stroke="#000" />
+    <text x="150" y="380" fill="#000" font-size="14" text-anchor="middle">Training</text>
+    
+    <!-- Testing -->
+    <circle cx="400" cy="375" r="50" fill="#98FB98" stroke="#000" />
+    <text x="400" y="380" fill="#000" font-size="14" text-anchor="middle">Testing</text>
+    
+    <!-- Deploying -->
+    <ellipse cx="700" cy="375" rx="100" ry="50" fill="#F0E68C" stroke="#000" />
+    <text x="700" y="380" fill="#000" font-size="14" text-anchor="middle">Deploying</text>
+    
+    <!-- Monitoring -->
+    <rect x="350" y="500" width="200" height="50" fill="#B0E0E6" stroke="#000" />
+    <text x="450" y="530" fill="#000" font-size="14" text-anchor="middle">Monitoring</text>
+    
+    <!-- Arrows -->
+    <line x1="250" y1="75" x2="350" y2="75" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="450" y1="75" x2="600" y2="75" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="250" y1="225" x2="350" y2="225" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="450" y1="225" x2="600" y2="225" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="250" y1="375" x2="350" y2="375" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="450" y1="375" x2="600" y2="375" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="600" y1="375" x2="450" y2="500" stroke="#000" marker-end="url(#arrow)" />
+    
+    <!-- Define arrow marker -->
+    <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto">
+            <polygon points="0,0 10,5 0,10" fill="#000" />
+        </marker>
+    </defs>
 </svg>
 """
 
-# Render HTML content in Streamlit
+# Render the SVG
 st.markdown(html_content, unsafe_allow_html=True)
 
+# Interactive buttons for stages
+st.subheader("Stages in ML Life Cycle")
+if st.button("Problem Statement"):
+    st.write("Understanding the problem and setting objectives for the ML model.")
+if st.button("Data Collection"):
+    st.write("Gathering relevant data for model training.")
+if st.button("Simple EDA"):
+    st.write("Initial analysis to understand the dataset's basic properties.")
+if st.button("Data Preprocessing"):
+    st.write("Cleaning the data to ensure it's in a usable format.")
+if st.button("EDA"):
+    st.write("Deeper analysis to gain insights and find patterns in the data.")
+if st.button("Feature Engineering"):
+    st.write("Creating new features or modifying existing ones to improve model performance.")
+if st.button("Training"):
+    st.write("Training machine learning models using the processed data.")
+if st.button("Testing"):
+    st.write("Evaluating the trained model using a test set to assess its performance.")
+if st.button("Deploying"):
+    st.write("Deploying the model to a production environment.")
+if st.button("Monitoring"):
+    st.write("Continuously monitoring the model's performance in the production environment.")