Spaces:

LakshmiHarika
/

MachineLearning

Sleeping

App Files Files Community

LakshmiHarika commited on Dec 11, 2024

Commit

136b9e1

verified ·

1 Parent(s): 5d88303

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

Browse files

Files changed (1) hide show

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

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

@@ -1,5 +1,6 @@
 import streamlit as st
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
@@ -9,212 +10,91 @@ st.set_page_config(
 # 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: left; 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: #000; /* Default text color is black */
-            padding: 20px 40px; /* Increased padding for a bigger size */
-            border-radius: 8px;
-            cursor: pointer;
-            text-align: center;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: background-color 0.3s, color 0.3s; /* Added transition for text color */
-            position: absolute;
-            transform-origin: 50% 50%;
-            transition: transform 0.5s ease-in-out;
-        }
-        /* Step transformations to create the circle with the same size for each step */
-        #step1 {
-            background-color: #FFCCCC;
-            transform: rotate(0deg) translateX(180px) rotate(0deg); /* Increased translateX for bigger size */
-        }
-        #step2 {
-            background-color: #FFDD99;
-            transform: rotate(36deg) translateX(180px) rotate(-36deg);
-        }
-        #step3 {
-            background-color: #FFFF99;
-            transform: rotate(72deg) translateX(180px) rotate(-72deg);
-        }
-        #step4 {
-            background-color: #CCFFCC;
-            transform: rotate(108deg) translateX(180px) rotate(-108deg);
-        }
-        #step5 {
-            background-color: #CCE5FF;
-            transform: rotate(144deg) translateX(180px) rotate(-144deg);
-        }
-        #step6 {
-            background-color: #E5CCFF;
-            transform: rotate(180deg) translateX(180px) rotate(-180deg);
-        }
-        #step7 {
-            background-color: #FFD9E6;
-            transform: rotate(216deg) translateX(180px) rotate(-216deg);
-        }
-        #step8 {
-            background-color: #FFF5CC;
-            transform: rotate(252deg) translateX(180px) rotate(-252deg);
-        }
-        #step9 {
-            background-color: #D9FFF5;
-            transform: rotate(288deg) translateX(180px) rotate(-288deg);
-        }
-        #step10 {
-            background-color: #D9CCFF;
-            transform: rotate(324deg) translateX(180px) rotate(-324deg);
-        }
-        /* Hover Effect */
-        .step:hover {
-            background-color: #0056b3; /* Darker background on hover */
-            color: #000; /* Text color remains black on hover */
-        }
-        /* 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="step2"><a href="/?page=ProblemStatement">1. Problem Statement</a></div>
-            <div class="step" id="step3"><a href="/?page=DataCollection">2. Data Collection</a></div>
-            <div class="step" id="step4"><a href="/?page=SimpleEDA">3. Simple EDA</a></div>
-            <div class="step" id="step5"><a href="/?page=DataPreprocessing">4. Data Pre-Processing</a></div>
-            <div class="step" id="step6"><a href="/?page=EDA">5. EDA</a></div>
-            <div class="step" id="step7"><a href="/?page=FeatureEngineering">6. Feature Engineering</a></div>
-            <div class="step" id="step8"><a href="/?page=ModelTraining">7. Training the Model</a></div>
-            <div class="step" id="step9"><a href="/?page=ModelTesting">8. Testing the Model</a></div>
-            <div class="step" id="step10"><a href="/?page=ModelDeployment">9. Model Deployment</a></div>
-            <div class="step" id="step1"><a href="/?page=Monitoring">10. Monitoring</a></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(' ')

 import streamlit as st
+# Page configuration
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
 # Global CSS for consistent styling across all pages
 st.markdown("""
     <style>
+    .stApp {
+        background-color: #FFFFFF;
     }
+    h1 {
+        text-align: center;
+        color: #BB3385;
     }
+    .circle-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh; /* Full height for centering */
+        margin-top: -100px; /* Adjust to perfectly center the circle */
     }
+    .circle {
+        position: relative;
+        width: 350px;
+        height: 350px;
+        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;
+    }
+    .step {
+        position: absolute;
+        width: 120px;
+        height: 50px;
+        background-color: #007bff;
+        color: white;
+        border-radius: 25px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        cursor: pointer;
+        transform-origin: 50% 50%;
+        transition: transform 0.3s ease, background-color 0.3s ease;
     }
+    .step:hover {
+        background-color: #0056b3;
+    }
+    /* Rotate steps to form a circular layout */
+    #step1 { transform: rotate(0deg) translateX(150px) rotate(-0deg); }
+    #step2 { transform: rotate(36deg) translateX(150px) rotate(-36deg); }
+    #step3 { transform: rotate(72deg) translateX(150px) rotate(-72deg); }
+    #step4 { transform: rotate(108deg) translateX(150px) rotate(-108deg); }
+    #step5 { transform: rotate(144deg) translateX(150px) rotate(-144deg); }
+    #step6 { transform: rotate(180deg) translateX(150px) rotate(-180deg); }
+    #step7 { transform: rotate(216deg) translateX(150px) rotate(-216deg); }
+    #step8 { transform: rotate(252deg) translateX(150px) rotate(-252deg); }
+    #step9 { transform: rotate(288deg) translateX(150px) rotate(-288deg); }
+    #step10 { transform: rotate(324deg) translateX(150px) rotate(-324deg); }
     </style>
+""", unsafe_allow_html=True)
+# Page title
+st.markdown('<h1>Life Cycle of End-to-End ML Project</h1>', unsafe_allow_html=True)
+# HTML for buttons in circular layout
 html_code = """
+<div class="circle-container">
     <div class="circle">
         <div class="steps">
+            <div class="step" id="step1"><a href="/?page=ProblemStatement" style="color:white; text-decoration:none;">Problem Statement</a></div>
+            <div class="step" id="step2"><a href="/?page=DataCollection" style="color:white; text-decoration:none;">Data Collection</a></div>
+            <div class="step" id="step3"><a href="/?page=SimpleEDA" style="color:white; text-decoration:none;">Simple EDA</a></div>
+            <div class="step" id="step4"><a href="/?page=DataPreprocessing" style="color:white; text-decoration:none;">Data Preprocessing</a></div>
+            <div class="step" id="step5"><a href="/?page=EDA" style="color:white; text-decoration:none;">EDA</a></div>
+            <div class="step" id="step6"><a href="/?page=FeatureEngineering" style="color:white; text-decoration:none;">Feature Engineering</a></div>
+            <div class="step" id="step7"><a href="/?page=ModelTraining" style="color:white; text-decoration:none;">Model Training</a></div>
+            <div class="step" id="step8"><a href="/?page=ModelTesting" style="color:white; text-decoration:none;">Model Testing</a></div>
+            <div class="step" id="step9"><a href="/?page=ModelDeployment" style="color:white; text-decoration:none;">Model Deployment</a></div>
+            <div class="step" id="step10"><a href="/?page=Monitoring" style="color:white; text-decoration:none;">Monitoring</a></div>
         </div>
     </div>
 </div>
 """
+# Render the HTML
 st.markdown(html_code, unsafe_allow_html=True)