app.py

import streamlit as st
import pandas as pd
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool

# --- 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']
))

# 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=20, source=source)

st.bokeh_chart(p)