Spaces:

junaid17
/

customer-segmentation-api

Sleeping

App Files Files Community

junaid17 commited on 1 day ago

Commit

3d14250

verified ·

1 Parent(s): 8c927aa

Upload 8 files

Browse files

Files changed (8) hide show

analysis_model.ipynb +0 -0
app.py +54 -0
artifacts/kmeans.pkl +3 -0
artifacts/scaler.pkl +3 -0
data/customer_segmentation.csv +0 -0
index.html +563 -0
predict_helper.py +58 -0
requirements.txt +11 -0

analysis_model.ipynb ADDED Viewed

The diff for this file is too large to render. See raw diff

app.py ADDED Viewed

	@@ -0,0 +1,54 @@

+from fastapi import FastAPI, HTTPException
+from predict_helper import predict
+from pydantic import BaseModel, Field
+from fastapi.middleware.cors import CORSMiddleware
+app = FastAPI(title='Customer Segmentation', version='1.0')
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allows all origins
+    allow_credentials=True,
+    allow_methods=["*"],  # Allows all methods
+    allow_headers=["*"],  # Allows all headers
+)
+class BaseInput(BaseModel):
+    Age                 :   int = Field(..., ge=18, le=100, description="Customer age between 18 and 100")
+    Income              :   int = Field(..., ge=0, le=200000, description="Income between 0 and 200000")
+    Total_Spendings     :   int = Field(..., ge=0, le=5000, description="Total spendings (sum of purchases)")
+    NumWebPurchases     :   int = Field(..., ge=0, le=100, description="Number of web purchases")
+    NumStorePurchases   :   int = Field(..., ge=0, le=100, description="Number of store purchases")
+    NumWebVisitsMonth   :   int = Field(..., ge=0, le=50, description="Number of web visits per month")
+    Recency             :   int = Field(..., ge=0, le=365, description="Recency (days since last purchase)")
+class BaseOutput(BaseModel):
+    cluster_id      : int
+    cluster_name    : str
+    description     : str
+    recommendation  : str
+@app.get('/')
+def Status():
+    return {'message' : 'The api server is live and working'}
+@app.post('/predict', response_model=BaseOutput)
+def predict_segment(input_data: BaseInput):
+    try:
+        result = predict(
+            age=input_data.Age,
+            income=input_data.Income,
+            total_spending=input_data.Total_Spendings,
+            num_web_purchases=input_data.NumWebPurchases,
+            num_store_purchases=input_data.NumStorePurchases,
+            num_web_visits=input_data.NumWebVisitsMonth,
+            recency=input_data.Recency
+        )
+        return result
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=f"Error while predicting the output: {e}")

artifacts/kmeans.pkl ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:6ed70d46d041c4c0a154ddb5103f82f7fb599b0e4770989295e52a9b234692a7
+size 9815

artifacts/scaler.pkl ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:191d1c23878f3171c9c62d62e08a3b584595a5c4a756e715956cb40c1c3e7860
+size 1119

data/customer_segmentation.csv ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html ADDED Viewed

	@@ -0,0 +1,563 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Segmentation API</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --dark-gray: #1a1a1a;
