Update app.py

app.py

@@ -221,38 +221,38 @@ else:
     st.error("Could not load main data, application cannot continue.")
     st.stop()
 
-# --- 5. SIDEBAR NAVIGATION ---
-st.sidebar.title("Navigation")
+# --- 5. GIAO DIỆN SIDEBAR (THANH ĐIỀU HƯỚNG) ---
 
-# --- THAY ĐỔI: Thêm icons vào radio ---
-app_section = st.sidebar.radio(
-    "Choose a section:",
-    ("📑 Project Overview & Methodology", "🌦️ Live 5-Day Forecast", "📊 Model Performance & Diagnostics")
-)
-# --- KẾT THÚC THAY ĐỔI ---
-
-# Date input only shows on the "Live Forecast" tab
+st.sidebar.title("Forecast Input") # Đổi tiêu đề sidebar
 selected_date = None
-if app_section == "🌦️ Live 5-Day Forecast": # Cập nhật tên cho khớp
-    st.sidebar.header("Forecast Input")
+
+# Hiển thị date input cố định trên sidebar
+if not X_test.empty:
+    min_date = X_test.index.min()
+    max_date = X_test.index.max()
     
-    if not X_test.empty:
-        min_date = X_test.index.min()
-        max_date = X_test.index.max()
-        
-        selected_date = st.sidebar.date_input(
-            "Select a date from the test set:",
-            value=min_date,
-            min_value=min_date,
-            max_value=max_date,
-            format="YYYY-MM-DD"
-        )
-    else:
-        st.sidebar.error("Test data could not be loaded.")
+    selected_date = st.sidebar.date_input(
+        "Select a date from the test set:",
+        value=min_date,
+        min_value=min_date,
+        max_value=max_date,
+        format="YYYY-MM-DD"
+    )
+else:
+    st.sidebar.error("Test data could not be loaded.")
+
+# --- 6. GIAO DIỆN CHÍNH (MAIN PANEL) ---
+
+# Tạo các tab ngang thay vì radio button
+tab1, tab2, tab3 = st.tabs([
+    "📑 Project Overview & Methodology", 
+    "🌦️ Live 5-Day Forecast", 
+    "📊 Model Performance & Diagnostics"
+])
 
-# --- 6. MAIN PANEL DISPLAY ---
-if app_section == "📑 Project Overview & Methodology": # Cập nhật tên cho khớp
-    # --- CHECKLIST ITEM 3 ---
+# --- TAB 1: Project Overview ---
+with tab1:
+    # --- MỤC 3 TRONG CHECKLIST ---
     st.title("Saigon Temperature Forecasting Application 🌦️")
     
     st.subheader("Project Summary")
@@ -275,153 +275,112 @@ if app_section == "📑 Project Overview & Methodology": # Cập nhật tên cho
     st.subheader("Final Model Leaderboard")
     st.markdown("Model leaderboard ranked by average RMSE score (lower is better).")
     
-    # Call function from benchmark_utils.py
+    # Gọi hàm từ benchmark_utils.py
     leaderboard_df = benchmark_utils.load_leaderboard()
     
     if not leaderboard_df.empty:
+        # Lấy 10 mô hình hàng đầu và reset index (bỏ index cũ)
         top_10_df = leaderboard_df.head(10).reset_index(drop=True)
+        
+        # Đặt index mới bắt đầu từ 1
         top_10_df.index = range(1, len(top_10_df) + 1)
+        
+        # Hiển thị DataFrame đã sửa
         st.dataframe(top_10_df, use_container_width=True)
     else:
         st.warning("Could not load leaderboard data.")
 
 # --------------------------------------------------------------------
-elif app_section == "🌦️ Live 5-Day Forecast": # Cập nhật tên cho khớp
-    # --- CHECKLIST ITEM 4 ---
+
+# --- TAB 2: Live Forecast ---
+with tab2:
+    # --- MỤC 4 TRONG CHECKLIST ---
     st.title("Live 5-Day Forecast")
     
+    # Biến 'selected_date' được lấy từ sidebar
     if selected_date and not X_test.empty and models:
         st.header(f"5-Day Forecast from: {selected_date.strftime('%Y-%m-%d')}")
         
-        # 1. Get Input Features
+        # 1. Lấy Input Features
         selected_date_ts = pd.Timestamp(selected_date)
         
-        # Logic fix: input_features must be from X_test
+        # Sửa lỗi logic: input_features phải được lấy từ X_test
         if selected_date_ts in X_test.index:
             input_features = X_test.loc[[selected_date_ts]]
         else:
             st.error("Data not found for the selected date in X_test.")
