Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -1,6 +1,4 @@
 import streamlit as st
-
-# HTML content inside a string for correct syntax
 html_content = """
 # Life Cycle of ML
 
@@ -15,26 +13,46 @@ The life cycle of Machine Learning (ML) involves several stages, from defining t
 
 ---
 
-## Shapes Representing the ML Life Cycle
-
-### Rectangle: Problem Definition
-<div style="width: 200px; height: 100px; background-color: lightblue;"></div>
-
-### Circle: Data Collection
-<div style="width: 100px; height: 100px; border-radius: 50%; background-color: lightcoral;"></div>
-
-### Ellipse: Data Preprocessing
-<div style="width: 200px; height: 100px; border-radius: 50%; background-color: lightgreen;"></div>
-
-### SVG Shapes Representing ML Life Cycle
-
-<svg width="300" height="200">
-  <!-- Rectangle: Problem Definition -->
-  <rect x="10" y="10" width="100" height="50" style="fill:lightblue;stroke:black;stroke-width:2" />
-  <!-- Circle: Data Collection -->
-  <circle cx="200" cy="50" r="40" style="fill:lightcoral;stroke:black;stroke-width:2" />
-  <!-- Ellipse: Data Preprocessing -->
-  <ellipse cx="200" cy="150" rx="85" ry="55" style="fill:lightgreen;stroke:black;stroke-width:2" />
+## ML Life Cycle
+
+<svg width="600" height="300">
+  <!-- Problem Definition (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 Definition</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>
+  
+  <!-- Data Preprocessing (Ellipse) -->
+  <ellipse cx="500" cy="75" rx="80" ry="40" fill="#90EE90" stroke="#000" />
+  <text x="445" y="80" fill="#000" font-size="14">Data Preprocessing</text>
+  
+  <!-- Arrows between Problem Definition and Data Collection -->
+  <line x1="200" y1="75" x2="260" y2="75" stroke="#000" marker-end="url(#arrow)" />
+  
+  <!-- Model Building (Rectangle) -->
+  <rect x="50" y="200" width="150" height="50" fill="#FFD700" stroke="#000" />
+  <text x="75" y="230" fill="#000" font-size="14">Model Building</text>
+  
+  <!-- Evaluation (Circle) -->
+  <circle cx="300" cy="225" r="40" fill="#FF7F50" stroke="#000" />
+  <text x="275" y="230" fill="#000" font-size="14">Evaluation</text>
+  
+  <!-- Deployment (Rectangle) -->
+  <rect x="450" y="200" width="150" height="50" fill="#9370DB" stroke="#000" />
+  <text x="475" y="230" fill="#000" font-size="14">Deployment</text>
+  
+  <!-- Arrows between Model Building, Evaluation, and Deployment -->
+  <line x1="125" y1="250" x2="260" y2="225" stroke="#000" marker-end="url(#arrow)" />
+  <line x1="340" y1="225" x2="450" y2="225" 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>
 """