Spaces:
Runtime error
Runtime error
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chatbot</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container mt-4"> | |
| <ul class="nav nav-tabs" id="myTab" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button" role="tab">💬 Chat</button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="config-tab" data-bs-toggle="tab" data-bs-target="#config" type="button" role="tab">⚙️ Configuración</button> | |
| </li> | |
| {% if config.NGROK_URL %} | |
| <li class="nav-item ms-auto d-flex align-items-center"> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" value="{{ config.NGROK_URL }}" id="ngrokUrl" readonly> | |
| <button class="btn btn-primary" onclick="shareUrl()">🔗 Copiar URL</button> | |
| </div> | |
| </li> | |
| {% endif %} | |
| </ul> | |
| <div class="tab-content" id="myTabContent"> | |
| <!-- Tab de Chat --> | |
| <div class="tab-pane fade show active" id="chat" role="tabpanel"> | |
| <div class="chat-container"> | |
| <div class="chat-main"> | |
| <div class="control-panel"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <label for="modoSelect" class="form-label">📋 Modo:</label> | |
| <select id="modoSelect" class="form-select"> | |
| <option value="soporte" selected>🔧 Soporte Técnico</option> | |
| <option value="seguros">🛡️ Seguros</option> | |
| <option value="creditos">💰 Créditos</option> | |
| <option value="cobranza">💵 Cobranza</option> | |
| <option value="encuestas">📊 Encuestas</option> | |
| </select> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="modeloSelect" class="form-label">🤖 Modelo:</label> | |
| <select id="modeloSelect" class="form-select"> | |
| <option value="gemini" selected>🧠 Gemini</option> | |
| <option value="mixtral">⚡Mixtral</option> | |
| </select> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="vozSelect" class="form-label">🎤 Voz:</label> | |
| <select id="vozSelect" class="form-select"> | |
| <option value="EDGE" selected>🗣️ Jorge (MX)</option> | |
| <option value="EDGE_ES">👨 Álvaro (ES)</option> | |
| <option value="VITS">🎙️ VITS (ES)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="chatBox"></div> | |
| <div class="input-group"> | |
| <input type="text" id="textInput" class="form-control" placeholder="Escribe tu mensaje..."> | |
| <button id="sendText" class="btn btn-primary"> | |
| <i class="fas fa-paper-plane"></i> Enviar | |
| </button> | |
| <button id="startRecording" class="btn btn-primary recording-button"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <div class="status-label" id="statusLabel">Iniciando...</div> | |
| </div> | |
| <div class="voice-commands"> | |
| <h5>🎤 Comandos de Voz</h5> | |
| <div class="command-group"> | |
| <span class="command-pill stop">⏹️ Alto</span> | |
| <span class="command-pill stop">⏹️ Detente</span> | |
| <span class="command-pill stop">⏹️ Silencio</span> | |
| <span class="command-pill stop">⏹️ Calla</span> | |
| </div> | |
| <div class="command-group"> | |
| <span class="command-pill greet">👋 Hola</span> | |
| <span class="command-pill greet">👋 Buenos días</span> | |
| <span class="command-pill greet">👋 Buenas tardes</span> | |
| </div> | |
| <div class="command-group"> | |
| <span class="command-pill interest">✨ Me interesa</span> | |
| <span class="command-pill interest">✨ Dime más</span> | |
| <span class="command-pill interest">✨ Acepto</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab de Configuración --> | |
| <div class="tab-pane fade" id="config" role="tabpanel"> | |
| <div class="config-container mt-4"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h5 class="mb-0">Configuración de APIs</h5> | |
| </div> | |
| <div class="card-body"> | |
| <form id="apiConfigForm"> | |
| <div class="mb-3"> | |
| <label for="openaiKey" class="form-label">OpenAI API Key</label> | |
| <input type="password" class="form-control" id="openaiKey" placeholder="Ingresa tu API key de OpenAI"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="huggingfaceKey" class="form-label">Hugging Face API Key</label> | |
| <input type="password" class="form-control" id="huggingfaceKey" placeholder="Ingresa tu API key de Hugging Face"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="elevenLabsKey" class="form-label">ElevenLabs API Key</label> | |
| <input type="password" class="form-control" id="elevenLabsKey" placeholder="Ingresa tu API key de ElevenLabs"> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Guardar configuración</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/config.js') }}"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| setTimeout(() => { | |
| const startRecordingBtn = document.getElementById('startRecording'); | |
| if (startRecordingBtn) { | |
| startRecordingBtn.click(); | |
| } | |
| }, 2000); | |
| }); | |
| function shareUrl() { | |
| const url = document.getElementById('ngrokUrl').value; | |
| navigator.clipboard.writeText(url).then(() => { | |
| const btn = document.querySelector('button[onclick="shareUrl()"]'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '✅ ¡Copiado!'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| }, 2000); | |
| }).catch(err => { | |
| alert("URL del túnel: " + url); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |