Update static/main.js

static/main.js

@@ -1,61 +1,109 @@
-// Importamos las funciones necesarias de la biblioteca de Transformers.js
+// Importamos las funciones necesarias de Transformers.js
 import { pipeline, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
 
-// Módulo de Estado Global y Control de la Aplicación
+// Módulo de Estado Global de la Aplicación
 const AppState = {
     isInitialized: false,
-    currentUser: null,
-    activeMode: null, // 'eco', 'root', 'serenity'
+    user: { name: 'Che' },
+    ai: { name: 'Synapse' },
+    activeMode: 'eco',
     isProcessing: false,
-    models: {
-        detector: null,
-        textGenerator: null,
+    isSpeaking: false,
+    models: { detector: null, textGenerator: null },
+    dom: {}, // Se llena en LifecycleManager.init
+    analysisInterval: null
+};
+
+// ===================================================================
+// MÓDULO 0: PERSONALIDAD Y VOZ (EL ALMA ARGENTINA)
+// ===================================================================
+const Prompts_AR = {
+    greeting: (aiName) => `¡Buenas! Soy ${aiName}, tu compañero digital. ¿En qué te puedo ayudar hoy? 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 = {
+    init() {
+        this.synth = window.speechSynthesis;
+        this.utterance = new SpeechSynthesisUtterance();
+        this.utterance.lang = 'es-AR'; // Intentamos conseguir la voz argentina
+        this.utterance.rate = 1;
+        this.utterance.onstart = () => AppState.isSpeaking = true;
+        this.utterance.onend = () => AppState.isSpeaking = false;
     },
-    dom: { // Referencias a elementos del DOM para fácil acceso
-        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'),
-        createUserBtn: document.getElementById('create-user-btn'),
-        welcomeUser: document.getElementById('welcome-user'),
-        cameraFeed: document.getElementById('camera-feed'),
-        outputText: document.getElementById('output-text'),
-        body: document.getElementById('synapse-body'),
-        mirror: document.getElementById('consciousness-mirror'),
-        mirrorLog: document.getElementById('mirror-log'),
-        mirrorToggleBtn: document.getElementById('mirror-toggle-btn'),
-        closeMirrorBtn: document.getElementById('close-mirror-btn'),
-        ecoBtn: document.getElementById('eco-btn'),
-        rootBtn: document.getElementById('root-btn'),
-        serenityBtn: document.getElementById('serenity-btn')
+    speak(text) {
+        if (this.synth.speaking) this.synth.cancel();
+        this.utterance.text = text;
+        this.synth.speak(this.utterance);
     }
 };
 
 // ===================================================================
-// MÓDULO 1: GESTIÓN DE USUARIO Y CICLO DE VIDA DE LA APP
+// MÓDULO 1: GESTIÓN DE CICLO DE VIDA, USUARIO Y MEMORIA
 // ===================================================================
 const LifecycleManager = {
     init() {
-        console.log("Synapse AI: Iniciando...");
+        this.cacheDom();
         this.bindEventListeners();
-        this.checkUser();
+        this.checkUserAndMemory();
+        VoiceManager.init();
+    },
+
+    cacheDom() {
+        AppState.dom = { // Llenamos el objeto 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'),
+            cameraFeed: document.getElementById('camera-feed'),
+            statusText: document.getElementById('status-text'),
+            outputText: document.getElementById('output-text'),
+            outputContainer: document.getElementById('output-container'),
+            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.mirrorToggleBtn.addEventListener('click', () => ConsciousnessMirror.toggle(true));
-        AppState.dom.closeMirrorBtn.addEventListener('click', () => ConsciousnessMirror.toggle(false));
-        AppState.dom.ecoBtn.addEventListener('click', () => this.setActiveMode('eco'));
-        AppState.dom.rootBtn.addEventListener('click', () => this.setActiveMode('root'));
-        AppState.dom.serenityBtn.addEventListener('click', () => DigitalSerenity.triggerConsciousMoment());
+        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', () => {
+            this.togglePanel('settingsScreen', false);
+            this.togglePanel('mirrorScreen', false);
+        }));
+        AppState.dom.controlBtns.forEach(btn => btn.addEventListener('click', () => this.setActiveMode(btn.dataset.mode)));
+        AppState.dom.saveSettingsBtn.addEventListener('click', () => this.saveSettings());
     },
-    
-    checkUser() {
-        // La gestión de usuario es 100% local, respetando la privacidad.
+
+    checkUserAndMemory() {
         const user = localStorage.getItem('synapseUser');
-        if (user) {
-            AppState.currentUser = JSON.parse(user);
+        const ai = localStorage.getItem('synapseAI');
+        const memory = localStorage.getItem('synapseMemory');
+        if (user && ai) {
+            AppState.user = JSON.parse(user);
+            AppState.ai = JSON.parse(ai);
+            AppState.memory = memory ? JSON.parse(memory) : { interactions: {} };
             this.startApp();
         } else {
             AppState.dom.loadingStatus.style.display = 'none';
@@ -65,248 +113,194 @@ const LifecycleManager = {
 
     createUser() {
         const username = AppState.dom.usernameInput.value.trim();
-        if (username) {
-            AppState.currentUser = { name: username };
-            localStorage.setItem('synapseUser', JSON.stringify(AppState.currentUser));
+        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: {} }));
+            AppState.memory = { interactions: {} };
             this.startApp();
         }
     },
 
     async startApp() {
-        AppState.dom.welcomeUser.textContent = `Hola, ${AppState.currentUser.name}`;
-        AppState.dom.welcomeScreen.style.display = 'none';
-        AppState.dom.appContainer.style.display = 'flex';
+        AppState.dom.welcomeScreen.classList.remove('visible');
+        AppState.dom.appContainer.classList.add('visible');
         
         await AI_Core.initModels();
         await CameraManager.start();
-        DigitalSerenity.startMonitoring(); // El monitor de estrés se inicia en segundo plano
         
-        AppState.isInitialized = true;
-        this.setActiveMode('eco'); // Modo por defecto
+        this.setActiveMode(AppState.activeMode); // Activa el modo por defecto
+        const greeting = Prompts_AR.greeting(AppState.ai.name);
+        this.updateOutput(greeting, true);
+
+        // Inicia el Ciclo de Conciencia Permanente
+        if (AppState.analysisInterval) clearInterval(AppState.analysisInterval);
+        AppState.analysisInterval = setInterval(this.runContinuousAnalysis, 4000);
+    },
+
+    togglePanel(panelId, show) {
+        document.getElementById(panelId).classList.toggle('visible', show);
     },
     
     setActiveMode(mode) {
-        if (!AppState.isInitialized || AppState.isProcessing) return;
+        if (!AppState.isInitialized || mode === AppState.activeMode) {
+            if (mode === 'serenity') DigitalSerenity.triggerConsciousMoment();
+            return;
+        }
         
         AppState.activeMode = mode;
-        console.log(`Modo activo: ${mode}`);
-        
-        // Actualizar UI de botones
-        document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active'));
-        AppState.dom[`${mode}Btn`].classList.add('active');
-
-        // Detener análisis continuo si no es un modo de cámara
-        if (this.analysisInterval) clearInterval(this.analysisInterval);
+        AppState.dom.controlBtns.forEach(btn => btn.classList.toggle('active', btn.dataset.mode === mode));
 
-        if (mode === 'eco' || mode === 'root') {
-            AppState.dom.outputText.textContent = "Apunta la cámara para descubrir...";
-            this.analysisInterval = setInterval(this.runContinuousAnalysis, 3000); // Analiza cada 3 segundos
+        if (mode === 'serenity') DigitalSerenity.triggerConsciousMoment();
+    },
+    
+    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);
     },
 
     async runContinuousAnalysis() {
-        if (AppState.isProcessing || !['eco', 'root'].includes(AppState.activeMode)) return;
+        if (AppState.isProcessing || AppState.isSpeaking || ['serenity'].includes(AppState.activeMode)) {
+            AppState.dom.statusText.textContent = AppState.isSpeaking ? "Hablando..." : "En modo Zen";
+            return;
+        }
         AppState.isProcessing = true;
+        AppState.dom.statusText.textContent = "Viendo...";
         
         try {
             const detectedObject = await AI_Core.detectObjects();
-            if (detectedObject) {
+            if (detectedObject && !MemoryManager.isRecent(detectedObject)) {
+                const isNew = !MemoryManager.check(detectedObject);
+                MemoryManager.add(detectedObject);
+                
+                let promptBase = "";
                 if (AppState.activeMode === 'eco') {
-                    await EcoResonance.process(detectedObject);
+                    promptBase = Prompts_AR.eco(detectedObject, isNew);
                 } else if (AppState.activeMode === 'root') {
-                    await RootConnection.process(detectedObject);
+                    promptBase = Prompts_AR.root(detectedObject, isNew);
                 }
+                const response = await AI_Core.generateText(promptBase);
+                LifecycleManager.updateOutput(response, true);
+                ConsciousnessMirror.log(AppState.activeMode, `vi un/a ${detectedObject} y te di una reflexión.`);
             }
         } catch (error) {
-            console.error("Error en el análisis continuo:", error);
+            console.error("Error en el ciclo de análisis:", error);
         } finally {
             AppState.isProcessing = false;
         }
+    },
+
+    updateOutput(text, speak = false) {
+        AppState.dom.outputContainer.style.animation = 'none';
+        AppState.dom.outputContainer.offsetHeight; // Truco para reiniciar animación
+        AppState.dom.outputContainer.style.animation = 'slideUp 0.5s ease-out';
+        AppState.dom.outputText.textContent = text;
+        if (speak) VoiceManager.speak(text);
     }
 };
 
 // ===================================================================
-// MÓDULO 2: NÚCLEO DE INTELIGENCIA ARTIFICIAL (TRANSFORMERS.JS)
+// MÓDULO 2: NÚCLEO DE IA (SIN CAMBIOS GRANDES)
 // ===================================================================
 const AI_Core = {
     async initModels() {
-        AppState.dom.loadingStatus.textContent = "Cargando modelo de visión... (puede tardar)";
-        // Modelo ligero para detección de objetos, optimizado para web
+        AppState.dom.loadingStatus.textContent = "Cargando modelo de visión...";
         AppState.models.detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-        
-        AppState.dom.loadingStatus.textContent = "Cargando modelo de lenguaje... (casi listo)";
-        // Phi-3-mini es una excelente opción por su balance tamaño/rendimiento
+        AppState.dom.loadingStatus.textContent = "Cargando modelo de lenguaje...";
         AppState.models.textGenerator = await pipeline('text-generation', 'Xenova/Phi-3-mini-4k-instruct-onnx-web');
-        
-        AppState.dom.loadingStatus.textContent = "Modelos cargados. Iniciando cámara...";
+        AppState.isInitialized = true;
     },
-
-    async detectObjects() {
-        if (!AppState.models.detector || AppState.cameraFeed.paused || AppState.cameraFeed.ended) return null;
-        
+    async detectObjects() { /* ... código sin cambios ... */
+        if (!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, // Umbral alto para resultados más precisos
-            percentage: true,
-        });
-
-        // Devolvemos el objeto con la puntuación más alta
+        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];
-        
-        if (mainObject) {
-            console.log("Objeto detectado:", mainObject.label);
-            return mainObject.label;
-        }
-        return null;
+        return mainObject ? mainObject.label : null;
     },
-
-    async generateText(prompt) {
+    async generateText(prompt) { /* ... código sin cambios ... */
         if (!AppState.models.textGenerator) return "El modelo de lenguaje no está listo.";
-        
-        // Formateamos el prompt para el modelo instructivo
-        const formattedPrompt = `<|user|>\n${prompt}<|end|>\n<|assistant|>\n`;
-
-        const result = await AppState.models.textGenerator(formattedPrompt, {
-            max_new_tokens: 80,
-            temperature: 0.7,
-            do_sample: true,
-            //eos_token_id: AppState.models.textGenerator.tokenizer.eos_token_id
-        });
-        
-        // Limpiamos la salida para obtener solo la respuesta del asistente
+        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: GESTIÓN DE CÁMARA Y SENSORES
+// 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' }, // Prioriza la cámara trasera
-                audio: false
-            });
+            const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });
             AppState.dom.cameraFeed.srcObject = stream;
         } catch (error) {
             console.error("Error al acceder a la cámara:", error);
-            AppState.dom.outputText.textContent = "No se pudo acceder a la cámara. Por favor, otorga los permisos.";
+            LifecycleManager.updateOutput("¡Ups! No pude prender la cámara. Fijate si me diste los permisos, che.", true);
         }
     }
 };
 
-// ===================================================================
-// MÓDULO 4: CARACTERÍSTICAS DE SYNAPSE
-// ===================================================================
-
-const EcoResonance = {
-    async process(objectLabel) {
-        AppState.dom.outputText.textContent = `Detectado: ${objectLabel}. Analizando impacto...`;
-        const prompt = `Soy un asistente de IA llamado Synapse. He detectado un objeto: "${objectLabel}". En español, en 1-2 frases cortas y directas, describe su impacto ambiental y cómo reciclarlo correctamente. Sé conciso y motivador.`;
-        const response = await AI_Core.generateText(prompt);
-        AppState.dom.outputText.innerHTML = `<strong>${objectLabel}:</strong> ${response}`;
-        
-        // Nudge visual y háptico
-        this.triggerNudge();
-        ConsciousnessMirror.log('Eco-Resonancia', `Sugerencia de reciclaje para "${objectLabel}".`);
+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));
     },
-    triggerNudge() {
-        AppState.dom.body.classList.add('eco-nudge');
-        if ('vibrate' in navigator) navigator.vibrate([100, 50, 100]); // Vibración corta y rítmica
-        setTimeout(() => AppState.dom.body.classList.remove('eco-nudge'), 2000);
-    }
-};
-
-const RootConnection = {
-    async process(objectLabel) {
-        AppState.dom.outputText.textContent = `Detectado: ${objectLabel}. Buscando conexión...`;
-        const prompt = `Soy un asistente de IA llamado Synapse. He detectado: "${objectLabel}". En español, proporciona un dato curioso o una reflexión poética sobre este objeto/ser en 1-2 frases para fomentar la conexión con el entorno.`;
-        const response = await AI_Core.generateText(prompt);
-        AppState.dom.outputText.innerHTML = `<strong>${objectLabel}:</strong> ${response}`;
-        ConsciousnessMirror.log('Conexión Raíz', `Dato curioso generado para "${objectLabel}".`);
+    check(objectLabel) {
+        return AppState.memory.interactions[objectLabel] !== undefined;
+    },
+    isRecent(objectLabel) {
+        const interaction = AppState.memory.interactions[objectLabel];
+        // Evita que hable del mismo objeto si lo vio hace menos de 30 segundos
+        return interaction && (Date.now() - interaction.timestamp < 30000);
     }
 };
 
 const DigitalSerenity = {
-    stressLevel: 0,
-    lastActivityTime: Date.now(),
-    
-    startMonitoring() {
-        // Simulación de monitoreo de estrés basado en la actividad del usuario en la app.
-        // En una app nativa, esto podría acceder a más datos (con permiso).
-        window.addEventListener('click', () => this.recordActivity());
-        window.addEventListener('keydown', () => this.recordActivity());
-        setInterval(() => this.decayStress(), 5000); // El estrés disminuye con el tiempo
-    },
-
-    recordActivity() {
-        const now = Date.now();
-        const timeDiff = now - this.lastActivityTime;
-        if (timeDiff < 500) { // Actividad muy rápida incrementa el estrés
-            this.stressLevel = Math.min(10, this.stressLevel + 1);
-        }
-        this.lastActivityTime = now;
-        if (this.stressLevel >= 8) {
-            this.triggerConsciousMoment();
-            this.stressLevel = 0; // Resetear después de la intervención
-        }
-    },
-    
-    decayStress() {
-        this.stressLevel = Math.max(0, this.stressLevel - 0.5);
-    },
-
     triggerConsciousMoment() {
-        console.log("Activando Momento Consciente...");
+        const text = Prompts_AR.serenity;
+        LifecycleManager.updateOutput(text, true);
         AppState.dom.body.classList.add('serenity-nudge');
-        
-        AppState.dom.outputText.textContent = "Respira. Un momento de calma para ti.";
-
-        // Guía de respiración háptica
-        if ('vibrate' in navigator) {
-            // Inhala (4s), Sostiene (1s), Exhala (6s)
-            navigator.vibrate([4000, 1000, 6000]);
-        }
-        
-        // Paisaje sonoro (requiere un archivo de audio)
-        // const audio = new Audio('/static/sounds/stream.mp3');
-        // audio.play();
-
-        ConsciousnessMirror.log('Serenidad Digital', 'Se detectó un patrón de estrés y se activó un momento consciente.');
-        
-        setTimeout(() => {
-            AppState.dom.body.classList.remove('serenity-nudge');
-            AppState.dom.outputText.textContent = "Sigue explorando tu entorno.";
-        }, 11000);
+        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);
     }
 };
 
 const ConsciousnessMirror = {
-    logEntries: [],
-    
     log(source, reason) {
-        const timestamp = new Date().toLocaleTimeString();
-        this.logEntries.push({ source, reason, timestamp });
+        const logEntry = {
+            source,
+            reason,
+            timestamp: new Date().toLocaleTimeString()
+        };
+        let logs = JSON.parse(localStorage.getItem('synapseLogs') || '[]');
+        logs.unshift(logEntry);
+        logs = logs.slice(0, 20); // Guardamos los últimos 20 logs
+        localStorage.setItem('synapseLogs', JSON.stringify(logs));
         this.render();
     },
-
-    toggle(show) {
-        AppState.dom.mirror.classList.toggle('visible', show);
-    },
-
     render() {
-        AppState.dom.mirrorLog.innerHTML = '';
-        [...this.logEntries].reverse().forEach(entry => {
-            const logElement = document.createElement('div');
-            logElement.className = 'log-entry';
-            logElement.innerHTML = `<strong>${entry.source} (${entry.timestamp})</strong><p>${entry.reason}</p>`;
-            AppState.dom.mirrorLog.appendChild(logElement);
-        });
+        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
 // ===================================================================