Basic Interactive Plot Hosted in HF Space

app.py

@@ -1,34 +1,65 @@
-# Ejemplo usando st.bokeh_chart en lugar de st.components.v1.html
+import streamlit as st
+import pandas as pd
 from bokeh.plotting import figure
 from bokeh.models import ColumnDataSource, HoverTool
-import streamlit as st
-import numpy as np
-import random
 
-# Generar datos
-N = 10
-x = np.random.rand(N)
-y = np.random.rand(N)
+# --- 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
+)
 
-red_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAF/wK+bNykAAAAAElFTkSuQmCC"
-blue_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/f8/AwAI/AL+fB/9AAAAAElFTkSuQmCC"
-images = [random.choice([red_image, blue_image]) for _ in range(N)]
-labels = ["subset1" if img == red_image else "subset2" for img in images]
+# Get Data
+df = pd.read_csv("data/data.csv")
 
-source = ColumnDataSource(data=dict(x=x, y=y, img=images, label=labels))
-p = figure(title="Interactive Plot with Hover Images", tools="hover", width=600, height=600)
-p.scatter('x', 'y', size=15, source=source, fill_color="navy", alpha=0.5)
+source = ColumnDataSource(data=dict(
+    x=df['x'],
+    y=df['y'],
+    label=df['label'],
+    img=df['img']
+))
 
-hover = p.select_one(HoverTool)
-hover.tooltips = """
+# Configure figure
+TOOLTIPS = """
 <div>
-  <div>
-      <span style="font-size: 12px; font-weight: bold;">Label: @label</span>
-  </div>
-  <div>
-      <img src="@img" alt="Image" style="width:100px;"/>
-  </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)

data/data.csv

@@ -0,0 +1,6 @@
+x,y,label,img
+0.1,0.2,Point 1,https://docs.bokeh.org/static/snake.jpg
+0.3,0.4,Point 2,https://docs.bokeh.org/static/snake2.png
+0.5,0.6,Point 3,https://docs.bokeh.org/static/snake3D.png
+0.7,0.8,Point 4,https://docs.bokeh.org/static/snake4_TheRevenge.png
+0.9,0.1,Point 5,https://docs.bokeh.org/static/snakebite.jpg