Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -1,69 +1,67 @@
 import streamlit as st
 
-# Render the life cycle process with interactive buttons
-st.title("Machine Learning Life Cycle")
-
-# HTML content inside a string for correct SVG rendering
+# HTML content inside a string for correct syntax
 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>
+# Life Cycle of ML
+
+The life cycle of Machine Learning (ML) involves several stages, from defining the problem to deploying the model. Here's an overview of each stage:
+
+1. **Problem Definition:** Understanding the problem to define the goals and objectives of the ML model.
+2. **Data Collection:** Gathering relevant data required to train the model.
+3. **Data Preprocessing:** Cleaning and transforming the data into a usable format.
+4. **Model Building:** Building and training machine learning models using the processed data.
+5. **Evaluation:** Evaluating the performance of the model and adjusting it as needed.
+6. **Deployment:** Deploying the model into a production environment.
+
+---
+
+## Shapes Representing the 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>
 """
 
+# Render HTML content in Streamlit
+st.markdown(html_content, unsafe_allow_html=True)
+
+
 # Render the SVG
 st.markdown(html_content, unsafe_allow_html=True)