| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Qwen 2.5 • Intelecto Conciso</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg: #090d16; |
| --card-bg: rgba(16, 23, 42, 0.75); |
| --border: rgba(255, 255, 255, 0.08); |
| --border-focus: rgba(99, 102, 241, 0.5); |
| --accent: #6366f1; |
| --accent-glow: rgba(99, 102, 241, 0.25); |
| --text: #f8fafc; |
| --text-muted: #94a3b8; |
| --user-msg: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); |
| --bot-msg: rgba(30, 41, 59, 0.7); |
| --optimal: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| --purple: #a855f7; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'Outfit', sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 1rem; |
| background-image: |
| radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.12) 0%, transparent 40%), |
| radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.08) 0%, transparent 40%); |
| } |
| |
| .app-container { |
| width: 100%; |
| max-width: 860px; |
| height: 90vh; |
| background: var(--card-bg); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid var(--border); |
| border-radius: 24px; |
| display: flex; |
| flex-direction: column; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); |
| overflow: hidden; |
| } |
| |
| |
| header { |
| padding: 1.1rem 1.5rem; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 1rem; |
| background: rgba(15, 23, 42, 0.5); |
| } |
| |
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| } |
| |
| .avatar-icon { |
| width: 42px; |
| height: 42px; |
| border-radius: 12px; |
| background: linear-gradient(135deg, #10b981, #6366f1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| font-size: 1.2rem; |
| box-shadow: 0 0 20px rgba(16, 185, 129, 0.25); |
| } |
| |
| .brand-info h1 { |
| font-size: 1.05rem; |
| font-weight: 600; |
| letter-spacing: -0.02em; |
| } |
| |
| .brand-info p { |
| font-size: 0.78rem; |
| color: var(--text-muted); |
| } |
| |
| .header-actions { |
| display: flex; |
| align-items: center; |
| gap: 0.6rem; |
| } |
| |
| .btn-reset { |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid var(--border); |
| color: var(--text-muted); |
| padding: 0.45rem 0.85rem; |
| border-radius: 10px; |
| font-size: 0.78rem; |
| font-weight: 500; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.4rem; |
| transition: all 0.2s ease; |
| font-family: inherit; |
| } |
| |
| .btn-reset:hover { |
| background: rgba(239, 68, 68, 0.15); |
| border-color: rgba(239, 68, 68, 0.4); |
| color: #fca5a5; |
| } |
| |
| .badge-status { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.4rem; |
| padding: 0.35rem 0.75rem; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| background: rgba(16, 185, 129, 0.12); |
| color: var(--optimal); |
| border: 1px solid rgba(16, 185, 129, 0.25); |
| } |
| |
| .dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: currentColor; |
| box-shadow: 0 0 8px currentColor; |
| } |
| |
| |
| .telemetry-bar { |
| padding: 0.65rem 1.5rem; |
| background: rgba(10, 15, 30, 0.8); |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .telemetry-item { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .progress-bar-container { |
| width: 140px; |
| height: 6px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| overflow: hidden; |
| display: inline-block; |
| vertical-align: middle; |
| } |
| |
| .progress-bar-fill { |
| height: 100%; |
| width: 2%; |
| background: var(--optimal); |
| border-radius: 10px; |
| transition: width 0.4s ease, background-color 0.4s ease; |
| } |
| |
| .health-pill { |
| padding: 0.15rem 0.5rem; |
| border-radius: 6px; |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| } |
| |
| .health-pill.optimo { |
| background: rgba(16, 185, 129, 0.15); |
| color: #34d399; |
| } |
| |
| .health-pill.alerta { |
| background: rgba(245, 158, 11, 0.2); |
| color: #fbbf24; |
| } |
| |
| .health-pill.poda_aplicada { |
| background: rgba(168, 85, 247, 0.2); |
| color: #c084fc; |
| } |
| |
| |
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1.5rem; |
| display: flex; |
| flex-direction: column; |
| gap: 1.1rem; |
| scroll-behavior: smooth; |
| } |
| |
| .chat-messages::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .chat-messages::-webkit-scrollbar-thumb { |
| background: rgba(255, 255, 255, 0.12); |
| border-radius: 10px; |
| } |
| |
| .message { |
| display: flex; |
| gap: 0.75rem; |
| max-width: 82%; |
| animation: fadeIn 0.25s ease-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(6px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .message.user { |
| align-self: flex-end; |
| flex-direction: row-reverse; |
| } |
| |
| .message.bot { |
| align-self: flex-start; |
| } |
| |
| .msg-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.85rem; |
| font-weight: 700; |
| flex-shrink: 0; |
| } |
| |
| .message.user .msg-avatar { |
| background: rgba(255, 255, 255, 0.1); |
| color: #e2e8f0; |
| } |
| |
| .message.bot .msg-avatar { |
| background: linear-gradient(135deg, #10b981, #6366f1); |
| color: white; |
| } |
| |
| .msg-content { |
| padding: 0.85rem 1.15rem; |
| border-radius: 18px; |
| font-size: 0.93rem; |
| line-height: 1.5; |
| word-break: break-word; |
| } |
| |
| .message.user .msg-content { |
| background: var(--user-msg); |
| color: white; |
| border-bottom-right-radius: 4px; |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2); |
| } |
| |
| .message.bot .msg-content { |
| background: var(--bot-msg); |
| color: var(--text); |
| border: 1px solid var(--border); |
| border-bottom-left-radius: 4px; |
| } |
| |
| |
| .typing-indicator { |
| display: none; |
| align-self: flex-start; |
| gap: 0.4rem; |
| padding: 0.75rem 1.1rem; |
| background: var(--bot-msg); |
| border: 1px solid var(--border); |
| border-radius: 18px; |
| border-bottom-left-radius: 4px; |
| align-items: center; |
| } |
| |
| .typing-dot { |
| width: 7px; |
| height: 7px; |
| background: #10b981; |
| border-radius: 50%; |
| animation: pulse 1.4s infinite ease-in-out both; |
| } |
| |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } |
| |
| @keyframes pulse { |
| 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } |
| 40% { transform: scale(1.1); opacity: 1; } |
| } |
| |
| |
| .input-container { |
| padding: 1.1rem 1.5rem; |
| border-top: 1px solid var(--border); |
| background: rgba(15, 23, 42, 0.5); |
| } |
| |
| .input-box { |
| display: flex; |
| align-items: center; |
| gap: 0.6rem; |
| background: rgba(10, 15, 30, 0.9); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 0.4rem 0.5rem 0.4rem 1.1rem; |
| transition: all 0.2s ease; |
| } |
| |
| .input-box:focus-within { |
| border-color: var(--border-focus); |
| box-shadow: 0 0 20px var(--accent-glow); |
| } |
| |
| .input-box input { |
| flex: 1; |
| background: transparent; |
| border: none; |
| color: var(--text); |
| font-size: 0.95rem; |
| font-family: inherit; |
| outline: none; |
| } |
| |
| .input-box input::placeholder { |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| } |
| |
| .btn-send { |
| background: #10b981; |
| color: white; |
| border: none; |
| width: 38px; |
| height: 38px; |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| flex-shrink: 0; |
| } |
| |
| .btn-send:hover:not(:disabled) { |
| background: #059669; |
| transform: scale(1.04); |
| } |
| |
| .btn-send:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
| |
| .footer-note { |
| text-align: center; |
| font-size: 0.72rem; |
| color: var(--text-muted); |
| margin-top: 0.45rem; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="app-container"> |
| |
| <header> |
| <div class="brand"> |
| <div class="avatar-icon">⚡</div> |
| <div class="brand-info"> |
| <h1>Qwen 2.5 • Intelecto Conciso</h1> |
| <p>Qwen2.5-0.5B-Instruct • Render Free (512 MB)</p> |
| </div> |
| </div> |
| <div class="header-actions"> |
| <button class="btn-reset" id="resetBtn" title="Vaciar memoria y reiniciar contexto"> |
| 🔄 Reiniciar Contexto |
| </button> |
| <div class="badge-status" id="modelStatus"> |
| <span class="dot"></span> |
| <span>Online</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="telemetry-bar"> |
| <div class="telemetry-item"> |
| <span>Ventana de Contexto:</span> |
| <div class="progress-bar-container"> |
| <div class="progress-bar-fill" id="contextFill"></div> |
| </div> |
| <span id="tokenCounter">0 / 2048 tokens (0%)</span> |
| </div> |
| <div class="telemetry-item"> |
| <span>Salud:</span> |
| <span class="health-pill optimo" id="healthPill">ÓPTIMO</span> |
| </div> |
| </div> |
|
|
| |
| <div class="chat-messages" id="chatMessages"> |
| <div class="message bot"> |
| <div class="msg-avatar">⚡</div> |
| <div class="msg-content"> |
| Hola. Soy un intelecto sintético conciso y preciso en español. ¿Qué deseas saber? |
| </div> |
| </div> |
| <div class="typing-indicator" id="typingIndicator"> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="input-container"> |
| <form class="input-box" id="chatForm"> |
| <input |
| type="text" |
| id="userInput" |
| placeholder="Escribe tu consulta directa y precisa... (Enter)" |
| autocomplete="off" |
| autofocus |
| /> |
| <button type="submit" class="btn-send" id="sendBtn" title="Enviar"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> |
| <line x1="22" y1="2" x2="11" y2="13"></line> |
| <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> |
| </svg> |
| </button> |
| </form> |
| <div class="footer-note"> |
| Modo ultra-conciso en español activo (Qwen2.5-0.5B-Instruct, telemetría y poda adaptativa de contexto). |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const chatMessages = document.getElementById('chatMessages'); |
| const chatForm = document.getElementById('chatForm'); |
| const userInput = document.getElementById('userInput'); |
| const sendBtn = document.getElementById('sendBtn'); |
| const typingIndicator = document.getElementById('typingIndicator'); |
| const resetBtn = document.getElementById('resetBtn'); |
| const contextFill = document.getElementById('contextFill'); |
| const tokenCounter = document.getElementById('tokenCounter'); |
| const healthPill = document.getElementById('healthPill'); |
| |
| let conversationHistory = []; |
| |
| function scrollToBottom() { |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| function appendMessage(role, text) { |
| const msgDiv = document.createElement('div'); |
| msgDiv.className = `message ${role}`; |
| |
| const avatar = document.createElement('div'); |
| avatar.className = 'msg-avatar'; |
| avatar.textContent = role === 'user' ? '👤' : '⚡'; |
| |
| const content = document.createElement('div'); |
| content.className = 'msg-content'; |
| content.textContent = text; |
| |
| msgDiv.appendChild(avatar); |
| msgDiv.appendChild(content); |
| |
| chatMessages.insertBefore(msgDiv, typingIndicator); |
| scrollToBottom(); |
| } |
| |
| function updateTelemetry(stats) { |
| if (!stats) return; |
| const { prompt_tokens, completion_tokens, total_tokens, max_context, usage_percent, health_status } = stats; |
| |
| tokenCounter.textContent = `${total_tokens} / ${max_context} tokens (${usage_percent.toFixed(1)}%)`; |
| contextFill.style.width = `${Math.min(usage_percent, 100)}%`; |
| |
| healthPill.className = `health-pill ${health_status}`; |
| if (health_status === 'optimo') { |
| healthPill.textContent = 'ÓPTIMO'; |
| contextFill.style.backgroundColor = 'var(--optimal)'; |
| } else if (health_status === 'alerta') { |
| healthPill.textContent = 'ALERTA (Contexto Alto)'; |
| contextFill.style.backgroundColor = 'var(--warning)'; |
| } else if (health_status === 'poda_aplicada') { |
| healthPill.textContent = 'PODA AUTOMÁTICA'; |
| contextFill.style.backgroundColor = 'var(--purple)'; |
| } |
| } |
| |
| async function sendMessage(text) { |
| if (!text.trim()) return; |
| |
| appendMessage('user', text); |
| userInput.value = ''; |
| userInput.disabled = true; |
| sendBtn.disabled = true; |
| typingIndicator.style.display = 'flex'; |
| scrollToBottom(); |
| |
| try { |
| const response = await fetch('/chat', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| message: text, |
| history: conversationHistory, |
| temperature: 0.3, |
| max_tokens: 80 |
| }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`Error en servidor: ${response.status}`); |
| } |
| |
| const data = await response.json(); |
| appendMessage('bot', data.reply || 'Sin respuesta.'); |
| |
| if (data.updated_history) { |
| conversationHistory = data.updated_history; |
| } else { |
| conversationHistory.push({ role: 'user', content: text }); |
| conversationHistory.push({ role: 'assistant', content: data.reply }); |
| } |
| |
| if (data.context_telemetry) { |
| updateTelemetry(data.context_telemetry); |
| } |
| |
| } catch (err) { |
| console.error(err); |
| appendMessage('bot', '⚠️ Error de conexión: ' + err.message); |
| } finally { |
| typingIndicator.style.display = 'none'; |
| userInput.disabled = false; |
| sendBtn.disabled = false; |
| userInput.focus(); |
| scrollToBottom(); |
| } |
| } |
| |
| chatForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const text = userInput.value.trim(); |
| if (text) sendMessage(text); |
| }); |
| |
| resetBtn.addEventListener('click', () => { |
| conversationHistory = []; |
| chatMessages.innerHTML = ''; |
| chatMessages.appendChild(typingIndicator); |
| appendMessage('bot', 'Contexto reiniciado a 0. ¿Qué deseas consultar?'); |
| updateTelemetry({ |
| prompt_tokens: 0, |
| completion_tokens: 0, |
| total_tokens: 0, |
| max_context: 2048, |
| usage_percent: 0, |
| health_status: 'optimo' |
| }); |
| userInput.focus(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
