Initial deployment to Hugging Face Spaces

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt-lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,25 @@
+---
+title: Chatbot Performance Analyzer
+emoji: 🤖
+colorFrom: indigo
+colorTo: pink
+sdk: docker
+pinned: false
+license: apache-2.0
+---
+
+# Chatbot Performance Analyzer
+
+An advanced AI system that evaluates chatbot responses using Bidirectional LSTM with Attention mechanism. The model analyzes responses based on contextual facts to determine quality and accuracy.
+
+## Features
+- Context-aware performance evaluation
+- Attention-based LSTM architecture
+- Real-time analytics dashboard
+- Glassmorphic modern UI
+
+## Usage
+1. Enter related facts/context
+2. Provide the user question
+3. Input the chatbot's response
+4. Get instant expert analysis

app.py

@@ -0,0 +1,92 @@
+import os
+import pickle
+import numpy as np
+import tensorflow as tf
+from tensorflow.keras.preprocessing.sequence import pad_sequences
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+from huggingface_hub import hf_hub_download
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+MAX_LEN = 300
+REPO_ID = "d-e-e-k-11/chatbot-performance-analyzer"
+
+# Global variables
+model = None
+tokenizer = None
+
+# Custom Attention Layer
+class Attention(tf.keras.layers.Layer):
+    def __init__(self, **kwargs):
+        super(Attention, self).__init__(**kwargs)
+    def build(self, input_shape):
+        self.W = self.add_weight(name='attention_weight', shape=(input_shape[-1], 1), initializer='random_normal', trainable=True)
+        self.b = self.add_weight(name='attention_bias', shape=(input_shape[1], 1), initializer='zeros', trainable=True)
+        super(Attention, self).build(input_shape)
+    def call(self, x):
+        e = tf.keras.backend.tanh(tf.keras.backend.dot(x, self.W) + self.b)
+        a = tf.keras.backend.softmax(e, axis=1)
+        output = x * a
+        return tf.keras.backend.sum(output, axis=1)
+
+def load_resources():
+    global model, tokenizer
+    try:
+        # Download from Hugging Face Hub
+        model_path = hf_hub_download(repo_id=REPO_ID, filename="chatbot_performance_advanced.h5", repo_type="space")
+        tokenizer_path = hf_hub_download(repo_id=REPO_ID, filename="tokenizer_advanced.pickle", repo_type="space")
+        
+        model = tf.keras.models.load_model(model_path, custom_objects={'Attention': Attention})
+        with open(tokenizer_path, 'rb') as handle:
+            tokenizer = pickle.load(handle)
+        print("Advanced Model and Tokenizer loaded successfully from Hub.")
+        return True
+    except Exception as e:
+        print(f"Error loading resources: {e}")
+        return False
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    global model, tokenizer
+    if model is None or tokenizer is None:
+        if not load_resources():
+            return jsonify({
+                'error': 'Model is still loading. Please wait a moment.',
+                'status': 'loading'
+            }), 503
+
+    data = request.json
+    if data.get('ping'):
+        return jsonify({'status': 'ready'})
+
+    facts = data.get('facts', 'No context provided.')
+    question = data.get('question', '')
+    response = data.get('response', '')
+    
+    try:
+        # Preprocess text with facts context
+        text = f"[FACTS] {facts} [QUERY] {question} [RES] {response}".lower()
+        seq = tokenizer.texts_to_sequences([text])
+        pad = pad_sequences(seq, maxlen=MAX_LEN)
+        
+        # Prediction
+        prediction = model.predict(pad)[0][0]
+        is_best = bool(prediction > 0.5)
+        
+        return jsonify({
+            'probability': float(prediction),
+            'is_best': is_best
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    load_resources()
+    app.run(host='0.0.0.0', port=7860, debug=False)

requirements.txt

@@ -0,0 +1,8 @@
+pandas
+numpy
+tensorflow
+scikit-learn
+matplotlib
+seaborn
+flask
+flask-cors

static/css/style.css

@@ -0,0 +1,244 @@
+:root {
+    --primary-color: #6366f1;
+    --primary-hover: #4f46e5;
+    --bg-dark: #0f172a;
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --accent: #f43f5e;
+    --success: #10b981;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
+}
+
+.container {
+    width: 90%;
+    max-width: 800px;
+    padding: 2rem;
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    border-radius: 24px;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    animation: fadeIn 0.8s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(to right, #818cf8, #f472b6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: center;
+}
+
+p.subtitle {
+    color: var(--text-muted);
+    text-align: center;
+    margin-bottom: 2.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--text-main);
+}
+
+textarea,
+input {
+    width: 100%;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    color: white;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+textarea:focus,
+input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+button {
+    width: 100%;
+    padding: 1rem;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+    border: none;
+    border-radius: 12px;
+    color: white;
+    font-weight: 600;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    margin-top: 1rem;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+.result-container {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px dashed var(--glass-border);
+    display: none;
+}
+
+.result-header {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.score-badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: 99px;
+    font-weight: 700;
+    margin-top: 0.5rem;
+}
+
+.score-good {
+    background: rgba(16, 185, 129, 0.2);
+    color: #10b981;
+}
+
+.score-bad {
+    background: rgba(244, 63, 94, 0.2);
+    color: #f43f5e;
+}
+
+.loader {
+    width: 24px;
+    height: 24px;
+    border: 3px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    display: none;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+.tabs {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    justify-content: center;
+}
+
+.tab {
+    padding: 0.75rem 1.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid var(--glass-border);
+    color: var(--text-muted);
+}
+
+.tab.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+.view {
+    display: none;
+}
+
+.view.active {
+    display: block;
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1rem;
+}
+
+.stat-card {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 1.5rem;
+    border-radius: 16px;
+    border: 1px solid var(--glass-border);
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-top: 0.5rem;
+    color: var(--primary-color);
+}
+
+.engine-list {
+    margin-top: 2rem;
+}
+
+.engine-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.engine-item:last-child {
+    border-bottom: none;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

templates/index.html

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chatbot Performance Analyzer</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Advanced Chatbot Performance</h1>
+        <p class="subtitle">Multi-context Evaluation with Attention LSTM</p>
+
+        <div id="status-bar"
+            style="margin-bottom: 1rem; text-align: center; font-size: 0.85rem; color: #fbbf24; background: rgba(251, 191, 36, 0.1); padding: 0.5rem; border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2);">
+            ⚠️ Model Initialization in Progress... (Epoch 1/2)
+        </div>
+
+        <div class="tabs">
+            <div class="tab active" onclick="switchTab('analyzer')">Analyzer</div>
+            <div class="tab" onclick="switchTab('dashboard')">Analytics Dashboard</div>
+        </div>
+
+        <!-- Analyzer View -->
+        <div id="analyzer-view" class="view active">
+            <div class="form-group">
+                <label for="facts">Related Context / Facts</label>
+                <textarea id="facts" rows="3" placeholder="Paste the knowledge base or facts here..."></textarea>
+            </div>
+
+            <div class="form-group">
+                <label for="question">User Question</label>
+                <textarea id="question" rows="2" placeholder="Enter the user question..."></textarea>
+            </div>
+
+            <div class="form-group">
+                <label for="response">Chatbot Response</label>
+                <textarea id="response" rows="3" placeholder="Enter the chatbot response..."></textarea>
+            </div>
+
+            <button id="analyze-btn">
+                <span class="loader" id="loader"></span>
+                Perform Deep Analysis
+            </button>
+
+            <div id="result" class="result-container">
+                <div class="result-header">Expert Verdict:</div>
+                <div id="result-text"></div>
+                <div id="score-badge" class="score-badge"></div>
+                <div id="probability" style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted);"></div>
+            </div>
+        </div>
+
+        <!-- Dashboard View -->
+        <div id="dashboard-view" class="view">
+            <h2 style="margin-bottom: 1rem;">Dataset Insights</h2>
+            <div class="dashboard-grid">
+                <div class="stat-card">
+                    <div>Total Queries</div>
+                    <div class="stat-value" id="total-queries">40,152</div>
+                </div>
+                <div class="stat-card">
+                    <div>Overall Accuracy</div>
+                    <div class="stat-value" id="overall-quality">31.4%</div>
+                </div>
+            </div>
+
+            <div class="engine-list">
+                <h3 style="margin-bottom: 0.5rem;">Engine Performance Breakdown</h3>
+                <div class="engine-item">
+                    <span>Openbook Performance</span>
+                    <span style="color: var(--success)">67.3% Top Responses</span>
+                </div>
+                <div class="engine-item">
+                    <span>Dialogflow Performance</span>
+                    <span style="color: #6366f1">24.2% Top Responses</span>
+                </div>
+                <div class="engine-item">
+                    <span>Watson Performance</span>
+                    <span style="color: var(--accent)">19.3% Top Responses</span>
+                </div>
+                <div class="engine-item">
+                    <span>Rasa Performance</span>
+                    <span style="color: var(--accent)">14.6% Top Responses</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Check model status on load and every 30 seconds
+        async function checkStatus() {
+            try {
+                const res = await fetch('/predict', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ ping: true })
+                });
+                if (res.ok) {
+                    const statusBar = document.getElementById('status-bar');
+                    statusBar.style.color = '#10b981';
+                    statusBar.style.background = 'rgba(16, 185, 129, 0.1)';
+                    statusBar.style.borderColor = 'rgba(16, 185, 129, 0.2)';
+                    statusBar.innerText = '✅ Advanced Intelligence Engine Active';
+                    setTimeout(() => statusBar.style.display = 'none', 5000);
+                }
+            } catch (e) { }
+        }
+        checkStatus();
+        const statusInterval = setInterval(() => {
+            const statusBar = document.getElementById('status-bar');
+            if (statusBar && statusBar.style.display !== 'none') {
+                checkStatus();
+            } else {
+                clearInterval(statusInterval);
+            }
+        }, 15000);
+
+        function switchTab(tab) {
+
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+
+            if (tab === 'analyzer') {
+                document.querySelector('.tab:nth-child(1)').classList.add('active');
+                document.getElementById('analyzer-view').classList.add('active');
+            } else {
+                document.querySelector('.tab:nth-child(2)').classList.add('active');
+                document.getElementById('dashboard-view').classList.add('active');
+            }
+        }
+
+        document.getElementById('analyze-btn').addEventListener('click', async () => {
+            const facts = document.getElementById('facts').value;
+            const question = document.getElementById('question').value;
+            const response = document.getElementById('response').value;
+            const loader = document.getElementById('loader');
+            const resultDiv = document.getElementById('result');
+            const resultText = document.getElementById('result-text');
+            const scoreBadge = document.getElementById('score-badge');
+            const probDiv = document.getElementById('probability');
+
+            if (!question || !response) {
+                alert('Please fill in the question and response.');
+                return;
+            }
+
+            loader.style.display = 'inline-block';
+            document.getElementById('analyze-btn').disabled = true;
+            resultDiv.style.display = 'none';
+
+            try {
+                const res = await fetch('/predict', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ facts, question, response })
+                });
+
+                const data = await res.json();
+
+                if (!res.ok) {
+                    if (res.status === 503) {
+                        alert(data.error);
+                    } else {
+                        alert('Analysis Error: ' + (data.error || 'Server error'));
+                    }
+                    return;
+                }
+
+                resultDiv.style.display = 'block';
+                if (data.is_best) {
+                    resultText.innerText = "Advanced analysis confirms this is a high-fidelity response.";
+                    scoreBadge.innerText = "OPTIMIZED";
+                    scoreBadge.className = "score-badge score-good";
+                } else {
+                    resultText.innerText = "Analysis suggests potential inaccuracies or linguistic flaws.";
+                    scoreBadge.innerText = "SUB-OPTIMAL";
+                    scoreBadge.className = "score-badge score-bad";
+                }
+
+                probDiv.innerText = `Attention Confidence: ${(data.probability * 100).toFixed(2)}%`;
+
+            } catch (err) {
+                alert('Analysis failed. Ensure server is running.');
+            } finally {
+                loader.style.display = 'none';
+                document.getElementById('analyze-btn').disabled = false;
+            }
+        });
+    </script>
+</body>
+
+</html>