Update modules/semantic/semantic_interface.py

modules/semantic/semantic_interface.py

@@ -145,7 +145,6 @@ 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 con distribución uniforme de conceptos y formato compacto.
     """
     if semantic_result is None or not semantic_result['success']:
         st.warning(semantic_t.get('no_results', 'No results available'))
@@ -153,67 +152,125 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
 
     analysis = semantic_result['analysis']
 
-    # Mostrar conceptos clave
+    # Mostrar conceptos clave en formato horizontal
     st.subheader(semantic_t.get('key_concepts', 'Key Concepts'))
     if 'key_concepts' in analysis and analysis['key_concepts']:
-        # Calcular número óptimo de columnas (máx 5, mín 2)
-        num_concepts = len(analysis['key_concepts'])
-        num_cols = min(max(2, (num_concepts + 2) // 3), 5)  # Fórmula para distribución óptima
+        # Crear tabla de conceptos
+        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: 6px 10px;
-                        margin: 4px 0;
-                        font-size: 0.9em;
-                        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
-                )
+        # Convertir DataFrame a formato horizontal
+        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
+    # Gráfico de conceptos
+    # st.subheader(semantic_t.get('concept_graph', 'Concepts Graph'))
+    #Colocar aquí el bloque de código 
     if 'concept_graph' in analysis and analysis['concept_graph'] is not None:
         try:
-            # Mostrar el gráfico con ancho de contenedor
-            st.image(
-                analysis['concept_graph'],
-                use_container_width=True,  # Corregido el parámetro obsoleto
-                caption=semantic_t.get('graph_description', 'Visualización de relaciones entre conceptos clave')
+            # Container para el grafo con estilos mejorados
+            st.markdown(
+                """
+                <style>
+                .graph-container {
+                    background-color: white;
+                    border-radius: 10px;
+                    padding: 20px;
+                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                    margin: 10px 0;
+                }
+                .button-container {
+                    display: flex;
+                    gap: 10px;
+                    margin: 10px 0;
+                }
+                </style>
+                """,
+                unsafe_allow_html=True
             )
+    #Colocar aquí el bloque de código 
 
-            # Sección de interpretación compacta
-            with st.expander("📊 " + semantic_t.get('semantic_graph_interpretation', "Interpretación")):
-                st.caption(f"""
-                • {semantic_t.get('semantic_arrow_meaning', 'Flechas → Dirección relación')}
-                • {semantic_t.get('semantic_color_meaning', 'Color → Centralidad')}
-                • {semantic_t.get('semantic_size_meaning', 'Tamaño → Frecuencia')}
-                • {semantic_t.get('semantic_thickness_meaning', 'Grosor → Fuerza conexión')}
+            with st.container():
+                st.markdown('<div class="graph-container">', unsafe_allow_html=True)
+                
+                # Mostrar grafo
+                graph_bytes = analysis['concept_graph']
+                graph_base64 = base64.b64encode(graph_bytes).decode()
+                st.markdown(
+                    f'<img src="data:image/png;base64,{graph_base64}" alt="Concept Graph" style="width:100%;"/>',
+                    unsafe_allow_html=True
+                )
+                
+                # Leyenda del grafo
+                #st.caption(semantic_t.get(
+                #    'graph_description',
+                #    'Visualización de relaciones entre conceptos clave identificados en el texto.'
+                #))
+                
+                st.markdown('</div>', unsafe_allow_html=True)
+
+            # Expandible con la interpretación
+            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 compacto
-            st.download_button(
-                label="⬇️ " + semantic_t.get('download_graph', "Descargar"),
-                data=analysis['concept_graph'],
-                file_name="semantic_network.png",
-                mime="image/png",
-                use_container_width=True
-            )
-            
+            # Contenedor para botones
+            col1, col2 = st.columns([1,4])
+            with col1:
+                st.download_button(
+                    label="📥 " + semantic_t.get('download_semantic_network_graph', "Descargar gráfico de red semántica"),
+                    data=graph_bytes,
+                    file_name="semantic_graph.png",
+                    mime="image/png",
+                    use_container_width=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'))