Update static/main.js

static/main.js

@@ -1,24 +1,40 @@
-// Importamos las funciones necesarias
+// Importamos las funciones necesarias de Transformers.js
 import { pipeline, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
 
-// Estado Global de la Aplicación
+// Módulo de Estado Global de la Aplicación
 const AppState = {
-    isWaking: false, // Nuevo estado para controlar el proceso de despertar
-    isAwake: false,  // La IA está 100% operativa
-    // ... otros estados como antes ...
-    voice: null, // Acá guardaremos el objeto de voz seleccionado
+    isWaking: false,
+    isAwake: false,
+    user: { name: 'Che' },
+    ai: { name: 'Synapse' },
+    activeMode: 'eco',
+    isProcessing: false,
+    isSpeaking: false,
+    models: { detector: null, textGenerator: null },
+    dom: {},
+    analysisInterval: null,
+    voice: null
 };
 
 // ===================================================================
-// MÓDULO 0: PERSONALIDAD Y VOZ (EL ALMA ARGENTINA MEJORADA)
+// MÓDULO 0: PERSONALIDAD Y VOZ (EL ALMA ARGENTINA)
 // ===================================================================
-// ... Prompts sin cambios ...
+const Prompts_AR = {
+    greeting: (aiName) => `¡Listo, acá estoy! Soy ${aiName}. Apuntá la cámara y vemos qué onda.`,
+    eco: (object, isNew) => isNew ? 
+        `Che, eso parece un/a ${object}. ¿Sabés la posta para reciclarlo? Te cuento: ` : 
+        `Otra vez un/a ${object}, ¡qué copado! Nos estamos volviendo expertos en esto, ¿eh? `,
+    root: (object, isNew) => isNew ? 
+        `Mirá qué bueno, un/a ${object}. Te tiro un dato de color sobre esto que seguro no sabías: ` :
+        `¡De nuevo por acá, ${object}! Me encanta que sigamos explorando juntos. `,
+    serenity: `Bueno, pará un poco la moto. Se nota que estás a mil. Tomate un toque para vos. Concentrate en tu respiración... inhalá... y exhalá despacito...`,
+    mirrorLog: (source, reason) => `A esta hora, en modo "${source}", te sugerí algo porque ${reason}.`
+};
 
 const VoiceManager = {
     synth: window.speechSynthesis,
     utterance: new SpeechSynthesisUtterance(),
     
-    // ¡NUEVO MÉTODO INTELIGENTE PARA CARGAR VOCES!
     async loadVoices() {
         return new Promise(resolve => {
             let voices = this.synth.getVoices();
@@ -36,11 +52,8 @@ const VoiceManager = {
     },
 
     findBestVoice(voices) {
-        // 1. Prioridad máxima: 'es-AR'
         let bestVoice = voices.find(v => v.lang === 'es-AR');
-        // 2. Si no, buscar 'es-US' (suele ser neutra y de buena calidad)
         if (!bestVoice) bestVoice = voices.find(v => v.lang === 'es-US');
-        // 3. Si no, cualquier voz en español
         if (!bestVoice) bestVoice = voices.find(v => v.lang.startsWith('es-'));
         
         if (bestVoice) {
@@ -59,7 +72,7 @@ const VoiceManager = {
         if (this.synth.speaking) this.synth.cancel();
         
         this.utterance.text = text;
-        this.utterance.voice = AppState.voice; // ¡Usamos el objeto de voz, no solo el lang!
+        this.utterance.voice = AppState.voice;
         this.utterance.lang = AppState.voice.lang;
         this.utterance.rate = 1.0;
         this.utterance.pitch = 1.0;
@@ -71,59 +84,108 @@ const VoiceManager = {
 };
 
 // ===================================================================
-// MÓDULO 1: GESTIÓN DE CICLO DE VIDA (CON NUEVO FLUJO DE ARRANQUE)
+// MÓDULO 1: GESTIÓN DE CICLO DE VIDA, USUARIO Y MEMORIA
 // ===================================================================
 const LifecycleManager = {
     init() {
-        this.cacheDom(); // Cachea elementos del DOM
-        this.bindEventListeners(); // Vincula los botones
-        this.checkUserAndMemory(); // Chequea si ya existe el usuario
+        this.cacheDom();
+        this.bindEventListeners();
+        this.checkUserAndMemory();
+    },
+
+    cacheDom() {
+        AppState.dom = {
+            welcomeScreen: document.getElementById('welcome-screen'),
+            appContainer: document.getElementById('app-container'),
+            loadingStatus: document.getElementById('loading-status'),
+            userCreation: document.getElementById('user-creation'),
+            usernameInput: document.getElementById('username-input'),
+            ainameInput: document.getElementById('ainame-input'),
+            createUserBtn: document.getElementById('create-user-btn'),
+            wakeAiBtn: document.getElementById('wake-ai-btn'),
+            cameraFeed: document.getElementById('camera-feed'),
+            statusIndicator: document.getElementById('status-indicator'),
+            statusText: document.getElementById('status-text'),
+            outputContainer: document.getElementById('output-container'),
+            outputText: document.getElementById('output-text'),
+            body: document.getElementById('synapse-body'),
+            settingsScreen: document.getElementById('settings-screen'),
+            mirrorScreen: document.getElementById('consciousness-mirror'),
+            mirrorLog: document.getElementById('mirror-log'),
+            settingsBtn: document.getElementById('settings-btn'),
+            saveSettingsBtn: document.getElementById('save-settings-btn'),
+            mirrorToggleBtn: document.getElementById('mirror-toggle-btn'),
+            closePanelBtns: document.querySelectorAll('.close-panel-btn'),
+            controlBtns: document.querySelectorAll('.control-btn')
+        };
+    },
+
+    bindEventListeners() {
+        AppState.dom.createUserBtn.addEventListener('click', () => this.createUser());
+        AppState.dom.wakeAiBtn.addEventListener('click', () => this.wakeUpAI());
+        AppState.dom.settingsBtn.addEventListener('click', () => this.togglePanel('settingsScreen', true));
+        AppState.dom.mirrorToggleBtn.addEventListener('click', () => {
+            this.togglePanel('settingsScreen', false);
+            this.togglePanel('mirrorScreen', true);
+        });
+        AppState.dom.closePanelBtns.forEach(btn => btn.addEventListener('click', (e) => {
+            e.target.closest('.modal-panel').classList.remove('visible');
+        }));
+        AppState.dom.controlBtns.forEach(btn => btn.addEventListener('click', () => this.setActiveMode(btn.dataset.mode)));
+        AppState.dom.saveSettingsBtn.addEventListener('click', () => this.saveSettings());
     },
 
     async checkUserAndMemory() {
-        await VoiceManager.loadVoices(); // ¡Cargamos las voces al principio!
+        await VoiceManager.loadVoices();
         const user = localStorage.getItem('synapseUser');
-        // ... Lógica de usuario igual que antes ...
-        if (user) {
-            // ...
-            // En vez de arrancar todo, solo mostramos el botón de despertar
-            AppState.dom.loadingStatus.style.display = 'none';
-            AppState.dom.wakeAiBtn.style.display = 'block';
-            AppState.dom.appContainer.classList.add('visible'); // Mostramos la app principal, pero deshabilitada
+        const ai = localStorage.getItem('synapseAI');
+        if (user && ai) {
+            AppState.user = JSON.parse(user);
+            AppState.ai = JSON.parse(ai);
+            AppState.memory = JSON.parse(localStorage.getItem('synapseMemory') || '{"interactions":{}}');
+            
             AppState.dom.welcomeScreen.classList.remove('visible');
+            AppState.dom.appContainer.classList.add('visible');
+            this.updateOutput(`¡Hola ${AppState.user.name}! Soy ${AppState.ai.name}. Cuando quieras, despertame.`);
+            
         } else {
-            // ... Muestra la creación de usuario ...
+            AppState.dom.welcomeScreen.classList.add('visible');
+            AppState.dom.appContainer.classList.remove('visible');
+            AppState.dom.loadingStatus.style.display = 'none';
+            AppState.dom.userCreation.style.display = 'block';
         }
     },
 
-    bindEventListeners() {
-        // ... otros listeners ...
-        AppState.dom.wakeAiBtn.addEventListener('click', () => this.wakeUpAI());
+    createUser() {
+        const username = AppState.dom.usernameInput.value.trim();
+        const ainame = AppState.dom.ainameInput.value.trim();
+        if (username && ainame) {
+            AppState.user.name = username;
+            AppState.ai.name = ainame;
+            localStorage.setItem('synapseUser', JSON.stringify(AppState.user));
+            localStorage.setItem('synapseAI', JSON.stringify(AppState.ai));
+            localStorage.setItem('synapseMemory', JSON.stringify({ interactions: {} }));
+            this.checkUserAndMemory();
+        }
     },
 
-    // ¡LA NUEVA FUNCIÓN CLAVE PARA EL ARRANQUE!
     async wakeUpAI() {
         if (AppState.isAwake || AppState.isWaking) return;
         
         AppState.isWaking = true;
-        AppState.dom.wakeAiBtn.style.display = 'none'; // Ocultamos el botón de despertar
-        LifecycleManager.updateOutput("¡Buenas! Dame un toque que me despierto...", true);
-        
-        // 1. Pedir permiso de cámara PRIMERO
-        AppState.dom.statusText.textContent = "Pidiendo permiso...";
+        this.updateOutput("¡Buenas! Dame un toque que me despierto...", true);
+        AppState.dom.statusText.textContent = "Despertando...";
+
         const cameraStarted = await CameraManager.start();
         if (!cameraStarted) {
-            LifecycleManager.updateOutput("No pude prender la cámara, che. Fijate los permisos y probá de nuevo.", true);
+            this.updateOutput("No pude prender la cámara, che. Fijate los permisos y probá de nuevo.", true);
             AppState.isWaking = false;
-            AppState.dom.wakeAiBtn.style.display = 'block';
             return;
         }
 
-        // 2. Cargar modelos de IA DESPUÉS de tener la cámara
         AppState.dom.statusText.textContent = "Cargando modelos...";
         await AI_Core.initModels();
 
-        // 3. ¡IA Despierta y Lista!
         AppState.isWaking = false;
         AppState.isAwake = true;
         AppState.dom.statusIndicator.querySelector('.status-dot').classList.remove('offline');
@@ -132,48 +194,168 @@ const LifecycleManager = {
         const greeting = Prompts_AR.greeting(AppState.ai.name);
         this.updateOutput(greeting, true);
 
-        // 4. Iniciar el Ciclo de Conciencia Permanente
         if (AppState.analysisInterval) clearInterval(AppState.analysisInterval);
-        AppState.analysisInterval = setInterval(this.runContinuousAnalysis, 4000);
+        AppState.analysisInterval = setInterval(() => this.runContinuousAnalysis(), 4000);
+    },
+    
+    togglePanel(panelId, show) {
+        document.getElementById(panelId).classList.toggle('visible', show);
     },
     
-    // ... El resto de funciones de LifecycleManager (setActiveMode, etc.) con pequeños ajustes ...
     setActiveMode(mode) {
-        if (!AppState.isAwake) { // No hacer nada si la IA no está despierta
-            if (mode === 'serenity') DigitalSerenity.triggerConsciousMoment();
+        if (mode === 'serenity') {
+            DigitalSerenity.triggerConsciousMoment();
             return;
         }
-        // ... resto de la lógica ...
+        if (!AppState.isAwake || AppState.activeMode === mode) return;
+        
+        AppState.activeMode = mode;
+        AppState.dom.controlBtns.forEach(btn => btn.classList.toggle('active', btn.dataset.mode === mode));
     },
     
+    saveSettings() {
+        const newAiName = document.getElementById('ainame-settings-input').value.trim();
+        if (newAiName) {
+            AppState.ai.name = newAiName;
+            localStorage.setItem('synapseAI', JSON.stringify(AppState.ai));
+            this.updateOutput(`¡Listo! A partir de ahora me llamo ${newAiName}.`, true);
+        }
+        this.togglePanel('settings-screen', false);
+    },
+
     runContinuousAnalysis() {
         if (!AppState.isAwake || AppState.isProcessing || AppState.isSpeaking) return;
+        
+        AppState.isProcessing = true;
         AppState.dom.statusText.textContent = "Viendo...";
-        // ... resto del código del ciclo ...
+        
+        (async () => {
+            try {
+                const detectedObject = await AI_Core.detectObjects();
+                if (detectedObject && !MemoryManager.isRecent(detectedObject)) {
+                    const isNew = !MemoryManager.check(detectedObject);
+                    MemoryManager.add(detectedObject);
+                    
+                    let promptBase = "";
+                    if (AppState.activeMode === 'eco') {
+                        promptBase = Prompts_AR.eco(detectedObject, isNew);
+                    } else if (AppState.activeMode === 'root') {
+                        promptBase = Prompts_AR.root(detectedObject, isNew);
+                    }
+                    const response = await AI_Core.generateText(promptBase);
+                    this.updateOutput(response, true);
+                    ConsciousnessMirror.log(AppState.activeMode, `vi un/a ${detectedObject} y te di una reflexión.`);
+                }
+            } catch (error) {
+                console.error("Error en el ciclo de análisis:", error);
+            } finally {
+                AppState.isProcessing = false;
+                if(AppState.isAwake) AppState.dom.statusText.textContent = "Atento";
+            }
+        })();
+    },
+
+    updateOutput(text, speak = false) {
+        AppState.dom.outputContainer.style.animation = 'none';
+        AppState.dom.outputContainer.offsetHeight;
+        AppState.dom.outputContainer.style.animation = 'slideUp 0.5s ease-out';
+        AppState.dom.outputText.textContent = text;
+        if (speak) VoiceManager.speak(text);
     }
 };
 
 // ===================================================================
-// MÓDULO 3: GESTOR DE CÁMARA (MODIFICADO PARA DEVOLVER ESTADO)
+// MÓDULO 2: NÚCLEO DE INTELIGENCIA ARTIFICIAL
+// ===================================================================
+const AI_Core = {
+    async initModels() {
+        LifecycleManager.updateOutput("Cargando modelo de visión...", false);
+        AppState.models.detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
+        LifecycleManager.updateOutput("Cargando modelo de lenguaje...", false);
+        AppState.models.textGenerator = await pipeline('text-generation', 'Xenova/Phi-3-mini-4k-instruct-onnx-web');
+    },
+    async detectObjects() {
+        if (!AppState.isAwake || !AppState.models.detector || AppState.dom.cameraFeed.paused || AppState.dom.cameraFeed.ended) return null;
+        const image = await RawImage.fromElement(AppState.dom.cameraFeed);
+        const objects = await AppState.models.detector(image, { threshold: 0.9, percentage: true });
+        const mainObject = objects.filter(obj => obj.score > 0.9).sort((a,b) => b.score - a.score)[0];
+        return mainObject ? mainObject.label : null;
+    },
+    async generateText(prompt) {
+        if (!AppState.models.textGenerator) return "El modelo de lenguaje no está listo.";
+        const formattedPrompt = `<|user|>\nSos un asistente de IA argentino, amable y canchero. Respondé de forma concisa. ${prompt}<|end|>\n<|assistant|>\n`;
+        const result = await AppState.models.textGenerator(formattedPrompt, { max_new_tokens: 80 });
+        return result[0].generated_text.split('<|assistant|>').pop().trim();
+    }
+};
+
+// ===================================================================
+// MÓDULO 3: GESTORES DE CÁMARA, MEMORIA Y CARACTERÍSTICAS
 // ===================================================================
 const CameraManager = {
     async start() {
         try {
             const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });
             AppState.dom.cameraFeed.srcObject = stream;
-            return true; // Devuelve éxito
+            return true;
         } catch (error) {
             console.error("Error al acceder a la cámara:", error);
-            return false; // Devuelve fracaso
+            return false;
         }
     }
 };
 
+const MemoryManager = {
+    add(objectLabel) {
+        AppState.memory.interactions[objectLabel] = {
+            timestamp: Date.now(),
+            count: (AppState.memory.interactions[objectLabel]?.count || 0) + 1
+        };
+        localStorage.setItem('synapseMemory', JSON.stringify(AppState.memory));
+    },
+    check(objectLabel) {
+        return AppState.memory.interactions[objectLabel] !== undefined;
+    },
+    isRecent(objectLabel) {
+        const interaction = AppState.memory.interactions[objectLabel];
+        return interaction && (Date.now() - interaction.timestamp < 30000);
+    }
+};
+
+const DigitalSerenity = {
+    triggerConsciousMoment() {
+        const text = Prompts_AR.serenity;
+        LifecycleManager.updateOutput(text, true);
+        AppState.dom.body.classList.add('serenity-nudge');
+        if ('vibrate' in navigator) navigator.vibrate([4000, 1000, 6000]);
+        ConsciousnessMirror.log('Modo Zen', `se activó un momento de calma.`);
+        setTimeout(() => AppState.dom.body.classList.remove('serenity-nudge'), 11000);
+    }
+};
 
-// (Los otros módulos como AI_Core, MemoryManager, etc., permanecen igual)
-// ...
+const ConsciousnessMirror = {
+    log(source, reason) {
+        const logEntry = { source, reason, timestamp: new Date().toLocaleTimeString() };
+        let logs = JSON.parse(localStorage.getItem('synapseLogs') || '[]');
+        logs.unshift(logEntry);
+        logs = logs.slice(0, 20);
+        localStorage.setItem('synapseLogs', JSON.stringify(logs));
+        this.render();
+    },
+    render() {
+        const logs = JSON.parse(localStorage.getItem('synapseLogs') || '[]');
+        AppState.dom.mirrorLog.innerHTML = logs.map(entry => `
+            <div class="log-entry">
+                <strong>${entry.source} (${entry.timestamp})</strong>
+                <p>${Prompts_AR.mirrorLog(entry.source, entry.reason)}</p>
+            </div>
+        `).join('');
+    }
+};
 
+// ===================================================================
 // PUNTO DE ENTRADA PRINCIPAL
+// ===================================================================
 window.onload = () => {
     LifecycleManager.init();
 };