Hugging Face's logo

Spaces:
JeisonJimenez
/
ia-chaat
Running

App Files Community
ia-chaat
File size: 14,394 Bytes 
6b879cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NexusAI - Interfaz Profesional</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .chat-container {
            height: calc(100vh - 180px);
        }
        @media (max-width: 768px) {
            .chat-container {
                height: calc(100vh - 150px);
            }
        }
        .message-animation {
            animation: fadeIn 0.3s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .typing-indicator span {
            animation: bounce 1.5s infinite ease-in-out;
            display: inline-block;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans antialiased">
    <div class="flex flex-col h-screen">
        <!-- Header -->
        <header class="bg-indigo-700 text-white shadow-md">
            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="bg-indigo-600 p-2 rounded-lg">
                        <i class="fas fa-robot text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold">Nexus<span class="text-indigo-300">AI</span></h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="hidden md:flex items-center space-x-1 bg-indigo-600 hover:bg-indigo-500 px-3 py-1 rounded-md transition">
                        <i class="fas fa-history text-sm"></i>
                        <span class="text-sm">Historial</span>
                    </button>
                    <button class="hidden md:flex items-center space-x-1 bg-indigo-600 hover:bg-indigo-500 px-3 py-1 rounded-md transition">
                        <i class="fas fa-cog text-sm"></i>
                        <span class="text-sm">Ajustes</span>
                    </button>
                    <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center cursor-pointer">
                        <i class="fas fa-user text-sm"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-1 overflow-hidden">
            <div class="container mx-auto px-4 h-full">
                <div class="chat-container overflow-y-auto py-4 space-y-4">
                    <!-- Welcome Message -->
                    <div class="message-animation flex justify-start">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center mr-3">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-3xl bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <div class="font-medium text-indigo-600 mb-1">NexusAI</div>
                            <p class="text-gray-700">¡Hola! Soy NexusAI, tu asistente de inteligencia artificial. Estoy aquí para ayudarte con cualquier pregunta que tengas. ¿En qué puedo asistirte hoy?</p>
                            <div class="mt-3 flex flex-wrap gap-2">
                                <button class="suggestion-chip bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full text-sm hover:bg-indigo-100 transition">Ideas para un blog</button>
                                <button class="suggestion-chip bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full text-sm hover:bg-indigo-100 transition">Resumen de artículos</button>
                                <button class="suggestion-chip bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full text-sm hover:bg-indigo-100 transition">Generar código</button>
                                <button class="suggestion-chip bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full text-sm hover:bg-indigo-100 transition">Traducir texto</button>
                            </div>
                        </div>
                    </div>

                    <!-- User Message -->
                    <div class="message-animation flex justify-end">
                        <div class="max-w-3xl bg-indigo-600 text-white p-4 rounded-lg shadow-sm">
                            <div class="font-medium mb-1">Tú</div>
                            <p>¿Puedes explicarme qué es un modelo de lenguaje como si tuviera 10 años?</p>
                        </div>
                    </div>

                    <!-- AI Response -->
                    <div class="message-animation flex justify-start">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center mr-3">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-3xl bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <div class="font-medium text-indigo-600 mb-1">NexusAI</div>
                            <p class="text-gray-700">¡Claro! Imagina que un modelo de lenguaje es como un super-amigo que ha leído miles y miles de libros. Cuando le haces una pregunta, busca en todo lo que ha leído para darte la mejor respuesta posible. Es como cuando juegas a adivinar la siguiente palabra en una frase, pero a lo grande.</p>
                            <p class="text-gray-700 mt-2">No piensa como las personas, pero puede encontrar patrones en las palabras para ayudarte de muchas maneras: responder preguntas, contar historias o incluso ayudarte con tus tareas.</p>
                            <div class="mt-3 pt-3 border-t border-gray-100 flex items-center space-x-3 text-sm text-gray-500">
                                <button class="hover:text-indigo-600 transition"><i class="far fa-copy mr-1"></i> Copiar</button>
                                <button class="hover:text-indigo-600 transition"><i class="far fa-thumbs-up mr-1"></i> Útil</button>
                                <button class="hover:text-indigo-600 transition"><i class="far fa-thumbs-down mr-1"></i> No útil</button>
                            </div>
                        </div>
                    </div>

                    <!-- AI Typing Indicator -->
                    <div id="typing-indicator" class="hidden flex justify-start">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center mr-3">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-3xl bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <div class="font-medium text-indigo-600 mb-1">NexusAI</div>
                            <div class="typing-indicator text-gray-500">
                                <span>.</span><span>.</span><span>.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Input Area -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="container mx-auto px-4">
                <form id="chat-form" class="flex items-end space-x-3">
                    <div class="flex-1 relative">
                        <textarea id="message-input" rows="1" class="w-full border border-gray-300 rounded-lg pl-4 pr-12 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none" placeholder="Escribe tu mensaje..." required></textarea>
                        <div class="absolute right-2 bottom-2 flex space-x-1">
                            <button type="button" class="text-gray-400 hover:text-indigo-600 p-1 rounded-full transition">
                                <i class="fas fa-paperclip"></i>
                            </button>
                            <button type="button" class="text-gray-400 hover:text-indigo-600 p-1 rounded-full transition">
                                <i class="fas fa-microphone"></i>
                            </button>
                        </div>
                    </div>
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-lg transition">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
                <div class="mt-2 text-xs text-gray-500 text-center">
                    NexusAI puede cometer errores. Verifica la información importante.
                </div>
            </div>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatForm = document.getElementById('chat-form');
            const messageInput = document.getElementById('message-input');
            const chatContainer = document.querySelector('.chat-container');
            const typingIndicator = document.getElementById('typing-indicator');

            // Auto-resize textarea
            messageInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });

            // Sample responses for demo
            const sampleResponses = [
                "Los modelos de lenguaje son sistemas entrenados para entender y generar texto humano.",
                "Pueden responder preguntas, traducir idiomas y hasta escribir historias creativas.",
                "Se entrenan con grandes cantidades de datos de texto para aprender patrones del lenguaje."
            ];

            chatForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const message = messageInput.value.trim();
                if (message) {
                    // Add user message
                    addMessage(message, 'user');
                    messageInput.value = '';
                    messageInput.style.height = 'auto';
                    
                    // Show typing indicator
                    typingIndicator.classList.remove('hidden');
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                    
                    // Simulate AI response after delay
                    setTimeout(() => {
                        typingIndicator.classList.add('hidden');
                        const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)];
                        addMessage(randomResponse, 'ai');
                    }, 1500);
                }
            });

            function addMessage(text, sender) {
                const messageDiv = document.createElement('div');
                messageDiv.classList.add('message-animation', 'flex');
                
                if (sender === 'user') {
                    messageDiv.classList.add('justify-end');
                    messageDiv.innerHTML = `
                        <div class="max-w-3xl bg-indigo-600 text-white p-4 rounded-lg shadow-sm">
                            <div class="font-medium mb-1">Tú</div>
                            <p>${text}</p>
                        </div>
                    `;
                } else {
                    messageDiv.classList.add('justify-start');
                    messageDiv.innerHTML = `
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center mr-3">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-3xl bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <div class="font-medium text-indigo-600 mb-1">NexusAI</div>
                            <p class="text-gray-700">${text}</p>
                            <div class="mt-3 pt-3 border-t border-gray-100 flex items-center space-x-3 text-sm text-gray-500">
                                <button class="hover:text-indigo-600 transition"><i class="far fa-copy mr-1"></i> Copiar</button>
                                <button class="hover:text-indigo-600 transition"><i class="far fa-thumbs-up mr-1"></i> Útil</button>
                                <button class="hover:text-indigo-600 transition"><i class="far fa-thumbs-down mr-1"></i> No útil</button>
                            </div>
                        </div>
                    `;
                }
                
                chatContainer.insertBefore(messageDiv, typingIndicator);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            // Add click event for suggestion chips
            document.querySelectorAll('.suggestion-chip').forEach(chip => {
                chip.addEventListener('click', function() {
                    messageInput.value = this.textContent;
                    messageInput.focus();
                });
            });
        });
    </script>
<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=JeisonJimenez/ia-chaat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>