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