Update app.py

app.py

@@ -2,30 +2,46 @@ import streamlit as st
 from bokeh.plotting import figure
 from bokeh.models import ColumnDataSource, HoverTool
 
-# Example data
+from datasets import load_dataset
+from bokeh.plotting import figure, show, output_notebook
+from bokeh.models import ColumnDataSource, LinearColorMapper, ColorBar
+from bokeh.transform import linear_cmap
+from bokeh.palettes import Viridis256  # You can choose any palette you like and reverse it using [::-1]
+from bokeh.models import BasicTicker
+
+# Load the dataset
+dataset = load_dataset("tonyassi/lucy6-embeddings-xy")['train']
+
+# Extract data
 data = {
-    'x': [1, 2, 3, 4, 5],
-    'y': [10, 14, 20, 25, 30],
-    'label': ['Point 1', 'Point 2', 'Point 3', 'Point 4', 'Point 5'],
-    'image': [
-        'https://media-img.lucyinthesky.com/data/Nov24/560xAUTO/17157eb1-aba8-4161-8a44-2dd3bd73a5ff.jpg',
-        'https://media-img.lucyinthesky.com/data/Nov24/560xAUTO/dfd0c2d3-af96-4700-8fb2-cccc585c0e8b.jpg',
-        'https://media-img.lucyinthesky.com/data/Nov24/560xAUTO/ef942b7d-52ad-415b-ae88-c7c29a2491b4.jpg',
-        'https://media-img.lucyinthesky.com/data/Nov24/560xAUTO/047928d0-9168-4d29-84a5-785aec57dd6b.jpg',
-        'https://media-img.lucyinthesky.com/data/Nov24/560xAUTO/03054e31-3812-454a-bc3a-0ff207798927.jpg'
-    ]
+    'x': [item['x'] for item in dataset],
+    'y': [item['y'] for item in dataset],
+    'label': [f"ID: {item['id']}" for item in dataset],
+    'image': [item['image_url'] for item in dataset],
+    'id': [item['id'] for item in dataset]  # Include 'id' for color mapping
 }
 
 source = ColumnDataSource(data=data)
 
-# Create figure
+# Configure Bokeh plot
+output_notebook()
+
+# Create a color mapper with reversed palette
+color_mapper = linear_cmap(field_name='id', palette=Viridis256[::-1], low=0, high=100)
+
+# Create the figure
 p = figure(title="Scatter Plot with Image Hover", tools="hover", tooltips="""
     <div>
         <div><strong>@label</strong></div>
-        <div><img src="@image" style="width:200px;height:200px;"></div>
+        <div><img src="@image" ></div>
     </div>
 """)
-p.circle('x', 'y', size=10, source=source)
+p.circle('x', 'y', size=10, source=source, color=color_mapper)  # Apply the color mapper
+
+# Add color bar
+color_bar = ColorBar(color_mapper=color_mapper['transform'], width=8, location=(0, 0),
+                     ticker=BasicTicker(desired_num_ticks=10))
+p.add_layout(color_bar, 'right')  # Position the color bar to the right
 
 # Display the Bokeh figure in Streamlit
 st.bokeh_chart(p)