+            --darker-gray: #0d0d0d;
+            --light-gray: #2d2d2d;
+            --accent: #4a90e2;
+            --accent-hover: #357abd;
+            --text: #e0e0e0;
+            --text-secondary: #a0a0a0;
+            --success: #4caf50;
+            --error: #f44336;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, var(--darker-gray), var(--dark-gray));
+            color: var(--text);
+            min-height: 100vh;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            animation: fadeInDown 1s ease-out;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(45deg, var(--accent), #66b3ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .header p {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 30px;
+        }
+        @media (min-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        .form-section, .result-section {
+            background: var(--light-gray);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            animation: slideInUp 0.8s ease-out;
+        }
+        .form-section h2, .result-section h2 {
+            margin-bottom: 25px;
+            color: var(--accent);
+            font-size: 1.8rem;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--text);
+            font-weight: 500;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 12px 15px;
+            border: 2px solid #404040;
+            border-radius: 8px;
+            background: var(--darker-gray);
+            color: var(--text);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
+        }
+        .form-group input:hover {
+            border-color: #5a9fe4;
+        }
+        .submit-btn {
+            width: 100%;
+            padding: 15px;
+            background: linear-gradient(45deg, var(--accent), #66b3ff);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 10px;
+        }
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
+        }
+        .submit-btn:active {
+            transform: translateY(0);
+        }
+        .submit-btn:disabled {
+            background: #555;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .result-card {
+            background: var(--darker-gray);
+            padding: 25px;
+            border-radius: 10px;
+            border-left: 4px solid var(--accent);
+            margin-bottom: 20px;
+            animation: fadeIn 0.6s ease-out;
+        }
+        .result-card h3 {
+            color: var(--accent);
+            margin-bottom: 10px;
+            font-size: 1.3rem;
+        }
+        .result-card p {
+            color: var(--text-secondary);
+            margin-bottom: 5px;
+        }
+        .loading {
+            text-align: center;
+            padding: 20px;
+            display: none;
+        }
+        .spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 4px solid var(--accent);
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        .error {
+            background: rgba(244, 67, 54, 0.1);
+            border: 1px solid var(--error);
+            color: var(--error);
+            padding: 15px;
+            border-radius: 8px;
+            margin: 15px 0;
+            display: none;
+        }
+        .success {
+            background: rgba(76, 175, 80, 0.1);
+            border: 1px solid var(--success);
+            color: var(--success);
+            padding: 15px;
+            border-radius: 8px;
+            margin: 15px 0;
+            display: none;
+        }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes slideInUp {
+            from {
+                opacity: 0;
+                transform: translateY(50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        .mobile-only {
+            display: block;
+        }
+        @media (min-width: 768px) {
+            .mobile-only {
+                display: none;
+            }
+        }
+        .desktop-only {
+            display: none;
+        }
+        @media (min-width: 768px) {
+            .desktop-only {
+                display: block;
+            }
+        }
+        .form-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
+        @media (min-width: 768px) {
+            .form-grid {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        .input-pair {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+        }
+        @media (max-width: 767px) {
+            .input-pair {
+                grid-template-columns: 1fr;
+            }
+        }
+        .result-highlight {
+            background: rgba(74, 144, 226, 0.1);
+            padding: 15px;
+            border-radius: 8px;
+            margin: 10px 0;
+            border: 1px solid var(--accent);
+        }
+        .result-title {
+            font-size: 1.2rem;
+            color: var(--accent);
+            margin-bottom: 5px;
+        }
+        .result-content {
+            color: var(--text);
+        }
+        .no-result {
+            text-align: center;
+            color: var(--text-secondary);
+            padding: 40px 20px;
+            font-style: italic;
+        }
+        .animate-in {
+            animation: fadeIn 0.5s ease-out forwards;
+        }
+        .animate-out {
+            animation: fadeOut 0.3s ease-out forwards;
+        }
+        @keyframes fadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; }
+        }
+        .slide-up {
+            animation: slideUp 0.5s ease-out;
+        }
+        @keyframes slideUp {
+            from {
+                transform: translateY(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Customer Segmentation API</h1>
+            <p>Enter customer data to predict their segment and get personalized recommendations</p>
+        </div>
+        <div class="main-content">
+            <div class="form-section">
+                <h2>Customer Data</h2>
+                <form id="predictionForm">
+                    <div class="form-grid">
+                        <div class="form-group">
+                            <label for="age">Age</label>
+                            <input type="number" id="age" name="age" min="18" max="100" required placeholder="18-100">
+                        </div>
+                        <div class="form-group">
+                            <label for="income">Income</label>
+                            <input type="number" id="income" name="income" min="0" max="200000" required placeholder="0-200000">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="totalSpendings">Total Spendings</label>
+                        <input type="number" id="totalSpendings" name="totalSpendings" min="0" max="5000" required placeholder="0-5000">
+                    </div>
+                    <div class="input-pair">
+                        <div class="form-group">
+                            <label for="webPurchases">Web Purchases</label>
+                            <input type="number" id="webPurchases" name="webPurchases" min="0" max="100" required placeholder="0-100">
+                        </div>
+                        <div class="form-group">
+                            <label for="storePurchases">Store Purchases</label>
+                            <input type="number" id="storePurchases" name="storePurchases" min="0" max="100" required placeholder="0-100">
+                        </div>
+                    </div>
+                    <div class="input-pair">
+                        <div class="form-group">
+                            <label for="webVisits">Web Visits/Month</label>
+                            <input type="number" id="webVisits" name="webVisits" min="0" max="50" required placeholder="0-50">
+                        </div>
+                        <div class="form-group">
+                            <label for="recency">Recency (days)</label>
+                            <input type="number" id="recency" name="recency" min="0" max="365" required placeholder="0-365">
+                        </div>
+                    </div>
+                    <button type="submit" class="submit-btn pulse" id="predictBtn">
+                        Predict Customer Segment
+                    </button>
+                </form>
+                <div class="loading" id="loading">
+                    <div class="spinner"></div>
+                    <p>Analyzing customer data...</p>
+                </div>
+                <div class="error" id="error"></div>
+                <div class="success" id="success"></div>
+            </div>
+            <div class="result-section">
+                <h2>Prediction Result</h2>
+                <div id="resultContent">
+                    <div class="no-result">
+                        <p>Enter customer data and click "Predict Customer Segment" to see results</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const form = document.getElementById('predictionForm');
+            const predictBtn = document.getElementById('predictBtn');
+            const loading = document.getElementById('loading');
+            const error = document.getElementById('error');
+            const success = document.getElementById('success');
+            const resultContent = document.getElementById('resultContent');
+            // Sample result template
+            const resultTemplate = {
+                "cluster_id": 3,
+                "cluster_name": "Active Online-Focused Shoppers",
+                "description": "High income, high spending, shops frequently both online and in-store—with strongest activity on web.",
+                "recommendation": "Offer premium bundles, omnichannel loyalty rewards (e.g., buy online, pick up in-store + bonus points), and personalized cross-channel recommendations."
+            };
+            form.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                // Show loading
+                loading.style.display = 'block';
+                error.style.display = 'none';
+                success.style.display = 'none';
+                // Disable button during prediction
+                predictBtn.disabled = true;
+                predictBtn.textContent = 'Analyzing...';
+                try {
+                    // Get form data
+                    const formData = new FormData(form);
+                    const inputData = {
+                        Age: parseInt(formData.get('age')),
+                        Income: parseInt(formData.get('income')),
+                        Total_Spendings: parseInt(formData.get('totalSpendings')),
+                        NumWebPurchases: parseInt(formData.get('webPurchases')),
+                        NumStorePurchases: parseInt(formData.get('storePurchases')),
+                        NumWebVisitsMonth: parseInt(formData.get('webVisits')),
+                        Recency: parseInt(formData.get('recency'))
+                    };
+                    // Make API call
+                    const response = await fetch('http://localhost:8000/predict', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(inputData)
+                    });
+                    if (!response.ok) {
+                        throw new Error(`API error: ${response.status}`);
+                    }
+                    const result = await response.json();
+                    // Display result
+                    displayResult(result);
+                    success.style.display = 'block';
+                    success.textContent = 'Prediction successful!';
+                } catch (err) {
+                    console.error('Prediction error:', err);
+                    error.style.display = 'block';
+                    error.textContent = `Error: ${err.message || 'Failed to get prediction'}`;
+                    // Also show in result area
+                    resultContent.innerHTML = `
+                        <div class="error" style="display: block;">
+                            <p>Failed to get prediction: ${err.message || 'Unknown error'}</p>
+                        </div>
+                    `;
+                } finally {
+                    // Hide loading and re-enable button
+                    loading.style.display = 'none';
+                    predictBtn.disabled = false;
+                    predictBtn.textContent = 'Predict Customer Segment';
+                }
+            });
+            function displayResult(result) {
+                resultContent.innerHTML = `
+                    <div class="result-card slide-up">
+                        <div class="result-highlight">
+                            <div class="result-title">Cluster ID: ${result.cluster_id}</div>
+                            <div class="result-content"><strong>Name:</strong> ${result.cluster_name}</div>
+                        </div>
+                        <div class="result-highlight">
+                            <div class="result-title">Description</div>
+                            <div class="result-content">${result.description}</div>
+                        </div>
+                        <div class="result-highlight">
+                            <div class="result-title">Recommendation</div>
+                            <div class="result-content">${result.recommendation}</div>
+                        </div>
+                    </div>
+                `;
+            }
+            // Add input validation
+            const inputs = form.querySelectorAll('input');
+            inputs.forEach(input => {
+                input.addEventListener('input', function() {
+                    const min = parseInt(this.min);
+                    const max = parseInt(this.max);
+                    const value = parseInt(this.value);
+                    if (value < min || value > max) {
+                        this.style.borderColor = 'var(--error)';
+                    } else {
+                        this.style.borderColor = '#404040';
+                    }
+                });
+            });
+            // Add animation to form elements on focus
+            inputs.forEach(input => {
+                input.addEventListener('focus', function() {
+                    this.parentElement.style.transform = 'translateY(-2px)';
+                });
+                input.addEventListener('blur', function() {
+                    this.parentElement.style.transform = 'translateY(0)';
+                });
+            });
+            // Add smooth scrolling for mobile
+            if (window.innerWidth <= 768) {
+                form.addEventListener('submit', function() {
+                    document.querySelector('.result-section').scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                });
+            }
+        });
+    </script>
+</body>
+</html>

predict_helper.py ADDED Viewed

	@@ -0,0 +1,58 @@

+import joblib
+import pandas as pd
+kmeans  = joblib.load('artifacts/kmeans.pkl')
+scaler  = joblib.load('artifacts/scaler.pkl')
+CLUSTER_INFO = {
+    0: {
+        "name": "High-Value Loyal Shoppers",
+        "description": "High income, high total spending, prefers in-store shopping, moderately recent purchases.",
+        "recommendation": "Offer exclusive in-store experiences, VIP loyalty tiers, early access to new collections, and personalized concierge service."
+    },
+    1: {
+        "name": "Budget-Conscious Occasional Shoppers",
+        "description": "Low income, low spending, high web browsing, but made a very recent purchase.",
+        "recommendation": "Target with limited-time discounts, entry-level product bundles, and personalized email offers based on browsing history to encourage repeat purchases."
+    },
+    2: {
+        "name": "Mid-Tier Engaged Browsers",
+        "description": "Mid-range income, low spending despite frequent website visits; hasn’t purchased in a long time.",
+        "recommendation": "Re-engage with cart abandonment reminders, free shipping thresholds, or 'we miss you' incentives (e.g., 15% off). Highlight bestsellers and social proof to drive conversion."
+    },
+    3: {
+        "name": "Active Online-Focused Shoppers",
+        "description": "High income, high spending, shops frequently both online and in-store—with strongest activity on web.",
+        "recommendation": "Offer premium bundles, omnichannel loyalty rewards (e.g., buy online, pick up in-store + bonus points), and personalized cross-channel recommendations."
+    }
+}
+def predict(age, income, total_spending, num_web_purchases, num_store_purchases, num_web_visits, recency):
+    input_data = pd.DataFrame({
+    "Age": [age],
+    "Income": [income],
+    "Total_Spendings": [total_spending],
+    "NumWebPurchases": [num_web_purchases],
+    "NumStorePurchases": [num_store_purchases],
+    "NumWebVisitsMonth": [num_web_visits],
+    "Recency": [recency]})
+    scaled_data = scaler.transform(input_data)
+    cluster_id = kmeans.predict(scaled_data)[0]
+    info = CLUSTER_INFO[cluster_id]
+    return {
+        "cluster_id": int(cluster_id),
+        "cluster_name": info["name"],
+        "description": info["description"],
+        "recommendation": info["recommendation"]
+    }
+"""if __name__ == "__main__":
+    result = predict(45, 60000, 900, 6, 8, 5, 40)
+    print(f"✨ Customer Segment: {result['cluster_name']} (ID: {result['cluster_id']})")
+    print(f"📝 Profile: {result['description']}")
+    print(f"🎯 Marketing Action: {result['recommendation']}")"""

requirements.txt ADDED Viewed

	@@ -0,0 +1,11 @@

+fastapi
+uvicorn
+openai
+joblib
+numpy
+pandas
+scikit-learn
+matplotlib
+seaborn
+numpy
+python-multipart