Hugging Face's logo

Spaces:
muzaffarahmadmir
/
my-mobile-ai-agent
Running

App Files Community
muzaffarahmadmir commited on
Commit
a31acea
·
verified ·
1 Parent(s): cf7665a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +412 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Mobile Ai Agent
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: purple
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: my-mobile-ai-agent
3
+ emoji: 🐳
4
+ colorFrom: pink
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,412 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NexusAI - Your Mobile Assistant</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 pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .listening-animation {
15
+ animation: pulse 1.5s infinite;
16
+ }
17
+ .slide-up {
18
+ animation: slideUp 0.3s ease-out;
19
+ }
20
+ @keyframes slideUp {
21
+ from { transform: translateY(20px); opacity: 0; }
22
+ to { transform: translateY(0); opacity: 1; }
23
+ }
24
+ .task-card:hover {
25
+ transform: translateY(-2px);
26
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
27
+ }
28
+ .gradient-bg {
29
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-100 font-sans">
34
+ <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden">
35
+ <!-- Header -->
36
+ <header class="gradient-bg text-white p-4">
37
+ <div class="flex justify-between items-center">
38
+ <div>
39
+ <h1 class="text-xl font-bold">NexusAI</h1>
40
+ <p class="text-xs opacity-80">Your personal mobile assistant</p>
41
+ </div>
42
+ <div class="flex space-x-3">
43
+ <button class="bg-white bg-opacity-20 p-2 rounded-full">
44
+ <i class="fas fa-cog"></i>
45
+ </button>
46
+ <button class="bg-white bg-opacity-20 p-2 rounded-full">
47
+ <i class="fas fa-user"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Main Content -->
54
+ <main class="p-4">
55
+ <!-- Status Cards -->
56
+ <div class="grid grid-cols-2 gap-3 mb-6">
57
+ <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
58
+ <p class="text-xs text-blue-600">Tasks Completed</p>
59
+ <p class="text-xl font-bold">128</p>
60
+ </div>
61
+ <div class="bg-purple-50 rounded-lg p-3 border border-purple-100">
62
+ <p class="text-xs text-purple-600">Time Saved</p>
63
+ <p class="text-xl font-bold">9.2h</p>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Voice Assistant -->
68
+ <div class="bg-gray-50 rounded-xl p-4 mb-6 relative overflow-hidden">
69
+ <div class="flex justify-between items-center mb-2">
70
+ <h2 class="font-semibold">Voice Assistant</h2>
71
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Active</span>
72
+ </div>
73
+
74
+ <div id="assistant-response" class="bg-white rounded-lg p-3 mb-3 min-h-16 text-sm">
75
+ <p>Hi there! How can I help you today?</p>
76
+ </div>
77
+
78
+ <div class="flex items-center">
79
+ <button id="voice-btn" class="bg-blue-600 text-white p-3 rounded-full mr-3">
80
+ <i class="fas fa-microphone"></i>
81
+ </button>
82
+ <div class="flex-1 relative">
83
+ <input type="text" id="command-input" placeholder="Type or say a command..."
84
+ class="w-full bg-white border border-gray-200 rounded-full py-2 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
85
+ <button id="send-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600">
86
+ <i class="fas fa-paper-plane"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+
91
+ <div id="listening-indicator" class="hidden absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
92
+ <div class="text-center text-white">
93
+ <div class="listening-animation mb-2">
94
+ <i class="fas fa-microphone text-4xl"></i>
95
+ </div>
96
+ <p>Listening...</p>
97
+ <p class="text-xs mt-2">Say "stop" when finished</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Quick Actions -->
103
+ <div class="mb-6">
104
+ <h2 class="font-semibold mb-3">Quick Actions</h2>
105
+ <div class="grid grid-cols-4 gap-2">
106
+ <button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('call')">
107
+ <i class="fas fa-phone text-blue-600 mb-1"></i>
108
+ <p class="text-xs">Call</p>
109
+ </button>
110
+ <button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('message')">
111
+ <i class="fas fa-comment text-purple-600 mb-1"></i>
112
+ <p class="text-xs">Message</p>
113
+ </button>
114
+ <button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('reminder')">
115
+ <i class="fas fa-bell text-yellow-600 mb-1"></i>
116
+ <p class="text-xs">Reminder</p>
117
+ </button>
118
+ <button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('email')">
119
+ <i class="fas fa-envelope text-red-600 mb-1"></i>
120
+ <p class="text-xs">Email</p>
121
+ </button>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Task Automation -->
126
+ <div>
127
+ <div class="flex justify-between items-center mb-3">
128
+ <h2 class="font-semibold">Automated Tasks</h2>
129
+ <button class="text-blue-600 text-sm" onclick="showAddTaskModal()">
130
+ <i class="fas fa-plus mr-1"></i> Add
131
+ </button>
132
+ </div>
133
+
134
+ <div id="tasks-container">
135
+ <!-- Tasks will be added here dynamically -->
136
+ <div class="task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer" onclick="runTask(1)">
137
+ <div class="flex justify-between items-center">
138
+ <div>
139
+ <h3 class="font-medium">Morning Routine</h3>
140
+ <p class="text-xs text-gray-500">Turns on WiFi, reads news, plays music</p>
141
+ </div>
142
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer" onclick="runTask(2)">
147
+ <div class="flex justify-between items-center">
148
+ <div>
149
+ <h3 class="font-medium">Work Mode</h3>
150
+ <p class="text-xs text-gray-500">Silences phone, opens work apps</p>
151
+ </div>
152
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer" onclick="runTask(3)">
157
+ <div class="flex justify-between items-center">
158
+ <div>
159
+ <h3 class="font-medium">Sleep Mode</h3>
160
+ <p class="text-xs text-gray-500">DND, dims screen, sets alarm</p>
161
+ </div>
162
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </main>
168
+
169
+ <!-- Bottom Navigation -->
170
+ <nav class="flex justify-around items-center bg-white border-t border-gray-200 p-3">
171
+ <button class="text-blue-600 p-2">
172
+ <i class="fas fa-home"></i>
173
+ </button>
174
+ <button class="text-gray-500 p-2">
175
+ <i class="fas fa-tasks"></i>
176
+ </button>
177
+ <button class="text-gray-500 p-2">
178
+ <i class="fas fa-calendar"></i>
179
+ </button>
180
+ <button class="text-gray-500 p-2">
181
+ <i class="fas fa-cog"></i>
182
+ </button>
183
+ </nav>
184
+
185
+ <!-- Add Task Modal -->
186
+ <div id="add-task-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
187
+ <div class="bg-white rounded-lg w-full max-w-md p-4 slide-up">
188
+ <div class="flex justify-between items-center mb-4">
189
+ <h3 class="font-bold">Create New Task</h3>
190
+ <button onclick="hideAddTaskModal()" class="text-gray-500">
191
+ <i class="fas fa-times"></i>
192
+ </button>
193
+ </div>
194
+
195
+ <div class="mb-4">
196
+ <label class="block text-sm font-medium mb-1">Task Name</label>
197
+ <input type="text" id="task-name" class="w-full border border-gray-200 rounded-lg p-2 text-sm">
198
+ </div>
199
+
200
+ <div class="mb-4">
201
+ <label class="block text-sm font-medium mb-1">Actions</label>
202
+ <div class="flex items-center mb-2">
203
+ <select class="flex-1 border border-gray-200 rounded-lg p-2 text-sm mr-2">
204
+ <option>Select action...</option>
205
+ <option>Send message</option>
206
+ <option>Make a call</option>
207
+ <option>Set reminder</option>
208
+ <option>Open app</option>
209
+ <option>Adjust settings</option>
210
+ </select>
211
+ <button class="bg-gray-100 p-2 rounded-lg">
212
+ <i class="fas fa-plus text-blue-600"></i>
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="mb-4">
218
+ <label class="block text-sm font-medium mb-1">Trigger</label>
219
+ <select class="w-full border border-gray-200 rounded-lg p-2 text-sm">
220
+ <option>Time of day</option>
221
+ <option>Location</option>
222
+ <option>App opened</option>
223
+ <option>Manual</option>
224
+ </select>
225
+ </div>
226
+
227
+ <button onclick="addNewTask()" class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium">
228
+ Save Task
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <script>
235
+ // DOM Elements
236
+ const voiceBtn = document.getElementById('voice-btn');
237
+ const sendBtn = document.getElementById('send-btn');
238
+ const commandInput = document.getElementById('command-input');
239
+ const assistantResponse = document.getElementById('assistant-response');
240
+ const listeningIndicator = document.getElementById('listening-indicator');
241
+ const addTaskModal = document.getElementById('add-task-modal');
242
+
243
+ // Sample responses for demonstration
244
+ const sampleResponses = [
245
+ "I've set a reminder for your meeting tomorrow at 10 AM.",
246
+ "Calling Mom on speakerphone...",
247
+ "Your morning routine has been activated. Good morning!",
248
+ "I've sent your location to Sarah via text message.",
249
+ "Your phone is now in sleep mode. Good night!",
250
+ "I found 3 new emails in your inbox. Would you like me to read them?"
251
+ ];
252
+
253
+ // Voice recognition simulation
254
+ let isListening = false;
255
+
256
+ voiceBtn.addEventListener('click', function() {
257
+ isListening = !isListening;
258
+
259
+ if (isListening) {
260
+ listeningIndicator.classList.remove('hidden');
261
+ voiceBtn.classList.add('bg-red-600');
262
+ voiceBtn.innerHTML = '<i class="fas fa-stop"></i>';
263
+
264
+ // Simulate voice recognition after 2 seconds
265
+ setTimeout(() => {
266
+ const commands = [
267
+ "Set a reminder for my meeting tomorrow at 10 AM",
268
+ "Call mom on speakerphone",
269
+ "Activate morning routine",
270
+ "Send my location to Sarah",
271
+ "Enable sleep mode",
272
+ "Check my emails"
273
+ ];
274
+ const randomCommand = commands[Math.floor(Math.random() * commands.length)];
275
+ commandInput.value = randomCommand;
276
+
277
+ // Stop listening
278
+ stopListening();
279
+
280
+ // Process the command
281
+ processCommand(randomCommand);
282
+ }, 2000);
283
+ } else {
284
+ stopListening();
285
+ }
286
+ });
287
+
288
+ function stopListening() {
289
+ isListening = false;
290
+ listeningIndicator.classList.add('hidden');
291
+ voiceBtn.classList.remove('bg-red-600');
292
+ voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
293
+ }
294
+
295
+ // Text command processing
296
+ sendBtn.addEventListener('click', function() {
297
+ const command = commandInput.value.trim();
298
+ if (command) {
299
+ processCommand(command);
300
+ commandInput.value = '';
301
+ }
302
+ });
303
+
304
+ commandInput.addEventListener('keypress', function(e) {
305
+ if (e.key === 'Enter') {
306
+ const command = commandInput.value.trim();
307
+ if (command) {
308
+ processCommand(command);
309
+ commandInput.value = '';
310
+ }
311
+ }
312
+ });
313
+
314
+ function processCommand(command) {
315
+ // Show typing indicator
316
+ assistantResponse.innerHTML = '<div class="flex space-x-2"><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s"></div></div>';
317
+
318
+ // Simulate processing delay
319
+ setTimeout(() => {
320
+ const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)];
321
+ assistantResponse.innerHTML = `<p>${randomResponse}</p>`;
322
+
323
+ // Scroll to response
324
+ assistantResponse.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
325
+ }, 1000 + Math.random() * 2000);
326
+ }
327
+
328
+ // Quick actions
329
+ function runQuickAction(action) {
330
+ let response = "";
331
+
332
+ switch(action) {
333
+ case 'call':
334
+ response = "Who would you like to call?";
335
+ break;
336
+ case 'message':
337
+ response = "Who should I message and what should I say?";
338
+ break;
339
+ case 'reminder':
340
+ response = "What should I remind you about and when?";
341
+ break;
342
+ case 'email':
343
+ response = "I'll open your email app. What would you like to do?";
344
+ break;
345
+ }
346
+
347
+ assistantResponse.innerHTML = `<p>${response}</p>`;
348
+ commandInput.focus();
349
+ }
350
+
351
+ // Task automation
352
+ function runTask(taskId) {
353
+ let taskName = "";
354
+
355
+ switch(taskId) {
356
+ case 1:
357
+ taskName = "Morning Routine";
358
+ break;
359
+ case 2:
360
+ taskName = "Work Mode";
361
+ break;
362
+ case 3:
363
+ taskName = "Sleep Mode";
364
+ break;
365
+ }
366
+
367
+ assistantResponse.innerHTML = `<p>Running "${taskName}"... <i class="fas fa-spinner fa-spin ml-2"></i></p>`;
368
+
369
+ setTimeout(() => {
370
+ assistantResponse.innerHTML = `<p>"${taskName}" has been successfully activated!</p>`;
371
+ }, 1500);
372
+ }
373
+
374
+ // Task modal functions
375
+ function showAddTaskModal() {
376
+ addTaskModal.classList.remove('hidden');
377
+ }
378
+
379
+ function hideAddTaskModal() {
380
+ addTaskModal.classList.add('hidden');
381
+ }
382
+
383
+ function addNewTask() {
384
+ const taskName = document.getElementById('task-name').value.trim();
385
+ if (taskName) {
386
+ // Create new task element
387
+ const newTask = document.createElement('div');
388
+ newTask.className = 'task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer slide-up';
389
+ newTask.innerHTML = `
390
+ <div class="flex justify-between items-center">
391
+ <div>
392
+ <h3 class="font-medium">${taskName}</h3>
393
+ <p class="text-xs text-gray-500">Custom task</p>
394
+ </div>
395
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
396
+ </div>
397
+ `;
398
+
399
+ // Add to container with animation
400
+ document.getElementById('tasks-container').prepend(newTask);
401
+
402
+ // Hide modal and reset
403
+ hideAddTaskModal();
404
+ document.getElementById('task-name').value = '';
405
+
406
+ // Show confirmation
407
+ assistantResponse.innerHTML = `<p>Your new task "${taskName}" has been created!</p>`;
408
+ }
409
+ }
410
+ </script>
411
+ <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=muzaffarahmadmir/my-mobile-ai-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
412
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a ai agent app for my mobile which works all my mobile tasks