| <!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>
|
|
|
|
|
| <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>
|
|
|
|
|
| <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>
|
|
|
| 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> |
