update tab 2

app.py

@@ -70,7 +70,18 @@ def initialize_app():
     
     init_clustering_models(scaled_features, original_features, models_dir)
     
-    return data_loader, cm, raw_data, scaled_features, original_features
+    # Pre-compute all PCA plots for Tab 2 (K=2 to K=10)
+    print("Pre-computing PCA plots for all K values...")
+    pca_plots_cache = {}
+    for k in range(2, 11):
+        if k in cm.cluster_labels:
+            labels = cm.cluster_labels[k]
+            pca_plots_cache[k] = plot_clusters_pca_2d(cm.pca_features, labels, k)
+            print(f"  Cached PCA plot for K={k}")
+    
+    print("All PCA plots cached successfully!")
+    
+    return data_loader, cm, raw_data, scaled_features, original_features, pca_plots_cache
 
 
 # Global variables (will be initialized at app startup)
@@ -79,6 +90,7 @@ cm = None
 raw_data = None
 scaled_features = None
 original_features = None
+pca_plots_cache = None
 
 
 # ============================================================================
@@ -213,13 +225,10 @@ def create_tab2():
         )
         
         def update_pca_plot(k):
-            """Update PCA plot based on selected K."""
-            if k not in cm.cluster_labels:
-                return None
-            
-            labels = cm.cluster_labels[k]
-            pca_fig = plot_clusters_pca_2d(cm.pca_features, labels, k)
-            return pca_fig
+            """Update PCA plot based on selected K (from cache)."""
+            if k in pca_plots_cache:
+                return pca_plots_cache[k]
+            return None
         
         pca_plot = gr.Plot(
             label="Scatter Plot: PC1 vs PC2",
@@ -236,8 +245,7 @@ def create_tab2():
         **How to Use:**
         - Each **point** represents one customer
         - **Color** indicates which cluster the customer belongs to
-        - Hover over points to see **CustomerID**
-        - When changing K, clusters will be recalculated
+        - When changing K, clusters will be instantly updated from cache
         """)
 
 
@@ -342,10 +350,10 @@ def create_tab3():
 
 def main():
     """Main Gradio app."""
-    global data_loader, cm, raw_data, scaled_features, original_features
+    global data_loader, cm, raw_data, scaled_features, original_features, pca_plots_cache
     
     print("Starting Gradio app initialization...")
-    data_loader, cm, raw_data, scaled_features, original_features = initialize_app()
+    data_loader, cm, raw_data, scaled_features, original_features, pca_plots_cache = initialize_app()
     print("App initialized successfully!")
     
     # Create interface

utils/visualizations.py

@@ -9,6 +9,8 @@ import numpy as np
 import plotly.graph_objects as go
 import plotly.express as px
 from plotly.subplots import make_subplots
+from functools import lru_cache
+import hashlib
 
 
 def create_kpi_display(kpi_metrics):
@@ -120,7 +122,7 @@ def plot_hourly_daily_heatmap(df):
     ))
     
     fig.update_layout(
-        title="Mẫu mua hàng: Giờ trong ngày x Ngày trong tuần",
+        title="Heatmap thời gian mua hàng: Giờ trong ngày x Ngày trong tuần",
         xaxis_title="Giờ trong ngày",
         yaxis_title="Ngày trong tuần",
         height=400,
@@ -204,7 +206,7 @@ def plot_elbow_silhouette(inertias, silhouette_scores, k_range=range(2, 11)):
 
 def plot_clusters_pca_2d(pca_features, cluster_labels, k):
     """
-    Plot clusters in 2D PCA space.
+    Plot clusters in 2D PCA space with minimal hover data for performance.
     
     Args:
         pca_features: DataFrame with PCA features
@@ -216,18 +218,23 @@ def plot_clusters_pca_2d(pca_features, cluster_labels, k):
     """
     df_plot = pca_features.copy()
     df_plot['Cluster'] = cluster_labels
-    df_plot['CustomerID'] = pca_features.index
     
+    # Minimal hover data for faster rendering
     fig = px.scatter(
         df_plot,
         x='PC1', y='PC2',
         color='Cluster',
-        hover_data={'CustomerID': True, 'PC1': ':.3f', 'PC2': ':.3f'},
+        hover_data={'PC1': ':.2f', 'PC2': ':.2f'},
         color_continuous_scale='Viridis',
         title=f'Phân cụm K-Means (K={k}) - Không gian PCA',
         labels={'Cluster': 'Cluster'},
     )
     
+    fig.update_traces(
+        marker=dict(size=4, opacity=0.7),
+        hovertemplate='<b>Cluster %{customdata[0]}</b><br>PC1: %{x:.2f}<br>PC2: %{y:.2f}<extra></extra>'
+    )
+    
     fig.update_layout(
         height=500,
         template='plotly_white',