Create app.py

app.py

@@ -0,0 +1,210 @@
+import gradio as gr
+import matplotlib
+matplotlib.use('Agg')  # Non-interactive backend for Gradio
+import matplotlib.pyplot as plt
+import numpy as np
+import joblib, json
+
+# 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])
+
+    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)