Update modules/semantic/semantic_interface.py

modules/semantic/semantic_interface.py

@@ -143,117 +143,133 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
     """
     Muestra los resultados del análisis semántico de conceptos clave.
     """
-    # Verificar resultado
     if semantic_result is None or not semantic_result['success']:
         st.warning(semantic_t.get('no_results', 'No results available'))
         return
 
     analysis = semantic_result['analysis']
 
-    # Crear contenedor para los resultados con proporciones ajustadas
-    col1, col2 = st.columns([1, 2])
+    # Mostrar conceptos clave en formato horizontal
+    st.subheader(semantic_t.get('key_concepts', 'Key Concepts'))
+    if 'key_concepts' in analysis and analysis['key_concepts']:
+        # Crear tabla de conceptos
+        df = pd.DataFrame(
+            analysis['key_concepts'],
+            columns=[
+                semantic_t.get('concept', 'Concept'),
+                semantic_t.get('frequency', 'Frequency')
+            ]
+        )
+        
+        # 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'))
 
-    # Columna 1: Lista de conceptos clave
-    with col1:
-        st.subheader(semantic_t.get('key_concepts', 'Key Concepts'))
-        if 'key_concepts' in analysis and analysis['key_concepts']:
-            # Crear tabla de conceptos
-            df = pd.DataFrame(
-                analysis['key_concepts'],
-                columns=[
-                    semantic_t.get('concept', 'Concept'),
-                    semantic_t.get('frequency', 'Frequency')
-                ]
-            )
-            st.dataframe(
-                df,
-                hide_index=True,
-                column_config={
-                    semantic_t.get('frequency', 'Frequency'): st.column_config.NumberColumn(
-                        format="%.2f"
-                    )
-                },
-                height=400
+    # Gráfico de conceptos
+    st.subheader(semantic_t.get('concept_graph', 'Concepts Graph'))
+    if 'concept_graph' in analysis and analysis['concept_graph'] is not None:
+        try:
+            # 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
             )
-        else:
-            st.info(semantic_t.get('no_concepts', 'No key concepts found'))
 
-    # Columna 2: Gráfico de conceptos
-    with col2:
-        st.subheader(semantic_t.get('concept_graph', 'Concepts Graph'))
-        if 'concept_graph' in analysis and analysis['concept_graph'] is not None:
-            try:
-                # Configurar el estilo de la visualizació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(
-                    """
-                    <style>
-                        .semantic-graph-container {
-                            background-color: white;
-                            border-radius: 10px;
-                            padding: 20px;
-                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                            margin: 10px 0;
-                        }
-                        .stImage {
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                        .stImage > img {
-                            max-width: 100%;
-                            height: auto;
-                            object-fit: contain;
-                        }
-                    </style>
-                    """,
+                    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)
 
-                # Crear contenedor para el grafo
-                with st.container():
-                    st.markdown('<div class="semantic-graph-container">', unsafe_allow_html=True)
-                    
-                    # Convertir los bytes de la imagen a formato base64
-                    graph_bytes = analysis['concept_graph']
-                    graph_base64 = base64.b64encode(graph_bytes).decode()
-                    
-                    # Mostrar la imagen con HTML para mayor control
-                    st.markdown(
-                        f'<img src="data:image/png;base64,{graph_base64}" alt="Concept Graph" style="width:100%;"/>',
-                        unsafe_allow_html=True
-                    )
-                    
-                    # Agregar leyenda o descripción si es necesario
-                    st.caption(semantic_t.get(
-                        'graph_description',
-                        'El grosor de las líneas indica la fuerza de la relación. '
-                        'Los colores indican la centralidad del concepto.'
-                    ))
-                    
-                    st.markdown('</div>', unsafe_allow_html=True)
-                    
-                    # Agregar botón de descarga
-                    st.download_button(
-                        label=semantic_t.get('download_graph', "Download Graph"),
-                        data=graph_bytes,
-                        file_name="semantic_graph.png",
-                        mime="image/png",
-                    )
+            # Contenedor para botones
+            col1, col2 = st.columns([1,4])
+            with col1:
+                st.download_button(
+                    label="📥 " + semantic_t.get('download_graph', "Download"),
+                    data=graph_bytes,
+                    file_name="semantic_graph.png",
+                    mime="image/png",
+                    use_container_width=True
+                )
             
-            except Exception as e:
-                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 concept graph available'))
+            # Expandible con la interpretación
+            with st.expander("📊 " + semantic_t.get('graph_help', "Graph Interpretation")):
+                st.markdown("""
+                    - 🔀 Las flechas indican la dirección de la relación entre conceptos
+                    - 🎨 Los colores más intensos indican conceptos más centrales en el texto
+                    - ⭕ El tamaño de los nodos representa la frecuencia del concepto
+                    - ↔️ El grosor de las líneas indica la fuerza de la conexión
+                """)
+        
+        except Exception as e:
+            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 concept graph available'))
 
-        # Añadir información adicional sobre la interpretación del grafo
-        with st.expander(semantic_t.get('graph_help', "How to interpret this graph")):
-            st.markdown("""
-                - Las flechas indican la dirección de la relación entre conceptos
-                - Los colores más intensos indican conceptos más centrales en el texto
-                - El tamaño de los nodos representa la frecuencia del concepto
-                - El grosor de las líneas indica la fuerza de la conexión
-            """)
 
 ########################################################################################
 '''