Hugging Face's logo

Spaces:
Eduardasilva
/
meu-assistente-pessoal
Running

App Files Community
Eduardasilva commited on
Commit
f9d028c
·
verified ·
1 Parent(s): 10875d9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +338 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Meu Assistente Pessoal
3
- emoji: 🏢
4
- colorFrom: blue
5
  colorTo: yellow
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: meu-assistente-pessoal
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: yellow
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,338 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CareBuddy - Seu Assistente Pessoal</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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating {
16
+ animation: float 3s ease-in-out infinite;
17
+ }
18
+ .chat-container {
19
+ height: calc(100vh - 200px);
20
+ }
21
+ .typing-indicator::after {
22
+ content: '...';
23
+ display: inline-block;
24
+ width: 20px;
25
+ text-align: left;
26
+ animation: typing 1s steps(5, end) infinite;
27
+ }
28
+ @keyframes typing {
29
+ 0% { content: '.'; }
30
+ 33% { content: '..'; }
31
+ 66% { content: '...'; }
32
+ }
33
+ .message-enter {
34
+ animation: messageEnter 0.3s ease-out;
35
+ }
36
+ @keyframes messageEnter {
37
+ from { transform: translateY(20px); opacity: 0; }
38
+ to { transform: translateY(0); opacity: 1; }
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen">
43
+ <div class="container mx-auto px-4 py-8">
44
+ <!-- Header -->
45
+ <header class="flex justify-between items-center mb-8">
46
+ <div class="flex items-center">
47
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center text-white mr-3">
48
+ <i class="fas fa-heart text-xl"></i>
49
+ </div>
50
+ <h1 class="text-2xl font-bold text-indigo-900">CareBuddy</h1>
51
+ </div>
52
+ <div class="flex space-x-4">
53
+ <button class="p-2 rounded-full bg-white shadow-md text-indigo-600 hover:bg-indigo-100 transition">
54
+ <i class="fas fa-cog"></i>
55
+ </button>
56
+ <button class="p-2 rounded-full bg-white shadow-md text-indigo-600 hover:bg-indigo-100 transition">
57
+ <i class="fas fa-user"></i>
58
+ </button>
59
+ </div>
60
+ </header>
61
+
62
+ <!-- Main Content -->
63
+ <main class="flex flex-col lg:flex-row gap-6">
64
+ <!-- AI Avatar Section -->
65
+ <div class="lg:w-1/3 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center">
66
+ <div class="relative mb-6">
67
+ <div class="w-40 h-40 rounded-full bg-gradient-to-r from-purple-400 to-indigo-500 flex items-center justify-center floating">
68
+ <div class="w-36 h-36 rounded-full bg-white flex items-center justify-center">
69
+ <img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" alt="AI Avatar" class="w-32 h-32">
70
+ </div>
71
+ </div>
72
+ <div class="absolute -bottom-2 -right-2 bg-green-400 rounded-full w-8 h-8 flex items-center justify-center border-2 border-white">
73
+ <i class="fas fa-check text-white text-xs"></i>
74
+ </div>
75
+ </div>
76
+
77
+ <h2 class="text-xl font-semibold text-indigo-900 mb-2">CareBuddy</h2>
78
+ <p class="text-gray-500 text-sm mb-4">Seu assistente pessoal de cuidados</p>
79
+
80
+ <div class="w-full bg-indigo-50 rounded-lg p-4 mb-6">
81
+ <div class="flex justify-between items-center mb-2">
82
+ <span class="text-xs font-medium text-indigo-700">Status emocional</span>
83
+ <span class="text-xs text-indigo-400">85% positivo</span>
84
+ </div>
85
+ <div class="w-full bg-white rounded-full h-2">
86
+ <div class="bg-gradient-to-r from-green-400 to-blue-500 h-2 rounded-full" style="width: 85%"></div>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="grid grid-cols-3 gap-3 w-full mb-6">
91
+ <div class="bg-indigo-50 rounded-lg p-3 text-center">
92
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
93
+ <i class="fas fa-moon text-indigo-600"></i>
94
+ </div>
95
+ <span class="text-xs font-medium text-indigo-900">Sono</span>
96
+ </div>
97
+ <div class="bg-indigo-50 rounded-lg p-3 text-center">
98
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
99
+ <i class="fas fa-utensils text-indigo-600"></i>
100
+ </div>
101
+ <span class="text-xs font-medium text-indigo-900">Alimentação</span>
102
+ </div>
103
+ <div class="bg-indigo-50 rounded-lg p-3 text-center">
104
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
105
+ <i class="fas fa-heartbeat text-indigo-600"></i>
106
+ </div>
107
+ <span class="text-xs font-medium text-indigo-900">Exercícios</span>
108
+ </div>
109
+ </div>
110
+
111
+ <button id="quickHelpBtn" class="w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center">
112
+ <i class="fas fa-plus-circle mr-2"></i> Ajuda Rápida
113
+ </button>
114
+ </div>
115
+
116
+ <!-- Chat Section -->
117
+ <div class="lg:w-2/3 bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col">
118
+ <!-- Chat Header -->
119
+ <div class="bg-indigo-600 text-white p-4 flex items-center">
120
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3">
121
+ <i class="fas fa-comment-dots"></i>
122
+ </div>
123
+ <div>
124
+ <h3 class="font-medium">Conversa com CareBuddy</h3>
125
+ <p class="text-xs text-indigo-200">Online agora</p>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Chat Messages -->
130
+ <div id="chatMessages" class="chat-container p-4 overflow-y-auto flex-grow">
131
+ <div class="message-enter mb-4 flex">
132
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0">
133
+ <i class="fas fa-robot text-indigo-600"></i>
134
+ </div>
135
+ <div class="bg-indigo-50 rounded-lg p-3 max-w-xs lg:max-w-md">
136
+ <p class="text-indigo-900">Olá! Eu sou o CareBuddy, seu assistente pessoal. Como posso te ajudar hoje? 😊</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Chat Input -->
142
+ <div class="border-t p-4 bg-gray-50">
143
+ <div class="flex items-center">
144
+ <button class="p-2 text-indigo-600 hover:bg-indigo-100 rounded-full mr-2">
145
+ <i class="fas fa-paperclip"></i>
146
+ </button>
147
+ <input id="userInput" type="text" placeholder="Digite sua mensagem..." class="flex-grow border rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-300">
148
+ <button id="sendBtn" class="ml-2 p-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">
149
+ <i class="fas fa-paper-plane"></i>
150
+ </button>
151
+ </div>
152
+ <div class="flex justify-center mt-2 space-x-4">
153
+ <button class="quick-option text-xs bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full hover:bg-indigo-100">Dicas de sono</button>
154
+ <button class="quick-option text-xs bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full hover:bg-indigo-100">Alimentação</button>
155
+ <button class="quick-option text-xs bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full hover:bg-indigo-100">Exercícios</button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </main>
160
+
161
+ <!-- Quick Help Modal -->
162
+ <div id="quickHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
163
+ <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
164
+ <div class="flex justify-between items-center mb-4">
165
+ <h3 class="text-lg font-semibold text-indigo-900">Ajuda Rápida</h3>
166
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
167
+ <i class="fas fa-times"></i>
168
+ </button>
169
+ </div>
170
+ <div class="space-y-3">
171
+ <button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center">
172
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
173
+ <i class="fas fa-bed text-indigo-600"></i>
174
+ </div>
175
+ <span>Problemas para dormir</span>
176
+ </button>
177
+ <button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center">
178
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
179
+ <i class="fas fa-apple-alt text-indigo-600"></i>
180
+ </div>
181
+ <span>Plano alimentar</span>
182
+ </button>
183
+ <button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center">
184
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
185
+ <i class="fas fa-running text-indigo-600"></i>
186
+ </div>
187
+ <span>Rotina de exercícios</span>
188
+ </button>
189
+ <button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center">
190
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
191
+ <i class="fas fa-brain text-indigo-600"></i>
192
+ </div>
193
+ <span>Saúde mental</span>
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <script>
201
+ document.addEventListener('DOMContentLoaded', function() {
202
+ const chatMessages = document.getElementById('chatMessages');
203
+ const userInput = document.getElementById('userInput');
204
+ const sendBtn = document.getElementById('sendBtn');
205
+ const quickHelpBtn = document.getElementById('quickHelpBtn');
206
+ const quickHelpModal = document.getElementById('quickHelpModal');
207
+ const closeModalBtn = document.getElementById('closeModalBtn');
208
+ const quickOptions = document.querySelectorAll('.quick-option');
209
+
210
+ // Responses database
211
+ const responses = {
212
+ "oi": "Olá! Como você está se sentindo hoje? 😊",
213
+ "olá": "Olá! Como você está se sentindo hoje? 😊",
214
+ "bom dia": "Bom dia! Que seu dia seja cheio de energia positiva! ☀️",
215
+ "boa tarde": "Boa tarde! Espero que seu dia esteja sendo produtivo! 🌞",
216
+ "boa noite": "Boa noite! Hora de relaxar e preparar para um ótimo descanso! 🌙",
217
+ "como você está": "Estou ótimo, obrigado por perguntar! Pronto para te ajudar com seus cuidados pessoais. 💙",
218
+ "dicas de sono": "Aqui estão algumas dicas para melhorar seu sono:\n1. Mantenha um horário regular\n2. Evite telas antes de dormir\n3. Crie um ambiente escuro e fresco\n4. Evite cafeína à noite\n5. Pratique relaxamento antes de dormir",
219
+ "alimentação": "Para uma alimentação saudável:\n1. Consuma frutas e vegetais\n2. Beba água regularmente\n3. Prefira alimentos integrais\n4. Modere no açúcar e sal\n5. Faça refeições balanceadas",
220
+ "exercícios": "Dicas para se exercitar:\n1. Encontre uma atividade que goste\n2. Comece devagar e aumente gradualmente\n3. Pratique pelo menos 30min/dia\n4. Alongue-se antes e depois\n5. Mantenha a regularidade",
221
+ "saúde mental": "Cuidados com saúde mental:\n1. Pratique mindfulness\n2. Mantenha conexões sociais\n3. Reserve tempo para hobbies\n4. Aprenda a dizer não\n5. Peça ajuda quando precisar",
222
+ "obrigado": "De nada! Estou aqui para te ajudar sempre que precisar. 💜",
223
+ "obrigada": "De nada! Estou aqui para te ajudar sempre que precisar. 💜",
224
+ "default": "Desculpe, não entendi. Poderia reformular? Estou aqui para ajudar com cuidados pessoais como sono, alimentação, exercícios e saúde mental."
225
+ };
226
+
227
+ // Add message to chat
228
+ function addMessage(message, isUser = false) {
229
+ const messageDiv = document.createElement('div');
230
+ messageDiv.className = `message-enter mb-4 flex ${isUser ? 'justify-end' : ''}`;
231
+
232
+ if (!isUser) {
233
+ messageDiv.innerHTML = `
234
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0">
235
+ <i class="fas fa-robot text-indigo-600"></i>
236
+ </div>
237
+ <div class="bg-indigo-50 rounded-lg p-3 max-w-xs lg:max-w-md">
238
+ <p class="text-indigo-900">${message}</p>
239
+ </div>
240
+ `;
241
+ } else {
242
+ messageDiv.innerHTML = `
243
+ <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg p-3 max-w-xs lg:max-w-md">
244
+ <p class="text-white">${message}</p>
245
+ </div>
246
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center ml-3 flex-shrink-0">
247
+ <i class="fas fa-user text-purple-600"></i>
248
+ </div>
249
+ `;
250
+ }
251
+
252
+ chatMessages.appendChild(messageDiv);
253
+ chatMessages.scrollTop = chatMessages.scrollHeight;
254
+ }
255
+
256
+ // Show typing indicator
257
+ function showTyping() {
258
+ const typingDiv = document.createElement('div');
259
+ typingDiv.className = 'mb-4 flex';
260
+ typingDiv.innerHTML = `
261
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0">
262
+ <i class="fas fa-robot text-indigo-600"></i>
263
+ </div>
264
+ <div class="bg-indigo-50 rounded-lg p-3 max-w-xs lg:max-w-md">
265
+ <p class="text-indigo-900 typing-indicator"></p>
266
+ </div>
267
+ `;
268
+
269
+ chatMessages.appendChild(typingDiv);
270
+ chatMessages.scrollTop = chatMessages.scrollHeight;
271
+ return typingDiv;
272
+ }
273
+
274
+ // Process user input
275
+ function processInput() {
276
+ const message = userInput.value.trim();
277
+ if (message === '') return;
278
+
279
+ addMessage(message, true);
280
+ userInput.value = '';
281
+
282
+ const typing = showTyping();
283
+
284
+ // Simulate AI thinking
285
+ setTimeout(() => {
286
+ chatMessages.removeChild(typing);
287
+
288
+ const lowerMessage = message.toLowerCase();
289
+ let response = responses.default;
290
+
291
+ for (const key in responses) {
292
+ if (lowerMessage.includes(key)) {
293
+ response = responses[key];
294
+ break;
295
+ }
296
+ }
297
+
298
+ // Format response with line breaks
299
+ response = response.replace(/\n/g, '<br>');
300
+ addMessage(response);
301
+ }, 1000 + Math.random() * 1000);
302
+ }
303
+
304
+ // Event listeners
305
+ sendBtn.addEventListener('click', processInput);
306
+
307
+ userInput.addEventListener('keypress', function(e) {
308
+ if (e.key === 'Enter') {
309
+ processInput();
310
+ }
311
+ });
312
+
313
+ quickHelpBtn.addEventListener('click', () => {
314
+ quickHelpModal.classList.remove('hidden');
315
+ });
316
+
317
+ closeModalBtn.addEventListener('click', () => {
318
+ quickHelpModal.classList.add('hidden');
319
+ });
320
+
321
+ quickOptions.forEach(option => {
322
+ option.addEventListener('click', function() {
323
+ userInput.value = this.textContent;
324
+ });
325
+ });
326
+
327
+ // Initial greeting
328
+ setTimeout(() => {
329
+ const typing = showTyping();
330
+ setTimeout(() => {
331
+ chatMessages.removeChild(typing);
332
+ addMessage("Eu posso te ajudar com dicas sobre sono, alimentação, exercícios e saúde mental. Por onde gostaria de começar?");
333
+ }, 1500);
334
+ }, 1000);
335
+ });
336
+ </script>
337
+ <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=Eduardasilva/meu-assistente-pessoal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
338
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Crie um aplicativo de cuidados pessoaias e ia articulada para conversar