app.py

import streamlit as st
import pandas as pd
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource
from bokeh.palettes import Category10


TOOLTIPS = """
<div>
    <div>
        <img src="@img{safe}" style="width:128px; height:auto; float: left; margin: 0px 15px 15px 0px;" alt="@img" border="2"></img>
    </div>
    <div>
        <span style="font-size: 17px; font-weight: bold;">@label</span>
    </div>
</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 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"
    )

    # Actualizar el gráfico del segundo conjunto de datos al cambiar la selección
    render_plot_idefics2(selected_labels2)