Update modules/studentact/current_situation_interface.py

modules/studentact/current_situation_interface.py

@@ -48,46 +48,20 @@ def display_current_situation_interface(lang_code, nlp_models, t):
         if 'current_metrics' not in st.session_state:
             st.session_state.current_metrics = None
 
-        # Estilos CSS para mejorar la presentación
-        st.markdown("""
-            <style>
-                .main-title {
-                    margin-bottom: 2rem;
-                }
-                .stTextArea textarea {
-                    border-radius: 0.5rem;
-                }
-                div[data-testid="column"] {
-                    background-color: transparent;
-                }
-                .metric-container {
-                    background-color: #f8f9fa;
-                    padding: 1rem;
-                    border-radius: 0.5rem;
-                    margin-bottom: 1rem;
-                }
-            </style>
-        """, unsafe_allow_html=True)
-
-        st.markdown('<h2 class="main-title">Análisis Inicial de Escritura</h2>', unsafe_allow_html=True)
+        st.markdown("## Análisis Inicial de Escritura")
         
         # Container principal con dos columnas
         with st.container():
             input_col, results_col = st.columns([1,2])
             
             with input_col:
-                # Función para manejar cambios en el texto
-                def on_text_change():
-                    st.session_state.text_input = st.session_state.text_area
-                    st.session_state.show_results = False
-                
                 # Text area con manejo de estado
                 text_input = st.text_area(
                     t.get('input_prompt', "Escribe o pega tu texto aquí:"),
                     height=400,
                     key="text_area",
                     value=st.session_state.text_input,
-                    on_change=on_text_change,
+                    on_change=lambda: on_text_change(),
                     help="Este texto será analizado para darte recomendaciones personalizadas"
                 )
                 
@@ -125,74 +99,87 @@ def display_current_situation_interface(lang_code, nlp_models, t):
             # Mostrar resultados en la columna derecha
             with results_col:
                 if st.session_state.show_results and st.session_state.current_metrics is not None:
-                    display_radar_chart(st.session_state.current_metrics)
+                    display_metrics_and_chart(st.session_state.current_metrics)
 
     except Exception as e:
         logger.error(f"Error en interfaz: {str(e)}")
         st.error("Ocurrió un error. Por favor, intente de nuevo.")
 
-
-########################################
-def display_radar_chart(metrics):
+def display_metrics_and_chart(metrics):
     """
-    Muestra un gráfico de radar con las métricas del usuario y el patrón ideal.
+    Muestra las métricas y el gráfico de radar de manera organizada.
     """
     try:
-        # Container con proporción reducida
         with st.container():
-            st.markdown('<div class="metric-container">', unsafe_allow_html=True)
+            # Crear una fila de métricas con bordes y alineación uniforme
+            metric_cols = st.columns(4, gap="small", vertical_alignment="center", border=True)
             
-            # Crear columnas para las métricas con espaciado uniforme
-            c1, c2, c3, c4 = st.columns([1.2, 1.2, 1.2, 1.2])
+            # Vocabulario
+            metric_cols[0].metric(
+                "Vocabulario",
+                f"{metrics['vocabulary']['normalized_score']:.2f}",
+                "Meta: 1.00",
+                delta_color="off",
+                help="Riqueza y variedad del vocabulario utilizado"
+            )
             
-            with c1:
-                st.metric(
-                    "Vocabulario",
-                    f"{metrics['vocabulary']['normalized_score']:.2f}",
-                    "Meta: 1.00",
-                    delta_color="off",
-                    help="Riqueza y variedad del vocabulario utilizado"
-                )
-            with c2:
-                st.metric(
-                    "Estructura",
-                    f"{metrics['structure']['normalized_score']:.2f}",
-                    "Meta: 1.00",
-                    delta_color="off",
-                    help="Organización y complejidad de las oraciones"
-                )
-            with c3:
-                st.metric(
-                    "Cohesión",
-                    f"{metrics['cohesion']['normalized_score']:.2f}",
-                    "Meta: 1.00",
-                    delta_color="off",
-                    help="Conexión y fluidez entre ideas"
-                )
-            with c4:
-                st.metric(
-                    "Claridad",
-                    f"{metrics['clarity']['normalized_score']:.2f}",
-                    "Meta: 1.00",
-                    delta_color="off",
-                    help="Facilidad de comprensión del texto"
-                )
+            # Estructura
+            metric_cols[1].metric(
+                "Estructura",
+                f"{metrics['structure']['normalized_score']:.2f}",
+                "Meta: 1.00",
+                delta_color="off",
+                help="Organización y complejidad de las oraciones"
+            )
             
-            st.markdown('</div>', unsafe_allow_html=True)
-
-            # Contenedor para el gráfico con ancho controlado
-            _, graph_col, _ = st.columns([1,2,1])
+            # Cohesión
+            metric_cols[2].metric(
+                "Cohesión",
+                f"{metrics['cohesion']['normalized_score']:.2f}",
+                "Meta: 1.00",
+                delta_color="off",
+                help="Conexión y fluidez entre ideas"
+            )
+            
+            # Claridad
+            metric_cols[3].metric(
+                "Claridad",
+                f"{metrics['clarity']['normalized_score']:.2f}",
+                "Meta: 1.00",
+                delta_color="off",
+                help="Facilidad de comprensión del texto"
+            )
+
+        # Espacio para separar métricas del gráfico
+        st.markdown("<div style='margin-top: 1rem;'></div>", unsafe_allow_html=True)
+        
+        # Contenedor para el gráfico radar centrado
+        with st.container():
+            # Usar columnas para centrar el gráfico
+            left_space, graph_col, right_space = st.columns([1, 2, 1])
             
             with graph_col:
-                # Preparar datos
-                categories = ['Vocabulario', 'Estructura', 'Cohesión', 'Claridad']
-                values_user = [
-                    metrics['vocabulary']['normalized_score'],
-                    metrics['structure']['normalized_score'],
-                    metrics['cohesion']['normalized_score'],
-                    metrics['clarity']['normalized_score']
-                ]
-                values_pattern = [1.0, 1.0, 1.0, 1.0]  # Patrón ideal
+                display_radar_chart(metrics)
+
+    except Exception as e:
+        logger.error(f"Error mostrando métricas y gráfico: {str(e)}")
+        st.error("Error al mostrar los resultados")
+
+########################################
+def display_radar_chart(metrics):
+    """
+    Muestra solo el gráfico de radar.
+    """
+    try:
+        # Preparar datos para el gráfico
+        categories = ['Vocabulario', 'Estructura', 'Cohesión', 'Claridad']
+        values_user = [
+            metrics['vocabulary']['normalized_score'],
+            metrics['structure']['normalized_score'],
+            metrics['cohesion']['normalized_score'],
+            metrics['clarity']['normalized_score']
+        ]
+        values_pattern = [1.0, 1.0, 1.0, 1.0]
 
                 # Crear figura más compacta
                 fig = plt.figure(figsize=(6, 6))