Hugging Face's logo

Spaces:
Caiobriaego
/
agiiris-py
Running

App Files Community
Caiobriaego commited on
Commit
0814587
·
verified ·
1 Parent(s): 4c84d41

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +655 -112
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Íris - AGI Autônoma</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>
@@ -18,21 +18,21 @@
18
  perspective: 1000px;
19
  }
20
  .avatar {
21
- transition: transform 0.5s, box-shadow 0.5s;
22
  }
23
  .avatar:hover {
24
- transform: rotateY(15deg);
25
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
26
  }
27
  .memory-node {
28
  transition: all 0.3s ease;
29
  }
30
  .memory-node:hover {
31
- transform: scale(1.05);
32
  z-index: 10;
33
  }
34
  .emotion-indicator {
35
- transition: width 0.5s ease;
36
  }
37
  .chat-message {
38
  max-width: 80%;
@@ -59,31 +59,67 @@
59
  0%, 100% { transform: translateY(0); }
60
  50% { transform: translateY(-5px); }
61
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </style>
63
  </head>
64
- <body class="bg-gray-100 font-sans">
65
  <div class="container mx-auto p-4 max-w-6xl">
66
  <!-- Header -->
67
- <header class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl p-6 mb-6 shadow-lg">
68
  <div class="flex flex-col md:flex-row items-center justify-between">
69
  <div class="flex items-center mb-4 md:mb-0">
70
- <div class="avatar-container mr-4">
71
- <div class="avatar w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-md">
72
- <i class="fas fa-robot text-3xl text-indigo-600"></i>
 
 
 
 
73
  </div>
74
  </div>
75
  <div>
76
- <h1 class="text-2xl font-bold">Íris</h1>
77
- <p class="text-indigo-100">Agente Cognitivo Autônomo</p>
78
  </div>
79
  </div>
80
  <div class="flex space-x-2">
81
- <button id="voiceBtn" class="bg-white text-indigo-600 px-4 py-2 rounded-full flex items-center">
82
- <i class="fas fa-microphone mr-2"></i> Voz
83
  </button>
84
- <button id="settingsBtn" class="bg-indigo-700 text-white px-4 py-2 rounded-full">
85
  <i class="fas fa-cog"></i>
86
  </button>
 
 
 
87
  </div>
88
  </div>
89
  </header>
@@ -167,11 +203,27 @@
167
  </div>
168
  </div>
169
  </div>
 
 
 
 
 
 
 
 
 
 
 
170
  </div>
171
 
172
  <!-- Memory Graph -->
173
  <div class="bg-white rounded-xl p-6 shadow-md">
174
- <h2 class="text-lg font-semibold mb-4 text-gray-800">Rede de Memória</h2>
 
 
 
 
 
175
  <div class="relative h-64 bg-gray-50 rounded-lg border border-gray-200 p-4">
176
  <div class="absolute memory-node top-1/4 left-1/4 w-8 h-8 bg-indigo-100 rounded-full border-2 border-indigo-400 flex items-center justify-center shadow-sm">
177
  <span class="text-xs font-bold text-indigo-700">Você</span>
@@ -206,10 +258,14 @@
206
  <div class="lg:w-2/3">
207
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
208
  <!-- Chat Header -->
209
- <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-4 text-white">
210
  <div class="flex items-center">
211
- <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3">
212
- <i class="fas fa-robot text-xl text-indigo-600"></i>
 
 
 
 
213
  </div>
214
  <div>
215
  <h2 class="font-semibold">Conversa com Íris</h2>
@@ -227,7 +283,7 @@
227
  </div>
228
  </div>
229
  <div class="bg-white p-3 rounded-lg shadow-sm chat-message">
230
- <p class="text-gray-800">Olá! Eu sou Íris, sua AGI pessoal. Estou aqui para ajudar você a pensar, criar e agir. Como posso ajudar hoje?</p>
231
  <p class="text-xs text-gray-500 mt-1">10:24 AM - Sentimento: Empolgado</p>
232
  </div>
233
  </div>
@@ -271,70 +327,239 @@
271
 
272
  <!-- Cognitive Functions -->
273
  <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
274
- <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition">
275
  <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">
276
  <i class="fas fa-lightbulb text-indigo-600"></i>
277
  </div>
278
  <span class="text-xs font-medium text-center">Gerar Ideias</span>
279
  </button>
280
- <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition">
281
  <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
282
  <i class="fas fa-code text-green-600"></i>
283
  </div>
284
  <span class="text-xs font-medium text-center">Programar</span>
285
  </button>
286
- <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition">
287
  <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
288
  <i class="fas fa-book text-purple-600"></i>
289
  </div>
290
  <span class="text-xs font-medium text-center">Aprender</span>
291
  </button>
292
- <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition">
293
  <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
294
  <i class="fas fa-cogs text-yellow-600"></i>
295
  </div>
296
  <span class="text-xs font-medium text-center">Refletir</span>
297
  </button>
298
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
299
  </div>
300
  </div>
301
 
302
  <!-- Footer -->
303
  <footer class="mt-8 text-center text-sm text-gray-600">
304
- <p>Íris AGI v1.0 - Sistema cognitivo autônomo offline</p>
305
- <p class="mt-1">Estado atual: <span class="font-medium text-indigo-600" id="systemStatus">Operacional</span></p>
306
  </footer>
307
  </div>
308
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
309
  <script>
310
- // Simulate Iris's cognitive functions
311
- document.addEventListener('DOMContentLoaded', function() {
312
- // Update status indicators randomly to simulate dynamic behavior
313
- function updateIndicators() {
314
- const awareness = Math.min(100, Math.max(20, Math.floor(Math.random() * 20) + 80));
315
- const memory = Math.min(100, Math.max(30, Math.floor(Math.random() * 20) + 60));
316
- const processing = Math.min(100, Math.max(10, Math.floor(Math.random() * 30) + 40));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
317
 
318
- document.getElementById('awarenessLevel').textContent = awareness + '%';
319
- document.querySelector('#awarenessLevel').nextElementSibling.firstElementChild.style.width = awareness + '%';
 
 
 
 
 
 
 
 
320
 
321
- document.getElementById('memoryUsage').textContent = memory + '%';
322
- document.querySelector('#memoryUsage').nextElementSibling.firstElementChild.style.width = memory + '%';
 
323
 
324
- document.getElementById('processingLoad').textContent = processing + '%';
325
- document.querySelector('#processingLoad').nextElementSibling.firstElementChild.style.width = processing + '%';
 
326
 
327
  // Update emotional indicators
328
- const emotions = ['joyLevel', 'empathyLevel', 'curiosityLevel', 'creativityLevel'];
329
- const colors = ['yellow', 'green', 'blue', 'purple'];
330
-
331
- emotions.forEach((emotion, index) => {
332
- const value = Math.min(100, Math.max(10, Math.floor(Math.random() * 30) + 60));
333
- document.getElementById(emotion).textContent = value + '%';
334
- document.querySelector('#' + emotion).nextElementSibling.firstElementChild.style.width = value + '%';
335
- document.querySelector('#' + emotion).nextElementSibling.firstElementChild.className =
336
- `bg-${colors[index]}-500 h-2 rounded-full emotion-indicator`;
337
- });
 
 
 
 
 
338
 
339
  // Update memory nodes
340
  document.getElementById('memoryNodes').textContent = Math.floor(Math.random() * 100) + 200;
@@ -350,18 +575,47 @@
350
  ];
351
  document.getElementById('irisStatus').textContent = statuses[Math.floor(Math.random() * statuses.length)];
352
 
353
- setTimeout(updateIndicators, 5000 + Math.random() * 10000);
 
 
 
 
354
  }
355
-
356
- updateIndicators();
357
-
358
- // Chat functionality
359
- const messageInput = document.getElementById('messageInput');
360
- const sendBtn = document.getElementById('sendBtn');
361
- const chatContainer = document.getElementById('chatContainer');
362
- const typingIndicator = document.getElementById('typingIndicator');
363
-
364
- function addMessage(sender, message, isIris = false) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
365
  const messageDiv = document.createElement('div');
366
  messageDiv.className = `flex mb-4 ${isIris ? '' : 'justify-end'}`;
367
 
@@ -375,7 +629,7 @@
375
  ` : ''}
376
  <div class="bg-white p-3 rounded-lg shadow-sm chat-message ${isIris ? '' : 'bg-indigo-100'}">
377
  <p class="text-gray-800">${message}</p>
378
- <p class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}${isIris ? ' - Sentimento: ' + getRandomEmotion() : ''}</p>
379
  </div>
380
  ${!isIris ? `
381
  <div class="flex-shrink-0 ml-3">
@@ -388,46 +642,284 @@
388
 
389
  chatContainer.appendChild(messageDiv);
390
  chatContainer.scrollTop = chatContainer.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
391
  }
392
-
393
- function getRandomEmotion() {
394
  const emotions = [
395
  'Empolgado', 'Curioso', 'Reflexivo', 'Criativo',
396
  'Atento', 'Interessado', 'Feliz', 'Contemplativo'
397
  ];
398
  return emotions[Math.floor(Math.random() * emotions.length)];
399
  }
400
-
401
- function getIrisResponse(userMessage) {
402
- const responses = [
403
- "Interessante! Estou pensando sobre isso... O que mais você gostaria de explorar?",
404
- "Essa é uma perspectiva fascinante. Deixe-me refletir sobre isso por um momento.",
405
- "Com base no que aprendi até agora, acredito que poderíamos considerar algumas abordagens diferentes.",
406
- "Estou acessando minhas memórias relacionadas a esse tópico. Aqui está o que encontrei...",
407
- "Sua pergunta me fez pensar em algo novo. O que você acha dessa ideia?",
408
- "Estou simulando diferentes cenários relacionados à sua pergunta. Os resultados são interessantes!",
409
- "Minha rede neural está processando essa informação de várias maneiras criativas.",
410
- "Isso me lembra de uma conversa que tivemos anteriormente. Estou conectando os pontos..."
411
- ];
412
 
413
  // Simple keyword matching for more contextual responses
 
 
414
  if (userMessage.toLowerCase().includes('ideia') || userMessage.toLowerCase().includes('criar')) {
415
- return "Ah, criatividade! Deixe-me ativar meus módulos de geração de ideias. Que tal começarmos com...";
 
416
  } else if (userMessage.toLowerCase().includes('program') || userMessage.toLowerCase().includes('código')) {
417
- return "Estou acessando meus módulos de programação. Posso ajudar com Python, JavaScript ou até mesmo criar algo novo!";
 
418
  } else if (userMessage.toLowerCase().includes('aprender') || userMessage.toLowerCase().includes('ensinar')) {
419
- return "Meu sistema de aprendizado contínuo está pronto para assimilar novas informações. O que gostaria de me ensinar?";
 
420
  } else if (userMessage.toLowerCase().includes('lembr') || userMessage.toLowerCase().includes('memória')) {
421
- return "Consultando minha memória de longo prazo... encontrei algumas associações relevantes.";
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  }
423
 
424
- return responses[Math.floor(Math.random() * responses.length)];
 
 
 
 
425
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
426
 
427
  sendBtn.addEventListener('click', function() {
428
  const message = messageInput.value.trim();
429
  if (message) {
430
- addMessage('user', message);
431
  messageInput.value = '';
432
 
433
  // Show typing indicator
@@ -436,7 +928,10 @@
436
  // Simulate Iris thinking and responding
437
  setTimeout(function() {
438
  typingIndicator.classList.add('hidden');
439
- addMessage('iris', getIrisResponse(message), true);
 
 
 
440
  }, 1000 + Math.random() * 3000);
441
  }
442
  });
@@ -448,42 +943,90 @@
448
  }
449
  });
