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

pages/3Life Cycle of Machine Learning Project.py

@@ -1,8 +1,7 @@
 import streamlit as st
 
-# Set up the Streamlit page configuration
 st.set_page_config(
-    page_title="ML Project Lifecycle",
+    page_title="HomePage",
     page_icon="🚀",
     layout="wide"
 )
@@ -10,179 +9,161 @@ st.set_page_config(
 # Global CSS for consistent styling across all pages
 st.markdown(""" 
     <style>
-    body {
-        font-family: Arial, sans-serif;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        margin: 0;
-        background-color: #f4f4f9;
+    body, .stApp {
+        color: #4F4F4F; /* Replace with your desired font color */
+        background-color: #FFFFFF; /* Optional: Set a fixed background color */
     }
-    .container {
-        text-align: center;
-        width: 80%;
-        max-width: 800px;
+    h1, h2, h3, h4, h5, h6 {
+        color: #BB3385; /* Replace with your heading color */
     }
-    .circle {
-        position: relative;
-        width: 350px;
-        height: 350px;
-        margin: 20px auto;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    p {
+        color: #4F4F4F; /* Replace with your paragraph text color */
     }
-    .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 */
+    ul li {
+        color: #4F4F4F; /* List item color */
     }
     </style>
 """, unsafe_allow_html=True)
 
-# HTML structure for the circular flowchart
 st.markdown(
     """
-    <div class="container">
-        <h1>ML 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>
-    """, unsafe_allow_html=True
+    <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
 )
 
-# Define descriptions for each phase
-descriptions = {
-    '1. Problem Statement' : "Clearly define the issue, the data used, and the expected outcome.",
-    '2. Data Collection': "Collect relevant data from various sources like APIs, databases, and user-generated content.",
-    '3. Simple EDA': "Perform initial exploratory analysis to assess data quality, structure, and appearance.",
-    '4. Data Pre-Processing': "Clean the dataset by handling missing values, outliers, and inconsistencies.",
-    '5. EDA': "Perform detailed analysis to uncover trends, patterns, and relationships in the data.",
-    '6. Feature Engineering': "Create or select meaningful features, scale variables, and reduce dimensionality.",
-    '7. Training the Model': "Train machine learning models on the prepared dataset and optimize parameters.",
-    '8. Testing the Data': "Evaluate the trained model on a validation dataset to assess performance.",
-    '9. Deployment': "Deploy the model into a live system for real-time or batch processing of new data.",
-    '10. Monitoring': "Track model performance, handling issues like data drift and model degradation."
-}
+# 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)
 
-# Create a navigation menu using a selectbox
-step = st.selectbox('Select a step in the machine learning life cycle:', list(descriptions.keys()))
+# Inject custom CSS for the circular flowchart
+st.markdown(
+    """
+    <style>
+        .circular-flowchart {
+            position: relative;
+            width: 500px;
+            height: 500px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50%;
+            position: relative;
+        }
+        .phase-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            transform: translate(-50%, -50%);
+        }
+        .phase {
+            position: absolute;
+            width: 250px; /* Rectangle width */
+            height: 60px; /* Rectangle height */
+            border-radius: 8px; /* Rounded edges */
+            font-size: 16px; /* Text size */
+            font-weight: bold;
+            text-align: center;
+            cursor: pointer;
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            color: black; /* Always black text */
+        }
+        .phase-1 { background-color: #E6F4EA; } /* Light Green */
+        .phase-2 { background-color: #E0F7FA; } /* Light Blue */
+        .phase-3 { background-color: #FFF9C4; } /* Light Yellow */
+        .phase-4 { background-color: #FFE0B2; } /* Light Orange */
+        .phase-5 { background-color: #DCEDC8; } /* Light Green */
+        .phase-6 { background-color: #D1C4E9; } /* Light Purple */
+        .phase-7 { background-color: #F8BBD0; } /* Light Pink */
+        .phase-8 { background-color: #CFD8DC; } /* Light Gray-Blue */
+        .phase-9 { background-color: #B2EBF2; } /* Light Cyan */
+        .phase-10 { background-color: #FFE082; } /* Light Amber */
 
-# Display the description for the selected step
-st.write(descriptions[step])
+        .phase:hover {
+            transform: scale(1.05);
+            background-color: #F0F0F0; /* Slightly lighter on hover */
+            color: black; /* Ensure text remains black */
+        }
+
+        /* Styling for descriptions */
+        .description {
+            display: none; /* Hidden by default */
+            width: 250px;
+            margin-top: -10px;
+            background-color: #F9F9F9;
+            color: #333;
+            font-size: 14px;
+            border-radius: 5px;
+            padding: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# HTML structure for the circular flowchart with descriptions
+st.markdown(
+    """
+    <div class="circular-flowchart">
+        <div class="phase-container">
+            <!-- Problem Statement -->
+            <a href="javascript:void(0)" class="phase phase-1" onclick="toggleDescription('desc1')" style="transform: rotate(0deg) translateY(-230px);">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" onclick="toggleDescription('desc2')" style="transform: rotate(36deg) translateY(-230px);">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" onclick="toggleDescription('desc3')" style="transform: rotate(72deg) translateY(-230px);">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" onclick="toggleDescription('desc4')" style="transform: rotate(108deg) translateY(-230px);">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" onclick="toggleDescription('desc5')" style="transform: rotate(144deg) translateY(-230px);">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" onclick="toggleDescription('desc6')" style="transform: rotate(180deg) translateY(-230px);">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" onclick="toggleDescription('desc7')" style="transform: rotate(216deg) translateY(-230px);">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" onclick="toggleDescription('desc8')" style="transform: rotate(252deg) translateY(-230px);">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" onclick="toggleDescription('desc9')" style="transform: rotate(288deg) translateY(-230px);">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" onclick="toggleDescription('desc10')" style="transform: rotate(324deg) translateY(-230px);">Monitoring</a>
+            <div id="desc10" class="description">Track model performance in production, addressing issues like data drift and performance degradation.</div>
+        </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
+)