Update app.py

app.py

@@ -564,34 +564,133 @@ elif st.session_state.current_page == "Model Building":
 
 # Fianl Model
 elif st.session_state.current_page == "Final Model":
-    st.markdown("<h1 class='title'>Final Model</h1>", unsafe_allow_html=True)
-
-    st.markdown("<hr style='border:1px solid #ddd;'>", unsafe_allow_html=True)
+    # st.markdown("<h1 class='title'>Final Model</h1>", unsafe_allow_html=True)
+
+    # st.markdown("<hr style='border:1px solid #ddd;'>", unsafe_allow_html=True)
+
+    # st.markdown("""
+    #     <h3>✅ Best Model: Bagging Regressor (with Decision Tree)</h3>
+    #     <ul>
+    #         <li><b>Training Score:</b> 98.68%</li>
+    #         <li><b>Test Score:</b> 95.04%</li>
+    #         <li><b>Generalized Score:</b> 95.45%</li>
+    #     </ul>
+    # """, unsafe_allow_html=True)
+    
+    # st.markdown("<hr style='border:1px solid #ddd;'>", unsafe_allow_html=True)
+    
+    # st.markdown("""
+    #     <h3>⚙️ Final Hyperparameters</h3>
+    #     <ul>
+    #         <li><b>Base Model:</b> Decision Tree Regressor</li>
+    #         <li><b>min_samples_leaf:</b> 2</li>
+    #         <li><b>min_samples_split:</b> 3</li>
+    #         <li><b>n_estimators:</b> 40</li>
+    #         <li><b>max_samples:</b> 0.838404</li>
+    #     </ul>
+    # """, unsafe_allow_html=True)
+
+
+    st.markdown(
+        """
+        <style>
+            .title {
+                text-align: center;
+                font-size: 36px;
+                font-weight: bold;
+                color: #1E3A8A;
+            }
+            .subtitle {
+                text-align: center;
+                font-size: 20px;
+                color: #475569;
+                margin-bottom: 20px;
+            }
+            .image-container {
+                display: flex;
+                justify-content: center;
+            }
+            .caption {
+                text-align: center;
+                font-size: 16px;
+                font-style: italic;
+                color: #6B7280;
+            }
+            .box {
+                background-color: #F8FAFC;
+                padding: 15px;
+                border-radius: 10px;
+                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+                margin-bottom: 20px;
+            }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
 
-    st.markdown("""
-        <h3>✅ Best Model: Bagging Regressor (with Decision Tree)</h3>
-        <ul>
-            <li><b>Training Score:</b> 98.68%</li>
-            <li><b>Test Score:</b> 95.04%</li>
-            <li><b>Generalized Score:</b> 95.45%</li>
-        </ul>
-    """, unsafe_allow_html=True)
+    # Title
+    st.markdown("<h1 class='title'>Final Model</h1>", unsafe_allow_html=True)
     
-    st.markdown("<hr style='border:1px solid #ddd;'>", unsafe_allow_html=True)
+    # Subtitle
+    st.markdown("<p class='subtitle'>Selecting the Best-Fit Model from Optuna Trials</p>", unsafe_allow_html=True)
+
+    # Explanation Box
+    st.markdown(
+        "<div class='box'>"
+        "<p>After experimenting with multiple trials using Optuna, we selected the best-fit model "
+        "by analyzing the training and test scores of different trials. "
+        "The following scatter plots provide insights into this selection process.</p>"
+        "</div>",
+        unsafe_allow_html=True,
+    )
     
-    st.markdown("""
-        <h3>⚙️ Final Hyperparameters</h3>
-        <ul>
-            <li><b>Base Model:</b> Decision Tree Regressor</li>
-            <li><b>min_samples_leaf:</b> 2</li>
-            <li><b>min_samples_split:</b> 3</li>
-            <li><b>n_estimators:</b> 40</li>
-            <li><b>max_samples:</b> 0.838404</li>
-        </ul>
-    """, unsafe_allow_html=True)
+    
+    st.markdown("<h3>Training vs Test Score (All Trials)</h3>", unsafe_allow_html=True)
+    st.markdown(
+        "<p class='subtitle'>This scatter plot visualizes the training and test scores of all trials. "
+        "The goal was to identify a model where both scores are closely aligned, ensuring minimal overfitting or underfitting.</p>",
+        unsafe_allow_html=True,
+    )
+    scatter_all = Image.open("images/bagging_trails.png")  
+    st.image(scatter_all, caption="Scatter Plot of All Trials", use_column_width=True)
+    
+  
+    st.markdown("<h3>Training vs Test Score (First 50 Trials)</h3>", unsafe_allow_html=True)
+    st.markdown(
+        "<p class='subtitle'>By filtering the first 50 trials, we focused on models that demonstrated balanced performance. "
+        "The best-fit model was selected by ensuring that the training and test scores are close to each other.</p>",
+        unsafe_allow_html=True,
+    )
+    scatter_50 = Image.open("images/bagging_50trails.png")  
+    st.image(scatter_50, caption="Scatter Plot of First 50 Trials", use_column_width=True)
+
+    # Final Model Summary
+    st.markdown("<h3>Selected Best-Fit Model</h3>", unsafe_allow_html=True)
+    st.markdown(
+        "<div class='box'>"
+        "<ul>"
+        "<li><b>Base Model:</b> DecisionTreeRegressor</li>"
+        "<li><b>Hyperparameters:</b>"
+        "<ul>"
+        "<li>min_samples_leaf = 2</li>"
+        "<li>min_samples_split = 3</li>"
+        "</ul></li>"
+        "<li><b>Ensemble Method:</b> BaggingRegressor</li>"
+        "<li><b>Bagging Hyperparameters:</b>"
+        "<ul>"
+        "<li>n_estimators = 40</li>"
+        "<li>max_samples = 0.838404</li>"
+        "</ul></li>"
+        "</ul>"
+        "<p>This model was selected as it demonstrated a balance between generalization and performance.</p>"
+        "</div>",
+        unsafe_allow_html=True,
+    )
+
     
     if st.button("🔙 Go Back to Model Report"):
         switch_page("Model Report")
+        
 
 # Hands-on Model Page
 elif st.session_state.current_page == "Hands-on Model":