Update pages/9_KNN.py

pages/9_KNN.py

@@ -1,123 +1,132 @@
 import streamlit as st
 
-st.set_page_config(page_title="KNN Explained", page_icon="🤖", layout="wide")
+st.set_page_config(page_title="KNN Visual Guide", page_icon="📊", layout="wide")
 
 st.markdown("""
     <style>
         .stApp {
-            background-image: linear-gradient(120deg, #232526, #414345);
-            color: #f8f8f2;
+            background: linear-gradient(to right, #141E30, #243B55);
+            color: white;
+            font-family: 'Segoe UI', sans-serif;
         }
-        h1, h2, h3, h4 {
-            color: #ff79c6;
+        h1, h2, h3 {
+            color: #00CED1;
         }
         .sidebar .sidebar-content {
-            background-color: #2c3e50;
+            background-color: #1e1e1e;
         }
         .block-container {
             padding-top: 2rem;
             padding-bottom: 2rem;
         }
         a {
-            color: #8be9fd;
+            color: #00BFFF;
             text-decoration: none;
         }
         a:hover {
-            color: #50fa7b;
+            color: #1E90FF;
         }
     </style>
 """, unsafe_allow_html=True)
 
-st.sidebar.title("🤖 KNN Explorer")
-st.sidebar.markdown("Discover the K-Nearest Neighbors algorithm step-by-step.")
-
-st.markdown("""
-    <h1 style='text-align: center;'>🔍 K-Nearest Neighbors (KNN) Simplified</h1>
-""", unsafe_allow_html=True)
-
-with st.expander("📘 What is KNN?"):
-    st.write("""
-        K-Nearest Neighbors (KNN) is a **simple**, **intuitive**, and **non-parametric** algorithm used in classification and regression. 
-        It makes predictions based on the majority class or average of the `K` closest training samples.
-
-        ✅ No training phase required — just store the data.  
-        ✅ Uses distance-based similarity (e.g., Euclidean).  
-        ✅ Effective for well-separated and small datasets.
+st.sidebar.title("📊 KNN Visual Guide")
+st.sidebar.markdown("Dive into KNN concepts interactively!")
+
+st.markdown("<h1 style='text-align: center;'>🧭 K-Nearest Neighbors (KNN) Explorer</h1>", unsafe_allow_html=True)
+
+section = st.radio(
+    "Choose a KNN Concept to Explore:",
+    [
+        "📘 Introduction to KNN",
+        "⚙️ How KNN Works",
+        "🎯 Underfitting vs Overfitting",
+        "📉 Cross-Validation",
+        "🛠️ Hyperparameter Tuning",
+        "⚖️ Feature Scaling",
+        "🧮 Weighted KNN",
+        "🗺️ Decision Boundaries"
+    ]
+)
+
+if section == "📘 Introduction to KNN":
+    st.subheader("📘 What is KNN?")
+    st.markdown("""
+    KNN stands for **K-Nearest Neighbors**, a simple and powerful algorithm used for:
+    - 📍 **Classification**: Predicting a category
+    - 🔢 **Regression**: Predicting a continuous value
+    ✅ Lazy Learning → No training phase, just memorization  
+    ✅ Based on **distance** to nearest neighbors  
+    ✅ Works well with clean and scaled data
     """)
 
-with st.expander("⚙️ How Does KNN Work?"):
-    st.write("""
-        **Training Phase:**
-        - KNN does not train in the traditional sense. It memorizes the training set.
-
-        **Prediction Phase:**
-        1. Choose a value of `K`
-        2. Calculate distance between test point and all training points
-        3. Pick `K` nearest neighbors
-        4. Predict class (majority vote) or value (average)
+elif section == "⚙️ How KNN Works":
+    st.subheader("⚙️ How Does KNN Work?")
+    st.markdown("""
+    🚀 **Step-by-step** process:
+    1. Pick a value for `K`
+    2. Measure distance (Euclidean, Manhattan, etc.) to all training points
+    3. Pick `K` nearest ones
+    4. 📊 Classification → Majority vote  
+       📈 Regression → Average/weighted average
     """)
-    
-with st.expander("🎯 Underfitting vs Overfitting"):
-    st.write("""
-        - **Overfitting**: Very low training error but poor generalization. Happens with low `K` (e.g., `k=1`).  
-        - **Underfitting**: Model is too simple to learn any patterns (e.g., very high `K`).  
-        - **Sweet Spot**: Use **cross-validation** to pick the best `K` that balances both.
-    """)
-
-with st.expander("📉 Training vs Cross-Validation Error"):
-    st.write("""
-        - **Training Error**: How well the model does on the data it has seen.
-        - **CV Error**: Performance on unseen data using validation.
 
-        ⚖️ Aim for **low CV error** for best generalization.
+elif section == "🎯 Underfitting vs Overfitting":
+    st.subheader("🎯 Underfitting vs Overfitting")
+    st.markdown("""
+    🔍 **Overfitting**: Model memorizes data — poor on new data  
+    🔍 **Underfitting**: Model too simple — misses patterns  
+    ✅ **Best Fit**: Balance both using cross-validation
     """)
 
-with st.expander("🛠️ Hyperparameter Tuning"):
-    st.write("""
-        - `k`: Number of neighbors (e.g., 3, 5, 7)
-        - `weights`: 'uniform' or 'distance' (weight closer neighbors more)
-        - `metric`: Distance function (Euclidean, Manhattan, etc.)
-
-        🔍 Use **Grid Search**, **Randomized Search**, or **Bayesian Optimization** to tune these.
+elif section == "📉 Cross-Validation":
+    st.subheader("📉 Training vs Cross-Validation")
+    st.markdown("""
+    🧪 **Training Error**: Error on known data  
+    🔄 **Cross-Validation Error**: Error on unseen data  
+    🎯 Choose K where both errors are low → best generalization
     """)
 
-with st.expander("⚖️ Why Scaling Matters"):
-    st.write("""
-        KNN is based on distance — so features on different scales can skew results.
-
-        ✅ Use **StandardScaler** (Z-score) or **MinMaxScaler** for preprocessing.  
-        ⚠️ Always scale **after splitting** the data.
+elif section == "🛠️ Hyperparameter Tuning":
+    st.subheader("🛠️ Tuning KNN")
+    st.markdown("""
+    🔧 Main Parameters:
+    - `k`: Number of neighbors
+    - `weights`: All equal or weighted by distance
+    - `metric`: Distance type (e.g., Euclidean)
+    🧠 Use Grid Search, Random Search, or Optuna for optimization
     """)
 
-with st.expander("📐 Weighted KNN"):
-    st.write("""
-        - Weighted KNN assigns more importance to closer neighbors.
-        - It’s useful when closer points are more likely to belong to the same class.
-        - Just use `weights='distance'` in most libraries like scikit-learn.
+elif section == "⚖️ Feature Scaling":
+    st.subheader("⚖️ Why Scale Your Features?")
+    st.markdown("""
+    KNN relies on distance — so features must be on the same scale:
+    - 🔢 **Standardization**: Mean = 0, SD = 1
+    - 🔻 **Normalization**: Rescales between 0 and 1
+    ❗ Always scale after train-test split to avoid data leakage
     """)
 
-
-with st.expander("🗺️ Decision Boundaries"):
-    st.write("""
-        - `k=1`: Sharp, complex boundaries — can lead to overfitting.  
-        - Larger `k`: Smoother boundaries — better generalization.  
-        - Visualize using 2D plots to understand how `K` affects predictions.
+elif section == "🧮 Weighted KNN":
+    st.subheader("🧮 Weighted KNN")
+    st.markdown("""
+    Instead of equal votes, **Weighted KNN** gives:
+    - Higher weight to nearer neighbors
+    - Lower influence from distant points
+    📌 Improves performance when neighbor relevance varies
     """)
 
-with st.expander("🔁 What is Cross-Validation?"):
-    st.write("""
-        - **K-Fold Cross-Validation** splits data into `K` parts (folds).
-        - Train on `K-1` folds, test on the remaining.
-        - Repeat `K` times and average results.
-
-        ✅ Helps prevent overfitting and guides hyperparameter selection.
+elif section == "🗺️ Decision Boundaries":
+    st.subheader("🗺️ Decision Regions")
+    st.markdown("""
+    Visuals of how KNN separates classes:
+    - `k=1` → Very sensitive, sharp boundaries → Overfitting
+    - `k > 1` → Smoother, more general
+    📊 Helps interpret model behavior in 2D/3D space
     """)
 
 st.markdown("""
-    <h2 style='color: #8be9fd;'>📓 Try KNN in Action:</h2>
-    <a href='https://colab.research.google.com/drive/11wk6wt7sZImXhTqzYrre3ic4oj3KFC4M?usp=sharing' target='_blank'>
-    🚀 Open Colab Notebook
-    </a>
+<hr style='border: 1px solid #555;'>
+<h4 style='color: #00CED1;'>🔗 Try it Yourself in Colab:</h4>
+<a href='https://colab.research.google.com/drive/11wk6wt7sZImXhTqzYrre3ic4oj3KFC4M?usp=sharing' target='_blank'>Open Interactive Notebook</a>
 """, unsafe_allow_html=True)
 
-st.success("KNN is simple yet powerful. Use scaling, choose the right K, and always validate your results!")
+st.success("Explore, visualize, and understand how KNN works like never before! 🚀")