Upload index.html with huggingface_hub

index.html

@@ -5,153 +5,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 !important;
-            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>
+    <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">
@@ -159,6 +14,9 @@
             <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">
@@ -173,72 +31,117 @@
             <!-- 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 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 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 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 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 class="config-container mt-4">
+                    <div class="card">
+                        <div class="card-header">
+                            <h5 class="mb-0">Configuración de APIs</h5>
                         </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 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>
-                        <button type="submit" class="btn btn-primary">Guardar</button>
-                    </form>
+                    </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(() => {