Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import matplotlib | |
| matplotlib.use('Agg') # Non-interactive backend for Gradio | |
| import pandas as pd | |
| import numpy as np | |
| import matplotlib.pyplot as plt | |
| import matplotlib.cm as cm | |
| import seaborn as sns | |
| import plotly.express as px | |
| import plotly.graph_objects as go | |
| from plotly.subplots import make_subplots | |
| import warnings | |
| warnings.filterwarnings('ignore') | |
| from sklearn.preprocessing import StandardScaler | |
| from sklearn.cluster import KMeans | |
| from sklearn.decomposition import PCA | |
| from sklearn.manifold import TSNE | |
| from sklearn.metrics import silhouette_score, silhouette_samples | |
| import joblib | |
| import io, base64 | |
| import json | |
| K_OPTIMAL = 5 | |
| # Load saved artifacts | |
| kmeans_loaded = joblib.load('kmeans_model.pkl') | |
| scaler_loaded = joblib.load('scaler.pkl') | |
| with open('cluster_names.json') as f: | |
| cluster_names_loaded = {int(k): v for k, v in json.load(f).items()} | |
| with open('cluster_insights.json') as f: | |
| insights_loaded = {int(k): v for k, v in json.load(f).items()} | |
| SEGMENT_COLORS = { | |
| 0: '#FF6B6B', 1: '#4ECDC4', 2: '#45B7D1', 3: '#96CEB4', 4: '#FFEAA7' | |
| } | |
| SEGMENT_EMOJIS = {0: '⚠️', 1: '🚀', 2: '🧑💼', 3: '💰', 4: '👑'} | |
| def make_radar_chart(cluster_id): | |
| """Generate a radar chart for the predicted cluster.""" | |
| centers = (kmeans_loaded.cluster_centers_ - kmeans_loaded.cluster_centers_.min(axis=0)) / \ | |
| (kmeans_loaded.cluster_centers_.max(axis=0) - kmeans_loaded.cluster_centers_.min(axis=0)) | |
| categories = ['Age', 'Annual Income', 'Spending Score'] | |
| angles = np.linspace(0, 2 * np.pi, len(categories), endpoint=False).tolist() | |
| angles += angles[:1] | |
| fig, ax = plt.subplots(figsize=(4, 4), subplot_kw=dict(polar=True)) | |
| fig.patch.set_facecolor('#1a1a2e') | |
| ax.set_facecolor('#16213e') | |
| for i in range(len(centers)): | |
| vals = centers[i].tolist() + [centers[i][0]] | |
| color = SEGMENT_COLORS[i] | |
| lw = 3 if i == cluster_id else 1 | |
| alpha_fill = 0.4 if i == cluster_id else 0.05 | |
| ax.plot(angles, vals, 'o-', linewidth=lw, color=color, | |
| label=cluster_names_loaded[i], alpha=1.0 if i == cluster_id else 0.4) | |
| ax.fill(angles, vals, alpha=alpha_fill, color=color) | |
| ax.set_thetagrids(np.degrees(angles[:-1]), categories, color='white', fontsize=9) | |
| ax.set_ylim(0, 1) | |
| ax.set_title(f'{SEGMENT_EMOJIS[cluster_id]} {cluster_names_loaded[cluster_id]}', | |
| color='white', fontsize=11, fontweight='bold', pad=20) | |
| ax.tick_params(colors='white') | |
| ax.spines['polar'].set_color('#333') | |
| ax.yaxis.set_tick_params(colors='#555') | |
| ax.set_yticklabels([]) | |
| ax.grid(color='#333', linestyle='--', alpha=0.5) | |
| plt.tight_layout() | |
| return fig | |
| def make_comparison_bar(user_vals, cluster_id): | |
| """Bar chart: user values vs cluster centroid.""" | |
| centroid = scaler_loaded.inverse_transform( | |
| kmeans_loaded.cluster_centers_[cluster_id].reshape(1, -1) | |
| )[0] | |
| features = ['Age', 'Annual Income (k$)', 'Spending Score'] | |
| x = np.arange(len(features)) | |
| width = 0.35 | |
| fig, ax = plt.subplots(figsize=(6, 3.5)) | |
| fig.patch.set_facecolor('#1a1a2e') | |
| ax.set_facecolor('#16213e') | |
| bars1 = ax.bar(x - width/2, user_vals, width, label='You', | |
| color=SEGMENT_COLORS[cluster_id], alpha=0.9, edgecolor='white') | |
| bars2 = ax.bar(x + width/2, centroid, width, label='Cluster Avg', | |
| color='#aaaaaa', alpha=0.6, edgecolor='white') | |
| ax.set_xticks(x) | |
| ax.set_xticklabels(features, color='white', fontsize=9) | |
| ax.set_ylabel('Value', color='white') | |
| ax.set_title('You vs Cluster Average', color='white', fontweight='bold') | |
| ax.tick_params(colors='white') | |
| ax.spines[['top','right','left','bottom']].set_color('#333') | |
| ax.yaxis.set_tick_params(colors='white') | |
| ax.legend(facecolor='#222', labelcolor='white', fontsize=9) | |
| for bar in bars1: | |
| ax.text(bar.get_x() + bar.get_width()/2, bar.get_height() + 0.5, | |
| f'{bar.get_height():.0f}', ha='center', va='bottom', | |
| color='white', fontsize=8) | |
| plt.tight_layout() | |
| return fig | |
| def predict_segment(age, annual_income, spending_score): | |
| """Core prediction function called by Gradio.""" | |
| user_input = np.array([[age, annual_income, spending_score]]) | |
| user_scaled = scaler_loaded.transform(user_input) | |
| cluster_id = int(kmeans_loaded.predict(user_scaled)[0]) | |
| K_OPTIMAL = 5 | |
| info = insights_loaded[cluster_id] | |
| color = SEGMENT_COLORS[cluster_id] | |
| emoji = SEGMENT_EMOJIS[cluster_id] | |
| # Distance to all centroids | |
| dists = kmeans_loaded.transform(user_scaled)[0] | |
| confidence = 1 - (dists[cluster_id] / dists.sum()) | |
| result_html = f""" | |
| <div style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| border-radius: 16px; padding: 24px; color: white; font-family: sans-serif;"> | |
| <div style="text-align:center; margin-bottom: 16px;"> | |
| <div style="font-size: 48px;">{emoji}</div> | |
| <div style="font-size: 26px; font-weight: bold; color: {color};"> | |
| Cluster {cluster_id}: {cluster_names_loaded[cluster_id]} | |
| </div> | |
| <div style="font-size: 13px; color: #aaa; margin-top: 4px;"> | |
| Confidence: {confidence:.1%} | |
| </div> | |
| </div> | |
| <hr style="border-color: #333; margin: 12px 0;"> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;"> | |
| <div style="background: #0f3460; border-radius: 10px; padding: 14px;"> | |
| <div style="font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 1px;">Profile</div> | |
| <div style="margin-top: 6px; font-size: 14px;">{info['desc']}</div> | |
| </div> | |
| <div style="background: #0f3460; border-radius: 10px; padding: 14px;"> | |
| <div style="font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 1px;">🎯 Recommended Strategy</div> | |
| <div style="margin-top: 6px; font-size: 14px; color: {color};">{info['strategy']}</div> | |
| </div> | |
| </div> | |
| <div style="margin-top: 14px; background: #0f3460; border-radius: 10px; padding: 14px;"> | |
| <div style="font-size: 11px; color: #aaa; margin-bottom: 8px;">📏 Distance to All Centroids (lower = closer)</div> | |
| {''.join([ | |
| f'<div style="display:flex; align-items:center; margin-bottom:6px;">' + | |
| f'<span style="width:120px; font-size:12px; color:{SEGMENT_COLORS[i]};">{cluster_names_loaded[i][:12]}</span>' + | |
| f'<div style="flex:1; height:8px; background:#1a1a2e; border-radius:4px; overflow:hidden;">' + | |
| f'<div style="height:8px; width:{min(100, dists[i]/max(dists)*100):.0f}%; background:{SEGMENT_COLORS[i]}; border-radius:4px;"></div>' + | |
| f'</div><span style="margin-left:8px; font-size:12px; color:#aaa;">{dists[i]:.2f}</span></div>' | |
| for i in range(K_OPTIMAL) | |
| ])} | |
| </div> | |
| </div> | |
| """ | |
| radar = make_radar_chart(cluster_id) | |
| bar = make_comparison_bar([age, annual_income, spending_score], cluster_id) | |
| return result_html, radar, bar | |
| # ─── Gradio UI ─────────────────────────────────────────────────────────────── | |
| css = """ | |
| .gradio-container { max-width: 960px !important; margin: auto; font-family: 'Segoe UI', sans-serif; } | |
| #title { text-align: center; margin-bottom: 20px; } | |
| .input-panel { background: #16213e; border-radius: 12px; padding: 16px; } | |
| """ | |
| EXAMPLES = [ | |
| [25, 80, 90], | |
| [45, 30, 20], | |
| [35, 60, 55], | |
| [22, 15, 85], | |
| [55, 90, 15], | |
| ] | |
| with gr.Blocks(css=css, theme=gr.themes.Base(primary_hue='blue'), title='Customer Segmentation') as demo: | |
| gr.HTML(""" | |
| <div id="title"> | |
| <h1 style="font-size:2em; margin-bottom:4px;">🛍️ Customer Segmentation</h1> | |
| <p style="color:#888;">K-Means Clustering · 5 Customer Segments · Real-time Prediction</p> | |
| </div> | |
| """) | |
| with gr.Row(): | |
| with gr.Column(scale=1, elem_classes='input-panel'): | |
| gr.Markdown('### 📝 Enter Customer Details') | |
| age_inp = gr.Slider(18, 70, value=30, step=1, label='Age') | |
| income_inp = gr.Slider(10, 140, value=60, step=1, label='Annual Income (k$)') | |
| spend_inp = gr.Slider(1, 100, value=50, step=1, label='Spending Score (1–100)') | |
| predict_btn = gr.Button('🔍 Predict Segment', variant='primary', size='lg') | |
| gr.Markdown('### 💡 Try Examples') | |
| gr.Examples( | |
| examples=EXAMPLES, | |
| inputs=[age_inp, income_inp, spend_inp], | |
| label='Quick Examples' | |
| ) | |
| with gr.Column(scale=2): | |
| result_html = gr.HTML(label='Segment Result') | |
| with gr.Row(): | |
| radar_plot = gr.Plot(label='Cluster Radar Profile') | |
| bar_plot = gr.Plot(label='You vs Cluster Average') | |
| gr.Markdown(""" | |
| --- | |
| **Segments:** ⚠️ Cautious Savers · 🚀 High Potential · 🧑💼 Standard Customers · 💰 Budget Shoppers · 👑 Premium Loyalists | |
| **Model:** K-Means (K=5, k-means++ init) · Scaler: StandardScaler · Dataset: Mall Customers | |
| """) | |
| predict_btn.click( | |
| fn=predict_segment, | |
| inputs=[age_inp, income_inp, spend_inp], | |
| outputs=[result_html, radar_plot, bar_plot] | |
| ) | |
| # Launch | |
| demo.launch(share=True, debug=False) |