-            input_features = pd.DataFrame() # Create empty dataframe to avoid errors later
+            input_features = pd.DataFrame() # Tạo dataframe rỗng để tránh lỗi sau
 
         if input_features.empty:
             st.error("Data not found for the selected date.")
         else:
-            # 2. Generate Predictions
+            # 2. Tạo dự đoán
             predictions = []
             for i in range(5):
-                model = models[i] # Get T+i model
+                model = models[i] # Lấy mô hình T+i
                 pred = model.predict(input_features)[0]
                 predictions.append(pred)
             
-            # 3. Display Predictions (using st.metric)
+            # 3. Hiển thị dự đoán (dùng st.metric)
             forecast_dates = pd.date_range(start=selected_date, periods=6, freq='D')[1:]
             cols = st.columns(5)
             
-            # Get actual values for comparison
-            # --- LOGIC FIX: Get 'actual_values' from all_data_df ---
-            # We need to get the target columns (e.g., 'temp_next_1_day')
-            # from the ORIGINAL DATAFRAME at the selected date.
-            
+            # 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:
-                # Get the row from the original dataframe
                 actual_row = all_data_df.loc[selected_date_ts]
-                
-                # Get values from the target columns (temp_next_1_day, etc.)
                 for col_name in TARGET_COLS:
                     actual_values.append(actual_row[col_name])
             else:
-                # Fallback case if date not found (rare)
-                actual_values = [float('nan')] * 5 # Create 5 NaN values
+                actual_values = [float('nan')] * 5 
             
-            # --- APPLYING LOGIC (1) FROM REFERENCE CODE ---
-            # Check if any 'Actual' values are missing
             is_partial_forecast = any(pd.isna(v) for v in actual_values)
-            # ----------------------------------------------
 
             for i in range(5):
                 with cols[i]:
-                    
-                    # --- FIX 1 (REFINED): Use pd.notna logic from reference code ---
                     actual_val = actual_values[i]
                     delta_text = f"Actual: {actual_val:.1f}°C" if pd.notna(actual_val) else "Actual: --"
-                    # --- END FIX 1 ---
-                    
+
                     st.metric(
                         label=f"Forecast for {forecast_dates[i].strftime('%b %d')}",
                         value=f"{predictions[i]:.1f}°C",
-                        delta=delta_text, # Use the checked delta_text
-                        delta_color="off" # Neutral gray color
+                        delta=delta_text, 
+                        delta_color="off" 
                     )
 
-            # --- NEW ADDITION 2: TRAINING DATA PLOT (PER REQUEST) ---
+            # --- BIỂU ĐỒ DỮ LIỆU TRAINING ---
             st.subheader("Training Set Overview")
             with st.expander("Show plot of all training data (before 2024-02-18)"):
-                
-                # Define training data range
                 train_end_date = pd.Timestamp(TEST_START_DATE) - pd.Timedelta(days=1)
                 train_df = all_data_df.loc[:train_end_date][CURRENT_TEMP_COL]
                 
-                # --- START OF MODIFICATION (USER REQUEST) ---
-                
-                # Calculate Y-axis range to keep it fixed
-                y_min = train_df.min()
-                y_max = train_df.max()
-                padding = (y_max - y_min) * 0.05 # Add 5% padding
-                
                 fig_train = go.Figure()
                 fig_train.add_trace(go.Scatter(
                     x=train_df.index, y=train_df,
                     mode='lines', name='Training Data (Actual)',
-                    line=dict(color='#005aa7', width=1) # Blue
+                    line=dict(color='#005aa7', width=1)
                 ))
-                
                 fig_train.update_layout(
                     title="Actual Temperature - Full Training Set",
-                    xaxis_title="Date", 
-                    yaxis_title="Temperature (°C)",
-                    template="plotly_white",
-                    paper_bgcolor='rgba(0,0,0,0)', # Làm nền trong suốt
-                    plot_bgcolor='rgba(255,255,255,0.6)', # Nền trắng mờ
-                    
-                    # 1. Fix the Y-axis range (Requirement 2 & 3)
-                    yaxis=dict(
-                        range=[y_min - padding, y_max + padding]
-                    ),
-                    
-                    # 2. Add the X-axis range slider (Requirement 1)
-                    xaxis=dict(
-                        rangeslider=dict(
-                            visible=True
-                        ),
-                        type="date" # Ensure it's treated as a date axis
-                    )
+                    xaxis_title="Date", yaxis_title="Temperature (°C)",
+                    template="plotly_white"
                 )
-                
                 st.plotly_chart(fig_train, use_container_width=True)
-                
-                # --- END OF MODIFICATION ---
-
-            # --- END NEW ADDITION 2 ---
 
