Hugging Face's logo

Spaces:
salomonsky
/
chatbot-web-app
Runtime error

App Files Community
salomonsky commited on
Commit
c1c3e23
·
verified ·
1 Parent(s): 29d7b35

Upload folder using huggingface_hub

Browse files
Files changed (2) hide show
  1. chat.html +19 -0
  2. index.html +257 -0
chat.html ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chatbot</title>
7
+ <link rel="stylesheet" href="/static/css/styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="chat-container">
11
+ <div id="chat-messages" class="chat-messages"></div>
12
+ <div class="chat-input">
13
+ <input type="text" id="user-input" placeholder="Escribe tu mensaje...">
14
+ <button id="send-button">Enviar</button>
15
+ </div>
16
+ </div>
17
+ <script src="/static/js/chat.js"></script>
18
+ </body>
19
+ </html>
index.html ADDED
@@ -0,0 +1,257 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chatbot</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background-color: #f5f5f5;
11
+ font-family: Arial, sans-serif;
12
+ }
13
+
14
+ .chat-container {
15
+ max-width: 800px;
16
+ margin: 20px auto;
17
+ padding: 20px;
18
+ background-color: white;
19
+ border-radius: 10px;
20
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
21
+ }
22
+
23
+ #chatBox {
24
+ height: 400px;
25
+ overflow-y: auto;
26
+ padding: 20px;
27
+ border: 1px solid #ddd;
28
+ border-radius: 5px;
29
+ margin-bottom: 20px;
30
+ background-color: #f8f9fa;
31
+ }
32
+
33
+ .message {
34
+ margin: 10px 0;
35
+ padding: 12px;
36
+ border-radius: 10px;
37
+ max-width: 80%;
38
+ position: relative;
39
+ animation: fadeIn 0.3s ease-in;
40
+ display: flex;
41
+ align-items: flex-start;
42
+ }
43
+
44
+ .message-icon {
45
+ margin-right: 8px;
46
+ font-size: 1.2em;
47
+ }
48
+
49
+ .message-text {
50
+ word-wrap: break-word;
51
+ flex: 1;
52
+ }
53
+
54
+ .user-message {
55
+ background-color: #007bff;
56
+ color: white;
57
+ margin-left: auto;
58
+ flex-direction: row-reverse;
59
+ }
60
+
61
+ .user-message .message-icon {
62
+ margin-right: 0;
63
+ margin-left: 8px;
64
+ }
65
+
66
+ .bot-message {
67
+ background-color: #e9ecef;
68
+ color: black;
69
+ margin-right: auto;
70
+ }
71
+
72
+ .control-panel {
73
+ background-color: #f8f9fa;
74
+ padding: 15px;
75
+ border-radius: 5px;
76
+ margin-bottom: 20px;
77
+ border: 1px solid #dee2e6;
78
+ }
79
+
80
+ .status-label {
81
+ font-size: 1em;
82
+ color: #333;
83
+ margin-top: 15px;
84
+ text-align: center;
85
+ font-style: italic;
86
+ padding: 10px;
87
+ background-color: #f8f9fa;
88
+ border-radius: 5px;
89
+ border: 1px solid #dee2e6;
90
+ display: block;
91
+ }
92
+
93
+ .recording-button {
94
+ transition: all 0.3s ease;
95
+ width: 50px;
96
+ height: 38px;
97
+ padding: 0;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ font-size: 1.2em;
102
+ }
103
+
104
+ .recording-button.active {
105
+ background-color: #dc3545 !important;
106
+ animation: pulse 1.5s infinite;
107
+ }
108
+
109
+ @keyframes pulse {
110
+ 0% { transform: scale(1); }
111
+ 50% { transform: scale(1.05); }
112
+ 100% { transform: scale(1); }
113
+ }
114
+
115
+ @keyframes fadeIn {
116
+ from { opacity: 0; transform: translateY(10px); }
117
+ to { opacity: 1; transform: translateY(0); }
118
+ }
119
+
120
+ .input-group {
121
+ margin: 5px 15px;
122
+ }
123
+
124
+ #textInput {
125
+ border-radius: 5px 0 0 5px;
126
+ border: 1px solid #ced4da;
127
+ padding: 8px 12px;
128
+ }
129
+
130
+ #sendText {
131
+ border-radius: 0;
132
+ margin-right: -1px;
133
+ }
134
+
135
+ #startRecording {
136
+ border-radius: 0 5px 5px 0;
137
+ }
138
+
139
+ .form-select {
140
+ cursor: pointer;
141
+ }
142
+
143
+ .form-label {
144
+ font-weight: 500;
145
+ margin-bottom: 5px;
146
+ }
147
+
148
+ #ngrokUrl {
149
+ font-size: 0.9em;
150
+ background-color: #f8f9fa;
151
+ border-color: #dee2e6;
152
+ min-width: 250px;
153
+ }
154
+ </style>
155
+ </head>
156
+ <body>
157
+ <div class="container mt-4">
158
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
159
+ <li class="nav-item" role="presentation">
160
+ <button class="nav-link active" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button" role="tab">💬 Chat</button>
161
+ </li>
162
+ {% if config.NGROK_URL %}
163
+ <li class="nav-item ms-auto d-flex align-items-center">
164
+ <div class="input-group">
165
+ <input type="text" class="form-control" value="{{ config.NGROK_URL }}" id="ngrokUrl" readonly>
166
+ <button class="btn btn-primary" onclick="shareUrl()">🔗 Copiar URL</button>
167
+ </div>
168
+ </li>
169
+ {% endif %}
170
+ </ul>
171
+
172
+ <div class="tab-content" id="myTabContent">
173
+ <!-- Tab de Chat -->
174
+ <div class="tab-pane fade show active" id="chat" role="tabpanel">
175
+ <div class="chat-container">
176
+ <div class="control-panel">
177
+ <div class="row">
178
+ <div class="col-md-4">
179
+ <label for="modoSelect" class="form-label">📋 Modo:</label>
180
+ <select id="modoSelect" class="form-select">
181
+ <option value="seguros">🛡️ Seguros</option>
182
+ <option value="credito">💰 Créditos</option>
183
+ <option value="cobranza">💵 Cobranza</option>
184
+ </select>
185
+ </div>
186
+ <div class="col-md-4">
187
+ <label for="modeloSelect" class="form-label">🤖 Modelo:</label>
188
+ <select id="modeloSelect" class="form-select">
189
+ <option value="gemini">🧠 Gemini 8b</option>
190
+ <option value="mixtral">⚡Mixtral 7b</option>
191
+ </select>
192
+ </div>
193
+ <div class="col-md-4">
194
+ <label for="vozSelect" class="form-label">🎤 Voz:</label>
195
+ <select id="vozSelect" class="form-select">
196
+ <option value="EDGE">📢 Edge</option>
197
+ <option value="VITS">🔊 VITS</option>
198
+ <option value="gTTS">🌐 gTTS</option>
199
+ </select>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div id="chatBox"></div>
205
+
206
+ <div class="input-group">
207
+ <input type="text" id="textInput" class="form-control" placeholder="Escribe tu mensaje...">
208
+ <button id="sendText" class="btn btn-primary">Enviar</button>
209
+ <button id="startRecording" class="btn btn-success recording-button">🎤</button>
210
+ </div>
211
+
212
+ <div class="status-label" id="statusLabel">Iniciando...</div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Tab de Configuración -->
217
+ <div class="tab-pane fade" id="config" role="tabpanel">
218
+ <div class="chat-container">
219
+ <form id="configForm">
220
+ <div class="mb-3">
221
+ <label for="googleApiKey" class="form-label">Google API Key:</label>
222
+ <input type="password" class="form-control" id="googleApiKey" value="{{ config.get('GOOGLE_API_KEY', '') }}">
223
+ </div>
224
+ <div class="mb-3">
225
+ <label for="huggingfaceToken" class="form-label">HuggingFace Token:</label>
226
+ <input type="password" class="form-control" id="huggingfaceToken" value="{{ config.get('HUGGINGFACE_TOKEN', '') }}">
227
+ </div>
228
+ <div class="mb-3">
229
+ <label for="openaiApiKey" class="form-label">OpenAI API Key:</label>
230
+ <input type="password" class="form-control" id="openaiApiKey" value="{{ config.get('OPENAI_API_KEY', '') }}">
231
+ </div>
232
+ <button type="submit" class="btn btn-primary">Guardar</button>
233
+ </form>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
240
+ <script src="{{ url_for('static', filename='js/main.js') }}"></script>
241
+ <script>
242
+ function shareUrl() {
243
+ const url = document.getElementById('ngrokUrl').value;
244
+ navigator.clipboard.writeText(url).then(() => {
245
+ const btn = document.querySelector('button[onclick="shareUrl()"]');
246
+ const originalText = btn.innerHTML;
247
+ btn.innerHTML = '✅ ¡Copiado!';
248
+ setTimeout(() => {
249
+ btn.innerHTML = originalText;
250
+ }, 2000);
251
+ }).catch(err => {
252
+ alert("URL del túnel: " + url);
253
+ });
254
+ }
255
+ </script>
256
+ </body>
257
+ </html>