Update modules/semantic/semantic_interface.py

modules/semantic/semantic_interface.py

@@ -145,6 +145,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.
+    Versión simplificada que muestra el gráfico directamente.
     """
     if semantic_result is None or not semantic_result['success']:
         st.warning(semantic_t.get('no_results', 'No results available'))
@@ -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
     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,113 +164,57 @@ def display_semantic_results(semantic_result, lang_code, semantic_t):
             ]
         )
         
-        # 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
-        )
+        # Mostrar conceptos como chips
+        cols = st.columns(4)  # 4 columnas para distribuir los conceptos
+        for i, (concept, freq) in enumerate(df.values):
+            with cols[i % 4]:
+                st.markdown(
+                    f"""
+                    <div style="
+                        background-color: #f0f2f6;
+                        border-radius: 20px;
+                        padding: 8px 12px;
+                        margin: 5px 0;
+                        text-align: center;
+                    ">
+                        <b>{concept}</b><br>
+                        <small>{freq:.2f}</small>
+                    </div>
+                    """,
+                    unsafe_allow_html=True
+                )
     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 
+    # Mostrar gráfico de conceptos directamente
     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
+            # Mostrar el gráfico directamente con st.image()
+            st.image(
+                analysis['concept_graph'],
+                use_column_width=True,
+                caption=semantic_t.get('graph_description', 'Visualización de relaciones entre conceptos clave')
             )
-    #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)
-
-            # 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')}
+            # Sección de interpretación
+            with st.expander("📊 " + semantic_t.get('semantic_graph_interpretation', "Interpretación del gráfico")):
+                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')}
                 """)
             
-            # 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
-                )
-        
+            # Botón de descarga
+            st.download_button(
+                label="📥 " + semantic_t.get('download_graph', "Descargar gráfico"),
+                data=analysis['concept_graph'],
+                file_name="semantic_network.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'))
+            logger.error(f"Error al mostrar el gráfico: {str(e)}")
+            st.error(semantic_t.get('graph_error', 'Error al visualizar el gráfico'))
     else:
-        st.info(semantic_t.get('no_graph', 'No concept graph available'))
+        st.info(semantic_t.get('no_graph', 'No se generó el gráfico de conceptos'))