Spaces:

LakshmiHarika
/

MachineLearning

Sleeping

App Files Files Community

LakshmiHarika commited on Dec 8, 2024

Commit

bf718c4

verified ·

1 Parent(s): 37f8fa0

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

Browse files

Files changed (1) hide show

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

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

@@ -1,177 +1,129 @@
 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;
-        background-color: #FFFFFF;
-    }
-    h1, h2, h3, h4, h5, h6 {
-        color: #BB3385;
-    }
-    p {
-        color: #4F4F4F;
-    }
-    ul li {
-        color: #4F4F4F;
-    }
-    </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)
-# Custom CSS for circular flowchart layout
-st.markdown(
-    """
     <style>
-        .circle-container {
-            width: 500px;
-            height: 500px;
             position: relative;
-            margin: 0 auto;
             border-radius: 50%;
         }
-        .circle-container .phase {
             position: absolute;
-            width: 200px;
-            height: 50px;
-            font-size: 16px;
-            font-weight: bold;
-            text-align: center;
             display: flex;
             justify-content: center;
             align-items: center;
             border-radius: 8px;
             cursor: pointer;
-            color: white;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            transition: transform 0.3s ease, background-color 0.3s ease;
         }
-        /* Phase Colors */
-        .phase-1 { background-color: #FF6F61; }
-        .phase-2 { background-color: #4C9F70; }
-        .phase-3 { background-color: #2F8ED6; }
-        .phase-4 { background-color: #F1C40F; }
-        .phase-5 { background-color: #9B59B6; }
-        .phase-6 { background-color: #E74C3C; }
-        .phase-7 { background-color: #1ABC9C; }
-        .phase-8 { background-color: #F39C12; }
-        .phase-9 { background-color: #D35400; }
-        .phase-10 { background-color: #8E44AD; }
-        /* Hover effect */
-        .phase:hover {
-            transform: scale(1.05);
-            background-color: #F0F0F0;
-            color: black;
         }
-        /* Descriptions */
-        .description {
-            display: none;
-            background-color: #FFFFFF;
-            color: #333;
-            font-size: 14px;
-            padding: 10px;
-            border-radius: 5px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            margin-top: 10px;
         }
     </style>
-    """,
-    unsafe_allow_html=True
-)
-# HTML structure for the circular flowchart with descriptions
-st.markdown(
-    """
-    <div class="circle-container">
-        <!-- Problem Statement -->
-        <a href="javascript:void(0)" class="phase phase-1" style="top: 0; left: 50%; transform: translateX(-50%) rotate(0deg);"
-           onclick="toggleDescription('desc1')">Problem Statement</a>
-        <div id="desc1" class="description">Clearly define the issue, the data used, and the expected outcome.</div>
-        <!-- Data Collection -->
-        <a href="javascript:void(0)" class="phase phase-2" style="top: 50%; left: 0; transform: translateY(-50%) rotate(36deg);"
-           onclick="toggleDescription('desc2')">Data Collection</a>
-        <div id="desc2" class="description">Collect relevant data from multiple sources, ensuring it aligns with the problem statement.</div>
-        <!-- Simple EDA -->
-        <a href="javascript:void(0)" class="phase phase-3" style="top: 100%; left: 50%; transform: translateX(-50%) rotate(72deg);"
-           onclick="toggleDescription('desc3')">Simple EDA</a>
-        <div id="desc3" class="description">Perform initial exploratory analysis to assess data quality, structure, and appearance.</div>
-        <!-- Data Preprocessing -->
-        <a href="javascript:void(0)" class="phase phase-4" style="top: 50%; right: 0; transform: translateY(-50%) rotate(108deg);"
-           onclick="toggleDescription('desc4')">Data Preprocessing</a>
-        <div id="desc4" class="description">Clean the dataset by handling missing values, outliers, and inconsistencies, transforming it into a suitable format.</div>
-        <!-- EDA -->
-        <a href="javascript:void(0)" class="phase phase-5" style="top: 0; right: 50%; transform: translateX(50%) rotate(144deg);"
-           onclick="toggleDescription('desc5')">EDA</a>
-        <div id="desc5" class="description">Perform detailed analysis to uncover trends, patterns, and relationships that will guide model building.</div>
-        <!-- Feature Engineering -->
-        <a href="javascript:void(0)" class="phase phase-6" style="top: 100%; right: 50%; transform: translateX(-50%) rotate(180deg);"
-           onclick="toggleDescription('desc6')">Feature Engineering</a>
-        <div id="desc6" class="description">Create or select meaningful features, scale variables, and reduce dimensionality to enhance model performance.</div>
-        <!-- Model Training -->
-        <a href="javascript:void(0)" class="phase phase-7" style="top: 50%; right: 50%; transform: translateY(-50%) rotate(216deg);"
-           onclick="toggleDescription('desc7')">Model Training</a>
-        <div id="desc7" class="description">Train machine learning models on the prepared data and optimize parameters for improved performance.</div>
-        <!-- Model Testing -->
-        <a href="javascript:void(0)" class="phase phase-8" style="top: 50%; left: 50%; transform: translateY(-50%) rotate(252deg);"
-           onclick="toggleDescription('desc8')">Model Testing</a>
-        <div id="desc8" class="description">Evaluate the trained model on a validation or test dataset to assess accuracy, precision, and other metrics.</div>
-        <!-- Deployment -->
-        <a href="javascript:void(0)" class="phase phase-9" style="top: 50%; left: 0; transform: translateY(-50%) rotate(288deg);"
-           onclick="toggleDescription('desc9')">Deployment</a>
-        <div id="desc9" class="description">Deploy the trained model into a live system for real-time or batch processing of new data.</div>
-        <!-- Monitoring -->
-        <a href="javascript:void(0)" class="phase phase-10" style="top: 50%; left: 0; transform: translateY(-50%) rotate(324deg);"
-           onclick="toggleDescription('desc10')">Monitoring</a>
-        <div id="desc10" class="description">Track model performance in production, addressing issues like data drift and performance degradation.</div>
     </div>
-    <script>
-        function toggleDescription(id) {
-            var desc = document.getElementById(id);
-            if (desc.style.display === "block") {
-                desc.style.display = "none";
-            } else {
-                desc.style.display = "block";
-            }
-        }
-    </script>
-    """,
-    unsafe_allow_html=True
-)

 import streamlit as st
+# Define the HTML code for the circular flowchart
+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);
         }
     </style>
+</head>
+<body>
+<div class="container">
+    <h1>Machine Learning Project Life Cycle</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)