app.py

import streamlit as st
import pandas as pd
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.palettes import Category10
from bokeh.transform import factor_cmap

# --- 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 perceive real data. 
    </p>
    """,
    unsafe_allow_html=True
)

# Get Data
df = pd.read_csv("data/data.csv")

source = ColumnDataSource(data=dict(
    x=df['x'],
    y=df['y'],
    label=df['label'],
    img=df['img']
))

unique_labels = df['label'].unique().tolist()
palette = Category10[len(unique_labels)] if len(unique_labels) <= 10 else Category10[10]


# Configure figure
TOOLTIPS = """
<div>
    <div>
        <img src="@img{safe}" style="width:400px; 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>
"""


p = figure(width=400, height=400, tooltips=TOOLTIPS, title="")
p.scatter('x', 'y', size=8, source=source, color=factor_cmap('label', palette=palette, factors=unique_labels))

st.bokeh_chart(p)