190 lines
6.4 KiB
HTML
190 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat Demo</title>
|
|
<style>
|
|
.chat-container {
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
}
|
|
.message {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.user-message {
|
|
background-color: #e3f2fd;
|
|
margin-left: 20%;
|
|
}
|
|
.bot-message {
|
|
background-color: #f5f5f5;
|
|
margin-right: 20%;
|
|
}
|
|
.input-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
#userInput {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #2196f3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: #1976d2;
|
|
}
|
|
.audio-player {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-container">
|
|
<div id="chatMessages"></div>
|
|
<div class="input-container">
|
|
<input type="text" id="userInput" placeholder="Type your message...">
|
|
<button onclick="sendMessage()">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentConversationId = '';
|
|
let currentTaskId = '';
|
|
|
|
async function sendMessage() {
|
|
const userInput = document.getElementById('userInput');
|
|
const message = userInput.value.trim();
|
|
if (!message) return;
|
|
|
|
// Add user message to chat
|
|
addMessageToChat('user', message);
|
|
userInput.value = '';
|
|
|
|
try {
|
|
const response = await fetch('http://127.0.0.1:8080/chat', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
query: message,
|
|
response_mode: 'streaming',
|
|
user: 'SYS002',
|
|
conversation_id: currentConversationId
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const reader = response.body.getReader();
|
|
// console.log("reader: ", reader);
|
|
const decoder = new TextDecoder();
|
|
let botMessage = '';
|
|
|
|
while (true) {
|
|
const { value, done } = await reader.read();
|
|
if (done) break;
|
|
|
|
const chunk = decoder.decode(value);
|
|
const lines = chunk.split('\n');
|
|
|
|
for (const line of lines) {
|
|
console.log("line: ", line);
|
|
if (line.startsWith('data:')) {
|
|
try {
|
|
let jsonStr = JSON.parse(line.slice(5).trim());
|
|
console.log("jsonStr: ", jsonStr);
|
|
// if (data.conversation_id) {
|
|
// currentConversationId = data.conversation_id;
|
|
// }
|
|
// if (data.task_id) {
|
|
// currentTaskId = data.task_id;
|
|
// }
|
|
|
|
// if (data.answer) {
|
|
// botMessage += data.answer;
|
|
// updateBotMessage(botMessage);
|
|
// }
|
|
|
|
// if (data.audio_data) {
|
|
// playAudio(data.audio_data);
|
|
// }
|
|
|
|
// if (data.isEnd) {
|
|
// console.log('Stream ended');
|
|
// }
|
|
} catch (e) {
|
|
console.error('Error parsing message:', e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
addMessageToChat('bot', 'Sorry, an error occurred.');
|
|
}
|
|
}
|
|
|
|
function addMessageToChat(role, content) {
|
|
const chatMessages = document.getElementById('chatMessages');
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${role}-message`;
|
|
messageDiv.textContent = content;
|
|
chatMessages.appendChild(messageDiv);
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
|
|
function updateBotMessage(content) {
|
|
const messages = document.getElementsByClassName('bot-message');
|
|
if (messages.length > 0) {
|
|
messages[messages.length - 1].textContent = content;
|
|
} else {
|
|
addMessageToChat('bot', content);
|
|
}
|
|
}
|
|
|
|
function playAudio(audioData) {
|
|
// If audio data is a URL
|
|
if (audioData.startsWith('http')) {
|
|
const audio = new Audio(audioData);
|
|
audio.play();
|
|
}
|
|
// If audio data is hex encoded
|
|
else {
|
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
const audioDataArray = new Uint8Array(audioData.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
|
|
|
|
audioContext.decodeAudioData(audioDataArray.buffer, (buffer) => {
|
|
const source = audioContext.createBufferSource();
|
|
source.buffer = buffer;
|
|
source.connect(audioContext.destination);
|
|
source.start(0);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Handle Enter key
|
|
document.getElementById('userInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |