Update modules/semantic/semantic_interface.py

modules/semantic/semantic_interface.py

@@ -142,10 +142,10 @@ def display_semantic_interface(lang_code, nlp_models, semantic_t):
 
 
 #######################################
+
 def display_semantic_results(semantic_result, lang_code, semantic_t):
     """
     Muestra los resultados del análisis semántico de conceptos clave.
-    Versión optimizada sin div contenedor del gráfico.
     """
     if semantic_result is None or not semantic_result['success']:
         st.warning(semantic_t.get('no_results', 'No results available'))
@@ -153,66 +153,98 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
 
     analysis = semantic_result['analysis']
 
-    # Mostrar conceptos clave en formato horizontal mejorado
+    # Mostrar conceptos clave en formato horizontal (se mantiene igual)
     st.subheader(semantic_t.get('key_concepts', 'Key Concepts'))
     if 'key_concepts' in analysis and analysis['key_concepts']:
-        # Calcular número óptimo de columnas basado en la cantidad de conceptos
-        num_concepts = len(analysis['key_concepts'])
-        num_cols = min(max(2, (num_concepts + 2) // 3), 5)  # Entre 2 y 5 columnas
+        df = pd.DataFrame(
+            analysis['key_concepts'],
+            columns=[
+                semantic_t.get('concept', 'Concept'),
+                semantic_t.get('frequency', 'Frequency')
+            ]
+        )
         
-        cols = st.columns(num_cols)
-        for idx, (concept, freq) in enumerate(analysis['key_concepts']):
-            with cols[idx % num_cols]:
-                st.markdown(
-                    f"""
-                    <div style="
-                        background-color: #f0f2f6;
-                        border-radius: 12px;
-                        padding: 8px 12px;
-                        margin: 4px 0;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                    ">
-                        <span style="font-weight: 500;">{concept}</span>
-                        <span style="color: #666; font-size: 0.85em;">{freq:.2f}</span>
-                    </div>
-                    """,
-                    unsafe_allow_html=True
-                )
+        st.write(
+            """
+            <style>
+            .concept-table {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                margin-bottom: 20px;
+            }
+            .concept-item {
+                background-color: #f0f2f6;
+                border-radius: 5px;
+                padding: 8px 12px;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+            .concept-name {
+                font-weight: bold;
+            }
+            .concept-freq {
+                color: #666;
+                font-size: 0.9em;
+            }
+            </style>
+            <div class="concept-table">
+            """ + 
+            ''.join([
+                f'<div class="concept-item"><span class="concept-name">{concept}</span>'
+                f'<span class="concept-freq">({freq:.2f})</span></div>'
+                for concept, freq in df.values
+            ]) +
+            "</div>",
+            unsafe_allow_html=True
+        )
     else:
         st.info(semantic_t.get('no_concepts', 'No key concepts found'))
 
-    # Mostrar gráfico de conceptos directamente
+    # Gráfico de conceptos (versión modificada)
     if 'concept_graph' in analysis and analysis['concept_graph'] is not None:
         try:
-            # Mostrar el gráfico sin contenedores adicionales
+            # Sección del gráfico (sin div contenedor)
             st.image(
                 analysis['concept_graph'],
-                use_container_width=True,
-                caption=semantic_t.get('graph_description', 'Visualización de relaciones entre conceptos clave')
+                use_container_width=True
             )
 
-            # Sección de interpretación compacta
-            with st.expander("📊 " + semantic_t.get('semantic_graph_interpretation', "Interpretación")):
-                st.markdown(f"""
-                - 🔀 {semantic_t.get('semantic_arrow_meaning', 'Flechas: dirección de la relación')}
-                - 🎨 {semantic_t.get('semantic_color_meaning', 'Color: centralidad del concepto')}
-                - ⭕ {semantic_t.get('semantic_size_meaning', 'Tamaño: frecuencia del concepto')}
-                - ↔️ {semantic_t.get('semantic_thickness_meaning', 'Grosor: fuerza de la conexión')}
+            # Expandible con la interpretación (se mantiene igual)
+            with st.expander("📊 " + semantic_t.get('semantic_graph_interpretation', "Interpretación del gráfico semántico")):
+                 st.markdown(f"""
+                    - 🔀 {semantic_t.get('semantic_arrow_meaning', 'Las flechas indican la dirección de la relación entre conceptos')}
+                    - 🎨 {semantic_t.get('semantic_color_meaning', 'Los colores más intensos indican conceptos más centrales en el texto')}
+                    - ⭕ {semantic_t.get('semantic_size_meaning', 'El tamaño de los nodos representa la frecuencia del concepto')}
+                    - ↔️ {semantic_t.get('semantic_thickness_meaning', 'El grosor de las líneas indica la fuerza de la conexión')}
                 """)
             
-            # Botón de descarga
+            # Contenedor para botones (se mantiene igual pero centrado)
+            st.markdown("""
+            <style>
+            .download-btn-container {
+                display: flex;
+                justify-content: center;
+                margin-top: 10px;
+            }
+            </style>
+            <div class="download-btn-container">
+            """, unsafe_allow_html=True)
+            
             st.download_button(
-                label="📥 " + semantic_t.get('download_graph', "Descargar gráfico"),
+                label="📥 " + semantic_t.get('download_semantic_network_graph', "Descargar gráfico de red semántica"),
                 data=analysis['concept_graph'],
-                file_name="semantic_network.png",
+                file_name="semantic_graph.png",
                 mime="image/png",
                 use_container_width=True
             )
             
+            st.markdown("</div>", unsafe_allow_html=True)
+        
         except Exception as e:
-            logger.error(f"Error al mostrar el gráfico: {str(e)}")
-            st.error(semantic_t.get('graph_error', 'Error al visualizar el gráfico'))
+            logger.error(f"Error displaying graph: {str(e)}")
+            st.error(semantic_t.get('graph_error', 'Error displaying the graph'))
     else:
-        st.info(semantic_t.get('no_graph', 'No se generó el gráfico de conceptos'))
+        st.info(semantic_t.get('no_graph', 'No concept graph available'))
+