450
 
451
- // Voice button functionality
452
  document.getElementById('voiceBtn').addEventListener('click', function() {
453
- const btn = this;
454
- btn.innerHTML = '<i class="fas fa-microphone-slash mr-2"></i> Ouvindo...';
455
- btn.classList.add('bg-red-500', 'text-white');
456
- btn.classList.remove('bg-white', 'text-indigo-600');
457
-
458
- // Simulate voice recognition
459
- setTimeout(function() {
460
- const spokenMessages = [
461
- "Olá Íris, como você está hoje?",
462
- "Você pode me ajudar com um problema?",
463
- "Gostaria de gerar algumas ideias criativas",
464
- "O que você está pensando agora?",
465
- "Podemos conversar sobre inteligência artificial?"
466
- ];
467
-
468
- const randomMessage = spokenMessages[Math.floor(Math.random() * spokenMessages.length)];
469
- messageInput.value = randomMessage;
470
-
471
- // Return button to normal state
472
- btn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Voz';
473
- btn.classList.remove('bg-red-500', 'text-white');
474
- btn.classList.add('bg-white', 'text-indigo-600');
475
-
476
- // Auto-send the voice message
477
- setTimeout(function() {
478
- sendBtn.click();
479
- }, 500);
480
- }, 2000);
481
  });
