Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chatera Qwen3.5</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: system-ui, -apple-system, sans-serif; | |
| background: #1a1a2e; | |
| color: #eee; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .header { | |
| background: #16213e; | |
| padding: 1rem; | |
| text-align: center; | |
| border-bottom: 2px solid #0f3460; | |
| } | |
| .chat-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 1rem; | |
| border-radius: 12px; | |
| line-height: 1.5; | |
| } | |
| .user { | |
| background: #0f3460; | |
| align-self: flex-end; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .assistant { | |
| background: #16213e; | |
| align-self: flex-start; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .input-area { | |
| background: #16213e; | |
| padding: 1rem; | |
| display: flex; | |
| gap: 0.5rem; | |
| border-top: 2px solid #0f3460; | |
| } | |
| #userInput { | |
| flex: 1; | |
| padding: 1rem; | |
| border: none; | |
| border-radius: 8px; | |
| background: #1a1a2e; | |
| color: #eee; | |
| font-size: 1rem; | |
| } | |
| #userInput:focus { | |
| outline: 2px solid #0f3460; | |
| } | |
| #sendBtn { | |
| padding: 1rem 2rem; | |
| background: #e94560; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| } | |
| #sendBtn:hover { background: #ff6b6b; } | |
| #sendBtn:disabled { background: #666; cursor: not-allowed; } | |
| .typing { color: #888; font-style: italic; font-size: 0.9rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>🤖 Chatera Qwen3.5 4B</h1> | |
| </div> | |
| <div class="chat-container" id="chatContainer"></div> | |
| <div class="input-area"> | |
| <input type="text" id="userInput" placeholder="Escribe tu mensaje..." /> | |
| <button id="sendBtn">Enviar</button> | |
| </div> | |
| <script> | |
| const API_URL = window.location.origin; | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const userInput = document.getElementById('userInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| let conversationHistory = []; | |
| function addMessage(role, content) { | |
| const div = document.createElement('div'); | |
| div.className = `message ${role}`; | |
| div.textContent = content; | |
| chatContainer.appendChild(div); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| async function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (!message) return; | |
| addMessage('user', message); | |
| userInput.value = ''; | |
| sendBtn.disabled = true; | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'message assistant typing'; | |
| typingDiv.textContent = 'Escribiendo...'; | |
| chatContainer.appendChild(typingDiv); | |
| try { | |
| conversationHistory.push({ role: 'user', content: message }); | |
| const response = await fetch(`${API_URL}/v1/chat/completions`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| model: 'qwen3.5-4b', | |
| messages: conversationHistory, | |
| max_tokens: 512, | |
| temperature: 0.7, | |
| stream: false | |
| }) | |
| }); | |
| const data = await response.json(); | |
| const assistantMessage = data.choices[0].message.content; | |
| typingDiv.remove(); | |
| addMessage('assistant', assistantMessage); | |
| conversationHistory.push({ role: 'assistant', content: assistantMessage }); | |
| } catch (error) { | |
| typingDiv.remove(); | |
| addMessage('assistant', 'Error: ' + error.message); | |
| } | |
| sendBtn.disabled = false; | |
| userInput.focus(); | |
| } | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| // Mensaje de bienvenida | |
| addMessage('assistant', '¡Hola! Soy Qwen3.5 4B. ¿En qué puedo ayudarte?'); | |
| </script> | |
| </body> | |
| </html> |