Update app.py

app.py

@@ -21,118 +21,6 @@ st.set_page_config(
     layout="wide"
 )
 
-# --- START OF NEW THEME SECTION ---
-
-def load_css():
-    """Tải CSS tùy chỉnh để tạo giao diện 'thời tiết'."""
-    st.markdown("""
-        <style>
-        /* ===== FONT CHUNG ===== */
-        /* Sử dụng font hệ thống mượt mà hơn */
-        .stApp, .stSidebar {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-        }
-
-        /* ===== NỀN CHÍNH (MAIN BACKGROUND) ===== */
-        /* Tạo hiệu ứng gradient "bầu trời" */
-        [data-testid="stAppViewContainer"] {
-            background-image: linear-gradient(to bottom, #B0E0E6, #F0F8FF); /* Từ xanh nhạt (Powder Blue) đến trắng xanh (Alice Blue) */
-            background-attachment: fixed;
-            background-size: cover;
-        }
-
-        /* ===== THANH SIDEBAR ===== */
-        /* Làm sidebar có nền mờ (frosty glass) */
-        [data-testid="stSidebar"] {
-            background-color: rgba(255, 255, 255, 0.7) !important;
-            backdrop-filter: blur(10px);
-            border-right: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        
-        /* Chữ trong sidebar */
-        [data-testid="stSidebar"] .st-emotion-cache-16txtl3 { 
-             color: #0E2A47; /* Xanh đậm */
-        }
-        
-        /* Nút radio được chọn trong sidebar */
-        .stRadio label[data-baseweb="radio"] div[data-checked="true"] {
-            background-color: #005aa7 !important; /* Xanh đậm khi được chọn */
-        }
-
-        /* ===== THẺ DỰ BÁO (METRIC CARDS) ===== */
-        /* Đây là phần quan trọng nhất */
-        div[data-testid="stMetric"] {
-            background-color: rgba(255, 255, 255, 0.85); /* Nền trắng mờ */
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 12px; /* Bo góc */
-            padding: 20px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ */
-            backdrop-filter: blur(5px);
-            transition: transform 0.2s ease;
-        }
-        /* Hiệu ứng khi di chuột vào thẻ */
-        div[data-testid="stMetric"]:hover {
-             transform: translateY(-3px);
-             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Tiêu đề của thẻ (Forecast for...) */
-        div[data-testid="stMetricLabel"] p {
-            font-size: 1.1rem !important;
-            font-weight: 600 !important;
-            color: #333333; /* Màu xám đậm */
-        }
-
-        /* Giá trị nhiệt độ dự báo */
-        div[data-testid="stMetricValue"] {
-            font-size: 2.8rem !important;
-            font-weight: 700 !important;
-            color: #004080; /* Màu xanh navy đậm */
-        }
-        
-        /* Giá trị "Actual" (delta) */
-        div[data-testid="stMetricDelta"] {
-            font-size: 1rem !important;
-            font-weight: 600 !important;
-            color: #555555; /* Màu xám vừa */
-        }
-        
-        /* ===== Tiêu đề (H1, H2, H3) ===== */
-        h1 {
-            color: #004080; /* Xanh navy đậm */
-            text-shadow: 1px 1px 3px rgba(255,255,255,0.5);
-        }
-        h2, h3 {
-            color: #005aa7; /* Xanh đậm */
-        }
-
-        /* ===== EXPANDERS (Training Set Overview) ===== */
-        div[data-testid="stExpander"] {
-             background-color: rgba(255, 255, 255, 0.😎 !important;
-             border-radius: 10px !important;
-             border: 1px solid rgba(0, 0, 0, 0.1) !important;
-        }
-        
-        /* ===== BIỂU ĐỒ (PLOTLY) ===== */
-        /* Làm nền biểu đồ trong suốt để hòa vào nền gradient */
-        .plotly-graph-div {
-            border-radius: 8px;
-        }
-        
-        /* Làm nền bảng (dataframe) đẹp hơn */
-        .stDataFrame {
-             border-radius: 8px;
-             overflow: hidden;
-        }
-
-        </style>
-    """, unsafe_allow_html=True)
-
-# Gọi hàm CSS ngay lập tức
-load_css()
-
-# --- END OF NEW THEME SECTION ---
-
 # --- 3. DATA & MODEL LOADING FUNCTIONS (WITH CACHING) ---
 # Checklist Items 1 & 2: Cache all heavy operations
 
@@ -174,8 +62,7 @@ def load_champion_models():
                  "Ensure the 5 .pkl files are in the 'models/' directory.")
         return []
 
-@st.cache_data
-def load_performance_data(file_path="data/final_5_day_results_df.csv"):
+@st.cache_datadef load_performance_data(file_path="data/final_5_day_results_df.csv"):
     """Loads pre-calculated performance data for Tab 3."""
     try:
         df = pd.read_csv(file_path)
@@ -241,6 +128,11 @@ with tab1:
     # --- MỤC 3 TRONG CHECKLIST ---
     st.title("Saigon Temperature Forecasting Application 🌦️")
     