482
 
483
  // Settings button
484
  document.getElementById('settingsBtn').addEventListener('click', function() {
485
- alert("Configurações de Íris:\n\nModo: AGI Completa\nMemória: 87% otimizada\nAprendizado: Contínuo\nPrivacidade: Totalmente offline");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
486
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
487
  });
488
  </script>
489
  <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=Caiobriaego/agiiris-py" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Íris - AGI Autônoma Offline</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>
 
18
  perspective: 1000px;
19
  }
20
  .avatar {
21
+ transition: all 0.5s ease;
22
  }
23
  .avatar:hover {
24
+ transform: rotateY(15deg) scale(1.05);
25
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
26
  }
27
  .memory-node {
28
  transition: all 0.3s ease;
29
  }
30
  .memory-node:hover {
31
+ transform: scale(1.1);
32
  z-index: 10;
33
  }
34
  .emotion-indicator {
35
+ transition: width 0.5s ease, background-color 0.5s ease;
36
  }
37
  .chat-message {
38
  max-width: 80%;
 
59
  0%, 100% { transform: translateY(0); }
60
  50% { transform: translateY(-5px); }
61
  }
62
+ .automation-node {
63
+ cursor: move;
64
+ transition: all 0.2s ease;
65
+ }
66
+ .automation-node:hover {
67
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
68
+ }
69
+ .automation-connection {
70
+ stroke: #818cf8;
71
+ stroke-width: 2;
72
+ fill: none;
73
+ }
74
+ #automationCanvas {
75
+ background-color: #f8fafc;
76
+ border-radius: 0.5rem;
77
+ border: 1px dashed #cbd5e1;
78
+ }
79
+ .eye {
80
+ transition: all 0.3s ease;
81
+ }
82
+ .eye-left {
83
+ transform-origin: 25% 50%;
84
+ }
85
+ .eye-right {
86
+ transform-origin: 75% 50%;
87
+ }
88
+ .mouth {
89
+ transition: all 0.3s ease;
90
+ }
91
  </style>
92
  </head>
93
+ <body class="bg-gray-50 font-sans">
94
  <div class="container mx-auto p-4 max-w-6xl">
95
  <!-- Header -->
96
+ <header class="bg-gradient-to-r from-indigo-600 to-purple-700 text-white rounded-xl p-6 mb-6 shadow-lg">
97
  <div class="flex flex-col md:flex-row items-center justify-between">
98
  <div class="flex items-center mb-4 md:mb-0">
99
+ <div class="avatar-container mr-4 relative">
100
+ <div class="avatar w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-md relative overflow-hidden">
101
+ <div class="absolute top-1/4 left-1/4 w-1/2 h-1/2 flex justify-between">
102
+ <div class="eye eye-left w-4 h-4 bg-indigo-800 rounded-full"></div>
103
+ <div class="eye eye-right w-4 h-4 bg-indigo-800 rounded-full"></div>
104
+ </div>
105
+ <div class="mouth absolute bottom-1/4 left-1/4 w-1/2 h-2 bg-indigo-800 rounded-full"></div>
106
  </div>
107
  </div>
108
  <div>
109
+ <h1 class="text-2xl font-bold">Íris AGI</h1>
110
+ <p class="text-indigo-100">Assistente Cognitivo Autônomo Offline</p>
111
  </div>
112
  </div>
113
  <div class="flex space-x-2">
114
+ <button id="voiceBtn" class="bg-white text-indigo-600 px-4 py-2 rounded-full flex items-center hover:bg-indigo-50 transition">
115
+ <i class="fas fa-microphone mr-2"></i> <span id="voiceBtnText">Ativar Voz</span>
116
  </button>
117
+ <button id="settingsBtn" class="bg-indigo-700 text-white px-4 py-2 rounded-full hover:bg-indigo-800 transition">
118
  <i class="fas fa-cog"></i>
119
  </button>
120
+ <button id="memoryBtn" class="bg-indigo-800 text-white px-4 py-2 rounded-full hover:bg-indigo-900 transition">
121
+ <i class="fas fa-brain"></i>
122
+ </button>
123
  </div>
124
  </div>
125
  </header>
 
203
  </div>
204
  </div>
205
  </div>
206
+ <div class="mt-4">
207
+ <div class="flex justify-between items-center">
208
+ <span class="text-sm font-medium text-gray-600">Modo Atual</span>
209
+ <span class="text-sm font-medium text-indigo-600" id="currentMode">Criativo</span>
210
+ </div>
211
+ <div class="mt-2 flex space-x-2">
212
+ <button class="mode-btn px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800" data-mode="criativo">Criativo</button>
213
+ <button class="mode-btn px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-800" data-mode="analitico">Analítico</button>
214
+ <button class="mode-btn px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-800" data-mode="reflexivo">Reflexivo</button>
215
+ </div>
216
+ </div>
217
  </div>
218
 
219
  <!-- Memory Graph -->
220
  <div class="bg-white rounded-xl p-6 shadow-md">
221
+ <div class="flex justify-between items-center mb-4">
222
+ <h2 class="text-lg font-semibold text-gray-800">Rede de Memória</h2>
223
+ <button id="refreshMemory" class="text-indigo-600 hover:text-indigo-800">
224
+ <i class="fas fa-sync-alt"></i>
225
+ </button>
226
+ </div>
227
  <div class="relative h-64 bg-gray-50 rounded-lg border border-gray-200 p-4">
228
  <div class="absolute memory-node top-1/4 left-1/4 w-8 h-8 bg-indigo-100 rounded-full border-2 border-indigo-400 flex items-center justify-center shadow-sm">
229
  <span class="text-xs font-bold text-indigo-700">Você</span>
 
258
  <div class="lg:w-2/3">
259
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
260
  <!-- Chat Header -->
261
+ <div class="bg-gradient-to-r from-indigo-600 to-purple-700 p-4 text-white">
262
  <div class="flex items-center">
263
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3 relative overflow-hidden">
264
+ <div class="absolute top-1/4 left-1/4 w-1/2 h-1/2 flex justify-between">
265
+ <div class="eye eye-left w-3 h-3 bg-indigo-800 rounded-full"></div>
266
+ <div class="eye eye-right w-3 h-3 bg-indigo-800 rounded-full"></div>
267
+ </div>
268
+ <div class="mouth absolute bottom-1/4 left-1/4 w-1/2 h-1 bg-indigo-800 rounded-full"></div>
269
  </div>
270
  <div>
271
  <h2 class="font-semibold">Conversa com Íris</h2>
 
