Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -3,61 +3,55 @@ import streamlit as st
 # Center alignment for SVG diagram
 st.markdown('<div style="text-align: center;">', unsafe_allow_html=True)
 
-# SVG diagram
+# SVG Diagram for Machine Learning Life Cycle
 st.markdown('''
-<svg width="600" height="400">
+<svg width="700" height="500">
 
-    <!-- Arrow marker definition -->
+    <!-- Definitions for arrowheads -->
     <defs>
-        <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto">
-            <path d="M0,0 L0,6 L9,3 z" fill="#000" />
+        <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
+            <path d="M0,0 L10,5 L0,10 z" fill="#000" />
         </marker>
     </defs>
 
     <!-- Problem Definition -->
-    <a href="#problem-definition">
-        <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>
-    </a>
+    <rect x="50" y="50" width="200" height="50" fill="#FFD700" stroke="#000" />
+    <text x="70" y="80" fill="#000" font-size="14">Problem Definition</text>
 
     <!-- Data Collection -->
-    <a href="#data-collection">
-        <circle cx="300" cy="75" r="40" fill="#ADD8E6" stroke="#000" />
-        <text x="270" y="80" fill="#000" font-size="14">Data Collection</text>
-    </a>
+    <rect x="50" y="150" width="200" height="50" fill="#ADD8E6" stroke="#000" />
+    <text x="70" y="180" fill="#000" font-size="14">Data Collection</text>
 
     <!-- Data Preprocessing -->
-    <a href="#data-preprocessing">
-        <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>
-    </a>
-
-    <!-- Arrows -->
-    <line x1="200" y1="75" x2="260" y2="75" stroke="#000" marker-end="url(#arrow)" />
-    <line x1="340" y1="75" x2="420" y2="75" stroke="#000" marker-end="url(#arrow)" />
+    <rect x="50" y="250" width="200" height="50" fill="#90EE90" stroke="#000" />
+    <text x="70" y="280" fill="#000" font-size="14">Data Preprocessing</text>
 
     <!-- Model Building -->
-    <a href="#model-building">
-        <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>
-    </a>
+    <rect x="350" y="150" width="200" height="50" fill="#FFB6C1" stroke="#000" />
+    <text x="370" y="180" fill="#000" font-size="14">Model Building</text>
 
-    <!-- Evaluation -->
-    <a href="#evaluation">
-        <circle cx="300" cy="225" r="40" fill="#FF7F50" stroke="#000" />
-        <text x="275" y="230" fill="#000" font-size="14">Evaluation</text>
-    </a>
+    <!-- Model Evaluation -->
+    <rect x="350" y="250" width="200" height="50" fill="#9370DB" stroke="#000" />
+    <text x="370" y="280" fill="#000" font-size="14">Model Evaluation</text>
 
     <!-- Deployment -->
-    <a href="#deployment">
-        <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>
-    </a>
+    <rect x="200" y="400" width="200" height="50" fill="#FF7F50" stroke="#000" />
+    <text x="230" y="430" fill="#000" font-size="14">Deployment</text>
+
+    <!-- Arrows -->
+    <line x1="150" y1="100" x2="150" y2="150" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="150" y1="200" x2="150" y2="250" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="250" y1="175" x2="350" y2="175" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="450" y1="200" x2="450" y2="250" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="350" y1="275" x2="250" y2="275" stroke="#000" marker-end="url(#arrow)" />
+    <line x1="300" y1="300" x2="300" y2="400" stroke="#000" marker-end="url(#arrow)" />
+
 </svg>
 ''', unsafe_allow_html=True)
 
-# Close div
+# Closing div
 st.markdown('</div>', unsafe_allow_html=True)
 
 
 
+