+    # --- NÂNG CẤP: Thêm hình ảnh ---
+    st.image("https://images.unsplash.com/photo-1583496661160-fb58ceab5245?q=80&w=2070",
+             caption="Ho Chi Minh City. Credit: Unsplash", use_column_width=True)
+    # Bạn có thể thay thế URL trên bằng URL của riêng bạn, hoặc 
+    
     st.subheader("Project Summary")
     st.markdown("""
     The goal of this project is to forecast the average daily temperature for Ho Chi Minh City for the next 5 days.
@@ -249,7 +141,8 @@ with tab1:
     * **Model:** We use 5 'specialist' models - each model is optimized to predict a specific future day (T+1 to T+5).
     """)
     
-    st.subheader("Our 'Two-Stream' Strategy")
+    # --- NÂNG CẤP: Thêm emoji ---
+    st.subheader("🚀 Our 'Two-Stream' Strategy")
     st.markdown("""
     To optimize performance, we applied a "Two-Stream" strategy:
     1.  **Stream 1 (Linear Models):** Linear models (like Linear Regression) were trained on a feature set pruned using VIF to avoid multicollinearity.
@@ -258,7 +151,8 @@ with tab1:
     Our Champion Model is a **Stacking** model from Stream 2, which demonstrated superior performance.
     """)
     
-    st.subheader("Final Model Leaderboard")
+    # --- NÂNG CẤP: Thêm emoji ---
+    st.subheader("🏆 Final Model Leaderboard")
     st.markdown("Model leaderboard ranked by average RMSE score (lower is better).")
     
     # Gọi hàm từ benchmark_utils.py
@@ -300,7 +194,6 @@ with tab2:
         )
     else:
         st.error("Test data could not be loaded.") # Đã xóa st.sidebar.
-    # --- KẾT THÚC DI CHUYỂN ---
     
     st.divider() # Thêm đường kẻ ngang
 
@@ -333,7 +226,6 @@ with tab2:
             cols = st.columns(5)
             
             # Lấy giá trị thực tế để so sánh
-            # --- SỬA LỖI LOGIC: Lấy 'actual_values' từ all_data_df ---
             actual_values = []
             if selected_date_ts in all_data_df.index:
                 actual_row = all_data_df.loc[selected_date_ts]
@@ -355,6 +247,25 @@ with tab2:
                         delta=delta_text, 
                         delta_color="off" 
                     )
+            
+            # --- NÂNG CẤP: Thêm "Why" Insights ---
+            st.subheader("Forecast Insights (Why?)")
+            
+            # Lấy 2 features từ input_features (đã được xác nhận tồn tại)
+            temp_lag_1 = input_features['temp_lag_1'].iloc[0]
+            precip_today = input_features['precip'].iloc[0]
+            
+            # Hiển thị insight dựa trên giá trị
+            if temp_lag_1 > 30: # Giả định 30°C là "rất nóng"
+                st.info(f"💡 Insight: Yesterday was very hot ({temp_lag_1:.1f}°C). The model is using this strong 'persistence' signal for tomorrow's forecast.")
+            elif temp_lag_1 < 25: # Giả định 25°C là "mát mẻ"
+                st.info(f"💡 Insight: Yesterday was cool ({temp_lag_1:.1f}°C). This is likely pulling the initial forecast down.")
+            
+            if precip_today > 10: # Giả định 10mm là "ngày mưa"
+                st.info(f"💡 Insight: The selected day had {precip_today:.1f}mm of rain. This humidity and cloud cover is factored into the forecast.")
+            elif 'temp_lag_1' not in locals() or (temp_lag_1 >= 25 and temp_lag_1 <= 30):
+                st.info("💡 Insight: Weather conditions appear stable. The forecast is primarily driven by seasonal trends and recent temperature history.")
+            # --- KẾT THÚC NÂNG CẤP ---
 
             # --- BIỂU ĐỒ DỮ LIỆU TRAINING ---
             st.subheader("Training Set Overview")
@@ -368,23 +279,13 @@ with tab2:
                     mode='lines', name='Training Data (Actual)',
                     line=dict(color='#005aa7', width=1)
                 ))
-                
-                # --- CẬP NHẬT LAYOUT ĐỂ THÊM SLIDER VÀ KHÓA TRỤC Y ---
                 fig_train.update_layout(
                     title="Actual Temperature - Full Training Set",
-                    xaxis_title="Date", 
-                    yaxis_title="Temperature (°C)",
+                    xaxis_title="Date", yaxis_title="Temperature (°C)",
                     template="plotly_white",
-                    
-                    # 1. Thêm thanh trượt (slider) cho trục X
-                    xaxis_rangeslider_visible=True,
-                    
-                    # 2. Khóa trục Y (không cho zoom/thay đổi)
-                    # Điều này giữ nguyên range nhiệt độ khi bạn trượt/zoom trục X
-                    yaxis_fixedrange=True 
+                    xaxis_rangeslider_visible=True, # Thêm slider
+                    yaxis_fixedrange=True # Khóa trục Y
                 )
