Update app.py

app.py

@@ -580,7 +580,129 @@ gamification_engine = GamificationEngine() # No necesita instanciar, es de clase
 
 # --- Módulo 8: Interfaz Gradio (UI/UX Argento de Nivel Superior con Voz) ---
 # Se crea el objeto demo fuera del bloque 'with' para asegurar que sea accesible globalmente
-demo = gr.Blocks(theme=gr.themes.Soft(), css="footer { display: none !important; }")
+demo = gr.Blocks(theme=gr.themes.Soft(), css="""
+    footer { display: none !important; }
+    @keyframes matecito-talk {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.1); }
+        100% { transform: scale(1); }
+    }
+    .matecito-avatar {
+        font-size: 4em; /* Tamaño del emoji */
+        display: none; /* Oculto por defecto */
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1000;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 50%;
+        padding: 10px;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        animation: fade-in 0.3s forwards;
+    }
+    .matecito-talking {
+        animation: matecito-talk 0.8s infinite ease-in-out;
+    }
+    .matecito-listening {
+        animation: pulse-argentina-superior 1.5s infinite ease-in-out; /* Reusar la animación de pulso */
+    }
+    @keyframes fade-in {
+        from { opacity: 0; transform: scale(0.8); }
+        to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes fade-out {
+        from { opacity: 1; transform: scale(1); }
+        to { opacity: 0; transform: scale(0.8); }
+    }
+    /* Estilos para el nuevo menú */
+    .menu-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+        gap: 15px;
+        padding: 20px;
+        max-width: 800px;
+        margin: 20px auto;
+        background-color: #f8fafc; /* light blue-gray */
+        border-radius: 20px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+    }
+    /* Aplicar a los botones de Gradio */
+    .menu-button-custom .wrap-inner.gr-button { /* Target the inner button element */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100px;
+        background-color: #ffffff;
+        border-radius: 15px;
+        border: 1px solid #e2e8f0;
+        color: #4b5563;
+        font-weight: 600;
+        font-size: 0.9em;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+        text-align: center;
+        padding: 10px;
+    }
+    .menu-button-custom .wrap-inner.gr-button:hover {
+        background-color: #e0f2fe; /* sky-100 */
+        border-color: #38bdf8; /* sky-400 */
+        transform: translateY(-3px);
+        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    }
+    .menu-button-custom .icon {
+        font-size: 2.5em; /* Tamaño del icono */
+        margin-bottom: 5px;
+    }
+    .section-content {
+        padding: 20px;
+        background-color: #ffffff;
+        border-radius: 20px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+        margin-top: 20px;
+    }
+    /* Estilos para el navegador simulado */
+    .browser-frame {
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+    .browser-header {
+        background-color: #f1f1f1;
+        padding: 8px 12px;
+        border-bottom: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .browser-address-bar {
+        flex-grow: 1;
+        background-color: #fff;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 6px 10px;
+        font-size: 0.9em;
+        color: #333;
+    }
+    .browser-content {
+        width: 100%;
+        height: 400px; /* Altura fija para la simulación */
+        background-color: #f9f9f9;
+        display: flex;
+        flex-direction: column; /* Allow content to stack */
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2em;
+        color: #666;
+        text-align: center;
+    }
+    @keyframes pulse-argentina-superior {
+        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
+        50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(56, 189, 248, 0); }
+        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
+    }
+""")
 
 with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
     # gr.State para mantener el objeto User en la sesión y el estado de la UI
@@ -621,134 +743,12 @@ with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
                 <span style="font-size: 0.8em;">✨ Oráculo Vocal ✨</span>
                 <span>🇦🇷 MateAI 🇦🇷</span>
             </div>
-            <style>
-                @keyframes pulse-argentina-superior {
-                    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
-                    50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(56, 189, 248, 0); }
-                    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
-                }
-            </style>
         </div>
         """
     )
 
     # --- Componentes de voz ocultos para la interacción JS ---
     gr.HTML("""
