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"> | |
| <style> | |
| body { | |
| background-color: #f5f5f5; | |
| font-family: Arial, sans-serif; | |
| } | |
| .chat-container { | |
| max-width: 800px; | |
| margin: 20px auto; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| #chatBox { | |
| height: 400px; | |
| overflow-y: auto; | |
| padding: 20px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| background-color: #f8f9fa; | |
| } | |
| .message { | |
| margin: 10px 0; | |
| padding: 12px; | |
| border-radius: 10px; | |
| max-width: 80%; | |
| position: relative; | |
| animation: fadeIn 0.3s ease-in; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .message-icon { | |
| margin-right: 8px; | |
| font-size: 1.2em; | |
| } | |
| .message-text { | |
| word-wrap: break-word; | |
| flex: 1; | |
| } | |
| .user-message { | |
| background-color: #007bff; | |
| color: white; | |
| margin-left: auto; | |
| flex-direction: row-reverse; | |
| } | |
| .user-message .message-icon { | |
| margin-right: 0; | |
| margin-left: 8px; | |
| } | |
| .bot-message { | |
| background-color: #e9ecef; | |
| color: black; | |
| margin-right: auto; | |
| } | |
| .control-panel { | |
| background-color: #f8f9fa; | |
| padding: 15px; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| border: 1px solid #dee2e6; | |
| } | |
| .status-label { | |
| font-size: 1em; | |
| color: #333; | |
| margin-top: 15px; | |
| text-align: center; | |
| font-style: italic; | |
| padding: 10px; | |
| background-color: #f8f9fa; | |
| border-radius: 5px; | |
| border: 1px solid #dee2e6; | |
| display: block; | |
| } | |
| .recording-button { | |
| transition: all 0.3s ease; | |
| width: 50px; | |
| height: 38px; | |
| padding: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2em; | |
| } | |
| .recording-button.active { | |
| background-color: #dc3545 ; | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .input-group { | |
| margin: 5px 15px; | |
| } | |
| #textInput { | |
| border-radius: 5px 0 0 5px; | |
| border: 1px solid #ced4da; | |
| padding: 8px 12px; | |
| } | |
| #sendText { | |
| border-radius: 0; | |
| margin-right: -1px; | |
| } | |
| #startRecording { | |
| border-radius: 0 5px 5px 0; | |
| } | |
| .form-select { | |
| cursor: pointer; | |
| } | |
| .form-label { | |
| font-weight: 500; | |
| margin-bottom: 5px; | |
| } | |
| #ngrokUrl { | |
| font-size: 0.9em; | |
| background-color: #f8f9fa; | |
| border-color: #dee2e6; | |
| min-width: 250px; | |
| } | |
| </style> | |
| </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> | |
| {% 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="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="seguros">🛡️ Seguros</option> | |
| <option value="credito">💰 Créditos</option> | |
| <option value="cobranza">💵 Cobranza</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">🧠 Gemini 8b</option> | |
| <option value="mixtral">⚡Mixtral 7b</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">📢 Edge</option> | |
| <option value="VITS">🔊 VITS</option> | |
| <option value="gTTS">🌐 gTTS</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">Enviar</button> | |
| <button id="startRecording" class="btn btn-success recording-button">🎤</button> | |
| </div> | |
| <div class="status-label" id="statusLabel">Iniciando...</div> | |
| </div> | |
| </div> | |
| <!-- Tab de Configuración --> | |
| <div class="tab-pane fade" id="config" role="tabpanel"> | |
| <div class="chat-container"> | |
| <form id="configForm"> | |
| <div class="mb-3"> | |
| <label for="googleApiKey" class="form-label">Google API Key:</label> | |
| <input type="password" class="form-control" id="googleApiKey" value="{{ config.get('GOOGLE_API_KEY', '') }}"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="huggingfaceToken" class="form-label">HuggingFace Token:</label> | |
| <input type="password" class="form-control" id="huggingfaceToken" value="{{ config.get('HUGGINGFACE_TOKEN', '') }}"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="openaiApiKey" class="form-label">OpenAI API Key:</label> | |
| <input type="password" class="form-control" id="openaiApiKey" value="{{ config.get('OPENAI_API_KEY', '') }}"> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Guardar</button> | |
| </form> | |
| </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/main.js') }}"></script> | |
| <script> | |
| 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> | |