423 lines
12 KiB
HTML
423 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude API Chat</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 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: 16px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.mode-selector {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.mode-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mode-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.mode-btn.active {
|
|
background: white;
|
|
color: #667eea;
|
|
border-color: white;
|
|
}
|
|
|
|
.api-url-container {
|
|
padding: 15px 20px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.api-url-container label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.api-url-container input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.chat-container {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.message.user {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.message-content {
|
|
max-width: 70%;
|
|
padding: 12px 16px;
|
|
border-radius: 18px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message.user .message-content {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.message.assistant .message-content {
|
|
background: white;
|
|
color: #333;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.message.error .message-content {
|
|
background: #fee;
|
|
color: #c33;
|
|
border: 1px solid #fcc;
|
|
}
|
|
|
|
.input-container {
|
|
padding: 20px;
|
|
background: white;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
#messageInput {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 24px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
#messageInput:focus {
|
|
border-color: #667eea;
|
|
}
|
|
|
|
#sendBtn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 28px;
|
|
border-radius: 24px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
#sendBtn:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
#sendBtn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.typing-indicator {
|
|
display: none;
|
|
padding: 12px 16px;
|
|
background: white;
|
|
border-radius: 18px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
width: fit-content;
|
|
}
|
|
|
|
.typing-indicator.active {
|
|
display: block;
|
|
}
|
|
|
|
.typing-indicator span {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #667eea;
|
|
margin: 0 2px;
|
|
animation: bounce 1.4s infinite;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 60%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
30% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.chat-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.chat-container::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
.chat-container::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.chat-container::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🤖 Claude API Chat</h1>
|
|
<p style="font-size: 14px; opacity: 0.9;">Interfaz de chat con tu API de FastAPI</p>
|
|
<div class="mode-selector">
|
|
<button class="mode-btn active" data-mode="normal">Chat Normal</button>
|
|
<button class="mode-btn" data-mode="docs">Con Documentos</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="api-url-container">
|
|
<label for="apiUrl">URL Base de la API:</label>
|
|
<input type="text" id="apiUrl" value="http://localhost:8000" placeholder="http://localhost:8000">
|
|
</div>
|
|
|
|
<div class="chat-container" id="chatContainer">
|
|
<div class="message assistant">
|
|
<div class="message-content">
|
|
¡Hola! 👋 Estoy listo para ayudarte. Puedes cambiar entre modo normal y modo con documentos usando los botones superiores.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-container">
|
|
<div class="typing-indicator" id="typingIndicator">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="text"
|
|
id="messageInput"
|
|
placeholder="Escribe tu mensaje aquí..."
|
|
autocomplete="off"
|
|
>
|
|
<button id="sendBtn">Enviar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Estado de la aplicación
|
|
let currentMode = 'normal';
|
|
const chatContainer = document.getElementById('chatContainer');
|
|
const messageInput = document.getElementById('messageInput');
|
|
const sendBtn = document.getElementById('sendBtn');
|
|
const apiUrlInput = document.getElementById('apiUrl');
|
|
const typingIndicator = document.getElementById('typingIndicator');
|
|
const modeBtns = document.querySelectorAll('.mode-btn');
|
|
|
|
// Cambiar modo
|
|
modeBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
modeBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
currentMode = btn.dataset.mode;
|
|
|
|
addMessage('assistant', `Modo cambiado a: ${currentMode === 'normal' ? 'Chat Normal' : 'Chat con Documentos'}`);
|
|
});
|
|
});
|
|
|
|
// Agregar mensaje al chat
|
|
function addMessage(type, content) {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${type}`;
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'message-content';
|
|
contentDiv.textContent = content;
|
|
|
|
messageDiv.appendChild(contentDiv);
|
|
chatContainer.appendChild(messageDiv);
|
|
|
|
// Scroll automático
|
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
}
|
|
|
|
// Enviar mensaje
|
|
async function sendMessage() {
|
|
const message = messageInput.value.trim();
|
|
if (!message) return;
|
|
|
|
const apiUrl = apiUrlInput.value.trim();
|
|
if (!apiUrl) {
|
|
addMessage('error', 'Por favor, ingresa la URL de la API');
|
|
return;
|
|
}
|
|
|
|
// Agregar mensaje del usuario
|
|
addMessage('user', message);
|
|
messageInput.value = '';
|
|
|
|
// Deshabilitar input y mostrar indicador
|
|
sendBtn.disabled = true;
|
|
messageInput.disabled = true;
|
|
typingIndicator.classList.add('active');
|
|
|
|
try {
|
|
// Construir la URL del endpoint
|
|
const endpoint = currentMode === 'normal' ? '/ai/' : '/ai/using_docs';
|
|
const url = `${apiUrl}${endpoint}?message=${encodeURIComponent(message)}`;
|
|
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error HTTP: ${response.status}`);
|
|
}
|
|
|
|
// Leer el stream de respuesta
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let fullResponse = '';
|
|
|
|
// Crear mensaje de respuesta
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = 'message assistant';
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'message-content';
|
|
messageDiv.appendChild(contentDiv);
|
|
chatContainer.appendChild(messageDiv);
|
|
|
|
// Ocultar indicador de escritura
|
|
typingIndicator.classList.remove('active');
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
const chunk = decoder.decode(value, { stream: true });
|
|
fullResponse += chunk;
|
|
contentDiv.textContent = fullResponse;
|
|
|
|
// Scroll automático
|
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
typingIndicator.classList.remove('active');
|
|
addMessage('error', `Error al enviar mensaje: ${error.message}`);
|
|
} finally {
|
|
// Rehabilitar input
|
|
sendBtn.disabled = false;
|
|
messageInput.disabled = false;
|
|
messageInput.focus();
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
sendBtn.addEventListener('click', sendMessage);
|
|
|
|
messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// Focus inicial
|
|
messageInput.focus();
|
|
</script>
|
|
</body>
|
|
</html> |