Update modules/discourse/discourse_interface.py

modules/discourse/discourse_interface.py

@@ -154,12 +154,13 @@ def display_discourse_interface(lang_code, nlp_models, discourse_t):
 def display_discourse_results(result, lang_code, discourse_t):
     """
     Muestra los resultados del análisis del discurso con conceptos en formato horizontal
+    y botones de control consistentes
     """
     if not result.get('success'):
         st.warning(discourse_t.get('no_results', 'No hay resultados disponibles'))
         return
 
-    # Estilo CSS para los conceptos horizontales
+    # Estilo CSS unificado
     st.markdown("""
         <style>
         .concepts-container {
@@ -168,9 +169,9 @@ def display_discourse_results(result, lang_code, discourse_t):
             gap: 8px;
             padding: 12px;
             background-color: #f8f9fa;
-            border-radius: 8px;
+            border-radius: 8px 8px 0 0;
             overflow-x: auto;
-            margin-bottom: 15px;
+            margin-bottom: 0;
             white-space: nowrap;
         }
         .concept-item {
@@ -182,7 +183,6 @@ def display_discourse_results(result, lang_code, discourse_t):
             gap: 4px;
             box-shadow: 0 1px 2px rgba(0,0,0,0.1);
             flex-shrink: 0;
-            min-width: fit-content;
         }
         .concept-name {
             font-weight: 500;
@@ -195,9 +195,14 @@ def display_discourse_results(result, lang_code, discourse_t):
         }
         .graph-container {
             background-color: white;
-            border-radius: 8px;
-            padding: 15px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            border-radius: 0 0 8px 8px;
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-top: 0;
+        }
+        .controls-container {
+            display: flex;
+            gap: 10px;
             margin-top: 10px;
         }
         </style>
@@ -210,7 +215,6 @@ def display_discourse_results(result, lang_code, discourse_t):
         with st.expander(discourse_t.get('doc1_title', 'Documento 1'), expanded=True):
             st.subheader(discourse_t.get('key_concepts', 'Conceptos Clave'))
             if 'key_concepts1' in result:
-                # Crear HTML para conceptos horizontales de manera más compacta
                 concepts_html = f"""
                     <div class="concepts-container">
                         {''.join([
@@ -222,11 +226,31 @@ def display_discourse_results(result, lang_code, discourse_t):
                 """
                 st.markdown(concepts_html, unsafe_allow_html=True)
 
-                # Mostrar grafo
                 if 'graph1' in result:
-                    st.markdown('<div class="graph-container">', unsafe_allow_html=True)
-                    st.pyplot(result['graph1'])
-                    st.markdown('</div>', unsafe_allow_html=True)
+                    with st.container():
+                        st.markdown('<div class="graph-container">', unsafe_allow_html=True)
+                        st.pyplot(result['graph1'])
+                        
+                        # Añadir botones de control para el grafo 1
+                        button_col1, spacer_col1 = st.columns([1,4])
+                        with button_col1:
+                            st.download_button(
+                                label="📥 " + discourse_t.get('download_graph', "Download"),
+                                data=result['graph1_bytes'] if 'graph1_bytes' in result else None,
+                                file_name="discourse_graph1.png",
+                                mime="image/png",
+                                use_container_width=True
+                            )
+                        
+                        with st.expander("📊 " + discourse_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
+                            """)
+                        
+                        st.markdown('</div>', unsafe_allow_html=True)
                 else:
                     st.warning(discourse_t.get('graph_not_available', 'Gráfico no disponible'))
             else:
@@ -237,7 +261,6 @@ def display_discourse_results(result, lang_code, discourse_t):
         with st.expander(discourse_t.get('doc2_title', 'Documento 2'), expanded=True):
             st.subheader(discourse_t.get('key_concepts', 'Conceptos Clave'))
             if 'key_concepts2' in result:
-                # Crear HTML para conceptos horizontales de manera más compacta
                 concepts_html = f"""
                     <div class="concepts-container">
                         {''.join([
@@ -249,11 +272,31 @@ def display_discourse_results(result, lang_code, discourse_t):
                 """
                 st.markdown(concepts_html, unsafe_allow_html=True)
 
-                # Mostrar grafo
                 if 'graph2' in result:
-                    st.markdown('<div class="graph-container">', unsafe_allow_html=True)
-                    st.pyplot(result['graph2'])
-                    st.markdown('</div>', unsafe_allow_html=True)
+                    with st.container():
+                        st.markdown('<div class="graph-container">', unsafe_allow_html=True)
+                        st.pyplot(result['graph2'])
+                        
+                        # Añadir botones de control para el grafo 2
+                        button_col2, spacer_col2 = st.columns([1,4])
+                        with button_col2:
+                            st.download_button(
+                                label="📥 " + discourse_t.get('download_graph', "Download"),
+                                data=result['graph2_bytes'] if 'graph2_bytes' in result else None,
+                                file_name="discourse_graph2.png",
+                                mime="image/png",
+                                use_container_width=True
+                            )
+                        
+                        with st.expander("📊 " + discourse_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
+                            """)
+                        
+                        st.markdown('</div>', unsafe_allow_html=True)
                 else:
                     st.warning(discourse_t.get('graph_not_available', 'Gráfico no disponible'))
             else: