Frame for 2 Models

app.py

@@ -4,44 +4,7 @@ from bokeh.plotting import figure
 from bokeh.models import ColumnDataSource
 from bokeh.palettes import Category10
 
-# --- Define Styles ---
-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;
-    }
-    </style>
-    """,
-    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(
-    """
-    <p class="custom-text">
-    Explore how Donut perceives real data. 
-    </p>
-    """,
-    unsafe_allow_html=True
-)
-
-# Cargar el CSV
-df = pd.read_csv("data/data.csv")
-unique_labels = df['label'].unique().tolist()
-
-# Definir tooltips para la imagen y la etiqueta
+
 TOOLTIPS = """
 <div>
     <div>
@@ -53,17 +16,14 @@ TOOLTIPS = """
 </div>
 """
 
-# Crear contenedor para el gráfico
-plot_placeholder = st.empty()
 
-# Función que genera y muestra el gráfico a partir de una lista de labels
-def render_plot(selected_labels):
+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, title="")
+    p = figure(width=400, height=400, tooltips=TOOLTIPS)
     
     num_labels = len(selected_labels)
     # Ajuste de la paleta
@@ -74,7 +34,7 @@ def render_plot(selected_labels):
     else:
         palette = Category10[10][:num_labels]
 
-    # Graficar cada label por separado para poder asignar su color y legend_label
+    # Graficar cada label por separado
     for label, color in zip(selected_labels, palette):
         subset = filtered_data[filtered_data['label'] == label]
         source = ColumnDataSource(data=dict(
@@ -91,15 +51,94 @@ def render_plot(selected_labels):
 
     plot_placeholder.bokeh_chart(p)
 
-# Mostrar inicialmente el gráfico con todas las etiquetas
-render_plot(unique_labels)
 
-# --- Desplegable (multiselect) colocado debajo del gráfico ---
-selected_labels = st.multiselect(
-    "Select Subsets to Visualize:",
-    options=unique_labels,
-    default=unique_labels
-)
+def render_plot_donut(selected_labels):
+    render_plot(selected_labels, df, plot_placeholder)
+
+
+def render_plot_idefics2(selected_labels):
+    render_plot(selected_labels, df2, plot_placeholder2)
+
+
+def config_style():
+    
+    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;
+        }
+        </style>
+        """,
+        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(
+        """
+        <p class="custom-text">
+        Explore how Donut perceives real data. 
+        </p>
+        """,
+        unsafe_allow_html=True
+    )
+
+if __name__ == "__main__":
+
+    config_style()
+
+    # --- Primer gráfico: datos de data.csv ---
+    df = pd.read_csv("data/data_donut_pca.csv")
+    unique_labels = df['label'].unique().tolist()
+
+    # Contenedor para el primer gráfico
+    plot_placeholder = st.empty()
+
+    # Mostrar inicialmente el primer gráfico con todas las etiquetas
+    render_plot_donut(unique_labels)
+
+    # Desplegable (multiselect) para el primer gráfico
+    selected_labels = st.multiselect(
+        "",
+        options=unique_labels,
+        default=unique_labels
+    )
+
+    # Actualizar gráfico al cambiar la selección
+    render_plot_donut(selected_labels)
+
+    # --- Segundo gráfico: datos de data_idefics2.csv ---
+    st.markdown('<h2 class="sub-title">Idefics2</h2>', unsafe_allow_html=True)
+
+    df2 = pd.read_csv("data/data_donut_tnse.csv")
+    unique_labels2 = df2['label'].unique().tolist()
+
+
+    # Contenedor para el segundo gráfico
+    plot_placeholder2 = st.empty()
+
+
+    # Mostrar inicialmente el segundo gráfico con todas las etiquetas
+    render_plot_idefics2(unique_labels2)
+
+    # Desplegable (multiselect) para el segundo gráfico
+    selected_labels2 = st.multiselect(
+        "",
+        options=unique_labels2,
+        default=unique_labels2,
+        key="idefics2"
+    )
 
-# Al cambiar la selección, volver a renderizar el gráfico
-render_plot(selected_labels)
+    # Actualizar el gráfico del segundo conjunto de datos al cambiar la selección
+    render_plot_idefics2(selected_labels2)