-        <style>
-            @keyframes matecito-talk {
-                0% { transform: scale(1); }
-                50% { transform: scale(1.1); }
-                100% { transform: scale(1); }
-            }
-            .matecito-avatar {
-                font-size: 4em; /* Tamaño del emoji */
-                display: none; /* Oculto por defecto */
-                position: fixed;
-                bottom: 20px;
-                right: 20px;
-                z-index: 1000;
-                background: rgba(255, 255, 255, 0.9);
-                border-radius: 50%;
-                padding: 10px;
-                box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-                animation: fade-in 0.3s forwards;
-            }
-            .matecito-talking {
-                animation: matecito-talk 0.8s infinite ease-in-out;
-            }
-            .matecito-listening {
-                animation: pulse-argentina-superior 1.5s infinite ease-in-out; /* Reusar la animación de pulso */
-            }
-            @keyframes fade-in {
-                from { opacity: 0; transform: scale(0.8); }
-                to { opacity: 1; transform: scale(1); }
-            }
-            @keyframes fade-out {
-                from { opacity: 1; transform: scale(1); }
-                to { opacity: 0; transform: scale(0.8); }
-            }
-            /* Estilos para el nuevo menú */
-            .menu-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-                gap: 15px;
-                padding: 20px;
-                max-width: 800px;
-                margin: 20px auto;
-                background-color: #f8fafc; /* light blue-gray */
-                border-radius: 20px;
-                box-shadow: 0 8px 20px rgba(0,0,0,0.1);
-            }
-            .menu-button-custom { /* Clase para los botones personalizados con iconos */
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                height: 100px;
-                background-color: #ffffff;
-                border-radius: 15px;
-                border: 1px solid #e2e8f0;
-                color: #4b5563;
-                font-weight: 600;
-                font-size: 0.9em;
-                cursor: pointer;
-                transition: all 0.2s ease-in-out;
-                text-align: center;
-                padding: 10px;
-            }
-            .menu-button-custom:hover {
-                background-color: #e0f2fe; /* sky-100 */
-                border-color: #38bdf8; /* sky-400 */
-                transform: translateY(-3px);
-                box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-            }
-            .menu-button-custom .icon {
-                font-size: 2.5em; /* Tamaño del icono */
-                margin-bottom: 5px;
-            }
-            .section-content {
-                padding: 20px;
-                background-color: #ffffff;
-                border-radius: 20px;
-                box-shadow: 0 8px 20px rgba(0,0,0,0.1);
-                margin-top: 20px;
-            }
-            /* Estilos para el navegador simulado */
-            .browser-frame {
-                border: 1px solid #ccc;
-                border-radius: 8px;
-                overflow: hidden;
-                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            }
-            .browser-header {
-                background-color: #f1f1f1;
-                padding: 8px 12px;
-                border-bottom: 1px solid #e0e0e0;
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            }
-            .browser-address-bar {
-                flex-grow: 1;
-                background-color: #fff;
-                border: 1px solid #ddd;
-                border-radius: 4px;
-                padding: 6px 10px;
-                font-size: 0.9em;
-                color: #333;
-            }
-            .browser-content {
-                width: 100%;
-                height: 400px; /* Altura fija para la simulación */
-                background-color: #f9f9f9;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 1.2em;
-                color: #666;
-                text-align: center;
-            }
-        </style>
         <div id="matecito_avatar" class="matecito-avatar">🧉</div>
         <script>
             let recognition;
@@ -898,17 +898,6 @@ with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
 
             // Expose the speakText function globally for Gradio to call it
             window.speakText = speakText;