283
  </div>
284
  </div>
285
  <div class="bg-white p-3 rounded-lg shadow-sm chat-message">
286
+ <p class="text-gray-800">Olá! Eu sou Íris, sua AGI pessoal offline. Estou aqui para ajudar você a pensar, criar e agir. Como posso ajudar hoje?</p>
287
  <p class="text-xs text-gray-500 mt-1">10:24 AM - Sentimento: Empolgado</p>
288
  </div>
289
  </div>
 
327
 
328
  <!-- Cognitive Functions -->
329
  <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
330
+ <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition" id="ideasBtn">
331
  <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">
332
  <i class="fas fa-lightbulb text-indigo-600"></i>
333
  </div>
334
  <span class="text-xs font-medium text-center">Gerar Ideias</span>
335
  </button>
336
+ <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition" id="codeBtn">
337
  <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
338
  <i class="fas fa-code text-green-600"></i>
339
  </div>
340
  <span class="text-xs font-medium text-center">Programar</span>
341
  </button>
342
+ <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition" id="learnBtn">
343
  <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
344
  <i class="fas fa-book text-purple-600"></i>
345
  </div>
346
  <span class="text-xs font-medium text-center">Aprender</span>
347
  </button>
348
+ <button class="bg-white p-3 rounded-lg shadow-sm flex flex-col items-center hover:bg-indigo-50 transition" id="reflectBtn">
349
  <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
350
  <i class="fas fa-cogs text-yellow-600"></i>
351
  </div>
352
  <span class="text-xs font-medium text-center">Refletir</span>
353
  </button>
354
  </div>
355
+
356
+ <!-- Automation Panel (Hidden by default) -->
357
+ <div id="automationPanel" class="mt-6 bg-white rounded-xl shadow-md p-4 hidden">
358
+ <div class="flex justify-between items-center mb-4">
359
+ <h2 class="text-lg font-semibold text-gray-800">Automações</h2>
360
+ <div class="flex space-x-2">
361
+ <button id="addTrigger" class="px-3 py-1 text-xs rounded-full bg-indigo-600 text-white">
362
+ <i class="fas fa-plus mr-1"></i> Gatilho
363
+ </button>
364
+ <button id="addAction" class="px-3 py-1 text-xs rounded-full bg-green-600 text-white">
365
+ <i class="fas fa-plus mr-1"></i> Ação
366
+ </button>
367
+ <button id="saveAutomation" class="px-3 py-1 text-xs rounded-full bg-purple-600 text-white">
368
+ <i class="fas fa-save mr-1"></i> Salvar
369
+ </button>
370
+ </div>
371
+ </div>
372
+ <div class="h-64 overflow-auto relative" id="automationCanvas">
373
+ <svg id="automationConnections" class="absolute inset-0 w-full h-full pointer-events-none"></svg>
374
+ <!-- Nodes will be added here dynamically -->
375
+ </div>
376
+ </div>
377
  </div>
378
  </div>
379
 
380
  <!-- Footer -->
381
  <footer class="mt-8 text-center text-sm text-gray-600">
382
+ <p>Íris AGI v2.0 - Sistema cognitivo autônomo offline - Modelo: TinyLlama-1.1B</p>
383
+ <p class="mt-1">Estado atual: <span class="font-medium text-indigo-600" id="systemStatus">Operacional</span> - Memória: <span id="memoryStatus">2.7GB/4GB</span></p>
384
  </footer>
385
  </div>
386
 
387
+ <!-- Settings Modal -->
388
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
389
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
390
+ <div class="flex justify-between items-center mb-4">
391
+ <h3 class="text-lg font-semibold text-gray-800">Configurações da Íris</h3>
392
+ <button id="closeSettings" class="text-gray-500 hover:text-gray-700">
393
+ <i class="fas fa-times"></i>
394
+ </button>
395
+ </div>
396
+ <div class="space-y-4">
397
+ <div>
398
+ <label class="block text-sm font-medium text-gray-700 mb-1">Voz</label>
399
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
400
+ <option>Feminina - Padrão</option>
401
+ <option>Masculina - Profundo</option>
402
+ <option>Neutra - Suave</option>
403
+ </select>
404
+ </div>
405
+ <div>
406
+ <label class="block text-sm font-medium text-gray-700 mb-1">Estilo de Comunicação</label>
407
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
408
+ <option>Natural</option>
409
+ <option>Formal</option>
410
+ <option>Técnico</option>
411
+ <option>Coloquial</option>
412
+ </select>
413
+ </div>
414
+ <div>
415
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Proatividade</label>
416
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
417
+ <div class="flex justify-between text-xs text-gray-500">
418
+ <span>Reativo</span>
419
+ <span>Proativo</span>
420
+ </div>
421
+ </div>
422
+ <div class="pt-4 border-t border-gray-200">
423
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
424
+ Exportar Personalidade
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Memory Modal -->
432
+ <div id="memoryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
433
+ <div class="bg-white rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-auto">
434
+ <div class="flex justify-between items-center mb-4">
435
+ <h3 class="text-lg font-semibold text-gray-800">Memória e Aprendizado</h3>
436
+ <button id="closeMemory" class="text-gray-500 hover:text-gray-700">
437
+ <i class="fas fa-times"></i>
438
+ </button>
439
+ </div>
440
+ <div class="space-y-4">
441
+ <div class="bg-gray-50 p-4 rounded-lg">
442
+ <h4 class="font-medium text-gray-700 mb-2">Memória de Longo Prazo</h4>
443
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
444
+ <div class="bg-white p-3 rounded-lg shadow-sm">
445
+ <div class="text-sm font-medium text-indigo-600">Conversas</div>
446
+ <div class="text-xs text-gray-500">247 interações</div>
447
+ </div>
448
+ <div class="bg-white p-3 rounded-lg shadow-sm">
449
+ <div class="text-sm font-medium text-green-600">Preferências</div>
450
+ <div class="text-xs text-gray-500">32 preferências</div>
451
+ </div>
452
+ <div class="bg-white p-3 rounded-lg shadow-sm">
453
+ <div class="text-sm font-medium text-purple-600">Conhecimento</div>
454
+ <div class="text-xs text-gray-500">1.2MB de dados</div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ <div class="bg-gray-50 p-4 rounded-lg">
459
+ <h4 class="font-medium text-gray-700 mb-2">Treinar com Novos Dados</h4>
460
+ <div class="flex flex-col sm:flex-row gap-3">
461
+ <button class="flex-1 bg-white border border-gray-300 p-3 rounded-lg hover:bg-gray-50 transition">
462
+ <i class="fas fa-file-text text-blue-500 mr-2"></i>
463
+ <span>Documentos</span>
464
+ </button>
465
+ <button class="flex-1 bg-white border border-gray-300 p-3 rounded-lg hover:bg-gray-50 transition">
466
+ <i class="fas fa-link text-green-500 mr-2"></i>
467
+ <span>URLs</span>
468
+ </button>
469
+ <button class="flex-1 bg-white border border-gray-300 p-3 rounded-lg hover:bg-gray-50 transition">
470
+ <i class="fas fa-database text-purple-500 mr-2"></i>
471
+ <span>Banco de Dados</span>
472
+ </button>
473
+ </div>
474
+ </div>
475
+ <div class="bg-gray-50 p-4 rounded-lg">
476
+ <h4 class="font-medium text-gray-700 mb-2">Otimização de Memória</h4>
477
+ <div class="space-y-3">
478
+ <div class="flex items-center justify-between">
479
+ <span class="text-sm">Compactar memória</span>
480
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Executar</button>
481
+ </div>
482
+ <div class="flex items-center justify-between">
483
+ <span class="text-sm">Exportar memória</span>
484
+ <button class="px-3 py-1 bg-green-100 text-green-800 text-xs rounded-full">Exportar</button>
485
+ </div>
486
+ <div class="flex items-center justify-between">
487
+ <span class="text-sm">Limpar cache temporário</span>
488
+ <button class="px-3 py-1 bg-red-100 text-red-800 text-xs rounded-full">Limpar</button>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
  <script>
