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

pages/3Life Cycle of Machine Learning Project.py

@@ -10,17 +10,17 @@ st.set_page_config(
 st.markdown(""" 
     <style>
     body, .stApp {
-        color: #4F4F4F; /* Replace with your desired font color */
-        background-color: #FFFFFF; /* Optional: Set a fixed background color */
+        color: #4F4F4F;
+        background-color: #FFFFFF;
     }
     h1, h2, h3, h4, h5, h6 {
-        color: #BB3385; /* Replace with your heading color */
+        color: #BB3385;
     }
     p {
-        color: #4F4F4F; /* Replace with your paragraph text color */
+        color: #4F4F4F;
     }
     ul li {
-        color: #4F4F4F; /* List item color */
+        color: #4F4F4F;
     }
     </style>
 """, unsafe_allow_html=True)
@@ -42,75 +42,66 @@ st.markdown(
 # 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
+# Custom CSS for circular flowchart layout
 st.markdown(
     """
     <style>
-        .circular-flowchart {
-            position: relative;
+        .circle-container {
             width: 500px;
             height: 500px;
+            position: relative;
             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 {
+
+        .circle-container .phase {
             position: absolute;
-            width: 250px; /* Rectangle width */
-            height: 60px; /* Rectangle height */
-            border-radius: 8px; /* Rounded edges */
-            font-size: 16px; /* Text size */
+            width: 200px;
+            height: 50px;
+            font-size: 16px;
             font-weight: bold;
             text-align: center;
-            cursor: pointer;
-            font-family: Arial, sans-serif;
             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;
-            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 */
 
+        /* 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; /* Slightly lighter on hover */
-            color: black; /* Ensure text remains black */
+            background-color: #F0F0F0;
+            color: black;
         }
 
-        /* Styling for descriptions */
+        /* Descriptions */
         .description {
-            display: none; /* Hidden by default */
-            width: 250px;
-            margin-top: -10px;
-            background-color: #F9F9F9;
+            display: none;
+            background-color: #FFFFFF;
             color: #333;
             font-size: 14px;
-            border-radius: 5px;
             padding: 10px;
+            border-radius: 5px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            margin-top: 10px;
         }
+
     </style>
     """,
     unsafe_allow_html=True
@@ -119,39 +110,56 @@ st.markdown(
 # 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 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>