Update modules/semantic/semantic_interface.py

modules/semantic/semantic_interface.py

@@ -142,6 +142,7 @@ 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.
@@ -152,10 +153,9 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
 
     analysis = semantic_result['analysis']
 
-    # Mostrar conceptos clave en formato horizontal
+    # 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']:
-        # Crear tabla de conceptos
         df = pd.DataFrame(
             analysis['key_concepts'],
             columns=[
@@ -164,7 +164,6 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
             ]
         )
         
-        # Convertir DataFrame a formato horizontal
         st.write(
             """
             <style>
@@ -203,53 +202,27 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
     else:
         st.info(semantic_t.get('no_concepts', 'No key concepts found'))
 
-    # Gráfico de conceptos
-    # st.subheader(semantic_t.get('concept_graph', 'Concepts Graph'))
-    #Colocar aquí el bloque de código 
+    # Gráfico de conceptos (versión modificada)
     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
+            # Sección del gráfico (sin div contenedor)
+            st.image(
+                analysis['concept_graph'],
+                use_container_width=True
             )
-    #Colocar aquí el bloque de código 
 
-            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)
+            # --- SOLO ESTE BLOQUE ES NUEVO ---
+            st.markdown("""
+            <style>
+            div[data-testid="stExpander"] div[role="button"] p {
+                text-align: center;
+                font-weight: bold;
+            }
+            </style>
+            """, unsafe_allow_html=True)
+            # ---------------------------------
 
-            # Expandible con la interpretació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')}
@@ -258,19 +231,30 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
                     - ↔️ {semantic_t.get('semantic_thickness_meaning', 'El grosor de las líneas indica la fuerza de la conexión')}
                 """)
             
-            # 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
-                )
+            # 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_semantic_network_graph', "Descargar gráfico de red semántica"),
+                data=analysis['concept_graph'],
+                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 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'))
+        st.info(semantic_t.get('no_graph', 'No concept graph available'))