Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -1,50 +1,60 @@
 import streamlit as st
+
+# Center alignment for SVG diagram
 st.markdown('<div align="center">', unsafe_allow_html=True)
-st.markdown('<svg width="600" height="400">', unsafe_allow_html=True)
-st.markdown('''
-<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>
-''', unsafe_allow_html=True)
-st.markdown('''
-<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>
-''', unsafe_allow_html=True)
-st.markdown('''
-<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>
-''', unsafe_allow_html=True)
-st.markdown('''
-<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)" />
-''', unsafe_allow_html=True)
-st.markdown('''
-<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>
-''', unsafe_allow_html=True)
-st.markdown('''
-<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>
-''', unsafe_allow_html=True)
-st.markdown('''
-<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>
-''', unsafe_allow_html=True)
+
+# SVG with shapes and buttons
 st.markdown('''
-<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 width="600" height="400">
+
+    <!-- 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>
+
+    <!-- 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>
+
+    <!-- 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)" />
+
+    <!-- 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>
+
+    <!-- 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 -->
+    <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="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)
-st.markdown('</svg>', unsafe_allow_html=True)
+
+# Close div
 st.markdown('</div>', unsafe_allow_html=True)
 
+