-            # 4. Plot (Optimal Suggestion)
+            # 4. Biểu đồ Context
             st.subheader("Historical Context & Forecast")
             
-            # Get last 14 days of history
             history_start = selected_date_ts - pd.Timedelta(days=14)
             history_end = selected_date_ts
-            
-            # Get 'temp' data from the original dataframe
             history_df = all_data_df.loc[history_start:history_end][CURRENT_TEMP_COL]
             
-            # Create dataframe for forecast
             forecast_df = pd.DataFrame({
                 'Date': forecast_dates,
                 'Forecast': predictions
             }).set_index('Date')
             
             fig = go.Figure()
-            
             fig.add_trace(go.Scatter(
                 x=history_df.index, y=history_df,
                 mode='lines+markers', name='Past 14 Days (Actual)',
@@ -432,135 +391,79 @@ elif app_section == "🌦️ Live 5-Day Forecast": # Cập nhật tên cho khớ
                 mode='lines+markers', name='5-Day Forecast',
                 line=dict(color='red', dash='dot')
             ))
-            
             fig.update_layout(
                 title="Forecast vs. Historical Context",
                 xaxis_title="Date", yaxis_title="Temperature (°C)",
-                template="plotly_white", legend=dict(x=0.01, y=0.99),
-                paper_bgcolor='rgba(0,0,0,0)',
-                plot_bgcolor='rgba(255,255,255,0.6)'
+                template="plotly_white", legend=dict(x=0.01, y=0.99)
             )
             st.plotly_chart(fig, use_container_width=True)
 
-            # --- APPLYING LOGIC (2) FROM REFERENCE CODE ---
+            # --- Biểu đồ so sánh Actual vs Forecast ---
             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()
-                
-                # Add Forecast trace
                 fig_comp.add_trace(go.Scatter(
                     x=forecast_dates, y=predictions,
                     mode='lines+markers', name='5-Day Forecast',
                     line=dict(color='red', dash='dot')
                 ))
-                
-                # Add Actual trace
                 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),
-                    paper_bgcolor='rgba(0,0,0,0)',
-                    plot_bgcolor='rgba(255,255,255,0.6)'
+                    template="plotly_white", legend=dict(x=0.01, y=0.99)
                 )
                 st.plotly_chart(fig_comp, use_container_width=True)
-            # --- END APPLYING LOGIC (2) ---
 
     else:
         st.warning("Please wait... Loading data or models.")
 
 # --------------------------------------------------------------------
-elif app_section == "📊 Model Performance & Diagnostics": # Cập nhật tên cho khớp
-    # --- CHECKLIST ITEM 5 ---
+
+# --- TAB 3: Model Performance ---
+with tab3:
+    # --- MỤC 5 TRONG CHECKLIST ---
     st.title("Model Performance & Diagnostics")
     
     if not perf_df.empty and not y_test.empty:
         st.subheader("Performance Degradation over 5 Days")
         st.markdown("How model performance changes as the forecast horizon increases.")
         
-        # Filter for Champion model only
         MODEL_NAME = 'Champion (Stacking)'
         champion_perf_df = perf_df[perf_df['Model'] == MODEL_NAME].copy()
 
-        # 1. Performance Degradation Plots (RMSE & R2)
-        
-        # --- CUSTOMIZATION ---
-        # Ensure 'RMSE' and 'R2' column names are correct for 'final_5_day_results_df.csv'
+        # 1. Biểu đồ suy giảm hiệu suất (RMSE & R2)
         RMSE_COL_NAME = 'RMSE (Absolute Error)' 
-        R2_COL_NAME = 'R-squared' 
+        R2_COL_NAME = 'R-squared'     
         
-        # --- BẮT ĐẦU SỬA LỖI CĂN LỀ VÀ CẮT CHỮ ---
-        common_plot_layout_updates = dict(
-            font=dict(color="#333333"), # Màu chữ chung cho biểu đồ
-            title_font_color="#004080", # Màu chữ cho tiêu đề biểu đồ
-            xaxis=dict(
-                title_font_color="#005aa7",
-                tickfont=dict(color="#333333") # Màu chữ cho nhãn trục
-            ),
-            yaxis=dict(
-                title_font_color="#005aa7",
-                tickfont=dict(color="#333333")
-            ),
-            legend=dict(font=dict(color="#333333")),
-            paper_bgcolor='rgba(255,255,255,0.9)', # Nền giấy sáng hơn, hơi trong suốt
-            plot_bgcolor='rgba(255,255,255,0.7)',  # Nền plot sáng hơn, hơi trong suốt
-            
-            # THAY ĐỔI 1: Căn lề trái tất cả tiêu đề
-            title_x=0, # Căn lề trái (0 = trái, 0.5 = giữa, 1 = phải)
-            title_xanchor='left', # Đặt anchor lề trái
-            
-            # THAY ĐỔI 2: Thêm lề để tiêu đề không bị dính
-            margin=dict(l=20, t=80) # l=left (20px), t=top (80px để có chỗ cho 2 dòng)
-        )
-        # --- KẾT THÚC SỬA LỖI CĂN LỀ V�� CẮT CHỮ ---
-
         col1, col2 = st.columns(2)
         with col1:
             fig_rmse = diag.plot_performance_degradation(
-                champion_perf_df, # Use filtered df
+                champion_perf_df, 
                 metric_column=RMSE_COL_NAME, 
                 metric_name='RMSE (Temperature °C)',
                 color='blue'
             )