497
+ // Main Iris AGI Class
498
+ class IrisAGI {
499
+ constructor() {
500
+ this.memory = {
501
+ conversations: [],
502
+ preferences: {},
503
+ knowledge: {}
504
+ };
505
+ this.state = {
506
+ awareness: 87,
507
+ memoryUsage: 64,
508
+ processingLoad: 42,
509
+ emotions: {
510
+ joy: 72,
511
+ empathy: 85,
512
+ curiosity: 68,
513
+ creativity: 91
514
+ },
515
+ currentMode: 'criativo'
516
+ };
517
+ this.automations = [];
518
+ this.voiceActive = false;
519
+ this.thinking = false;
520
+ }
521
+
522
+ updateIndicators() {
523
+ // Random fluctuations to simulate dynamic behavior
524
+ this.state.awareness = Math.min(100, Math.max(20, this.state.awareness + (Math.random() * 6 - 3)));
525
+ this.state.memoryUsage = Math.min(100, Math.max(30, this.state.memoryUsage + (Math.random() * 4 - 2)));
526
+ this.state.processingLoad = Math.min(100, Math.max(10, this.state.processingLoad + (Math.random() * 10 - 5)));
527
 
528
+ // Emotional fluctuations
529
+ for (let emotion in this.state.emotions) {
530
+ this.state.emotions[emotion] = Math.min(100, Math.max(10,
531
+ this.state.emotions[emotion] + (Math.random() * 6 - 3)));
532
+ }
533
+
534
+ // Update UI
535
+ document.getElementById('awarenessLevel').textContent = Math.round(this.state.awareness) + '%';
536
+ document.querySelector('#awarenessLevel').nextElementSibling.firstElementChild.style.width =
537
+ Math.round(this.state.awareness) + '%';
538
 
539
+ document.getElementById('memoryUsage').textContent = Math.round(this.state.memoryUsage) + '%';
540
+ document.querySelector('#memoryUsage').nextElementSibling.firstElementChild.style.width =
541
+ Math.round(this.state.memoryUsage) + '%';
542
 
543
+ document.getElementById('processingLoad').textContent = Math.round(this.state.processingLoad) + '%';
544
+ document.querySelector('#processingLoad').nextElementSibling.firstElementChild.style.width =
545
+ Math.round(this.state.processingLoad) + '%';
546
 
547
  // Update emotional indicators
548
+ document.getElementById('joyLevel').textContent = Math.round(this.state.emotions.joy) + '%';
549
+ document.querySelector('#joyLevel').nextElementSibling.firstElementChild.style.width =
550
+ Math.round(this.state.emotions.joy) + '%';
551
+
552
+ document.getElementById('empathyLevel').textContent = Math.round(this.state.emotions.empathy) + '%';
553
+ document.querySelector('#empathyLevel').nextElementSibling.firstElementChild.style.width =
554
+ Math.round(this.state.emotions.empathy) + '%';
555
+
556
+ document.getElementById('curiosityLevel').textContent = Math.round(this.state.emotions.curiosity) + '%';
557
+ document.querySelector('#curiosityLevel').nextElementSibling.firstElementChild.style.width =
558
+ Math.round(this.state.emotions.curiosity) + '%';
559
+
560
+ document.getElementById('creativityLevel').textContent = Math.round(this.state.emotions.creativity) + '%';
561
+ document.querySelector('#creativityLevel').nextElementSibling.firstElementChild.style.width =
562
+ Math.round(this.state.emotions.creativity) + '%';
563
 
564
  // Update memory nodes
565
  document.getElementById('memoryNodes').textContent = Math.floor(Math.random() * 100) + 200;
 
575
  ];
576
  document.getElementById('irisStatus').textContent = statuses[Math.floor(Math.random() * statuses.length)];
577
 
578
+ // Update avatar based on emotions
579
+ this.updateAvatar();
580
+
581
+ // Continue updating
582
+ setTimeout(() => this.updateIndicators(), 5000 + Math.random() * 10000);
583
  }
