Update app.py

app.py

@@ -21,121 +21,9 @@ 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.8) !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) ---
-# ... (Phần còn lại của code giữ nguyên) ...
+# Checklist Items 1 & 2: Cache all heavy operations
+
 @st.cache_data
 def load_feature_data(file_path="data/final_dataset_tree.csv"):
     """Loads features and targets, converts index to datetime."""
@@ -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)
@@ -185,6 +72,7 @@ def load_performance_data(file_path="data/final_5_day_results_df.csv"):
         return pd.DataFrame()
 
 # --- 4. INITIALIZE DATA & SPLIT TEST SET ---
+
 # Load all data and models
 all_data_df = load_feature_data()
 models = load_champion_models()
@@ -192,7 +80,9 @@ perf_df = load_performance_data()
 
 # --- CRITICAL CUSTOMIZATION ---
 TARGET_COLS = ['temp_next_1_day', 'temp_next_2_day', 'temp_next_3_day', 'temp_next_4_day', 'temp_next_5_day']
-CURRENT_TEMP_COL = 'temp' # Split test set (based on checklist dates)
+CURRENT_TEMP_COL = 'temp' 
+
+# Split test set (based on checklist dates)
 TEST_START_DATE = "2024-02-18"
 TEST_END_DATE = "2025-09-26"
 
@@ -221,25 +111,8 @@ else:
     st.error("Could not load main data, application cannot continue.")
     st.stop()
 
-# --- 5. GIAO DIỆN SIDEBAR (THANH ĐIỀU HƯỚNG) ---
-
-st.sidebar.title("Forecast Input") # Đổi tiêu đề sidebar
-selected_date = None
-
-# 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()
-    
-    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.")
+# --- 5. GIAO DIỆN SIDEBAR (ĐÃ XÓA) ---
+# Toàn bộ phần sidebar đã bị xóa
 
 # --- 6. GIAO DIỆN CHÍNH (MAIN PANEL) ---
 
@@ -296,8 +169,29 @@ with tab1:
 with tab2:
     # --- MỤC 4 TRONG CHECKLIST ---
     st.title("Live 5-Day Forecast")
+
+    # --- ĐÃ DI CHUYỂN LOGIC DATE INPUT VÀO ĐÂY ---
+    st.subheader("Forecast Input")
+    selected_date = None
+    
+    if not X_test.empty:
+        min_date = X_test.index.min()
+        max_date = X_test.index.max()
+        
+        selected_date = st.date_input( # Đã xóa st.sidebar.
+            "Select a date from the test set:",
+            value=min_date,
+            min_value=min_date,
+            max_value=max_date,
+            format="YYYY-MM-DD"
+        )
+    else:
+        st.error("Test data could not be loaded.") # Đã xóa st.sidebar.
+    # --- KẾT THÚC DI CHUYỂN ---
     
-    # Biến 'selected_date' được lấy từ sidebar
+    st.divider() # Thêm đường kẻ ngang
+
+    # Biến 'selected_date' GHI Giờ đã được định nghĩa ở trên
     if selected_date and not X_test.empty and models:
         st.header(f"5-Day Forecast from: {selected_date.strftime('%Y-%m-%d')}")
         
@@ -423,7 +317,11 @@ with tab2:
                 st.plotly_chart(fig_comp, use_container_width=True)
 
     else:
-        st.warning("Please wait... Loading data or models.")
+        # Điều chỉnh lại cảnh báo này
+        if not selected_date:
+             st.warning("Test data could not be loaded.")
+        else:
+             st.warning("Please wait... Loading data or models.")
 
 # --------------------------------------------------------------------