|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cybersecurity Chatbot Test</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3); |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
height: 600px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 20px; |
|
|
border-radius: 20px 20px 0 0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 24px; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
opacity: 0.9; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.message { |
|
|
padding: 12px 16px; |
|
|
border-radius: 18px; |
|
|
max-width: 70%; |
|
|
word-wrap: break-word; |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
align-self: flex-end; |
|
|
} |
|
|
|
|
|
.assistant-message { |
|
|
background: #f3f4f6; |
|
|
color: #1f2937; |
|
|
align-self: flex-start; |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: none; |
|
|
align-self: flex-start; |
|
|
padding: 12px 16px; |
|
|
background: #f3f4f6; |
|
|
border-radius: 18px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
display: inline-block; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #9ca3af; |
|
|
margin: 0 2px; |
|
|
animation: typing 1.4s infinite; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
|
|
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
|
|
|
|
|
@keyframes typing { |
|
|
0%, 60%, 100% { transform: translateY(0); } |
|
|
30% { transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
.input-container { |
|
|
padding: 20px; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
#messageInput { |
|
|
flex: 1; |
|
|
padding: 12px 16px; |
|
|
border: 2px solid #e5e7eb; |
|
|
border-radius: 25px; |
|
|
font-size: 14px; |
|
|
outline: none; |
|
|
transition: border-color 0.3s; |
|
|
} |
|
|
|
|
|
#messageInput:focus { |
|
|
border-color: #667eea; |
|
|
} |
|
|
|
|
|
.send-button { |
|
|
padding: 12px 24px; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
font-weight: 600; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
|
|
|
.send-button:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.send-button:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.quick-prompts { |
|
|
padding: 10px 20px; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.quick-prompt { |
|
|
padding: 6px 12px; |
|
|
background: #f3f4f6; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 15px; |
|
|
font-size: 12px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.quick-prompt:hover { |
|
|
background: #e5e7eb; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>🔒 Cybersecurity Assistant</h1> |
|
|
<p>Ask me anything about security best practices</p> |
|
|
<p style="margin-top: 10px; font-size: 12px; opacity: 0.8;"> |
|
|
Total Interactions: <span id="interactionCount">0</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="quick-prompts"> |
|
|
<div class="quick-prompt" onclick="sendQuickPrompt('How do I identify phishing emails?')">Phishing Detection</div> |
|
|
<div class="quick-prompt" onclick="sendQuickPrompt('What makes a strong password?')">Password Security</div> |
|
|
<div class="quick-prompt" onclick="sendQuickPrompt('How do I secure my home WiFi?')">Network Security</div> |
|
|
<div class="quick-prompt" onclick="sendQuickPrompt('What should I do if I clicked a suspicious link?')">Incident Response</div> |
|
|
</div> |
|
|
|
|
|
<div class="chat-container" id="chatContainer"> |
|
|
<div class="assistant-message message"> |
|
|
Hello! I'm your cybersecurity assistant. How can I help you stay safe online today? |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="typing-indicator" id="typingIndicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
|
|
|
<div class="input-container"> |
|
|
<input |
|
|
type="text" |
|
|
id="messageInput" |
|
|
placeholder="Ask about cybersecurity..." |
|
|
onkeypress="handleKeyPress(event)" |
|
|
> |
|
|
<button class="send-button" onclick="sendMessage()" id="sendButton">Send</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let sessionId = null; |
|
|
let isProcessing = false; |
|
|
|
|
|
function handleKeyPress(event) { |
|
|
if (event.key === 'Enter' && !isProcessing) { |
|
|
sendMessage(); |
|
|
} |
|
|
} |
|
|
|
|
|
function sendQuickPrompt(prompt) { |
|
|
document.getElementById('messageInput').value = prompt; |
|
|
sendMessage(); |
|
|
} |
|
|
|
|
|
function addMessage(content, isUser = false) { |
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message ${isUser ? 'user-message' : 'assistant-message'}`; |
|
|
messageDiv.textContent = content; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
return messageDiv; |
|
|
} |
|
|
|
|
|
function showTyping() { |
|
|
document.getElementById('typingIndicator').style.display = 'block'; |
|
|
} |
|
|
|
|
|
function hideTyping() { |
|
|
document.getElementById('typingIndicator').style.display = 'none'; |
|
|
} |
|
|
|
|
|
async function sendMessage() { |
|
|
const input = document.getElementById('messageInput'); |
|
|
const sendButton = document.getElementById('sendButton'); |
|
|
const message = input.value.trim(); |
|
|
|
|
|
if (!message || isProcessing) return; |
|
|
|
|
|
isProcessing = true; |
|
|
sendButton.disabled = true; |
|
|
|
|
|
|
|
|
addMessage(message, true); |
|
|
input.value = ''; |
|
|
|
|
|
|
|
|
showTyping(); |
|
|
|
|
|
try { |
|
|
|
|
|
const response = await fetch('/chat/stream', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
message: message, |
|
|
session_id: sessionId |
|
|
}) |
|
|
}); |
|
|
|
|
|
const reader = response.body.getReader(); |
|
|
const decoder = new TextDecoder(); |
|
|
let assistantMessage = null; |
|
|
let fullResponse = ''; |
|
|
|
|
|
while (true) { |
|
|
const { done, value } = await reader.read(); |
|
|
if (done) break; |
|
|
|
|
|
const text = decoder.decode(value); |
|
|
const lines = text.split('\n'); |
|
|
|
|
|
for (const line of lines) { |
|
|
if (line.startsWith('data: ')) { |
|
|
try { |
|
|
const data = JSON.parse(line.slice(6)); |
|
|
|
|
|
if (data.type === 'start') { |
|
|
sessionId = data.session_id; |
|
|
if (data.interaction_count) { |
|
|
document.getElementById('interactionCount').textContent = data.interaction_count; |
|
|
} |
|
|
hideTyping(); |
|
|
assistantMessage = addMessage('', false); |
|
|
} else if (data.type === 'token' && assistantMessage) { |
|
|
fullResponse += data.content; |
|
|
assistantMessage.textContent = fullResponse; |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
} catch (e) { |
|
|
console.error('Parse error:', e); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
hideTyping(); |
|
|
addMessage('Sorry, I encountered an error. Please try again.', false); |
|
|
} finally { |
|
|
hideTyping(); |
|
|
isProcessing = false; |
|
|
sendButton.disabled = false; |
|
|
input.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.onload = () => { |
|
|
document.getElementById('messageInput').focus(); |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