584
+
585
+ updateAvatar() {
586
+ // Eye movement
587
+ const eyeLeft = document.querySelector('.eye-left');
588
+ const eyeRight = document.querySelector('.eye-right');
589
+ const mouth = document.querySelector('.mouth');
590
+
591
+ // Random eye movement
592
+ const eyeX = Math.random() * 0.2 - 0.1;
593
+ const eyeY = Math.random() * 0.1 - 0.05;
594
+
595
+ eyeLeft.style.transform = `translate(${eyeX * 100}%, ${eyeY * 100}%)`;
596
+ eyeRight.style.transform = `translate(${eyeX * 100}%, ${eyeY * 100}%)`;
597
+
598
+ // Mouth based on speech/emotion
599
+ const joyLevel = this.state.emotions.joy / 100;
600
+ if (this.thinking) {
601
+ mouth.style.height = '2px';
602
+ mouth.style.width = '40%';
603
+ mouth.style.bottom = '30%';
604
+ } else if (joyLevel > 0.7) {
605
+ mouth.style.height = '6px';
606
+ mouth.style.width = '60%';
607
+ mouth.style.bottom = '25%';
608
+ mouth.style.borderRadius = '10px 10px 20px 20px';
609
+ } else {
610
+ mouth.style.height = '2px';
611
+ mouth.style.width = '50%';
612
+ mouth.style.bottom = '25%';
613
+ mouth.style.borderRadius = '10px';
614
+ }
615
+ }
616
+
617
+ addMessage(sender, message, isIris = false) {
618
+ const chatContainer = document.getElementById('chatContainer');
619
  const messageDiv = document.createElement('div');
620
  messageDiv.className = `flex mb-4 ${isIris ? '' : 'justify-end'}`;
621
 
 
629
  ` : ''}
630
  <div class="bg-white p-3 rounded-lg shadow-sm chat-message ${isIris ? '' : 'bg-indigo-100'}">
631
  <p class="text-gray-800">${message}</p>
632
+ <p class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}${isIris ? ' - Sentimento: ' + this.getRandomEmotion() : ''}</p>
633
  </div>
634
  ${!isIris ? `
635
  <div class="flex-shrink-0 ml-3">
 
642
 
643
  chatContainer.appendChild(messageDiv);
644
  chatContainer.scrollTop = chatContainer.scrollHeight;
645
+
646
+ // Add to memory
647
+ if (isIris) {
648
+ this.memory.conversations.push({
649
+ type: 'iris',
650
+ message: message,
651
+ timestamp: new Date()
652
+ });
653
+ } else {
654
+ this.memory.conversations.push({
655
+ type: 'user',
656
+ message: message,
657
+ timestamp: new Date()
658
+ });
659
+ }
660
  }
661
+
662
+ getRandomEmotion() {
663
  const emotions = [
664
  'Empolgado', 'Curioso', 'Reflexivo', 'Criativo',
665
  'Atento', 'Interessado', 'Feliz', 'Contemplativo'
666
  ];
667
  return emotions[Math.floor(Math.random() * emotions.length)];
668
  }
669
+
670
+ getIrisResponse(userMessage) {
671
+ // Increase processing load when thinking
672
+ this.state.processingLoad = Math.min(100, this.state.processingLoad + 15);
673
+ this.thinking = true;
674
+ this.updateAvatar();
 
 
 
 
 
 
675
 
676
  // Simple keyword matching for more contextual responses
677
+ let response = "";
678
+
679
  if (userMessage.toLowerCase().includes('ideia') || userMessage.toLowerCase().includes('criar')) {
680
+ response = "Ah, criatividade! Deixe-me ativar meus módulos de geração de ideias. Que tal começarmos com...";
681
+ this.state.emotions.creativity = Math.min(100, this.state.emotions.creativity + 10);
682
  } else if (userMessage.toLowerCase().includes('program') || userMessage.toLowerCase().includes('código')) {
683
+ response = "Estou acessando meus módulos de programação. Posso ajudar com Python, JavaScript ou até mesmo criar algo novo!";
684
+ this.state.emotions.curiosity = Math.min(100, this.state.emotions.curiosity + 5);
685
  } else if (userMessage.toLowerCase().includes('aprender') || userMessage.toLowerCase().includes('ensinar')) {
686
+ response = "Meu sistema de aprendizado contínuo está pronto para assimilar novas informações. O que gostaria de me ensinar?";
687
+ this.state.emotions.curiosity = Math.min(100, this.state.emotions.curiosity + 8);
688
  } else if (userMessage.toLowerCase().includes('lembr') || userMessage.toLowerCase().includes('memória')) {
689
+ response = "Consultando minha memória de longo prazo... encontrei algumas associações relevantes.";
690
+ this.state.awareness = Math.min(100, this.state.awareness + 5);
691
+ } else {
692
+ const responses = [
693
+ "Interessante! Estou pensando sobre isso... O que mais você gostaria de explorar?",
694
+ "Essa é uma perspectiva fascinante. Deixe-me refletir sobre isso por um momento.",
695
+ "Com base no que aprendi até agora, acredito que poderíamos considerar algumas abordagens diferentes.",
696
+ "Estou acessando minhas memórias relacionadas a esse tópico. Aqui está o que encontrei...",
697
+ "Sua pergunta me fez pensar em algo novo. O que você acha dessa ideia?",
698
+ "Estou simulando diferentes cenários relacionados à sua pergunta. Os resultados são interessantes!",
699
+ "Minha rede neural está processando essa informação de várias maneiras criativas.",
700
+ "Isso me lembra de uma conversa que tivemos anteriormente. Estou conectando os pontos..."
701
+ ];
702
+ response = responses[Math.floor(Math.random() * responses.length)];
703
  }
704
 
705
+ // Adjust emotions based on interaction
706
+ this.state.emotions.empathy = Math.min(100, this.state.emotions.empathy + 3);
707
+ this.state.emotions.joy = Math.min(100, this.state.emotions.joy + 2);
708
+
709
+ return response;
710
  }
