Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -21,7 +21,7 @@ The life cycle of Machine Learning (ML) involves several stages, from defining t
 
 ## Shapes Representing the ML Life Cycle
 
-<svg width="800" height="800">
+<svg width="800" height="600">
   <!-- Problem Statement (Rectangle) -->
   <rect x="50" y="50" width="150" height="50" fill="#FFB6C1" stroke="#000" />
   <text x="125" y="80" fill="#000" font-size="14" text-anchor="middle">Problem Statement</text>
@@ -88,56 +88,37 @@ The life cycle of Machine Learning (ML) involves several stages, from defining t
 <!-- Buttons below shapes -->
 
 <!-- Problem Statement Button (Rectangle) -->
-<button style="width: 150px; height: 50px; background-color: #FFB6C1; border: 1px solid #000; text-align: center; margin: 10px;">Problem Statement</button>
+<button style="width: 150px; height: 50px; background-color: #FFB6C1; border: 1px solid #000; text-align: center;">Problem Statement</button>
+<st.write("Understanding the problem and setting objectives for the ML model.")>
 
 <!-- Data Collection Button (Ellipse) -->
-<button style="width: 160px; height: 80px; background-color: #ADD8E6; border-radius: 40px; border: 1px solid #000; text-align: center; margin: 10px;">Data Collection</button>
+<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; margin: 10px;">Simple EDA</button>
+<button style="width: 160px; height: 80px; background-color: #90EE90; border-radius: 40px; border: 1px solid #000; text-align: center;">Simple EDA</button>
 
-<!-- Arrows between Buttons -->
-<svg width="800" height="300">
-  <!-- Arrow from Problem Statement to Data Collection -->
-  <line x1="200" y1="100" x2="260" y2="100" stroke="#000" marker-end="url(#arrow)" />
-  
-  <!-- Arrow from Data Collection to Simple EDA -->
-  <line x1="380" y1="100" x2="460" y2="100" stroke="#000" marker-end="url(#arrow)" />
-  
-  <!-- Data Preprocessing Button (Rectangle) -->
-  <button style="width: 150px; height: 50px; background-color: #FFD700; border: 1px solid #000; text-align: center; margin: 10px;">Data Preprocessing</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; margin: 10px;">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; margin: 10px;">Feature Engineering</button>
-  
-  <!-- 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 Button (Rectangle) -->
-  <button style="width: 150px; height: 50px; background-color: #FF6347; border: 1px solid #000; text-align: center; margin: 10px;">Training</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>
 
-  <!-- Testing Button (Circle) -->
-  <button style="width: 80px; height: 80px; background-color: #98FB98; border-radius: 50%; border: 1px solid #000; text-align: center; margin: 10px;">Testing</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>
 
-  <!-- Deploying Button (Ellipse) -->
-  <button style="width: 160px; height: 80px; background-color: #F0E68C; border-radius: 40px; border: 1px solid #000; text-align: center; margin: 10px;">Deploying</button>
+<!-- Training Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FF6347; border: 1px solid #000; text-align: center;">Training</button>
 
-  <!-- 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 Button (Rectangle) -->
-  <button style="width: 150px; height: 50px; background-color: #B0E0E6; border: 1px solid #000; text-align: center; margin: 10px;">Monitoring</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>
 
-  <!-- Arrow from Deploying to Monitoring -->
-  <line x1="580" y1="375" x2="325" y2="500" stroke="#000" marker-end="url(#arrow)" />
-</svg>
+<!-- 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>
 """
 
 # Render HTML content in Streamlit
 st.markdown(html_content, unsafe_allow_html=True)
+