-
-            // Function to change Gradio view (called from custom HTML buttons)
-            function changeGradioView(viewName) {
-                const hiddenButton = document.getElementById('hidden_view_changer_button');
-                const viewInput = document.getElementById('hidden_view_input');
-                if (hiddenButton && viewInput) {
-                    viewInput.value = viewName;
-                    hiddenButton.click();
-                }
-            }
-            window.changeGradioView = changeGradioView; // Expose globally
         </script>
     """)
     # Input oculto para el texto reconocido por voz
@@ -918,10 +907,6 @@ with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
     # Output oculto para el texto que MateAI debe vocalizar
     voice_output_text = gr.Textbox(elem_id="voice_output_text", visible=False)
     
-    # Componentes ocultos para el cambio de vista desde JS
-    hidden_view_input = gr.Textbox(elem_id="hidden_view_input", visible=False)
-    hidden_view_changer_button = gr.Button("Change View", elem_id="hidden_view_changer_button", visible=False)
-
     gr.Markdown("<p id='voice_status' style='text-align: center; font-weight: bold; color: #4b5563;'>Listo para hablar 🎤</p>")
     gr.Button("🎙️ Empezar a Hablar con MateAI 🎙️", variant="secondary", elem_id="start_voice_button").click(
         fn=None,
@@ -930,37 +915,138 @@ with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
         js="startListening()"
     )
 
-    # --- Nuevo Menú de Navegación con HTML personalizado ---
+    # --- Nuevo Menú de Navegación con Gradio Buttons ---
     gr.Markdown("<h2 style='text-align: center; color: #38bdf8; margin-top: 2em;'>Navegación MateAI</h2>")
-    gr.HTML(
-        """
-        <div class="menu-grid">
-            <div class="menu-button-custom" onclick="changeGradioView('home')">
-                <div class="icon">🏠</div>Inicio & Perfil
-            </div>
-            <div class="menu-button-custom" onclick="changeGradioView('nudges')">
-                <div class="icon">💬</div>Conversar con MateAI
-            </div>
-            <div class="menu-button-custom" onclick="changeGradioView('oracle')">
-                <div class="icon">✨</div>Oráculo del Día
-            </div>
-            <div class="menu-button-custom" onclick="changeGradioView('challenges')">
-                <div class="icon">🎯</div>Desafíos MateAI
-            </div>
-            <div class="menu-button-custom" onclick="changeGradioView('tasks')">
-                <div class="icon">📝</div>Mi Gestor de Tareas
-            </div>
-            <div class="menu-button-custom" onclick="changeGradioView('history')">
-                <div class="icon">📜</div>Mi Historial & Logros
-            </div>
-            <div class="menu-button-custom" onclick="changeGradioView('browser_agent')">
-                <div class="icon">🌐</div>Asistente Web (Concepto)
-            </div>
-        </div>
-        """
-    )
+    with gr.Row(elem_classes="menu-grid"):
+        # Cada botón ahora es un gr.Button con estilo personalizado
+        gr.Button(
+            value="""<div class="icon">🏠</div>Inicio & Perfil""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('home'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=True), # home_section
+                gr.Column.update(visible=False), # nudges_section
+                gr.Column.update(visible=False), # oracle_section
+                gr.Column.update(visible=False), # challenges_section
+                gr.Column.update(visible=False), # history_section
+                gr.Column.update(visible=False), # tasks_section
+                gr.Column.update(visible=False), # browser_agent_section
+                current_view_state # Update the state
+            ]
+        )
+        gr.Button(
+            value="""<div class="icon">💬</div>Conversar con MateAI""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('nudges'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=False), # home_section
+                gr.Column.update(visible=True), # nudges_section
+                gr.Column.update(visible=False), # oracle_section
+                gr.Column.update(visible=False), # challenges_section
+                gr.Column.update(visible=False), # history_section
+                gr.Column.update(visible=False), # tasks_section
+                gr.Column.update(visible=False), # browser_agent_section
+                current_view_state
+            ]
+        )
+        gr.Button(
+            value="""<div class="icon">✨</div>Oráculo del Día""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('oracle'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=False), # home_section
+                gr.Column.update(visible=False), # nudges_section
+                gr.Column.update(visible=True), # oracle_section
+                gr.Column.update(visible=False), # challenges_section
+                gr.Column.update(visible=False), # history_section
+                gr.Column.update(visible=False), # tasks_section
+                gr.Column.update(visible=False), # browser_agent_section
+                current_view_state
+            ]
+        )
+        gr.Button(
+            value="""<div class="icon">🎯</div>Desafíos MateAI""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('challenges'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=False), # home_section
+                gr.Column.update(visible=False), # nudges_section
+                gr.Column.update(visible=False), # oracle_section
+                gr.Column.update(visible=True), # challenges_section
+                gr.Column.update(visible=False), # history_section
+                gr.Column.update(visible=False), # tasks_section
+                gr.Column.update(visible=False), # browser_agent_section
+                current_view_state
+            ]
+        )
+        gr.Button(
+            value="""<div class="icon">📝</div>Mi Gestor de Tareas""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('tasks'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=False), # home_section
+                gr.Column.update(visible=False), # nudges_section
+                gr.Column.update(visible=False), # oracle_section
+                gr.Column.update(visible=False), # challenges_section
+                gr.Column.update(visible=False), # history_section
+                gr.Column.update(visible=True), # tasks_section
+                gr.Column.update(visible=False), # browser_agent_section
+                current_view_state
+            ]
+        )
+        gr.Button(
+            value="""<div class="icon">📜</div>Mi Historial & Logros""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('history'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=False), # home_section
+                gr.Column.update(visible=False), # nudges_section
+                gr.Column.update(visible=False), # oracle_section
+                gr.Column.update(visible=False), # challenges_section
+                gr.Column.update(visible=True), # history_section
+                gr.Column.update(visible=False), # tasks_section
+                gr.Column.update(visible=False), # browser_agent_section
+                current_view_state
+            ]
+        )
+        gr.Button(
+            value="""<div class="icon">🌐</div>Asistente Web (Concepto)""",
+            elem_classes="menu-button-custom",
+            variant="secondary"
+        ).click(
+            fn=lambda: change_view('browser_agent'),
+            inputs=[],
+            outputs=[
+                gr.Column.update(visible=False), # home_section
+                gr.Column.update(visible=False), # nudges_section
+                gr.Column.update(visible=False), # oracle_section
+                gr.Column.update(visible=False), # challenges_section
+                gr.Column.update(visible=False), # history_section
+                gr.Column.update(visible=False), # tasks_section
+                gr.Column.update(visible=True), # browser_agent_section
+                current_view_state
+            ]
+        )
 
-    # --- Contenido de cada Sección (Ahora en gr.Group o gr.Column) ---
+    # --- Contenido de cada Sección ---
     # Todas las secciones deben ser definidas aquí para poder ser referenciadas en los outputs
     home_section = gr.Column(elem_id="home_section", elem_classes="section-content", visible=True)
     nudges_section = gr.Column(elem_id="nudges_section", elem_classes="section-content", visible=False)
@@ -1145,26 +1231,26 @@ with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
     def change_view(view_name):
         # Create a dictionary to hold updates for each section
         updates = {
-            "home_section": gr.Column.update(visible=False),
-            "nudges_section": gr.Column.update(visible=False),
-            "oracle_section": gr.Column.update(visible=False),
-            "challenges_section": gr.Column.update(visible=False),
-            "history_section": gr.Column.update(visible=False),
-            "tasks_section": gr.Column.update(visible=False),
-            "browser_agent_section": gr.Column.update(visible=False),
+            "home": gr.Column.update(visible=False),
+            "nudges": gr.Column.update(visible=False),
+            "oracle": gr.Column.update(visible=False),
+            "challenges": gr.Column.update(visible=False),
+            "history": gr.Column.update(visible=False),
+            "tasks": gr.Column.update(visible=False),
+            "browser_agent": gr.Column.update(visible=False),
         }
         # Set the selected section to visible
-        updates[view_name + "_section"] = gr.Column.update(visible=True)
+        updates[view_name] = gr.Column.update(visible=True)
         
         # Return the updates in a consistent order, followed by the state update
         return (
-            updates["home_section"],
-            updates["nudges_section"],
-            updates["oracle_section"],
-            updates["challenges_section"],
-            updates["history_section"],
-            updates["tasks_section"],
-            updates["browser_agent_section"],
+            updates["home"],
+            updates["nudges"],
+            updates["oracle"],
+            updates["challenges"],
+            updates["history"],
+            updates["tasks"],
+            updates["browser_agent"],
             view_name # This is the current_view_state output
         )
 
@@ -1565,16 +1651,5 @@ with demo: # Ahora el bloque 'with' utiliza el objeto demo ya creado
         js="text => window.speakText(text)"
     )
 
-    # --- Conexión del botón oculto de cambio de vista ---
-    hidden_view_changer_button.click(
-        fn=change_view,
-        inputs=[hidden_view_input],
-        outputs=[
-            home_section, nudges_section, oracle_section,
-            challenges_section, history_section, tasks_section,
-            browser_agent_section, current_view_state
-        ]
-    )
-
 # Lanza la interfaz de Gradio
 demo.launch()