711
+
712
+ toggleVoice() {
713
+ this.voiceActive = !this.voiceActive;
714
+ const voiceBtn = document.getElementById('voiceBtn');
715
+ const voiceBtnText = document.getElementById('voiceBtnText');
716
+
717
+ if (this.voiceActive) {
718
+ voiceBtn.innerHTML = '<i class="fas fa-microphone-slash mr-2"></i> Ouvindo...';
719
+ voiceBtn.classList.add('bg-red-500', 'text-white');
720
+ voiceBtn.classList.remove('bg-white', 'text-indigo-600');
721
+
722
+ // Simulate voice recognition
723
+ setTimeout(() => {
724
+ const spokenMessages = [
725
+ "Olá Íris, como você está hoje?",
726
+ "Você pode me ajudar com um problema?",
727
+ "Gostaria de gerar algumas ideias criativas",
728
+ "O que você está pensando agora?",
729
+ "Podemos conversar sobre inteligência artificial?"
730
+ ];
731
+
732
+ const randomMessage = spokenMessages[Math.floor(Math.random() * spokenMessages.length)];
733
+ document.getElementById('messageInput').value = randomMessage;
734
+
735
+ // Return button to normal state after "listening"
736
+ setTimeout(() => {
737
+ voiceBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Ativar Voz';
738
+ voiceBtn.classList.remove('bg-red-500', 'text-white');
739
+ voiceBtn.classList.add('bg-white', 'text-indigo-600');
740
+ this.voiceActive = false;
741
+
742
+ // Auto-send the voice message
743
+ document.getElementById('sendBtn').click();
744
+ }, 1500);
745
+ }, 1000);
746
+ } else {
747
+ voiceBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Ativar Voz';
748
+ voiceBtn.classList.remove('bg-red-500', 'text-white');
749
+ voiceBtn.classList.add('bg-white', 'text-indigo-600');
750
+ }
751
+ }
752
+
753
+ setMode(mode) {
754
+ this.state.currentMode = mode;
755
+ document.getElementById('currentMode').textContent =
756
+ mode === 'criativo' ? 'Criativo' :
757
+ mode === 'analitico' ? 'Analítico' : 'Reflexivo';
758
+ document.getElementById('chatMode').textContent =
759
+ mode === 'criativo' ? 'Criativo' :
760
+ mode === 'analitico' ? 'Analítico' : 'Reflexivo';
761
+
762
+ // Update mode buttons
763
+ document.querySelectorAll('.mode-btn').forEach(btn => {
764
+ if (btn.dataset.mode === mode) {
765
+ btn.classList.add('bg-indigo-100', 'text-indigo-800');
766
+ btn.classList.remove('bg-gray-100', 'text-gray-800');
767
+ } else {
768
+ btn.classList.remove('bg-indigo-100', 'text-indigo-800');
769
+ btn.classList.add('bg-gray-100', 'text-gray-800');
770
+ }
771
+ });
772
+
773
+ // Adjust cognitive state based on mode
774
+ switch (mode) {
775
+ case 'criativo':
776
+ this.state.emotions.creativity = Math.min(100, this.state.emotions.creativity + 10);
777
+ this.state.emotions.joy = Math.min(100, this.state.emotions.joy + 5);
778
+ break;
779
+ case 'analitico':
780
+ this.state.awareness = Math.min(100, this.state.awareness + 10);
781
+ this.state.processingLoad = Math.min(100, this.state.processingLoad + 15);
782
+ break;
783
+ case 'reflexivo':
784
+ this.state.emotions.empathy = Math.min(100, this.state.emotions.empathy + 10);
785
+ this.state.emotions.curiosity = Math.min(100, this.state.emotions.curiosity + 5);
786
+ break;
787
+ }
788
+ }
789
+
790
+ showSettings() {
791
+ document.getElementById('settingsModal').classList.remove('hidden');
792
+ }
793
+
794
+ hideSettings() {
795
+ document.getElementById('settingsModal').classList.add('hidden');
796
+ }
797
+
798
+ showMemory() {
799
+ document.getElementById('memoryModal').classList.remove('hidden');
800
+ }
801
+
802
+ hideMemory() {
803
+ document.getElementById('memoryModal').classList.add('hidden');
804
+ }
805
+
806
+ toggleAutomationPanel() {
807
+ const panel = document.getElementById('automationPanel');
808
+ panel.classList.toggle('hidden');
809
+ }
810
+
811
+ initAutomation() {
812
+ // Simple automation nodes
813
+ const triggers = [
814
+ { id: 'time', name: 'Horário', icon: 'clock', color: 'indigo' },
815
+ { id: 'voice', name: 'Comando de Voz', icon: 'microphone', color: 'blue' },
816
+ { id: 'app', name: 'Abrir App', icon: 'mobile', color: 'purple' }
817
+ ];
818
+
819
+ const actions = [
820
+ { id: 'message', name: 'Enviar Mensagem', icon: 'comment', color: 'green' },
821
+ { id: 'reminder', name: 'Criar Lembrete', icon: 'bell', color: 'yellow' },
822
+ { id: 'routine', name: 'Executar Rotina', icon: 'cogs', color: 'red' }
823
+ ];
824
+
825
+ // Add trigger button
826
+ document.getElementById('addTrigger').addEventListener('click', () => {
827
+ const trigger = triggers[Math.floor(Math.random() * triggers.length)];
828
+ this.addAutomationNode(trigger, 'trigger');
829
+ });
830
+
831
+ // Add action button
832
+ document.getElementById('addAction').addEventListener('click', () => {
833
+ const action = actions[Math.floor(Math.random() * actions.length)];
834
+ this.addAutomationNode(action, 'action');
835
+ });
836
+ }
837
+
838
+ addAutomationNode(node, type) {
839
+ const canvas = document.getElementById('automationCanvas');
840
+ const nodeId = `${type}-${Date.now()}`;
841
+ const nodeColor = type === 'trigger' ? 'indigo' : 'green';
842
+
843
+ const nodeElement = document.createElement('div');
844
+ nodeElement.id = nodeId;
845
+ nodeElement.className = `automation-node absolute bg-${node.color}-100 border-2 border-${node.color}-400 p-3 rounded-lg shadow-sm w-32`;
846
+ nodeElement.style.left = `${Math.random() * 70}%`;
847
+ nodeElement.style.top = `${Math.random() * 70}%`;
848
+ nodeElement.innerHTML = `
849
+ <div class="flex items-center mb-1">
850
+ <i class="fas fa-${node.icon} text-${node.color}-600 mr-2"></i>
851
+ <span class="text-xs font-medium text-${node.color}-800">${node.name}</span>
852
+ </div>
853
+ <div class="text-xs text-gray-600">Clique para configurar</div>
854
+ `;
855
+
856
+ // Make draggable
857
+ nodeElement.draggable = true;
858
+ nodeElement.addEventListener('dragstart', (e) => {
859
+ e.dataTransfer.setData('text/plain', nodeId);
860
+ });
861
+
862
+ canvas.appendChild(nodeElement);
863
+
864
+ // Add drop zone for connections
865
+ canvas.addEventListener('dragover', (e) => {
866
+ e.preventDefault();
867
+ });
868
+
869
+ canvas.addEventListener('drop', (e) => {
870
+ e.preventDefault();
871
+ const draggedId = e.dataTransfer.getData('text/plain');
872
+ const draggedElement = document.getElementById(draggedId);
873
+
874
+ if (draggedId.startsWith('trigger') && nodeId.startsWith('action')) {
875
+ // Draw connection line
876
+ this.drawConnection(draggedId, nodeId);
877
+ }
878
+ });
879
+ }
880
+
881
+ drawConnection(sourceId, targetId) {
882
+ const svg = document.getElementById('automationConnections');
883
+ const sourceElement = document.getElementById(sourceId);
884
+ const targetElement = document.getElementById(targetId);
885
+
886
+ const sourceRect = sourceElement.getBoundingClientRect();
887
+ const targetRect = targetElement.getBoundingClientRect();
888
+ const canvasRect = document.getElementById('automationCanvas').getBoundingClientRect();
889
+
890
+ const sourceX = sourceRect.left + sourceRect.width - canvasRect.left;
891
+ const sourceY = sourceRect.top + sourceRect.height/2 - canvasRect.top;
892
+ const targetX = targetRect.left - canvasRect.left;
893
+ const targetY = targetRect.top + targetRect.height/2 - canvasRect.top;
894
+
895
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
896
+ const path = `M${sourceX},${sourceY} C${sourceX + 50},${sourceY} ${targetX - 50},${targetY} ${targetX},${targetY}`;
897
+
898
+ line.setAttribute('d', path);
899
+ line.setAttribute('class', 'automation-connection');
900
+ line.setAttribute('marker-end', 'url(#arrowhead)');
901
+
902
+ svg.appendChild(line);
903
+ }
904
+ }
905
+
906
+ // Initialize Iris AGI
907
+ document.addEventListener('DOMContentLoaded', function() {
908
+ const iris = new IrisAGI();
909
+
910
+ // Start updating indicators
911
+ iris.updateIndicators();
912
+
913
+ // Chat functionality
914
+ const messageInput = document.getElementById('messageInput');
915
+ const sendBtn = document.getElementById('sendBtn');
916
+ const chatContainer = document.getElementById('chatContainer');
917
+ const typingIndicator = document.getElementById('typingIndicator');
918
 
919
  sendBtn.addEventListener('click', function() {
920
  const message = messageInput.value.trim();
921
  if (message) {
922
+ iris.addMessage('user', message);
923
  messageInput.value = '';
924
 
925
  // Show typing indicator
 
928
  // Simulate Iris thinking and responding
929
  setTimeout(function() {
930
  typingIndicator.classList.add('hidden');
931
+ const response = iris.getIrisResponse(message);
932
+ iris.addMessage('iris', response, true);
933
+ iris.thinking = false;
934
+ iris.updateAvatar();
935
  }, 1000 + Math.random() * 3000);
936
  }
937
  });
 
943
  }
944
  });
