Spaces:

LakshmiHarika
/

MachineLearning

Sleeping

App Files Files Community

LakshmiHarika commited on Dec 8, 2024

Commit

84f6905

verified ·

1 Parent(s): 4b73ce5

Update pages/3Life Cycle of Machine Learning Project.py

Browse files

Files changed (1) hide show

pages/3Life Cycle of Machine Learning Project.py +86 -111

pages/3Life Cycle of Machine Learning Project.py CHANGED Viewed

@@ -1,143 +1,118 @@
 import streamlit as st
 st.set_page_config(
-    page_title="HomePage",
-    page_icon="🚀",
     layout="wide"
 )
-# Global CSS for consistent styling across all pages
-st.markdown("""
     <style>
-    body, .stApp {
-        color: #4F4F4F; /* Replace with your desired font color */
-        background-color: #FFFFFF; /* Optional: Set a fixed background color */
-    }
-    h1, h2, h3, h4, h5, h6 {
-        color: #BB3385; /* Replace with your heading color */
-    }
-    p {
-        color: #4F4F4F; /* Replace with your paragraph text color */
-    }
-    ul li {
-        color: #4F4F4F; /* List item color */
-    }
     </style>
 """, unsafe_allow_html=True)
-# Circular flowchart styles
 st.markdown(
-    """
     <style>
         .circle-container {
-            position: relative;
-            width: 400px;
-            height: 400px;
-            margin: 0 auto;
-            border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
-        }
-        .steps {
-            position: absolute;
-            width: 100%;
             height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-wrap: wrap;
         }
         .step {
             background-color: #007bff;
             color: white;
-            padding: 15px 30px;
-            border-radius: 8px;
-            cursor: pointer;
-            width: 150px;
-            margin: 10px;
             text-align: center;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: background-color 0.3s;
-            position: absolute;
-            transform-origin: 50% 50%;
-            transition: transform 0.5s ease-in-out;
         }
         .step:hover {
             background-color: #0056b3;
         }
-        /* Different colors and rotations for each step */
-        #step1 {
-            background-color: #ff5733;
-            transform: rotate(0deg) translateX(170px) rotate(0deg);
-        }
-        #step2 {
-            background-color: #33b5ff;
-            transform: rotate(36deg) translateX(170px) rotate(-36deg);
-        }
-        #step3 {
-            background-color: #33ff57;
-            transform: rotate(72deg) translateX(170px) rotate(-72deg);
-        }
-        #step4 {
-            background-color: #ff33cc;
-            transform: rotate(108deg) translateX(170px) rotate(-108deg);
-        }
-        #step5 {
-            background-color: #ffcc33;
-            transform: rotate(144deg) translateX(170px) rotate(-144deg);
-        }
-        #step6 {
-            background-color: #33ccff;
-            transform: rotate(180deg) translateX(170px) rotate(-180deg);
-        }
-        #step7 {
-            background-color: #ff33a1;
-            transform: rotate(216deg) translateX(170px) rotate(-216deg);
-        }
-        #step8 {
-            background-color: #66ff33;
-            transform: rotate(252deg) translateX(170px) rotate(-252deg);
-        }
-        #step9 {
-            background-color: #9933ff;
-            transform: rotate(288deg) translateX(170px) rotate(-288deg);
-        }
-        #step10 {
-            background-color: #f7a500;
-            transform: rotate(324deg) translateX(170px) rotate(-324deg);
-        }
     </style>
-    """, unsafe_allow_html=True)
-# Title of the page
-st.markdown("""<div style="text-align: center; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
-# Circular Flowchart HTML structure for ML Project Phases
-st.markdown(
-    """
     <div class="circle-container">
-        <div class="steps">
-            <div class="step" id="step1">1. Problem Statement</div>
-            <div class="step" id="step2">2. Data Collection</div>
-            <div class="step" id="step3">3. Simple EDA</div>
-            <div class="step" id="step4">4. Data Pre-Processing</div>
-            <div class="step" id="step5">5. EDA</div>
-            <div class="step" id="step6">6. Feature Engineering</div>
-            <div class="step" id="step7">7. Training the Model</div>
-            <div class="step" id="step8">8. Testing the Model</div>
-            <div class="step" id="step9">9. Deployment</div>
-            <div class="step" id="step10">10. Monitoring</div>
         </div>
     </div>
-    """, unsafe_allow_html=True)
-# Additional spacing
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')

 import streamlit as st
+# Set the Streamlit page configuration
 st.set_page_config(
+    page_title="ML Life Cycle",
+    page_icon="🔄",
     layout="wide"
 )
+# Global CSS styling
+st.markdown("""
     <style>
+        body, .stApp {
+            font-family: Arial, sans-serif;
+            color: #4F4F4F; /* Default text color */
+            background-color: #FFFFFF;
+        }
+        h1, h2, h3, h4 {
+            color: #BB3385;
+        }
     </style>
 """, unsafe_allow_html=True)
+# Display page title
 st.markdown(
+    "<h1 style='text-align: center; color: #BB3385;'>Machine Learning Project Life Cycle</h1>",
+    unsafe_allow_html=True
+)
+# Define step descriptions
+descriptions = {
+    '1. Problem Statement': "**Problem Statement**: Define the objective of the ML project and establish goals for the model.",
+    '2. Data Collection': "**Data Collection**: Gather data from reliable sources such as APIs, web scraping, or datasets.",
+    '3. Simple EDA': "**Simple EDA**: Perform quick exploratory analysis to identify missing values and outliers.",
+    '4. Data Preprocessing': "**Data Preprocessing**: Clean the data and prepare it for analysis and modeling.",
+    '5. EDA': "**EDA**: Perform detailed analysis to uncover patterns, relationships, and trends.",
+    '6. Feature Engineering': "**Feature Engineering**: Create new features or transform existing ones for better model accuracy.",
+    '7. Model Training': "**Model Training**: Train machine learning models using the prepared data.",
+    '8. Model Testing': "**Model Testing**: Evaluate the model's performance using metrics like accuracy or recall.",
+    '9. Deployment': "**Deployment**: Deploy the model for real-world usage in production environments.",
+    '10. Monitoring': "**Monitoring**: Continuously monitor model performance and update it as required."
+}
+# Circular layout HTML and CSS
+circle_html = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
         .circle-container {
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100%;
+            margin-top: 50px;
+        }
+        .circle {
+            position: relative;
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
         }
         .step {
+            position: absolute;
+            width: 150px;
+            height: 50px;
             background-color: #007bff;
             color: white;
             text-align: center;
+            line-height: 50px;
+            border-radius: 8px;
+            transform-origin: 200px 200px;
         }
         .step:hover {
             background-color: #0056b3;
         }
+        .step:nth-child(1) { transform: rotate(0deg) translate(200px) rotate(0deg); }
+        .step:nth-child(2) { transform: rotate(36deg) translate(200px) rotate(-36deg); }
+        .step:nth-child(3) { transform: rotate(72deg) translate(200px) rotate(-72deg); }
+        .step:nth-child(4) { transform: rotate(108deg) translate(200px) rotate(-108deg); }
+        .step:nth-child(5) { transform: rotate(144deg) translate(200px) rotate(-144deg); }
+        .step:nth-child(6) { transform: rotate(180deg) translate(200px) rotate(-180deg); }
+        .step:nth-child(7) { transform: rotate(216deg) translate(200px) rotate(-216deg); }
+        .step:nth-child(8) { transform: rotate(252deg) translate(200px) rotate(-252deg); }
+        .step:nth-child(9) { transform: rotate(288deg) translate(200px) rotate(-288deg); }
+        .step:nth-child(10) { transform: rotate(324deg) translate(200px) rotate(-324deg); }
     </style>
+</head>
+<body>
     <div class="circle-container">
+        <div class="circle">
+            <div class="step">1. Problem Statement</div>
+            <div class="step">2. Data Collection</div>
+            <div class="step">3. Simple EDA</div>
+            <div class="step">4. Data Preprocessing</div>
+            <div class="step">5. EDA</div>
+            <div class="step">6. Feature Engineering</div>
+            <div class="step">7. Model Training</div>
+            <div class="step">8. Model Testing</div>
+            <div class="step">9. Deployment</div>
+            <div class="step">10. Monitoring</div>
         </div>
     </div>
+</body>
+</html>
+"""
+# Render the HTML layout in Streamlit
+st.markdown(circle_html, unsafe_allow_html=True)
+# Sidebar for selecting a step
+selected_step = st.sidebar.selectbox("Select a step:", list(descriptions.keys()))
+# Display the description for the selected step
+st.write(descriptions[selected_step])