-                # --- KẾT THÚC CẬP NHẬT ---
-                
                 st.plotly_chart(fig_train, use_container_width=True)
 
             # 4. Biểu đồ Context
@@ -417,29 +318,37 @@ with tab2:
             )
             st.plotly_chart(fig, use_container_width=True)
 
-            # --- Biểu đồ so sánh Actual vs Forecast ---
+            # --- NÂNG CẤP: Biểu đồ thông minh hơn ---
             st.subheader("5-Day Forecast vs. Actual Comparison")
-            if is_partial_forecast:
-                st.info("Cannot draw the Actual vs. Forecast comparison chart because "
-                        "the selected date is too close to the end of the test set (missing 'actual' data).")
-            else:
-                fig_comp = go.Figure()
-                fig_comp.add_trace(go.Scatter(
-                    x=forecast_dates, y=predictions,
-                    mode='lines+markers', name='5-Day Forecast',
-                    line=dict(color='red', dash='dot')
-                ))
+            
+            fig_comp = go.Figure()
+                
+            # 1. Luôn thêm đường Dự báo
+            fig_comp.add_trace(go.Scatter(
+                x=forecast_dates, y=predictions,
+                mode='lines+markers', name='5-Day Forecast',
+                line=dict(color='red', dash='dot')
+            ))
+            
+            # 2. Chỉ thêm đường Thực tế nếu có đủ 5 ngày dữ liệu
+            if not is_partial_forecast:
                 fig_comp.add_trace(go.Scatter(
                     x=forecast_dates, y=actual_values,
                     mode='lines+markers', name='5-Day Actual',
                     line=dict(color='blue')
                 ))
-                fig_comp.update_layout(
-                    title="5-Day Forecast vs. Actual Values",
-                    xaxis_title="Date", yaxis_title="Temperature (°C)",
-                    template="plotly_white", legend=dict(x=0.01, y=0.99)
-                )
-                st.plotly_chart(fig_comp, use_container_width=True)
+                fig_comp.update_layout(title="5-Day Forecast vs. Actual Values")
+            else:
+                # Nếu không, chỉ hiển thị dự báo
+                fig_comp.update_layout(title="5-Day Forecast (Actual data not yet available)")
+
+            # Luôn hiển thị biểu đồ
+            fig_comp.update_layout(
+                xaxis_title="Date", yaxis_title="Temperature (°C)",
+                template="plotly_white", legend=dict(x=0.01, y=0.99)
+            )
+            st.plotly_chart(fig_comp, use_container_width=True)
+            # --- KẾT THÚC NÂNG CẤP ---
 
     else:
         # Điều chỉnh lại cảnh báo này
@@ -484,9 +393,16 @@ with tab3:
             )
             st.plotly_chart(fig_r2, use_container_width=True)
         
-        # 2. Biểu đồ Dự báo vs. Thực tế
-        st.subheader("Forecast vs. Actual Comparison (on entire test set)")
+        # --- NÂNG CẤP: Biểu đồ tương tác với Slider ---
+        st.subheader("Interactive Forecast vs. Actual Comparison")
+        
+        # 1. Thêm slider
+        selected_horizon = st.slider(
+            "Select Forecast Horizon (Day) to inspect:", 
+            1, 5, 1
+        )
         
+        # 2. Lấy dữ liệu dự đoán (đã được cache)
         @st.cache_data
         def get_full_test_predictions(_models, _X_test):
             """Run predictions on the entire test set and cache the results."""
@@ -500,21 +416,19 @@ with tab3:
         with st.spinner("Running predictions on entire test set... (This is cached for next time)"):
             y_pred_test = get_full_test_predictions(models, X_test)
 
-        col1, col2 = st.columns(2)
-        with col1:
-            fig_d1 = diag.plot_forecast_vs_actual(
-                y_true=y_test['Day 1'],
-                y_pred=y_pred_test['Day 1'],
-                day_ahead_title="Day 1 Forecast"
-            )
-            st.plotly_chart(fig_d1, use_container_width=True)
-        with col2:
-            fig_d5 = diag.plot_forecast_vs_actual(
-                y_true=y_test['Day 5'],
-                y_pred=y_pred_test['Day 5'],
-                day_ahead_title="Day 5 Forecast"
-            )
-            st.plotly_chart(fig_d5, use_container_width=True)
+        # 3. Chọn dữ liệu dựa trên slider
+        y_true_selected = y_test[f'Day {selected_horizon}']
+        y_pred_selected = y_pred_test[f'Day {selected_horizon}']
+
+        # 4. Vẽ 1 biểu đồ duy nhất
+        fig_interactive = diag.plot_forecast_vs_actual(
+            y_true=y_true_selected,
+            y_pred=y_pred_selected,
+            day_ahead_title=f"Day {selected_horizon} Forecast"
+        )
+        st.plotly_chart(fig_interactive, use_container_width=True)
+        # --- KẾT THÚC NÂNG CẤP ---
+
 
         # 3. Mục Tùy chọn: Deep Dive Expander
         with st.expander("Champion Model Diagnostics (Deep Dive)"):