Update modules/semantic/semantic_interface.py

modules/semantic/semantic_interface.py

@@ -151,7 +151,7 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
     analysis = semantic_result['analysis']
 
     # Crear contenedor para los resultados con proporciones ajustadas
-    col1, col2 = st.columns([1, 2])  # Cambio de [1, 1] a [1, 2] para dar más espacio al grafo
+    col1, col2 = st.columns([1, 2])
 
     # Columna 1: Lista de conceptos clave
     with col1:
@@ -159,7 +159,7 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
         if 'key_concepts' in analysis and analysis['key_concepts']:
             # Crear tabla de conceptos
             df = pd.DataFrame(
-                analysis['key_concepts'], 
+                analysis['key_concepts'],
                 columns=[
                     semantic_t.get('concept', 'Concept'),
                     semantic_t.get('frequency', 'Frequency')
@@ -173,7 +173,7 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
                         format="%.2f"
                     )
                 },
-                height=400  # Añadido para dar más altura a la tabla
+                height=400
             )
         else:
             st.info(semantic_t.get('no_concepts', 'No key concepts found'))
@@ -182,23 +182,80 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
     with col2:
         st.subheader(semantic_t.get('concept_graph', 'Concepts Graph'))
         if 'concept_graph' in analysis and analysis['concept_graph'] is not None:
-            # Contenedor para centrar la imagen
-            st.markdown(
-                """
-                <style>
-                    .stImage > img {
-                        max-width: 100%;
-                        display: block;
-                        margin: 0 auto;
-                    }
-                </style>
-                """, 
-                unsafe_allow_html=True
-            )
-            st.image(analysis['concept_graph'], use_column_width=True)
+            try:
+                # Configurar el estilo de la visualización
+                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>
+                    """,
+                    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",
+                    )
+            
+            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
+            """)
+
+########################################################################################
 '''
     # Botón de exportación al final
     if 'semantic_analysis_counter' in st.session_state: