Update src/streamlit_app.py

src/streamlit_app.py

@@ -4,36 +4,77 @@ import numpy as np
 import matplotlib.pyplot as plt
 
 # =========================
-# Page config
+# Page Config
 # =========================
 st.set_page_config(
-    page_title="COPOD Demo",
+    page_title="COPOD Interactive Demo",
+    page_icon="🔍",
     layout="wide"
 )
 
 # =========================
-# Title
+# Custom CSS
 # =========================
-st.title("🔍 COPOD – Copula-Based Outlier Detection")
 st.markdown("""
-Demo tương tác để minh họa:
-- Khi COPOD hoạt động tốt
-- Khi COPOD thất bại do bỏ qua tương quan
-""")
+<style>
+.main {
+    background-color: #f9fafc;
+}
+h1, h2, h3 {
+    color: #2c3e50;
+}
+.step-box {
+    background-color: #ffffff;
+    padding: 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    margin-bottom: 1.5rem;
+}
+.info-box {
+    background-color: #eef4ff;
+    padding: 1rem;
+    border-left: 6px solid #4c6ef5;
+    border-radius: 6px;
+}
+.warning-box {
+    background-color: #fff4e6;
+    padding: 1rem;
+    border-left: 6px solid #f08c00;
+    border-radius: 6px;
+}
+</style>
+""", unsafe_allow_html=True)
+
+# =========================
+# Title Section
+# =========================
+st.title("🔍 COPOD – Interactive Outlier Detection Demo")
+
+st.markdown("""
+<div class="info-box">
+<b>COPOD</b> (Copula-Based Outlier Detection) là thuật toán:
+<ul>
+<li>Không cần hyperparameter</li>
+<li>Nhanh</li>
+<li>Có khả năng giải thích theo từng chiều</li>
+</ul>
+Ứng dụng này minh họa cả <b>điểm mạnh</b> và <b>điểm yếu</b> của COPOD.
+</div>
+""", unsafe_allow_html=True)
 
 # =========================
-# Sidebar – Controls
+# Sidebar
 # =========================
-st.sidebar.header("⚙️ Controls")
+st.sidebar.header("⚙️ Control Panel")
 
 uploaded_file = st.sidebar.file_uploader(
-    "Upload CSV file",
+    "📂 Upload CSV file",
     type=["csv"]
 )
 
 run_copod = st.sidebar.button("▶️ Run COPOD")
 show_outlier_graph = st.sidebar.button("📊 Show Outlier Graph")
-show_correlation_failure = st.sidebar.button("⚠️ Show Correlation Failure")
+show_corr_failure = st.sidebar.button("⚠️ Show Correlation Failure")
 
 # =========================
 # Session State
@@ -45,99 +86,116 @@ if "scores" not in st.session_state:
     st.session_state.scores = None
 
 # =========================
-# Load Data
+# STEP 1 – Upload Data
 # =========================
+st.markdown("<div class='step-box'>", unsafe_allow_html=True)
+st.subheader("🟢 Step 1: Upload Dataset")
+
 if uploaded_file is not None:
     df = pd.read_csv(uploaded_file)
     st.session_state.df = df
 
-    st.subheader("📄 Data Preview")
+    st.success("Dataset loaded successfully!")
     st.dataframe(df.head())
+else:
+    st.markdown("""
+    <div class="warning-box">
+    Please upload a CSV file to begin.
+    </div>
+    """, unsafe_allow_html=True)
+
+st.markdown("</div>", unsafe_allow_html=True)
 
 # =========================
-# Run COPOD (Placeholder)
+# STEP 2 – Run COPOD
 # =========================
+st.markdown("<div class='step-box'>", unsafe_allow_html=True)
+st.subheader("🔵 Step 2: Run COPOD")
+
 if run_copod:
     if st.session_state.df is None:
-        st.warning("⚠️ Please upload a CSV file first.")
+        st.warning("Upload data first.")
     else:
         df = st.session_state.df
-
-        # Chỉ lấy cột numeric
         X = df.select_dtypes(include=[np.number])
 
         if X.shape[1] == 0:
-            st.error("❌ Dataset không có cột numeric.")
+            st.error("Dataset has no numeric columns.")
         else:
-            # ===== PLACEHOLDER COPOD =====
-            fake_scores = np.random.rand(len(X)) * 10
-            df["outlier_score"] = fake_scores
+            # PLACEHOLDER SCORES
+            scores = np.random.rand(len(X)) * 10
+            df["outlier_score"] = scores
 
             st.session_state.df = df
-            st.session_state.scores = fake_scores
+            st.session_state.scores = scores
 
-            st.success("✅ COPOD finished (placeholder).")
+            st.success("COPOD completed (placeholder).")
 
-            st.subheader("📌 Top Outliers")
+            st.markdown("**Top potential outliers:**")
             st.dataframe(
                 df.sort_values("outlier_score", ascending=False).head(10)
             )
 
+st.markdown("</div>", unsafe_allow_html=True)
+
 # =========================
-# Show Outlier Graph
+# STEP 3 – Visual Analysis
 # =========================
-if show_outlier_graph:
-    if st.session_state.scores is None:
-        st.warning("⚠️ Run COPOD first.")
-    else:
-        st.subheader("📊 Outlier Score Distribution")
+st.markdown("<div class='step-box'>", unsafe_allow_html=True)
+st.subheader("🟣 Step 3: Visual Analysis")
 
-        fig, ax = plt.subplots()
-        ax.hist(st.session_state.scores, bins=30)
-        ax.set_xlabel("Outlier Score")
-        ax.set_ylabel("Count")
+col1, col2 = st.columns(2)
 
-        st.pyplot(fig)
+# --- Outlier Graph ---
+with col1:
+    if show_outlier_graph:
+        if st.session_state.scores is None:
+            st.warning("Run COPOD first.")
+        else:
+            st.markdown("**📊 Outlier Score Distribution**")
 
-        st.markdown("""
-        **Giải thích**:
-        - Điểm càng cao → xác suất rơi vào tail càng nhỏ
-        - COPOD đánh giá từng chiều độc lập
-        """)
+            fig, ax = plt.subplots()
+            ax.hist(st.session_state.scores, bins=30)
+            ax.set_xlabel("Outlier Score")
+            ax.set_ylabel("Count")
 
-# =========================
-# Show Correlation Failure (Demo Logic)
-# =========================
-if show_correlation_failure:
-    if st.session_state.df is None:
-        st.warning("⚠️ Upload dữ liệu trước.")
-    else:
-        df = st.session_state.df
-        numeric_cols = df.select_dtypes(include=[np.number]).columns
+            st.pyplot(fig)
 
-        if len(numeric_cols) < 2:
-            st.error("❌ Cần ít nhất 2 biến numeric để minh họa tương quan.")
+            st.caption(
+                "Higher score → more likely to be an outlier (tail probability)."
+            )
+
+# --- Correlation Failure ---
+with col2:
+    if show_corr_failure:
+        if st.session_state.df is None:
+            st.warning("Upload data first.")
         else:
-            x_col, y_col = numeric_cols[:2]
+            df = st.session_state.df
+            num_cols = df.select_dtypes(include=[np.number]).columns
 
-            st.subheader("⚠️ Correlation Failure Illustration")
+            if len(num_cols) < 2:
+                st.error("Need at least 2 numeric columns.")
+            else:
+                x, y = num_cols[:2]
 
-            fig, ax = plt.subplots()
-            ax.scatter(df[x_col], df[y_col], alpha=0.6)
-            ax.set_xlabel(x_col)
-            ax.set_ylabel(y_col)
+                st.markdown("**⚠️ Correlation Failure Illustration**")
 
-            st.pyplot(fig)
+                fig, ax = plt.subplots()
+                ax.scatter(df[x], df[y], alpha=0.6)
+                ax.set_xlabel(x)
+                ax.set_ylabel(y)
+
+                st.pyplot(fig)
+
+                st.caption(
+                    "COPOD may miss outliers that break correlations but are marginally normal."
+                )
 
-            st.markdown("""
-            **Ý tưởng minh họa**:
-            - Điểm phá vỡ mối quan hệ (correlation outlier)
-            - COPOD có thể **không gán score cao**
-            - Vì từng chiều vẫn "bình thường"
-            """)
+st.markdown("</div>", unsafe_allow_html=True)
 
 # =========================
 # Footer
 # =========================
 st.markdown("---")
-st.caption("COPOD Demo – Integrator View")
+st.caption("COPOD Demo • Integrator View • Streamlit + Hugging Face")