File size: 2,039 Bytes
758d5fe caac501 32b93c1 caac501 32b93c1 38d1d6c 32b93c1 758d5fe 32b93c1 758d5fe 32b93c1 b3fbf0a 32b93c1 c7fc7de caac501 758d5fe 32b93c1 758d5fe 1ce83ef 32b93c1 758d5fe 2a64ccd f607d8e 5c02a88 227e34c f214e94 227e34c 2a64ccd 758d5fe 88897ab caac501 43b75a4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import streamlit as st
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool, LinearColorMapper, ColorBar, BasicTicker
from bokeh.transform import linear_cmap
from bokeh.palettes import Viridis256
from datasets import load_dataset
# Load the dataset
dataset = load_dataset("tonyassi/revolve1-embeddings-xy")['train']
# Extract data
data = {
'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 a color mapper with reversed palette
color_mapper = linear_cmap(field_name='id', palette=Viridis256[::-1], low=0, high=len(data['id']))
# Create the figure
p = figure(title="Image Similarity Data Visualization", tools="pan,box_zoom,wheel_zoom,zoom_in,zoom_out,save,reset,hover", active_scroll="wheel_zoom",
width=1500, height=1000, tooltips="""
<div>
<div><strong>@label</strong></div>
<div><img src="@image" ></div>
</div>
""")
p.circle('x', 'y', size=9, 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
st.set_page_config(layout='wide')
st.markdown("""
# Image Similarity Data Visualization
by [Tony Assi](https://www.tonyassi.com/)
Images can be previewed on hover. Images position are based on similarity, images close to each other look similar. The colors represent the best seller index. 0 is best seller. The dataset is [tonyassi/revolve1-embeddings-xy](https://huggingface.co/datasets/tonyassi/revolve1-embeddings-xy).
""")
#st.html('<br><br><br><br>')
# Display the Bokeh figure in Streamlit
st.bokeh_chart(p,use_container_width=True)
|