Include Different Dataset Versions and Fancy Display

app.py

@@ -2,7 +2,7 @@ import streamlit as st
 import pandas as pd
 from bokeh.plotting import figure
 from bokeh.models import ColumnDataSource
-from bokeh.palettes import Category10
+from bokeh.palettes import Reds9, Blues9
 from sklearn.decomposition import PCA
 from sklearn.manifold import TSNE
 
@@ -17,149 +17,126 @@ TOOLTIPS = """
 </div>
 """
 
-def render_plot(selected_labels, df, plot_placeholder):
-    if not selected_labels:
-        st.write("No data to display. Please select at least one subset.")
-        return
-
-    filtered_data = df[df['label'].isin(selected_labels)]
-    p = figure(width=400, height=400, tooltips=TOOLTIPS)
-    
-    num_labels = len(selected_labels)
-    # Ajuste de la paleta
-    if num_labels < 3:
-        palette = Category10[3][:num_labels]
-    elif num_labels in [3, 4, 5, 6, 7, 8, 9, 10]:
-        palette = Category10[num_labels]
-    else:
-        palette = Category10[10][:num_labels]
-
-    # Graficar cada label por separado
-    for label, color in zip(selected_labels, palette):
-        subset = filtered_data[filtered_data['label'] == label]
-        source = ColumnDataSource(data=dict(
-            x=subset['x'],
-            y=subset['y'],
-            label=subset['label'],
-            img=subset['img']
-        ))
-        p.scatter('x', 'y', size=12, source=source, color=color, legend_label=label)
-    
-    p.legend.title = "Subsets"
-    p.legend.location = "top_right"
-    p.legend.click_policy = "hide"
-
-    plot_placeholder.bokeh_chart(p)
-
 def config_style():