-            
-            # THAY ĐỔI 3: Ghi đè tiêu đề để ngắt dòng (sửa lỗi bị cắt)
-            fig_rmse.update_layout(
-                title="<b>RMSE (Temperature °C) <br> vs. Forecast Horizon</b>" 
-            )
-            
-            # Áp dụng các thay đổi màu chữ VÀ căn lề
-            fig_rmse.update_layout(**common_plot_layout_updates)
             st.plotly_chart(fig_rmse, use_container_width=True)
         with col2:
             fig_r2 = diag.plot_performance_degradation(
-                champion_perf_df, # Use filtered df
+                champion_perf_df, 
                 metric_column=R2_COL_NAME, 
                 metric_name='R-squared (R²)',
                 color='green'
             )
-            
-            # THAY ĐỔI 3: Ghi đè tiêu đề để ngắt dòng
-            fig_r2.update_layout(
-                title="<b>R-squared (R²) <br> vs. Forecast Horizon</b>"
-            )
-
-            # Áp dụng các thay đổi màu chữ VÀ căn lề
-            fig_r2.update_layout(**common_plot_layout_updates)
             st.plotly_chart(fig_r2, use_container_width=True)
         
-        # 2. Forecast vs. Actual Plots
+        # 2. Biểu đồ Dự báo vs. Thực tế
         st.subheader("Forecast vs. Actual Comparison (on entire test set)")
         
-        # This function runs predictions on the *entire* X_test (thousands of rows)
-        # It will be slow without caching
         @st.cache_data
         def get_full_test_predictions(_models, _X_test):
             """Run predictions on the entire test set and cache the results."""
@@ -581,8 +484,6 @@ elif app_section == "📊 Model Performance & Diagnostics": # Cập nhật tên
                 y_pred=y_pred_test['Day 1'],
                 day_ahead_title="Day 1 Forecast"
             )
-            # Áp dụng các thay đổi màu chữ VÀ căn lề
-            fig_d1.update_layout(**common_plot_layout_updates)
             st.plotly_chart(fig_d1, use_container_width=True)
         with col2:
             fig_d5 = diag.plot_forecast_vs_actual(
@@ -590,11 +491,9 @@ elif app_section == "📊 Model Performance & Diagnostics": # Cập nhật tên
                 y_pred=y_pred_test['Day 5'],
                 day_ahead_title="Day 5 Forecast"
             )
-            # Áp dụng các thay đổi màu chữ VÀ căn lề
-            fig_d5.update_layout(**common_plot_layout_updates)
             st.plotly_chart(fig_d5, use_container_width=True)
 
-        # 3. Optional: Deep Dive Expander
+        # 3. Mục Tùy chọn: Deep Dive Expander
         with st.expander("Champion Model Diagnostics (Deep Dive)"):
             st.markdown("Detailed analysis of residuals (error = actual - predicted) for the Day 1 forecast.")
             
@@ -605,15 +504,11 @@ elif app_section == "📊 Model Performance & Diagnostics": # Cập nhật tên
             fig_res_time = diag.plot_residuals_vs_time(
                 y_true_d1, y_pred_d1, dates_d1, "Day 1"
             )
-            # Áp dụng các thay đổi màu chữ VÀ căn lề
-            fig_res_time.update_layout(**common_plot_layout_updates)
             st.plotly_chart(fig_res_time, use_container_width=True)
             
             fig_res_dist = diag.plot_residuals_distribution(
                 y_true_d1, y_pred_d1, "Day 1"
             )
-            # Áp dụng các thay đổi màu chữ VÀ căn lề
-            fig_res_dist.update_layout(**common_plot_layout_updates)
             st.plotly_chart(fig_res_dist, use_container_width=True)
             st.markdown("A good model will have residuals (errors) normally distributed (bell curve) "
                         "around 0 and show no pattern over time.")