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

pages/3Life Cycle of Machine Learning Project.py

@@ -8,128 +8,181 @@ st.set_page_config(
 )
 
 # Global CSS for consistent styling across all pages
-st.markdown("""
+st.markdown(""" 
     <style>
-    body, .stApp {
-        color: #4F4F4F; /* Text color */
-        background-color: #FFFFFF; /* Background color */
+    body {
+        font-family: Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #f4f4f9;
     }
-    h1, h2, h3, h4, h5, h6 {
-        color: #BB3385; /* Heading color */
+    .container {
+        text-align: center;
+        width: 80%;
+        max-width: 800px;
     }
-    p {
-        color: #4F4F4F; /* Text color for paragraphs */
+    .circle {
+        position: relative;
+        width: 350px;
+        height: 350px;
+        margin: 20px auto;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
-    ul li {
-        color: #4F4F4F; /* List item 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 */
     }
     </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)
-
-# Inject custom CSS for the circular flowchart layout
-st.markdown(
-    """
-    <style>
-        .flowchart-container {
-            position: relative;
-            width: 500px; /* Container width */
-            height: 500px; /* Container height */
-            margin: 0 auto;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
-
-        /* Circle arrangement for the phases */
-        .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;
-            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; /* Text color */
-        }
-
-        /* Color for each phase */
-        .phase-1 { background-color: #FF7043; top: 0%; left: 50%; transform: translateX(-50%); } /* Red */
-        .phase-2 { background-color: #42A5F5; top: 25%; left: 90%; transform: translate(-50%, -50%); } /* Blue */
-        .phase-3 { background-color: #66BB6A; top: 50%; left: 100%; transform: translate(-50%, -50%); } /* Green */
-        .phase-4 { background-color: #FFEB3B; top: 75%; left: 90%; transform: translate(-50%, -50%); } /* Yellow */
-        .phase-5 { background-color: #F06292; top: 100%; left: 50%; transform: translateX(-50%); } /* Pink */
-        .phase-6 { background-color: #42A5F5; top: 75%; left: 10%; transform: translate(-50%, -50%); } /* Blue */
-        .phase-7 { background-color: #FF7043; top: 50%; left: 0%; transform: translate(-50%, -50%); } /* Red */
-        .phase-8 { background-color: #66BB6A; top: 25%; left: 10%; transform: translate(-50%, -50%); } /* Green */
-        .phase-9 { background-color: #FFEB3B; top: 0%; left: 50%; transform: translateX(-50%); } /* Yellow */
-        .phase-10 { background-color: #F06292; top: 50%; left: 10%; transform: translate(-50%, -50%); } /* Pink */
-
-        .phase:hover {
-            transform: scale(1.05);
-            background-color: #F0F0F0; /* Slightly lighter on hover */
-        }
-
-        .arrow {
-            font-size: 24px;
-            color: #4F4F4F;
-            margin: 20px 0;
-        }
-    </style>
-    """, unsafe_allow_html=True
-)
-
 # HTML structure for the circular flowchart
 st.markdown(
     """
-    <div class="flowchart-container">
-        <!-- Problem Statement -->
-        <a href="/problem-statement" class="phase phase-1" target="_self">1. Problem Statement</a>
-        <div class="arrow">⬇️</div>
-        
-        <!-- Data Collection -->
-        <a href="/data-collection" class="phase phase-2" target="_self">2. Data Collection</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Simple EDA -->
-        <a href="/simple-eda" class="phase phase-3" target="_self">3. Simple EDA</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Data Preprocessing -->
-        <a href="/data-preprocessing" class="phase phase-4" target="_self">4. Data Preprocessing</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- EDA -->
-        <a href="/eda" class="phase phase-5" target="_self">5. EDA</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Feature Engineering -->
-        <a href="/feature-engineering" class="phase phase-6" target="_self">6. Feature Engineering</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Model Training -->
-        <a href="/model-training" class="phase phase-7" target="_self">7. Training the Model</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Model Testing -->
-        <a href="/model-testing" class="phase phase-8" target="_self">8. Testing the Data</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Deployment -->
-        <a href="/deployment" class="phase phase-9" target="_self">9. Deployment</a>
-        <div class="arrow">⬇️</div>
-
-        <!-- Monitoring -->
-        <a href="/monitoring" class="phase phase-10" target="_self">10. Monitoring</a>
+    <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
 )
+
+# 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."
+}
+
+# Create a navigation menu using a selectbox
+step = st.selectbox('Select a step in the machine learning life cycle:', list(descriptions.keys()))
+
+# Display the description for the selected step
+st.write(descriptions[step])