Hugging Face's logo

Spaces:
Malaji71
/
chatbot
Running

App Files Community
Malaji71 commited on
Commit
9285eac
路
verified 路
1 Parent(s): 5fbe55e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +214 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chatbot
3
- emoji: 馃寲
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: chatbot
3
+ emoji: 馃惓
4
+ colorFrom: green
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,214 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 con Hugging Face</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .chat-container {
11
+ height: calc(100vh - 120px);
12
+ }
13
+ .message-animation {
14
+ animation: fadeIn 0.3s ease-in-out;
15
+ }
16
+ @keyframes fadeIn {
17
+ from { opacity: 0; transform: translateY(10px); }
18
+ to { opacity: 1; transform: translateY(0); }
19
+ }
20
+ .typing-indicator::after {
21
+ content: '...';
22
+ animation: typing 1.5s infinite;
23
+ }
24
+ @keyframes typing {
25
+ 0% { content: '.'; }
26
+ 33% { content: '..'; }
27
+ 66% { content: '...'; }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-100 font-sans">
32
+ <div class="container mx-auto max-w-4xl p-4">
33
+ <header class="bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-t-xl p-6 shadow-lg">
34
+ <div class="flex items-center justify-between">
35
+ <div class="flex items-center space-x-4">
36
+ <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center">
37
+ <i class="fas fa-robot text-2xl text-purple-600"></i>
38
+ </div>
39
+ <div>
40
+ <h1 class="text-2xl font-bold">AI Assistant</h1>
41
+ <p class="text-blue-100">Conectado a Hugging Face 馃</p>
42
+ </div>
43
+ </div>
44
+ <div class="flex space-x-2">
45
+ <button id="clear-chat" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full flex items-center">
46
+ <i class="fas fa-trash-alt mr-2"></i> Limpiar
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </header>
51
+
52
+ <div class="bg-white shadow-xl rounded-b-xl overflow-hidden">
53
+ <div id="chat-messages" class="chat-container overflow-y-auto p-4 space-y-4">
54
+ <div class="message-animation flex justify-start">
55
+ <div class="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 max-w-xs md:max-w-md lg:max-w-lg">
56
+ <p class="text-gray-800">隆Hola! Soy un asistente de IA conectado a modelos de Hugging Face. 驴En qu茅 puedo ayudarte hoy?</p>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="border-t border-gray-200 p-4 bg-gray-50">
62
+ <div class="flex items-center space-x-2">
63
+ <input
64
+ id="user-input"
65
+ type="text"
66
+ placeholder="Escribe tu mensaje..."
67
+ class="flex-1 border border-gray-300 rounded-full px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
68
+ autocomplete="off"
69
+ >
70
+ <button
71
+ id="send-button"
72
+ class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center transition-colors"
73
+ >
74
+ <i class="fas fa-paper-plane"></i>
75
+ </button>
76
+ </div>
77
+ <div class="mt-2 text-xs text-gray-500 flex justify-between">
78
+ <div>
79
+ <span id="model-status" class="inline-flex items-center">
80
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
81
+ Conectado
82
+ </span>
83
+ </div>
84
+ <div>
85
+ Modelo: <span class="font-medium">HuggingFace</span>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <script>
93
+ document.addEventListener('DOMContentLoaded', function() {
94
+ const chatMessages = document.getElementById('chat-messages');
95
+ const userInput = document.getElementById('user-input');
96
+ const sendButton = document.getElementById('send-button');
97
+ const clearChat = document.getElementById('clear-chat');
98
+ const modelStatus = document.getElementById('model-status');
99
+
100
+ // Configuraci贸n de la API de Hugging Face
101
+ const API_URL = "https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill";
102
+ const API_KEY = "TU_API_KEY_DE_HUGGINGFACE"; // Reemplaza con tu API key
103
+
104
+ // Funci贸n para agregar mensajes al chat
105
+ function addMessage(content, isUser = false) {
106
+ const messageDiv = document.createElement('div');
107
+ messageDiv.className = `message-animation flex ${isUser ? 'justify-end' : 'justify-start'}`;
108
+
109
+ const messageContent = document.createElement('div');
110
+ messageContent.className = isUser
111
+ ? 'bg-blue-500 text-white rounded-2xl rounded-tr-none px-4 py-3 max-w-xs md:max-w-md lg:max-w-lg'
112
+ : 'bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 max-w-xs md:max-w-md lg:max-w-lg';
113
+
114
+ messageContent.innerHTML = content;
115
+ messageDiv.appendChild(messageContent);
116
+ chatMessages.appendChild(messageDiv);
117
+ chatMessages.scrollTop = chatMessages.scrollHeight;
118
+ }
119
+
120
+ // Funci贸n para mostrar el indicador de "escribiendo"
121
+ function showTypingIndicator() {
122
+ const typingDiv = document.createElement('div');
123
+ typingDiv.className = 'flex justify-start';
124
+ typingDiv.id = 'typing-indicator';
125
+
126
+ const typingContent = document.createElement('div');
127
+ typingContent.className = 'bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 w-16';
128
+ typingContent.innerHTML = '<div class="typing-indicator text-gray-500"></div>';
129
+
130
+ typingDiv.appendChild(typingContent);
131
+ chatMessages.appendChild(typingDiv);
132
+ chatMessages.scrollTop = chatMessages.scrollHeight;
133
+ }
134
+
135
+ // Funci贸n para ocultar el indicador de "escribiendo"
136
+ function hideTypingIndicator() {
137
+ const typingIndicator = document.getElementById('typing-indicator');
138
+ if (typingIndicator) {
139
+ typingIndicator.remove();
140
+ }
141
+ }
142
+
143
+ // Funci贸n para enviar mensaje a la API de Hugging Face
144
+ async function sendToHuggingFace(message) {
145
+ try {
146
+ showTypingIndicator();
147
+
148
+ const response = await fetch(API_URL, {
149
+ method: 'POST',
150
+ headers: {
151
+ 'Authorization': `Bearer ${API_KEY}`,
152
+ 'Content-Type': 'application/json'
153
+ },
154
+ body: JSON.stringify({ inputs: message })
155
+ });
156
+
157
+ if (!response.ok) {
158
+ throw new Error(`Error HTTP: ${response.status}`);
159
+ }
160
+
161
+ const result = await response.json();
162
+ hideTypingIndicator();
163
+
164
+ if (result.generated_text) {
165
+ addMessage(result.generated_text);
166
+ } else {
167
+ addMessage("Lo siento, no pude procesar tu solicitud. Intenta reformular tu pregunta.");
168
+ }
169
+
170
+ } catch (error) {
171
+ hideTypingIndicator();
172
+ console.error('Error al conectar con Hugging Face:', error);
173
+ addMessage("Ocurri贸 un error al conectar con el servicio de IA. Por favor, intenta nuevamente m谩s tarde.");
174
+ modelStatus.innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500 mr-1"></span> Error de conexi贸n';
175
+ }
176
+ }
177
+
178
+ // Manejar el env铆o de mensajes
179
+ function handleSend() {
180
+ const message = userInput.value.trim();
181
+ if (message) {
182
+ addMessage(message, true);
183
+ userInput.value = '';
184
+ sendToHuggingFace(message);
185
+ }
186
+ }
187
+
188
+ // Event listeners
189
+ sendButton.addEventListener('click', handleSend);
190
+
191
+ userInput.addEventListener('keypress', function(e) {
192
+ if (e.key === 'Enter') {
193
+ handleSend();
194
+ }
195
+ });
196
+
197
+ clearChat.addEventListener('click', function() {
198
+ chatMessages.innerHTML = `
199
+ <div class="message-animation flex justify-start">
200
+ <div class="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 max-w-xs md:max-w-md lg:max-w-lg">
201
+ <p class="text-gray-800">隆Hola! Soy un asistente de IA conectado a modelos de Hugging Face. 驴En qu茅 puedo ayudarte hoy?</p>
202
+ </div>
203
+ </div>
204
+ `;
205
+ });
206
+
207
+ // Efecto de carga inicial
208
+ setTimeout(() => {
209
+ document.querySelector('.chat-container').classList.add('opacity-100');
210
+ }, 100);
211
+ });
212
+ </script>
213
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=Malaji71/chatbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
214
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Quiero un chatbot que est茅 irectamente conectado con un moelo abierto de Hugging Faces y que ya sea operativo cuando lo crees