-    st.markdown(
-        """
+    st.markdown("""
         <style>
-        .main-title {
-            font-size: 50px;
-            color: #4CAF50;
-            text-align: center;
-        }
-        .sub-title {
-            font-size: 30px;
-            color: #555;
-        }
-        .custom-text {
-            font-size: 18px;
-            line-height: 1.5;
-        }
+        .main-title { font-size: 50px; color: #4CAF50; text-align: center; }
+        .sub-title { font-size: 30px; color: #555; }
+        .custom-text { font-size: 18px; line-height: 1.5; }
         </style>
-        """,
-        unsafe_allow_html=True
-    )
-
+    """, unsafe_allow_html=True)
     st.markdown('<h1 class="main-title">Merit Secret Embeddings 🎒📃🏆</h1>', unsafe_allow_html=True)
-    st.markdown('<h2 class="sub-title">Donut</h2>', unsafe_allow_html=True)
+    st.markdown('<h2 class="sub-title">Donut - Comparación de versiones</h2>', unsafe_allow_html=True)
     st.markdown(
         """
         <p class="custom-text">
-        Explore how Donut perceives real data. 
+        Se cargan ambas versiones de los embeddings y se aplica una reducción dimensional sobre el conjunto combinado.
+        Los puntos de la versión vanilla se muestran como <strong>círculos</strong> (tonos de rojo)
+        y los de la v2 como <strong>cuadrados</strong> (tonos de azul).
         </p>
-        """,
-        unsafe_allow_html=True
-    )
+        """, unsafe_allow_html=True)
 
-if __name__ == "__main__":
-    config_style()
+def add_dataset_to_fig(fig, df, selected_labels, marker, color_mapping):
+    for label in selected_labels:
+        subset = df[df['label'] == label]
+        if subset.empty:
+            continue
+        source = ColumnDataSource(data=dict(
+            x = subset['x'],
+            y = subset['y'],
+            label = subset['label'],
+            img = subset['img']
+        ))
+        color = color_mapping[label]
+        if marker == "circle":
+            fig.circle('x', 'y', size=10, source=source,
+                       fill_color=color, line_color=color,
+                       legend_label=f"{label} (vanilla)")
+        elif marker == "square":
+            fig.square('x', 'y', size=10, source=source,
+                       fill_alpha=0, line_color=color,
+                       legend_label=f"{label} (v2)")
 
-    # --- Primer gráfico: datos de Donut ---
-    # Se asume que "embeddings_donut.csv" contiene las columnas "dim_0", "dim_1", ..., "dim_N", además de "label" e "img"
-    df_donut = pd.read_csv("data/donut_de_Rodrigo_merit_secret_all_embeddings.csv")
-    
-    # Selección de visualización
-    donut_mode = st.selectbox(
-        "Seleccione visualización para Donut:",
-        options=["PCA", "t-SNE"]
-    )
-    
-    # Extraer columnas de embedding (aquellas que empiezan con "dim_")
-    embedding_cols = [col for col in df_donut.columns if col.startswith("dim_")]
-    all_embeddings = df_donut[embedding_cols].values
-    
-    if donut_mode == "PCA":
-        pca = PCA(n_components=2)
-        reduced = pca.fit_transform(all_embeddings)
-    else:
-        tsne = TSNE(n_components=2, random_state=42, perplexity=30, learning_rate=200)
-        reduced = tsne.fit_transform(all_embeddings)
-    
-    # Añadir las coordenadas resultantes al DataFrame
-    df_donut['x'] = reduced[:, 0]
-    df_donut['y'] = reduced[:, 1]
-    
-    unique_labels = df_donut['label'].unique().tolist()
-    plot_placeholder = st.empty()
+def main():
+    config_style()
     
-    # Mostrar gráfico inicial con todas las etiquetas
-    render_plot(unique_labels, df_donut, plot_placeholder)
+    st.markdown('<h2 class="sub-title">Carga y reducción dimensional</h2>', unsafe_allow_html=True)
     
-    # Desplegable para filtrar etiquetas
-    selected_labels = st.multiselect(
-        "Seleccione subsets para visualizar (Donut):",
-        options=unique_labels,
-        default=unique_labels
-    )
-    render_plot(selected_labels, df_donut, plot_placeholder)
+    # Cargar ambas versiones de los embeddings
+    df_vanilla = pd.read_csv("data/donut_de_Rodrigo_merit_secret_all_embeddings.csv")
+    df_v2      = pd.read_csv("data/donut_de_Rodrigo_merit_es-digital-seq_embeddings.csv")
     
-    # --- Segundo gráfico: datos de Idefics2 ---
-    st.markdown('<h2 class="sub-title">Idefics2</h2>', unsafe_allow_html=True)
+    # Agregar una columna para identificar la versión
+    df_vanilla["version"] = "vanilla"
+    df_v2["version"]      = "v2"
     
-    # Se asume que "embeddings_idefics2.csv" tiene la misma estructura
-    df_idefics2 = pd.read_csv("data/embeddings_idefics2.csv")
+    # Se asume que ambas versiones tienen columnas de embedding que comienzan con "dim_"
+    embedding_cols = [col for col in df_vanilla.columns if col.startswith("dim_")]
     
-    idefics2_mode = st.selectbox(
-        "Seleccione visualización para Idefics2:",
-        options=["PCA", "t-SNE"],
-        key="idefics2_mode"
-    )
+    # Combinar ambos dataframes para que la reducción se aplique sobre el conjunto completo
+    df_combined = pd.concat([df_vanilla, df_v2], ignore_index=True)
     
-    embedding_cols2 = [col for col in df_idefics2.columns if col.startswith("dim_")]
-    all_embeddings2 = df_idefics2[embedding_cols2].values
+    # Selección del método de reducción dimensional
+    reduction_method = st.selectbox("Seleccione método de reducción:", options=["PCA", "t-SNE"])
+    all_embeddings = df_combined[embedding_cols].values
+    if reduction_method == "PCA":
+        reducer = PCA(n_components=2)
+    else:
+        reducer = TSNE(n_components=2, random_state=42, perplexity=30, learning_rate=200)
+    reduced = reducer.fit_transform(all_embeddings)
+    
+    # Asignar las coordenadas resultantes al dataframe combinado
+    df_combined['x'] = reduced[:, 0]
+    df_combined['y'] = reduced[:, 1]
+    
+    # Separar nuevamente según la versión
+    df_vanilla_trans = df_combined[df_combined["version"] == "vanilla"].copy()
+    df_v2_trans      = df_combined[df_combined["version"] == "v2"].copy()
+    
+    # Obtener los subsets únicos de cada versión
+    unique_labels_vanilla = sorted(df_vanilla_trans['label'].unique().tolist())
+    unique_labels_v2      = sorted(df_v2_trans['label'].unique().tolist())
+    
+    # Selectores para filtrar los subsets a visualizar
+    selected_labels_vanilla = st.multiselect("Seleccione subsets para visualizar (Vanilla):",
+                                             options=unique_labels_vanilla,
+                                             default=unique_labels_vanilla)
+    selected_labels_v2 = st.multiselect("Seleccione subsets para visualizar (v2):",
+                                        options=unique_labels_v2,
+                                        default=unique_labels_v2)
+    
+    # Generar mapeos de colores específicos:
+    # Para vanilla se usarán tonos de rojo (paleta Reds9)
+    num_vanilla = len(selected_labels_vanilla)
+    if num_vanilla <= 9:
+        red_palette = Reds9[:num_vanilla]
+    else:
+        red_palette = (Reds9 * ((num_vanilla // 9) + 1))[:num_vanilla]
+    color_mapping_vanilla = {label: red_palette[i] for i, label in enumerate(sorted(selected_labels_vanilla))}
     
-    if idefics2_mode == "PCA":
-        pca2 = PCA(n_components=2)
-        reduced2 = pca2.fit_transform(all_embeddings2)
+    # Para v2 se usarán tonos de azul (paleta Blues9)
+    num_v2 = len(selected_labels_v2)
+    if num_v2 <= 9:
+        blue_palette = Blues9[:num_v2]
     else:
-        tsne2 = TSNE(n_components=2, random_state=42, perplexity=30, learning_rate=200)
-        reduced2 = tsne2.fit_transform(all_embeddings2)
+        blue_palette = (Blues9 * ((num_v2 // 9) + 1))[:num_v2]
+    color_mapping_v2 = {label: blue_palette[i] for i, label in enumerate(sorted(selected_labels_v2))}
     
-    df_idefics2['x'] = reduced2[:, 0]
-    df_idefics2['y'] = reduced2[:, 1]
+    # Crear una figura única para ambas versiones
+    fig = figure(width=600, height=600, tooltips=TOOLTIPS,
+                 title="Donut: Vanilla (círculos, rojos) vs v2 (cuadrados, azules)")
     
-    unique_labels2 = df_idefics2['label'].unique().tolist()
-    plot_placeholder2 = st.empty()
+    # Agregar datos de la versión vanilla (círculos con tonos de rojo)
+    add_dataset_to_fig(fig, df_vanilla_trans, selected_labels_vanilla,
+                       marker="circle", color_mapping=color_mapping_vanilla)
+    # Agregar datos de la versión v2 (cuadrados sin relleno, tonos de azul)
+    add_dataset_to_fig(fig, df_v2_trans, selected_labels_v2,
+                       marker="square", color_mapping=color_mapping_v2)
     
-    render_plot(unique_labels2, df_idefics2, plot_placeholder2)
+    fig.legend.location = "top_right"
+    fig.legend.click_policy = "hide"
     
-    selected_labels2 = st.multiselect(
-        "Seleccione subsets para visualizar (Idefics2):",
-        options=unique_labels2,
-        default=unique_labels2,
-        key="idefics2"
-    )
-    render_plot(selected_labels2, df_idefics2, plot_placeholder2)
+    st.bokeh_chart(fig)
+
+if __name__ == "__main__":
+    main()