Hugging Face's logo

Spaces:
crazychon
/
me-ia
Running

App Files Community
crazychon commited on
Commit
6b7aca7
·
verified ·
1 Parent(s): 25b9994

en la seccion de bienestar permiteme con el comando de voz decirle las horas de sueño - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +769 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Me Ia
3
- emoji: 📈
4
- colorFrom: purple
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: me-ia
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,769 @@
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>ME IA Ético - Sistema de Bienestar</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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .tab-content {
12
+ display: none;
13
+ }
14
+ .tab-content.active {
15
+ display: block;
16
+ }
17
+ .nav-tab {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .nav-tab.active {
21
+ border-bottom: 3px solid #3b82f6;
22
+ color: #3b82f6;
23
+ }
24
+ #sleepChart {
25
+ max-height: 400px;
26
+ }
27
+ .recommendation-item {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .recommendation-item:hover {
31
+ transform: translateX(5px);
32
+ }
33
+ .red-zone-item {
34
+ position: relative;
35
+ }
36
+ .red-zone-item:hover .delete-zone {
37
+ opacity: 1;
38
+ }
39
+ .delete-zone {
40
+ opacity: 0;
41
+ transition: opacity 0.2s ease;
42
+ }
43
+ .animate-pulse {
44
+ animation: pulse 1.5s infinite;
45
+ }
46
+ @keyframes pulse {
47
+ 0% { opacity: 1; }
48
+ 50% { opacity: 0.5; }
49
+ 100% { opacity: 1; }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans">
54
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
55
+ <!-- Header -->
56
+ <header class="mb-8 text-center">
57
+ <h1 class="text-3xl md:text-4xl font-bold text-blue-800 mb-2">
58
+ <i class="fas fa-shield-alt mr-2"></i>ME IA Ético <span class="text-indigo-600">+ Deepseek R1</span>
59
+ </h1>
60
+ <p class="text-gray-600">Sistema de Bienestar Ético con Retroalimentación ME IA y Deepseek R1</p>
61
+ <div class="mt-4 flex flex-col sm:flex-row gap-3 items-center">
62
+ <div class="p-3 bg-blue-50 rounded-lg inline-flex items-center">
63
+ <i class="fas fa-lock text-blue-600 mr-2"></i>
64
+ <span class="text-sm text-blue-800">Datos procesados localmente con cifrado</span>
65
+ </div>
66
+ <div class="p-2 bg-indigo-50 rounded-lg inline-flex items-center">
67
+ <i class="fas fa-robot text-indigo-600 mr-2"></i>
68
+ <span class="text-sm text-indigo-800">Powered by Deepseek R1</span>
69
+ </div>
70
+ <button id="voiceCommand" class="p-3 bg-green-50 rounded-lg inline-flex items-center hover:bg-green-100 transition-colors">
71
+ <i class="fas fa-microphone text-green-600 mr-2"></i>
72
+ <span class="text-sm text-green-800">Hablar con ME IA</span>
73
+ </button>
74
+ </div>
75
+ </header>
76
+
77
+ <!-- Navigation Tabs -->
78
+ <div class="flex border-b border-gray-200 mb-6 overflow-x-auto">
79
+ <button class="nav-tab px-4 py-3 font-medium text-gray-600 hover:text-blue-600 flex items-center active" data-tab="wellness">
80
+ <i class="fas fa-moon mr-2"></i> Bienestar
81
+ </button>
82
+ <button class="nav-tab px-4 py-3 font-medium text-gray-600 hover:text-blue-600 flex items-center" data-tab="geolocation">
83
+ <i class="fas fa-map-marker-alt mr-2"></i> Geolocalización
84
+ </button>
85
+ <button class="nav-tab px-4 py-3 font-medium text-gray-600 hover:text-blue-600 flex items-center" data-tab="system">
86
+ <i class="fas fa-cog mr-2"></i> Sistema
87
+ </button>
88
+ </div>
89
+
90
+ <!-- Wellness Tab -->
91
+ <div id="wellness" class="tab-content active">
92
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
93
+ <div class="p-6 border-b border-gray-200 bg-blue-50">
94
+ <h2 class="text-xl font-semibold text-blue-800 flex items-center">
95
+ <i class="fas fa-plus-circle mr-2"></i> Añadir Datos de Sueño
96
+ </h2>
97
+ </div>
98
+ <div class="p-6">
99
+ <div class="flex flex-col md:flex-row gap-4 items-center">
100
+ <div class="w-full md:w-auto">
101
+ <label class="block text-gray-700 mb-2">Horas de sueño:</label>
102
+ <div class="relative">
103
+ <input type="number" id="sleepHours" min="0" max="24" step="0.1" value="7.0"
104
+ class="w-full md:w-32 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
105
+ <button id="voiceSleepHours" class="absolute right-2 top-2 text-blue-600 hover:text-blue-800">
106
+ <i class="fas fa-microphone"></i>
107
+ </button>
108
+ </div>
109
+ </div>
110
+ <button id="saveSleepData" class="w-full md:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors mt-6 md:mt-0">
111
+ <i class="fas fa-save mr-2"></i> Guardar
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
118
+ <div class="p-6 border-b border-gray-200 bg-blue-50">
119
+ <h2 class="text-xl font-semibold text-blue-800 flex items-center">
120
+ <i class="fas fa-chart-bar mr-2"></i> Análisis de Bienestar
121
+ </h2>
122
+ </div>
123
+ <div class="p-6">
124
+ <div id="sleepAnalysis" class="bg-gray-50 p-4 rounded-md mb-6 text-gray-700">
125
+ Cargando análisis de sueño...
126
+ </div>
127
+
128
+ <div class="mb-6">
129
+ <canvas id="sleepChart"></canvas>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
135
+ <div class="p-6 border-b border-gray-200 bg-green-50">
136
+ <h2 class="text-xl font-semibold text-green-800 flex items-center">
137
+ <i class="fas fa-lightbulb mr-2"></i> Recomendaciones ME IA + Deepseek R1
138
+ </h2>
139
+ </div>
140
+ <div id="recommendations" class="p-6">
141
+ <div class="space-y-3">
142
+ <div class="recommendation-item p-3 bg-green-50 rounded-md border-l-4 border-green-500">
143
+ <i class="fas fa-check-circle text-green-500 mr-2"></i> Establece una hora fija para dormir
144
+ </div>
145
+ <div class="recommendation-item p-3 bg-green-50 rounded-md border-l-4 border-green-500">
146
+ <i class="fas fa-check-circle text-green-500 mr-2"></i> Evita pantallas 1 hora antes de dormir
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Geolocation Tab -->
154
+ <div id="geolocation" class="tab-content">
155
+ <div class="flex flex-col lg:flex-row gap-6">
156
+ <!-- Red Zones Section -->
157
+ <div class="lg:w-1/3">
158
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
159
+ <div class="p-6 border-b border-gray-200 bg-red-50">
160
+ <h2 class="text-xl font-semibold text-red-800 flex items-center">
161
+ <i class="fas fa-exclamation-triangle mr-2"></i> Zonas Sensibles
162
+ </h2>
163
+ </div>
164
+ <div class="p-6">
165
+ <div id="redZonesList" class="mb-4 max-h-60 overflow-y-auto">
166
+ <div class="red-zone-item flex justify-between items-center p-2 hover:bg-red-50 rounded">
167
+ <span class="text-gray-700"><i class="fas fa-hospital mr-2 text-red-500"></i>Hospital</span>
168
+ <button class="delete-zone text-red-500 hover:text-red-700">
169
+ <i class="fas fa-trash-alt"></i>
170
+ </button>
171
+ </div>
172
+ <div class="red-zone-item flex justify-between items-center p-2 hover:bg-red-50 rounded">
173
+ <span class="text-gray-700"><i class="fas fa-home mr-2 text-red-500"></i>Casa de Familia</span>
174
+ <button class="delete-zone text-red-500 hover:text-red-700">
175
+ <i class="fas fa-trash-alt"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+ <div class="flex gap-2">
180
+ <input type="text" id="newZone" placeholder="Nueva zona sensible"
181
+ class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
182
+ <button id="addZone" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors">
183
+ <i class="fas fa-plus mr-1"></i> Añadir
184
+ </button>
185
+ </div>
186
+ <p class="text-xs text-gray-500 mt-2">
187
+ <i class="fas fa-info-circle mr-1"></i> Los datos en estas zonas se borrarán automáticamente
188
+ </p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Location Simulation -->
194
+ <div class="lg:w-2/3">
195
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
196
+ <div class="p-6 border-b border-gray-200 bg-blue-50">
197
+ <h2 class="text-xl font-semibold text-blue-800 flex items-center">
198
+ <i class="fas fa-map-marked-alt mr-2"></i> Simulación de Ubicación
199
+ </h2>
200
+ </div>
201
+ <div class="p-6">
202
+ <div class="mb-4">
203
+ <label class="block text-gray-700 mb-2">Lugar actual:</label>
204
+ <select id="locationSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
205
+ <option>Oficina</option>
206
+ <option>Casa</option>
207
+ <option>Gimnasio</option>
208
+ <option>Hospital</option>
209
+ <option selected>Casa de Familia</option>
210
+ <option>Parque</option>
211
+ </select>
212
+ </div>
213
+ <button id="registerLocation" class="w-full px-4 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors mb-4">
214
+ <i class="fas fa-location-arrow mr-2"></i> Registrar Ubicación
215
+ </button>
216
+ <div id="locationResult" class="p-4 bg-gray-50 rounded-md">
217
+ <p class="text-gray-700">Seleccione una ubicación y haga clic en "Registrar Ubicación"</p>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- System Tab -->
226
+ <div id="system" class="tab-content">
227
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
228
+ <div class="p-6 border-b border-gray-200 bg-blue-50">
229
+ <h2 class="text-xl font-semibold text-blue-800 flex items-center">
230
+ <i class="fas fa-info-circle mr-2"></i> Información del Sistema
231
+ </h2>
232
+ </div>
233
+ <div class="p-6">
234
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
235
+ <div class="flex justify-between border-b border-gray-100 pb-2">
236
+ <span class="text-gray-600">Sistema Operativo:</span>
237
+ <span class="font-medium" id="osInfo">...</span>
238
+ </div>
239
+ <div class="flex justify-between border-b border-gray-100 pb-2">
240
+ <span class="text-gray-600">Arquitectura:</span>
241
+ <span class="font-medium" id="archInfo">...</span>
242
+ </div>
243
+ <div class="flex justify-between border-b border-gray-100 pb-2">
244
+ <span class="text-gray-600">Hora Local:</span>
245
+ <span class="font-medium" id="timeInfo">...</span>
246
+ </div>
247
+ <div class="flex justify-between border-b border-gray-100 pb-2">
248
+ <span class="text-gray-600">Zonas Sensibles:</span>
249
+ <span class="font-medium" id="zonesInfo">2</span>
250
+ </div>
251
+ <div class="flex justify-between border-b border-gray-100 pb-2">
252
+ <span class="text-gray-600">Registros de Sueño:</span>
253
+ <span class="font-medium" id="sleepRecords">7</span>
254
+ </div>
255
+ <div class="flex justify-between border-b border-gray-100 pb-2">
256
+ <span class="text-gray-600">Estado Ético:</span>
257
+ <span class="font-medium text-green-600" id="ethicalStatus"><i class="fas fa-lock mr-1"></i> ACTIVADO</span>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
264
+ <div class="p-6 border-b border-gray-200 bg-green-50">
265
+ <h2 class="text-xl font-semibold text-green-800 flex items-center">
266
+ <i class="fas fa-shield-alt mr-2"></i> Verificación Ética
267
+ </h2>
268
+ </div>
269
+ <div class="p-6">
270
+ <div class="space-y-3">
271
+ <div class="flex items-center text-green-700">
272
+ <i class="fas fa-check-circle mr-2"></i>
273
+ <span>Todos los datos procesados localmente</span>
274
+ </div>
275
+ <div class="flex items-center text-green-700">
276
+ <i class="fas fa-check-circle mr-2"></i>
277
+ <span>Cifrado AES-256 activado</span>
278
+ </div>
279
+ <div class="flex items-center text-green-700">
280
+ <i class="fas fa-check-circle mr-2"></i>
281
+ <span>Geolocalización sensible protegida</span>
282
+ </div>
283
+ <div class="flex items-center text-green-700">
284
+ <i class="fas fa-check-circle mr-2"></i>
285
+ <span>Sin conexión a internet</span>
286
+ </div>
287
+ <div class="flex items-center text-green-700">
288
+ <i class="fas fa-check-circle mr-2"></i>
289
+ <span id="zonesCheck">2 zonas sensibles definidas</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
296
+ <div class="p-6 border-b border-gray-200 bg-purple-50">
297
+ <h2 class="text-xl font-semibold text-purple-800 flex items-center">
298
+ <i class="fas fa-file-export mr-2"></i> Exportación de Datos
299
+ </h2>
300
+ </div>
301
+ <div class="p-6 text-center">
302
+ <button id="exportData" class="px-6 py-3 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors mb-3">
303
+ <i class="fas fa-download mr-2"></i> Exportar Datos Cifrados
304
+ </button>
305
+ <p class="text-sm text-gray-600">
306
+ <i class="fas fa-info-circle mr-1"></i> Todos los datos permanecen en este dispositivo
307
+ </p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <script>
314
+ // App State
315
+ const state = {
316
+ redZones: ['Hospital', 'Casa de Familia'],
317
+ sleepData: [],
318
+ chart: null
319
+ };
320
+
321
+ // Initialize the app
322
+ document.addEventListener('DOMContentLoaded', function() {
323
+ // Generate sample sleep data
324
+ for (let i = 0; i < 7; i++) {
325
+ const hours = (Math.random() * 3 + 5.5).toFixed(1);
326
+ const date = new Date();
327
+ date.setDate(date.getDate() - (6 - i));
328
+ state.sleepData.push({
329
+ value: parseFloat(hours),
330
+ date: date.toISOString()
331
+ });
332
+ }
333
+
334
+ // Setup tabs
335
+ setupTabs();
336
+
337
+ // Initialize wellness tab
338
+ updateSleepAnalysis();
339
+ renderSleepChart();
340
+
341
+ // Initialize system info
342
+ updateSystemInfo();
343
+
344
+ // Setup event listeners
345
+ document.getElementById('saveSleepData').addEventListener('click', saveSleepData);
346
+ document.getElementById('addZone').addEventListener('click', addRedZone);
347
+ document.getElementById('registerLocation').addEventListener('click', registerLocation);
348
+ document.getElementById('exportData').addEventListener('click', exportData);
349
+
350
+ // Delegated event for deleting zones
351
+ document.getElementById('redZonesList').addEventListener('click', function(e) {
352
+ if (e.target.closest('.delete-zone')) {
353
+ const zoneItem = e.target.closest('.red-zone-item');
354
+ const zoneName = zoneItem.querySelector('span').textContent.trim();
355
+ removeRedZone(zoneName);
356
+ }
357
+ });
358
+ });
359
+
360
+ // Tab Navigation
361
+ function setupTabs() {
362
+ const tabs = document.querySelectorAll('.nav-tab');
363
+ tabs.forEach(tab => {
364
+ tab.addEventListener('click', function() {
365
+ // Remove active class from all tabs and contents
366
+ document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
367
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
368
+
369
+ // Add active class to clicked tab and corresponding content
370
+ this.classList.add('active');
371
+ const tabId = this.getAttribute('data-tab');
372
+ document.getElementById(tabId).classList.add('active');
373
+ });
374
+ });
375
+ }
376
+
377
+ // Wellness Tab Functions
378
+ function saveSleepData() {
379
+ const hoursInput = document.getElementById('sleepHours');
380
+ const hours = parseFloat(hoursInput.value);
381
+
382
+ if (isNaN(hours) || hours < 0 || hours > 24) {
383
+ showAlert('Por favor ingresa un valor válido (0-24)', 'error');
384
+ return;
385
+ }
386
+
387
+ const today = new Date().toISOString();
388
+ state.sleepData.push({
389
+ value: hours,
390
+ date: today
391
+ });
392
+
393
+ showAlert(`Se ha guardado ${hours} horas de sueño`, 'success');
394
+ updateSleepAnalysis();
395
+ renderSleepChart();
396
+ }
397
+
398
+ function updateSleepAnalysis() {
399
+ const analysisDiv = document.getElementById('sleepAnalysis');
400
+ const recommendationsDiv = document.getElementById('recommendations');
401
+
402
+ if (state.sleepData.length === 0) {
403
+ analysisDiv.innerHTML = '<p class="text-gray-700">No hay datos de sueño disponibles</p>';
404
+ recommendationsDiv.innerHTML = '<p class="text-gray-700">No hay recomendaciones disponibles</p>';
405
+ return;
406
+ }
407
+
408
+ // Calculate statistics
409
+ const values = state.sleepData.map(entry => entry.value);
410
+ const avgSleep = values.reduce((a, b) => a + b, 0) / values.length;
411
+ const minSleep = Math.min(...values);
412
+ const maxSleep = Math.max(...values);
413
+
414
+ // Generate analysis text
415
+ let analysis = `
416
+ <div class="space-y-2">
417
+ <p class="font-semibold text-blue-800"><i class="fas fa-chart-pie mr-2"></i>Análisis Conjunto ME IA + Deepseek R1</p>
418
+ <p><i class="fas fa-calendar-day mr-2 text-gray-500"></i>Registros: <span class="font-medium">${state.sleepData.length} días</span></p>
419
+ <p><i class="fas fa-clock mr-2 text-gray-500"></i>Promedio: <span class="font-medium">${avgSleep.toFixed(1)} horas</span></p>
420
+ <p><i class="fas fa-arrow-down mr-2 text-gray-500"></i>Mínimo: <span class="font-medium">${minSleep} horas</span></p>
421
+ <p><i class="fas fa-arrow-up mr-2 text-gray-500"></i>Máximo: <span class="font-medium">${maxSleep} horas</span></p>
422
+ </div>
423
+ `;
424
+
425
+ // Generate recommendations
426
+ let recommendations = [];
427
+ let status = '';
428
+
429
+ if (avgSleep < 6) {
430
+ status = '<p class="mt-3 font-medium text-red-600"><i class="fas fa-exclamation-triangle mr-2"></i>Necesitas mejorar tu descanso</p>';
431
+ recommendations = [
432
+ "Establece hora fija para dormir",
433
+ "Evita pantallas 1 hora antes de dormir",
434
+ "Consume té de manzanilla por las noches"
435
+ ];
436
+ } else if (avgSleep < 7) {
437
+ status = '<p class="mt-3 font-medium text-yellow-600"><i class="fas fa-thumbs-up mr-2"></i>Buen descanso, pero puedes mejorar</p>';
438
+ recommendations = [
439
+ "Practica meditación antes de dormir",
440
+ "Mantén tu habitación oscura y fresca"
441
+ ];
442
+ } else {
443
+ status = '<p class="mt-3 font-medium text-green-600"><i class="fas fa-star mr-2"></i>Excelente calidad de sueño</p>';
444
+ recommendations = [
445
+ "Continúa con tus buenos hábitos",
446
+ "Considera siestas de 20 minutos si necesitas energía extra"
447
+ ];
448
+ }
449
+
450
+ analysisDiv.innerHTML = analysis + status;
451
+
452
+ // Render recommendations
453
+ let recommendationsHTML = '<div class="space-y-3">';
454
+ recommendations.forEach(rec => {
455
+ recommendationsHTML += `
456
+ <div class="recommendation-item p-3 bg-green-50 rounded-md border-l-4 border-green-500">
457
+ <i class="fas fa-check-circle text-green-500 mr-2"></i> ${rec}
458
+ </div>
459
+ `;
460
+ });
461
+ recommendationsHTML += '</div>';
462
+
463
+ recommendationsDiv.innerHTML = recommendationsHTML;
464
+ }
465
+
466
+ function renderSleepChart() {
467
+ const ctx = document.getElementById('sleepChart').getContext('2d');
468
+
469
+ // Sort data by date
470
+ const sortedData = [...state.sleepData].sort((a, b) => new Date(a.date) - new Date(b.date));
471
+
472
+ const labels = sortedData.map(entry => {
473
+ const date = new Date(entry.date);
474
+ return date.toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
475
+ });
476
+
477
+ const data = sortedData.map(entry => entry.value);
478
+
479
+ // Destroy previous chart if exists
480
+ if (state.chart) {
481
+ state.chart.destroy();
482
+ }
483
+
484
+ state.chart = new Chart(ctx, {
485
+ type: 'line',
486
+ data: {
487
+ labels: labels,
488
+ datasets: [{
489
+ label: 'Horas de sueño',
490
+ data: data,
491
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
492
+ borderColor: 'rgba(59, 130, 246, 1)',
493
+ borderWidth: 2,
494
+ pointBackgroundColor: 'rgba(59, 130, 246, 1)',
495
+ pointRadius: 4,
496
+ tension: 0.3,
497
+ fill: true
498
+ }]
499
+ },
500
+ options: {
501
+ responsive: true,
502
+ maintainAspectRatio: false,
503
+ scales: {
504
+ y: {
505
+ beginAtZero: false,
506
+ min: 4,
507
+ max: 9,
508
+ ticks: {
509
+ stepSize: 1
510
+ },
511
+ grid: {
512
+ color: 'rgba(0, 0, 0, 0.05)'
513
+ }
514
+ },
515
+ x: {
516
+ grid: {
517
+ display: false
518
+ }
519
+ }
520
+ },
521
+ plugins: {
522
+ legend: {
523
+ display: false
524
+ },
525
+ tooltip: {
526
+ callbacks: {
527
+ label: function(context) {
528
+ return `${context.parsed.y} horas`;
529
+ }
530
+ }
531
+ }
532
+ },
533
+ elements: {
534
+ line: {
535
+ borderJoinStyle: 'round'
536
+ }
537
+ }
538
+ }
539
+ });
540
+
541
+ // Add ideal sleep line
542
+ const idealSleepLine = {
543
+ id: 'idealSleep',
544
+ afterDatasetsDraw(chart, args, options) {
545
+ const { ctx, chartArea: { top, bottom, left, right, width, height }, scales: { x, y } } = chart;
546
+
547
+ ctx.save();
548
+ ctx.beginPath();
549
+ ctx.setLineDash([5, 5]);
550
+ ctx.moveTo(left, y.getPixelForValue(7));
551
+ ctx.lineTo(right, y.getPixelForValue(7));
552
+ ctx.lineWidth = 1;
553
+ ctx.strokeStyle = '#10B981';
554
+ ctx.stroke();
555
+ ctx.setLineDash([]);
556
+
557
+ // Draw label
558
+ ctx.font = '12px sans-serif';
559
+ ctx.fillStyle = '#10B981';
560
+ ctx.fillText('Meta ideal (7h)', right - 100, y.getPixelForValue(7) - 5);
561
+
562
+ ctx.restore();
563
+ }
564
+ };
565
+
566
+ state.chart.options.plugins.annotation = idealSleepLine;
567
+ state.chart.update();
568
+ }
569
+
570
+ // Geolocation Tab Functions
571
+ function updateRedZonesList() {
572
+ const zonesList = document.getElementById('redZonesList');
573
+ zonesList.innerHTML = '';
574
+
575
+ state.redZones.forEach(zone => {
576
+ const icon = zone.includes('Hospital') ? 'fa-hospital' :
577
+ zone.includes('Casa') ? 'fa-home' : 'fa-map-marker-alt';
578
+
579
+ zonesList.innerHTML += `
580
+ <div class="red-zone-item flex justify-between items-center p-2 hover:bg-red-50 rounded">
581
+ <span class="text-gray-700"><i class="fas ${icon} mr-2 text-red-500"></i>${zone}</span>
582
+ <button class="delete-zone text-red-500 hover:text-red-700">
583
+ <i class="fas fa-trash-alt"></i>
584
+ </button>
585
+ </div>
586
+ `;
587
+ });
588
+
589
+ // Update counters
590
+ document.getElementById('zonesInfo').textContent = state.redZones.length;
591
+ document.getElementById('zonesCheck').textContent = `${state.redZones.length} zonas sensibles definidas`;
592
+ }
593
+
594
+ function addRedZone() {
595
+ const input = document.getElementById('newZone');
596
+ const zone = input.value.trim();
597
+
598
+ if (zone && !state.redZones.includes(zone)) {
599
+ state.redZones.push(zone);
600
+ input.value = '';
601
+ updateRedZonesList();
602
+ showAlert(`'${zone}' ahora está protegida. Ningún dato de ubicación será almacenado aquí.`, 'success');
603
+ } else if (state.redZones.includes(zone)) {
604
+ showAlert('Esta zona ya está en la lista de zonas sensibles', 'warning');
605
+ }
606
+ }
607
+
608
+ function removeRedZone(zoneName) {
609
+ state.redZones = state.redZones.filter(zone => zone !== zoneName);
610
+ updateRedZonesList();
611
+ showAlert(`Zona '${zoneName}' eliminada de zonas sensibles`, 'info');
612
+ }
613
+
614
+ function registerLocation() {
615
+ const select = document.getElementById('locationSelect');
616
+ const place = select.value;
617
+ const resultDiv = document.getElementById('locationResult');
618
+
619
+ if (state.redZones.includes(place)) {
620
+ const now = new Date().toLocaleString('es-ES');
621
+ resultDiv.innerHTML = `
622
+ <div class="space-y-2">
623
+ <p class="font-semibold text-red-600"><i class="fas fa-ban mr-2"></i>Ubicación sensible detectada: '${place}'</p>
624
+ <p><i class="fas fa-trash-alt mr-2 text-gray-500"></i>Todos los datos de ubicación fueron borrados éticamente</p>
625
+ <p><i class="fas fa-shield-alt mr-2 text-gray-500"></i>Protección activada: ${now}</p>
626
+ </div>
627
+ `;
628
+ } else {
629
+ const id = 'loc_' + Math.random().toString(36).substr(2, 8);
630
+ const now = new Date().toLocaleString('es-ES');
631
+ resultDiv.innerHTML = `
632
+ <div class="space-y-2">
633
+ <p class="font-semibold text-green-600"><i class="fas fa-map-marker-alt mr-2"></i>Ubicación registrada: '${place}'</p>
634
+ <p><i class="fas fa-clock mr-2 text-gray-500"></i>Hora: ${now}</p>
635
+ <p><i class="fas fa-key mr-2 text-gray-500"></i>ID seguro: ${id}</p>
636
+ <p><i class="fas fa-lock mr-2 text-gray-500"></i>Datos almacenados localmente con cifrado</p>
637
+ </div>
638
+ `;
639
+ }
640
+ }
641
+
642
+ // System Tab Functions
643
+ function updateSystemInfo() {
644
+ // Mock system info
645
+ document.getElementById('osInfo').textContent = navigator.platform || 'Unknown';
646
+ document.getElementById('archInfo').textContent = navigator.userAgent.match(/x86_64|Win64|WOW64/) ? '64-bit' : '32-bit';
647
+
648
+ // Update time every second
649
+ function updateTime() {
650
+ const now = new Date();
651
+ document.getElementById('timeInfo').textContent = now.toLocaleString('es-ES');
652
+ }
653
+ updateTime();
654
+ setInterval(updateTime, 1000);
655
+
656
+ document.getElementById('sleepRecords').textContent = state.sleepData.length;
657
+ }
658
+
659
+ function exportData() {
660
+ showAlert(`
661
+ <div class="space-y-2">
662
+ <p><i class="fas fa-lock mr-2"></i>Todos tus datos han sido exportados con cifrado AES-256</p>
663
+ <p><i class="fas fa-fingerprint mr-2"></i>La clave de descifrado es tu huella biométrica</p>
664
+ <p><i class="fas fa-file-alt mr-2"></i>Archivo guardado localmente: /me_ia_ethical_export.bin</p>
665
+ <p class="font-semibold text-red-600 mt-2"><i class="fas fa-exclamation-triangle mr-2"></i>Por principios éticos, este archivo NO puede ser subido a la nube</p>
666
+ </div>
667
+ `, 'info');
668
+ }
669
+
670
+ // Helper Functions
671
+ // Voice Recognition Functions
672
+ function setupVoiceRecognition(buttonId, callback) {
673
+ const button = document.getElementById(buttonId);
674
+ button.addEventListener('click', function() {
675
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
676
+ recognition.lang = 'es-ES';
677
+ recognition.interimResults = false;
678
+
679
+ recognition.onstart = function() {
680
+ showAlert('<i class="fas fa-microphone mr-2"></i>Escuchando... Di las horas de sueño', 'info');
681
+ button.classList.add('animate-pulse');
682
+ };
683
+
684
+ recognition.onresult = function(event) {
685
+ const transcript = event.results[0][0].transcript;
686
+ const hours = parseFloat(transcript.replace(',', '.'));
687
+
688
+ if (!isNaN(hours) && hours >= 0 && hours <= 24) {
689
+ showAlert(`<i class="fas fa-check mr-2"></i>Registrado: ${hours} horas de sueño`, 'success');
690
+ callback(hours);
691
+ } else {
692
+ showAlert(`No entendí las horas. Por favor di un número entre 0 y 24`, 'error');
693
+ }
694
+ };
695
+
696
+ recognition.onerror = function(event) {
697
+ showAlert(`Error de reconocimiento: ${event.error}`, 'error');
698
+ };
699
+
700
+ recognition.onend = function() {
701
+ button.classList.remove('animate-pulse');
702
+ };
703
+
704
+ recognition.start();
705
+ });
706
+ }
707
+
708
+ // Setup voice commands
709
+ setupVoiceRecognition('voiceCommand', function(transcript) {
710
+ showAlert(`<i class="fas fa-comment mr-2"></i>ME IA está procesando: "${transcript}"`, 'info');
711
+
712
+ // Simulate ME IA response after 2 seconds
713
+ setTimeout(() => {
714
+ const responses = [
715
+ `He procesado tu solicitud: "${transcript}"`,
716
+ "Entendido, estoy trabajando en ello",
717
+ "Gracias por tu consulta, la estoy analizando",
718
+ "ME IA + Deepseek R1 están procesando tu petición"
719
+ ];
720
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
721
+ showAlert(`<i class="fas fa-robot mr-2"></i>${randomResponse}`, 'success');
722
+ }, 2000);
723
+ });
724
+
725
+ // Setup sleep hours voice input
726
+ setupVoiceRecognition('voiceSleepHours', function(hours) {
727
+ document.getElementById('sleepHours').value = hours;
728
+ // Auto-save after voice input
729
+ setTimeout(() => {
730
+ document.getElementById('saveSleepData').click();
731
+ }, 500);
732
+ });
733
+
734
+ function showAlert(message, type) {
735
+ const types = {
736
+ success: { bg: 'bg-green-100', text: 'text-green-800', icon: 'fa-check-circle' },
737
+ error: { bg: 'bg-red-100', text: 'text-red-800', icon: 'fa-exclamation-circle' },
738
+ warning: { bg: 'bg-yellow-100', text: 'text-yellow-800', icon: 'fa-exclamation-triangle' },
739
+ info: { bg: 'bg-blue-100', text: 'text-blue-800', icon: 'fa-info-circle' }
740
+ };
741
+
742
+ const alertDiv = document.createElement('div');
743
+ alertDiv.className = `fixed top-4 right-4 p-4 rounded-md shadow-lg ${types[type].bg} ${types[type].text} max-w-md z-50`;
744
+ alertDiv.innerHTML = `
745
+ <div class="flex items-start">
746
+ <i class="fas ${types[type].icon} mt-1 mr-3"></i>
747
+ <div>${message}</div>
748
+ <button class="ml-4 text-gray-500 hover:text-gray-700">
749
+ <i class="fas fa-times"></i>
750
+ </button>
751
+ </div>
752
+ `;
753
+
754
+ document.body.appendChild(alertDiv);
755
+
756
+ // Auto-remove after 5 seconds
757
+ setTimeout(() => {
758
+ alertDiv.classList.add('opacity-0', 'transition-opacity', 'duration-300');
759
+ setTimeout(() => alertDiv.remove(), 300);
760
+ }, 5000);
761
+
762
+ // Close button
763
+ alertDiv.querySelector('button').addEventListener('click', () => {
764
+ alertDiv.remove();
765
+ });
766
+ }
767
+ </script>
768
+ <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=crazychon/me-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
769
+ </html>