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

pages/3Life Cycle of Machine Learning Project.py

@@ -96,69 +96,114 @@ st.markdown(
             color: #4F4F4F; /* Dark arrow color */
             margin: 10px 0; /* Space for arrow */
         }
-        /* Styling for descriptions */
-        .description {
-            display: none; /* Hidden by default */
-            width: 300px;
-            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);
-        }
-        .phase:hover + .description {
-            display: block; /* Show description on hover */
-        }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# HTML structure for the vertical flowchart with descriptions
+# HTML structure for the vertical flowchart with descriptions using Streamlit's expander
 st.markdown(
     """
     <div class="vertical-flowchart">
         <!-- Problem Statement -->
         <a href="/problem-statement" class="phase phase-1" target="_self">Problem Statement</a>
-        <div class="description">Clearly define the issue, the data used, and the expected outcome.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Clearly define the issue, the data used, and the expected outcome.
+            </details>
+        </div>
+
         <!-- Data Collection -->
         <a href="/data-collection" class="phase phase-2" target="_self">Data Collection</a>
-        <div class="description">Collect relevant data from multiple sources, ensuring it aligns with the problem statement.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Collect relevant data from multiple sources, ensuring it aligns with the problem statement.
+            </details>
+        </div>
+
         <!-- Simple EDA -->
         <a href="/simple-eda" class="phase phase-3" target="_self">Simple EDA</a>
-        <div class="description">Perform initial exploratory analysis to assess data quality, structure, and appearance.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Perform initial exploratory analysis to assess data quality, structure, and appearance.
+            </details>
+        </div>
+
         <!-- Data Preprocessing -->
         <a href="/data-preprocessing" class="phase phase-4" target="_self">Data Preprocessing</a>
-        <div class="description">Clean the dataset by handling missing values, outliers, and inconsistencies, transforming it into a suitable format.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Clean the dataset by handling missing values, outliers, and inconsistencies, transforming it into a suitable format.
+            </details>
+        </div>
+
         <!-- EDA -->
         <a href="/eda" class="phase phase-5" target="_self">EDA</a>
-        <div class="description">Perform detailed analysis to uncover trends, patterns, and relationships that will guide model building.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Perform detailed analysis to uncover trends, patterns, and relationships that will guide model building.
+            </details>
+        </div>
+
         <!-- Feature Engineering -->
         <a href="/feature-engineering" class="phase phase-6" target="_self">Feature Engineering</a>
-        <div class="description">Create or select meaningful features, scale variables, and reduce dimensionality to enhance model performance.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Create or select meaningful features, scale variables, and reduce dimensionality to enhance model performance.
+            </details>
+        </div>
+
         <!-- Model Training -->
         <a href="/model-training" class="phase phase-7" target="_self">Model Training</a>
-        <div class="description">Train machine learning models on the prepared data and optimize parameters for improved performance.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Train machine learning models on the prepared data and optimize parameters for improved performance.
+            </details>
+        </div>
+
         <!-- Model Testing -->
         <a href="/model-testing" class="phase phase-8" target="_self">Model Testing</a>
-        <div class="description">Evaluate the trained model on a validation or test dataset to assess accuracy, precision, and other metrics.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Evaluate the trained model on a validation or test dataset to assess accuracy, precision, and other metrics.
+            </details>
+        </div>
+
         <!-- Deployment -->
         <a href="/deployment" class="phase phase-9" target="_self">Deployment</a>
-        <div class="description">Deploy the trained model into a live system for real-time or batch processing of new data.</div>
         <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Deploy the trained model into a live system for real-time or batch processing of new data.
+            </details>
+        </div>
+
         <!-- Monitoring -->
         <a href="/monitoring" class="phase phase-10" target="_self">Monitoring</a>
-        <div class="description">Track model performance in production, addressing issues like data drift and performance degradation.</div>
+        <div class="arrow">⬇️</div>
+        <div>
+            <details>
+                <summary>Click to View Description</summary>
+                Track model performance in production, addressing issues like data drift and performance degradation.
+            </details>
+        </div>
     </div>
     """,
     unsafe_allow_html=True,