Spaces:

LakshmiHarika
/

MachineLearning

Sleeping

App Files Files Community

LakshmiHarika commited on Dec 8, 2024

Commit

4171cc5

verified ·

1 Parent(s): 84f6905

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

Browse files

Files changed (1) hide show

pages/3Life Cycle of Machine Learning Project.py +172 -72

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

@@ -1,118 +1,218 @@
 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])

 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)
 st.markdown(
+    """
+    <style>
+    .stApp {
+        background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+    }
+    </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)
+# Circle Representation HTML and CSS (properly rendered)
+html_code = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Machine Learning Project Life Cycle</title>
     <style>
+        body {
+            font-family: Arial, sans-serif;
             display: flex;
             justify-content: center;
             align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f4f4f9;
+        }
+        .container {
+            text-align: center;
+            width: 80%;
+            max-width: 800px;
         }
         .circle {
             position: relative;
+            width: 350px;
+            height: 350px;
+            margin: 20px 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 background colors for each step */
+        #step1 {
+            background-color: #ff5733;
+            transform: rotate(0deg) translateX(140px) rotate(0deg);
+        }
+        #step2 {
+            background-color: #33b5ff;
+            transform: rotate(36deg) translateX(140px) rotate(-36deg);
+        }
+        #step3 {
+            background-color: #33ff57;
+            transform: rotate(72deg) translateX(140px) rotate(-72deg);
+        }
+        #step4 {
+            background-color: #ff33cc;
+            transform: rotate(108deg) translateX(140px) rotate(-108deg);
+        }
+        #step5 {
+            background-color: #ffcc33;
+            transform: rotate(144deg) translateX(140px) rotate(-144deg);
+        }
+        #step6 {
+            background-color: #33ccff;
+            transform: rotate(180deg) translateX(140px) rotate(-180deg);
+        }
+        #step7 {
+            background-color: #ff33a1;
+            transform: rotate(216deg) translateX(140px) rotate(-216deg);
+        }
+        #step8 {
+            background-color: #66ff33;
+            transform: rotate(252deg) translateX(140px) rotate(-252deg);
+        }
+        #step9 {
+            background-color: #9933ff;
+            transform: rotate(288deg) translateX(140px) rotate(-288deg);
+        }
+        #step10 {
+            background-color: #f7a500;
+            transform: rotate(324deg) translateX(140px) rotate(-324deg);
+        }
+        /* Rotate steps to form a circular layout */
+        #step4 {
+            transform: rotate(0deg) translateX(250px) rotate(0deg);
+        }
+        #step5 {
+            transform: rotate(25deg) translateX(250px) rotate(-25deg);
+        }
+        #step6 {
+            transform: rotate(60deg) translateX(250px) rotate(-60deg);
+        }
+        #step7 {
+            transform: rotate(120deg) translateX(250px) rotate(-120deg);
+        }
+        #step8 {
+            transform: rotate(155deg) translateX(250px) rotate(-155deg);
+        }
+        #step9 {
+            transform: rotate(180deg) translateX(250px) rotate(-180deg);
+        }
+        #step10 {
+            transform: rotate(205deg) translateX(250px) rotate(-205deg);
+        }
+        #step1 {
+            transform: rotate(240deg) translateX(250px) rotate(-240deg);
+        }
+        #step2 {
+            transform: rotate(300deg) translateX(250px) rotate(-300deg);
+        }
+        #step3 {
+            transform: rotate(335deg) translateX(250px) rotate(-335deg);
+        }
+        a {
+            color: white;  /* Link color */
+            text-decoration: none;
+        }
+        a:hover {
+            color: yellow;  /* Color on hover */
+            text-decoration: underline;  /* Underline on hover */
+        }
     </style>
 </head>
 <body>
+<div class="container">
+    <h1></h1>
+    <div class="circle">
+        <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 Data</div>
+            <div class="step" id="step9">9. Deployment</div>
+            <div class="step" id="step10">10. Monitoring</div>
         </div>
     </div>
+</div>
 </body>
 </html>
 """
+# Streamlit: Display the HTML circle with properly spaced steps
+st.markdown(html_code, unsafe_allow_html=True)
+st.write(' ')
+st.write(' ')
+st.write(' ')
+st.write(' ')
+st.write(' ')
+st.write(' ')