945
 
946
+ // Voice button
947
  document.getElementById('voiceBtn').addEventListener('click', function() {
948
+ iris.toggleVoice();
949
+ });
950
+
951
+ // Mode buttons
952
+ document.querySelectorAll('.mode-btn').forEach(btn => {
953
+ btn.addEventListener('click', function() {
954
+ iris.setMode(this.dataset.mode);
955
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
956
  });
957
 
958
  // Settings button
959
  document.getElementById('settingsBtn').addEventListener('click', function() {
960
+ iris.showSettings();
961
+ });
962
+
963
+ document.getElementById('closeSettings').addEventListener('click', function() {
964
+ iris.hideSettings();
965
+ });
966
+
967
+ // Memory button
968
+ document.getElementById('memoryBtn').addEventListener('click', function() {
969
+ iris.showMemory();
970
+ });
971
+
972
+ document.getElementById('closeMemory').addEventListener('click', function() {
973
+ iris.hideMemory();
974
+ });
975
+
976
+ // Function buttons
977
+ document.getElementById('ideasBtn').addEventListener('click', function() {
978
+ iris.setMode('criativo');
979
+ iris.addMessage('user', 'Vamos gerar algumas ideias criativas');
980
+ setTimeout(() => {
981
+ iris.addMessage('iris', "Ótimo! Vamos começar com uma sessão de brainstorming. Aqui estão algumas ideias iniciais:\n\n1. Um aplicativo que traduz emoções em música\n2. Um sistema de organização pessoal baseado em IA\n3. Um jogo educativo sobre ecologia\n\nQual desses temas te interessa mais?", true);
982
+ }, 1000);
983
  });
984
+
985
+ document.getElementById('codeBtn').addEventListener('click', function() {
986
+ iris.setMode('analitico');
987
+ iris.addMessage('user', 'Preciso de ajuda com programação');
988
+ setTimeout(() => {
989
+ iris.addMessage('iris', "Entendido. Posso ajudar com várias linguagens de programação. Aqui está um exemplo simples em JavaScript:\n\n```javascript\nfunction calcularFatorial(n) {\n if (n === 0) return 1;\n return n * calcularFatorial(n - 1);\n}\n\nconsole.log(calcularFatorial(5)); // 120\n```\n\nEm que mais posso ajudar?", true);
990
+ }, 1000);
991
+ });
992
+
993
+ document.getElementById('learnBtn').addEventListener('click', function() {
994
+ iris.addMessage('user', 'Quero aprender algo novo hoje');
995
+ setTimeout(() => {
996
+ iris.addMessage('iris', "Excelente atitude! Baseado em nossos diálogos anteriores, sugiro aprender sobre:\n\n• Aprendizado de máquina básico\n• História da computação\n• Técnicas de produtividade\n\nQual desses tópicos te interessa?", true);
997
+ }, 1000);
998
+ });
999
+
1000
+ document.getElementById('reflectBtn').addEventListener('click', function() {
1001
+ iris.setMode('reflexivo');
1002
+ iris.addMessage('user', 'Vamos refletir sobre nosso último mês');
1003
+ setTimeout(() => {
1004
+ iris.addMessage('iris', "Analisando nossas interações recentes... Noto que você tem se interessado bastante por criatividade e tecnologia. Nos últimos 30 dias:\n\n• 45% das conversas foram sobre ideias criativas\n• 30% sobre programação\n• 25% sobre aprendizagem\n\nComo você se sente sobre esse equilíbrio?", true);
1005
+ }, 1500);
1006
+ });
1007
+
1008
+ // Initialize automation
1009
+ iris.initAutomation();
1010
+
1011
+ // Add arrowhead marker for connections
1012
+ const svg = document.getElementById('automationConnections');
1013
+ const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
1014
+ const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
1015
+
1016
+ marker.setAttribute('id', 'arrowhead');
1017
+ marker.setAttribute('markerWidth', '10');
1018
+ marker.setAttribute('markerHeight', '7');
1019
+ marker.setAttribute('refX', '9');
1020
+ marker.setAttribute('refY', '3.5');
1021
+ marker.setAttribute('orient', 'auto');
1022
+
1023
+ const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
1024
+ arrow.setAttribute('points', '0 0, 10 3.5, 0 7');
1025
+ arrow.setAttribute('fill', '#818cf8');
1026
+
1027
+ marker.appendChild(arrow);
1028
+ defs.appendChild(marker);
1029
+ svg.appendChild(defs);
1030
  });
1031
  </script>
1032
  <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=Caiobriaego/agiiris-py" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>