Update pages/Life_cycle_of_ML.py

pages/Life_cycle_of_ML.py

@@ -84,100 +84,39 @@ The life cycle of Machine Learning (ML) involves several stages, from defining t
     </marker>
   </defs>
 </svg>
-import streamlit as st
 
-# Render the life cycle process with interactive buttons
-st.title("Machine Learning Life Cycle")
+<!-- Buttons below shapes -->
 
-# HTML content inside a string for correct SVG rendering
-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>
-</svg>
-"""
+<!-- Problem Statement Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FFB6C1; border: 1px solid #000; text-align: center;">Problem Statement</button>
 
-# Render the SVG
-st.markdown(html_content, unsafe_allow_html=True)
+<!-- Data Collection Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #ADD8E6; border-radius: 40px; border: 1px solid #000; text-align: center;">Data Collection</button>
+
+<!-- Simple EDA Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #90EE90; border-radius: 40px; border: 1px solid #000; text-align: center;">Simple EDA</button>
 
-# Interactive buttons for stages
-st.subheader("Stages in ML Life Cycle")
-if st.button("Problem Statement"):
-    st.write("Understanding the problem and setting objectives for the ML model.")
-if st.button("Data Collection"):
-    st.write("Gathering relevant data for model training.")
-if st.button("Simple EDA"):
-    st.write("Initial analysis to understand the dataset's basic properties.")
-if st.button("Data Preprocessing"):
-    st.write("Cleaning the data to ensure it's in a usable format.")
-if st.button("EDA"):
-    st.write("Deeper analysis to gain insights and find patterns in the data.")
-if st.button("Feature Engineering"):
-    st.write("Creating new features or modifying existing ones to improve model performance.")
-if st.button("Training"):
-    st.write("Training machine learning models using the processed data.")
-if st.button("Testing"):
-    st.write("Evaluating the trained model using a test set to assess its performance.")
-if st.button("Deploying"):
-    st.write("Deploying the model to a production environment.")
-if st.button("Monitoring"):
-    st.write("Continuously monitoring the model's performance in the production environment.")
+<!-- Data Preprocessing Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FFD700; border: 1px solid #000; text-align: center;">Data Preprocessing</button>
 
+<!-- EDA Button (Circle) -->
+<button style="width: 80px; height: 80px; background-color: #FF7F50; border-radius: 50%; border: 1px solid #000; text-align: center;">EDA</button>
+
+<!-- Feature Engineering Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #9370DB; border-radius: 40px; border: 1px solid #000; text-align: center;">Feature Engineering</button>
+
+<!-- Training Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #FF6347; border: 1px solid #000; text-align: center;">Training</button>
+
+<!-- Testing Button (Circle) -->
+<button style="width: 80px; height: 80px; background-color: #98FB98; border-radius: 50%; border: 1px solid #000; text-align: center;">Testing</button>
+
+<!-- Deploying Button (Ellipse) -->
+<button style="width: 160px; height: 80px; background-color: #F0E68C; border-radius: 40px; border: 1px solid #000; text-align: center;">Deploying</button>
+
+<!-- Monitoring Button (Rectangle) -->
+<button style="width: 150px; height: 50px; background-color: #B0E0E6; border: 1px solid #000; text-align: center;">Monitoring</button>
 """
 
 # Render HTML content in Streamlit
 st.markdown(html_content, unsafe_allow_html=True)
-