Update modules/discourse/discourse_interface.py

modules/discourse/discourse_interface.py

@@ -125,6 +125,9 @@ def display_discourse_interface(lang_code, nlp_models, discourse_t):
         logger.error(f"Error general en interfaz del discurso: {str(e)}")
         st.error(discourse_t.get('general_error', 'Se produjo un error. Por favor, intente de nuevo.'))
 
+
+
+#####################################################################################################################
 def display_discourse_results(result, lang_code, discourse_t):
     """
     Muestra los resultados del análisis del discurso
@@ -133,6 +136,49 @@ def display_discourse_results(result, lang_code, discourse_t):
         st.warning(discourse_t.get('no_results', 'No hay resultados disponibles'))
         return
 
+    # Estilo CSS
+    st.markdown("""
+        <style>
+        .concepts-container {
+            display: flex;
+            flex-wrap: nowrap;
+            gap: 8px;
+            padding: 12px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin-bottom: 15px;
+            white-space: nowrap;
+        }
+        .concept-item {
+            background-color: white;
+            border-radius: 4px;
+            padding: 6px 10px;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+            flex-shrink: 0;
+        }
+        .concept-name {
+            font-weight: 500;
+            color: #1f2937;
+            font-size: 0.85em;
+        }
+        .concept-freq {
+            color: #6b7280;
+            font-size: 0.75em;
+        }
+        .graph-container {
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-top: 10px;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
     col1, col2 = st.columns(2)
 
     # Documento 1
@@ -140,12 +186,43 @@ 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:
-                df1 = pd.DataFrame(result['key_concepts1'], columns=['Concepto', 'Frecuencia'])
-                df1['Frecuencia'] = df1['Frecuencia'].round(2)
-                st.table(df1)
+                concepts_html = f"""
+                    <div class="concepts-container">
+                        {''.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 result['key_concepts1']
+                        ])}
+                    </div>
+                """
+                st.markdown(concepts_html, unsafe_allow_html=True)
 
                 if 'graph1' in result:
-                    st.pyplot(result['graph1'])
+                    with st.container():
+                        st.markdown('<div class="graph-container">', unsafe_allow_html=True)
+                        st.pyplot(result['graph1'])
+                        
+                        # Botones y controles
+                        button_col1, spacer_col1 = st.columns([1,4])
+                        with button_col1:
+                            if 'graph1_bytes' in result:
+                                st.download_button(
+                                    label="📥 " + discourse_t.get('download_graph', "Download"),
+                                    data=result['graph1_bytes'],
+                                    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:
@@ -156,12 +233,43 @@ 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:
-                df2 = pd.DataFrame(result['key_concepts2'], columns=['Concepto', 'Frecuencia'])
-                df2['Frecuencia'] = df2['Frecuencia'].round(2)
-                st.table(df2)
+                concepts_html = f"""
+                    <div class="concepts-container">
+                        {''.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 result['key_concepts2']
+                        ])}
+                    </div>
+                """
+                st.markdown(concepts_html, unsafe_allow_html=True)
 
                 if 'graph2' in result:
-                    st.pyplot(result['graph2'])
+                    with st.container():
+                        st.markdown('<div class="graph-container">', unsafe_allow_html=True)
+                        st.pyplot(result['graph2'])
+                        
+                        # Botones y controles
+                        button_col2, spacer_col2 = st.columns([1,4])
+                        with button_col2:
+                            if 'graph2_bytes' in result:
+                                st.download_button(
+                                    label="📥 " + discourse_t.get('download_graph', "Download"),
+                                    data=result['graph2_bytes'],
+                                    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: