Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -1,46 +1,58 @@
 import streamlit as st
 
 # Center alignment for the SVG diagram
-st.markdown('<div style="text-align: center;">', unsafe_allow_html=True)
+st.markdown('<div align="center">', unsafe_allow_html=True)
 
-# Simplified SVG Diagram for Machine Learning Life Cycle
+# SVG with shapes and clickable buttons (links)
 st.markdown('''
-<svg width="700" height="500">
+<svg width="600" height="400">
 
     <!-- Problem Definition -->
-    <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>
+    <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>
 
     <!-- Data Collection -->
-    <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>
+    <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>
 
     <!-- Data Preprocessing -->
-    <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>
+    <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)" />
 
     <!-- Model Building -->
-    <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>
+    <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>
 
-    <!-- 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>
+    <!-- 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>
 
     <!-- Deployment -->
-    <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>
+    <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>
 
     <!-- Arrows -->
-    <line x1="150" y1="100" x2="150" y2="150" stroke="#000" />
-    <line x1="150" y1="200" x2="150" y2="250" stroke="#000" />
-    <line x1="250" y1="175" x2="350" y2="175" stroke="#000" />
-    <line x1="450" y1="200" x2="450" y2="250" stroke="#000" />
-    <line x1="350" y1="275" x2="250" y2="275" stroke="#000" />
-    <line x1="300" y1="300" x2="300" y2="400" stroke="#000" />
+    <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)" />
 
 </svg>
 ''', unsafe_allow_html=True)
 
-# Close the div
+# Close the div for centering the SVG
 st.markdown('</div>', unsafe_allow_html=True)