Update app.py

app.py

@@ -27,6 +27,7 @@ import matplotlib.pyplot as plt
 import seaborn as sns
 from src.embeddings.modelos_nlp_db import search
 from src.embeddings.mass_modelos_nlp_db import search_mass
+from src.llm_clasificador_HF import procesar_lote
 from huggingface_hub import InferenceClient
 # import pandas as pd
 import re
@@ -848,6 +849,167 @@ def tab_inicio(df_ods, df_metas, df_indicador):
     """
     return html
 
+def tab_inicio_prompt(df_ods, df_metas, df_indicador):
+# def tab_inicio():
+    """Pestaña de inicio con resumen general"""
+    if not DATOS_CARGADOS:
+        return "⚠️ Error: No se pudieron cargar los datos."
+    
+    # Estadísticas básicas
+    
+    # total_ods = df_ods['ODS_ID'].nunique()
+    # total_metas = df_metas['META_ID'].nunique()
+    # total_indicadores = df_indicador['INDICADOR_ID'].nunique()
+    # sim_media = df_ods['ods_similaridad_cos_normalized'].mean()
+    # sim_max = df_ods['ods_similaridad_cos_normalized'].max()
+    # sim_min = df_ods['ods_similaridad_cos_normalized'].min()
+    # correlacion = df_ods['ods_rank'].corr(df_ods['ods_similaridad_cos_normalized'])
+    
+    # Top 4 ODS
+    top_ods = df_ods.nsmallest(4, 'ods_rank')[['rank', 'ODS_ID', 'score', 'frecuencia']]
+    top_ods['logo_id'] = top_ods['ODS_ID'].apply(lambda _: f"ods_{str(_)}") 
+    # top_ods = df_ods.groupby('ODS_ID').agg({
+    #     'ods_similaridad_cos_normalized': 'mean'
+    # }).sort_values('ods_similaridad_cos_normalized', ascending=False).head(3)[['ods_similaridad_cos_normalized']]
+    
+    # Top ODS referencia
+    ods_ref = top_ods.ODS_ID
+
+    # Top 3 METAS
+    
+    top_metas = df_metas.nsmallest(4, 'ods_rank')[['rank', 'META_ID', 'score', 'frecuencia']]
+    # for i in ods_ref:
+    #   top_metas_lcl = df_metas[df_metas.ODS_ID == i]
+    #   top_metas_lcl = top_metas_lcl.nsmallest(2, 'meta_rank')[['META_ID','meta_rank','META','meta_similaridad_cos_normalized', 'ODS_ID']]
+    #   top_metas = pd.concat([top_metas, top_metas_lcl], axis=0)
+    # top_metas['logo_id'] = top_metas['ODS_ID'].apply(lambda _: f"ods_{_}")
+    top_metas['logo_id'] = top_metas['META_ID'].apply(lambda _: f"meta_{str(_).upper()}")
+
+    recomendaciones_tblinput = Path('data/raw/ODS_169_metas_recomendaciones_detalladas.xlsx')
+    df_recomendaciones = pd.read_excel(recomendaciones_tblinput)
+    top_metas = top_metas.merge(df_recomendaciones[['Meta_ODS', 'Recomendaciones_territoriales']], left_on='META_ID', right_on='Meta_ODS', how='left')
+    # top_metas = df_metas.groupby('META_ID').agg({
+    #     'meta_similaridad_cos_normalized': 'mean'
+    # }).sort_values('meta_similaridad_cos_normalized', ascending=False).head(5)[['META_ID','META','meta_similaridad_cos_normalized']]
+    
+    # Top 5 indicadores
+    # top_indicador = df_metas.nsmallest(4, 'ods_rank')[['rank', 'INDICADOR_ID', 'score', 'frecuencia']]
+    # top_indicador['ODS_ID'] = top_indicador['INDICADOR_ID'].apply(lambda x: str(x).split('.')[0] if pd.notna(x) else None)    
+    # top_indicador['logo_id'] = top_indicador['ODS_ID'].apply(lambda _: f"ods_{str(_)}")
+    
+    
+    html = f"""
+    <div style="font-family: Arial, sans-serif; padding: 20px;">
+        <h1 style="color: #2E5090; text-align: center;">
+            📊 Tu texto en clave de ODS
+        </h1>
+        <h2 style="color: #4472C4; text-align: center;">
+            El análisis
+            identifica que tu texto se relaciona principalmente
+            con estos Objetivos de Desarrollo Sostenible ODS
+        </h2>
+      
+        
+        
+
+        <div class="important-box" style="background-color: #009EDB; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #E6F7E6;">
+            <h3 style="color: #E6F7E6;">🏆 Top 4 ODS Más Relevantes</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; align-items: flex-start;">
+                {''.join([f'''
+                <div style="display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 150px;">
+                    <img src="{dict_logos[row['logo_id']]}" 
+                         alt="ODS {row['ODS_ID']}" 
+                         width="{int(400*(row['score']**2))}" 
+                         style="margin: 0 auto; display: block;" />
+                    <!-- <p style="margin: 10px 0; color: #333; font-weight: bold;">{row['OBJETIVO']}</p> -->
+                </div>''' for _, row in top_ods.iterrows()])}
+            </div>
+        </div>
+
+        <div class="important-box" style="background-color: #F0F0F0; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #FFD700;">
+            <h3 style="color: #009EDB;">🎯 Metas Más Relevantes Por ODS Top</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; align-items: flex-start;">
+                {''.join([f'''
+                <div style="display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 150px;">
+                    <img src="{dict_logos[row['logo_id']]}" 
+                         alt="ODS {row['ODS_ID']}" 
+                         width="{int(200*(row['score']**2))}"
+                         style="margin: 0 auto; display: block;" />
+                    <p style="margin: 10px 0 5px 0; color: #333; font-size: 12px;"><strong style="color: #333;">Meta:</strong> {row['META_ID']}</p>
+                    <!-- <p style="margin: 0; color: #666; font-size: 12px;">{row['META']}</p> -->
+                    <!-- <p style="margin: 5px 0 0 0; color: #999; font-size: 11px;">Sim: {row['score']:.3f}</p> -->
+                    <!-- <p style="margin: 5px 0 0 0; color: #333; font-size: 11px;">Rank: {row['meta_rank']}</p> -->
+                </div>''' for _, row in top_metas.iterrows()])}
+            </div>
+        </div>
+        
+        <div class="important-box" style="background-color: #F0F0F0; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #FFD700;">
+            <h3 style="color: #FF8C00;">🎯 Indicadores Más Relevantes Por ODS Top</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; align-items: flex-start;">
+                {''.join([f'''
+                <div style="display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 150px;">
+                    <img src="{dict_logos[row['logo_id']]}" 
+                         alt="ODS {row['ODS_ID']}" 
+                         width="{int(200*(row['score']**2))}"
+                         style="margin: 0 auto; display: block;" />
+                    <p style="margin: 10px 0 5px 0; color: #333; font-size: 12px;"><strong style="color: #333;">Ind:</strong> {row['INDICADOR_ID']}</p>
+                    <!-- <p style="margin: 0; color: #666; font-size: 12px;">{row['INDICADOR']}</p> -->
+                    <!-- <p style="margin: 5px 0 0 0; color: #333; font-size: 11px;">Sim: {row['score']:.3f}</p> -->
+                    <p style="margin: 5px 0 0 0; color: #333; font-size: 11px;">Rank: {row['indicador_rank']}</p>
+                </div>''' for _, row in top_metas.iterrows()])}
+            </div>
+        </div>
+
+        <div class="important-box" style="background-color: #E8F4F8; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #4472C4;">
+            <h3 style="color: #2E5090;">📋 Recomendaciones Territoriales por Meta</h3>
+            <table style="width: 100%; border-collapse: collapse; background-color: white;">
+                <thead>
+                    <tr style="background-color: #2E5090; color: white;">
+                        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #2E5090;">ODS</th>
+                        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #2E5090;">Meta ID</th>
+                        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #2E5090;">Recomendaciones Territoriales</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {''.join([f'''
+                    <tr style="border-bottom: 1px solid #ddd;">
+                        <td style="padding: 12px; text-align: center;">
+                            <img src="{dict_logos[f'ods_{row['ODS_ID']}']}" 
+                                 alt="ODS {row['ODS_ID']}" 
+                                 width="50" 
+                                 style="vertical-align: middle;" />
+                        </td>
+                        <td style="padding: 12px; font-weight: bold; color: #2E5090;">{row['META_ID']}</td>
+                        <td style="padding: 12px; color: #333;">{row.get('Recomendaciones_territoriales', 'N/A')}</td>
+                    </tr>''' for _, row in df_metas.iterrows() if not pd.isna(row.get('Recomendaciones_territoriales'))])}
+                </tbody>
+            </table>
+        </div>
+        
+         <!--
+        <div style="background-color: #F0F0F0; padding: 20px; border-radius: 10px; margin: 20px 0;">
+            <h3 style="color: #2E5090;">📚 Cómo usar esta aplicación</h3>
+            <ol style="line-height: 1.8;">
+                <li><strong>Explora las pestañas:</strong> Cada pestaña contiene una visualización diferente</li>
+                <li><strong>Lee las explicaciones:</strong> Cada gráfica incluye una guía de interpretación</li>
+                <li><strong>Interactúa:</strong> Las visualizaciones HTML permiten zoom, hover y exploración</li>
+                <li><strong>Descarga:</strong> Puedes descargar las imágenes desde las pestañas</li>
+            </ol>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; padding: 20px; background-color: #E8F4F8; border-radius: 10px;">
+            <p style="font-size: 18px; color: #2E5090;">
+                <strong>¡Comienza explorando las visualizaciones en las pestañas superiores!</strong>
+            </p>
+            <p style="color: #666;">
+                Recomendación: Empieza con el "Dashboard Integrado" para una vista general
+            </p>
+        </div>
+        -->
+    </div>
+    """
+    return html
+
 def tab_inicio_mass(df_ods=None, df_metas=None, df_indicador=None):
 # def tab_inicio():
     """Pestaña de inicio con resumen general"""
@@ -1875,6 +2037,68 @@ def crear_app():
                 return True
 
             # PESTAÑA: CONSULTA
+            with gr.Tab("CONSULTA INDIVIDUAL PROMPT"):
+
+                # txt_ods = gr.Textbox(value="ods", visible=False) 
+                # txt_meta = gr.Textbox(value="meta", visible=False)
+                # txt_indicador = gr.Textbox(value="indicador", visible=False)
+
+                with gr.Column():
+                    gr.Markdown(f"""                    
+                    
+                    ### Cuéntanos una iniciativa, problema o propuesta de tu territorio.
+                    
+                    *La herramienta analizará el texto y mostrará con qué
+                    Objetivos de Desarrollo Sostenible (ODS) se
+                    relaciona.*
+                    """)
+                    query_in_prt = gr.Textbox(lines=5, placeholder="Escribe aquí tu consulta...", label="Iniciativa a analizar")
+                    lst_query_in_prt = gr.State() #gr.Textbox(value="[]", visible=False)
+                    def add_query_list(query):
+                        return gr.update(value=[query])
+                    query_in_prt.change(
+                        fn = add_query_list,
+                        inputs = query_in_prt,
+                        outputs = lst_query_in_prt)
+                    query_out_prt = gr.Textbox(lines=5, label="Texto ajustado para lenguaje natural", visible=False)
+                
+                btn_prt = gr.Button(value="Analizar mi iniciativa")
+                msj_procesamiento_prt = gr.Textbox(value="... preparando análisis de iniciativa.", visible=True)
+
+                with gr.Tab("🔍 Resultado"):
+                    
+                    
+                    with gr.Row():
+                        ods_prt = gr.Dataframe( label="ODS", visible=False)#, buttons=["fullscreen"])                  
+                        meta_prt = gr.Dataframe( label="METAS", visible=False)#, buttons=["fullscreen"])
+                        indicador_prt = gr.Dataframe( label="INDICADORES", visible=False)#, buttons=["fullscreen"])   
+
+                    
+                    html_inicio_ods_prt = gr.HTML() #tab_inicio(ods.value)
+
+                    #### Actualizando resultados iniciales 
+                    ods_prt.change(
+                        fn=tab_inicio_prompt,
+                        inputs=[ods_prt,meta_prt,indicador_prt],
+                        outputs=[html_inicio_ods_prt]
+                    )
+                    meta_prt.change(
+                        fn=tab_inicio_prompt,
+                        inputs=[ods_prt,meta_prt,indicador_prt],
+                        outputs=[html_inicio_ods_prt]
+                    )
+                    indicador_prt.change(
+                        fn=tab_inicio_prompt,
+                        inputs=[ods_prt,meta_prt,indicador_prt],
+                        outputs=[html_inicio_ods_prt]
+                    )
+                
+                    
+                
+
+                    btn_prt.click(procesar_lote, query_in_prt, [ods_prt,meta_prt,indicador_prt], show_progress=True)
+
+                    
             with gr.Tab("CONSULTA INDIVIDUAL"):
 
                 txt_ods = gr.Textbox(value="ods", visible=False)