105 lines
3.5 KiB
HTML
105 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Chat Test</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
#chat-container { border: 1px solid #ccc; padding: 10px; min-height: 300px; max-height: 400px; overflow-y: auto; }
|
|
.message { margin: 10px 0; padding: 10px; border-radius: 5px; }
|
|
.user { background: #e3f2fd; text-align: right; }
|
|
.ai { background: #f5f5f5; }
|
|
input, button { padding: 10px; margin: 5px; }
|
|
#log { border: 1px solid red; padding: 10px; margin-top: 20px; font-size: 12px; white-space: pre-wrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Simple Chat Test</h1>
|
|
<p>This is a simplified version to test API connectivity</p>
|
|
|
|
<div id="chat-container">
|
|
<div class="message ai">¡Hola! Soy MusiaIA, tu asistente de música con IA. 🎵</div>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="text" id="messageInput" placeholder="Type a message..." />
|
|
<button onclick="sendMessage()">Send</button>
|
|
</div>
|
|
|
|
<div id="log"></div>
|
|
|
|
<script>
|
|
let chatHistory = [];
|
|
|
|
function log(message) {
|
|
console.log(message);
|
|
document.getElementById('log').textContent += message + '\n';
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const input = document.getElementById('messageInput');
|
|
const message = input.value.trim();
|
|
if (!message) return;
|
|
|
|
log('Sending: ' + message);
|
|
|
|
// Add user message to chat
|
|
addMessage(message, 'user');
|
|
chatHistory.push({ role: 'user', content: message });
|
|
input.value = '';
|
|
|
|
try {
|
|
log('Calling API...');
|
|
const response = await fetch('http://localhost:8000/api/chat', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: 'default-user',
|
|
message: message,
|
|
}),
|
|
});
|
|
|
|
log('Response status: ' + response.status);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
log('Response received: ' + JSON.stringify(data).substring(0, 200) + '...');
|
|
|
|
// Add AI response to chat
|
|
addMessage(data.response, 'ai');
|
|
chatHistory.push({ role: 'assistant', content: data.response });
|
|
|
|
} catch (error) {
|
|
log('ERROR: ' + error.message);
|
|
log('Stack: ' + error.stack);
|
|
addMessage('Error: ' + error.message, 'ai');
|
|
}
|
|
}
|
|
|
|
function addMessage(content, sender) {
|
|
const container = document.getElementById('chat-container');
|
|
const div = document.createElement('div');
|
|
div.className = 'message ' + sender;
|
|
div.textContent = content;
|
|
container.appendChild(div);
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
|
|
// Send message on Enter key
|
|
document.getElementById('messageInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
log('Simple Chat Test initialized');
|
|
</script>
|
|
</body>
|
|
</html>
|