This is a clickable images component base on the https://github.com/vivien000/st-clickable-images component
Project description
streamlit-clickable-image
[This is a patch of st-clickable-image]
stream-clickable-images
is a Streamlit component to display one or several images and detect when they are clicked on.
Installation
pip install stream-clickable-images
Quickstart
import streamlit as st
from streamlit_clickable_images import clickable_images
clicked = clickable_images(
[
"https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=700",
"https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=700",
"https://images.unsplash.com/photo-1582550945154-66ea8fff25e1?w=700",
"https://images.unsplash.com/photo-1591797442444-039f23ddcc14?w=700",
"https://images.unsplash.com/photo-1518727818782-ed5341dbd476?w=700",
],
titles=[f"Image #{str(i)}" for i in range(5)],
div_style={"display": "flex", "justify-content": "center", "flex-wrap": "wrap"},
img_style={"margin": "5px", "height": "200px"},
)
st.markdown(f"Image #{clicked} clicked" if clicked > -1 else "No image clicked")
This works as well with local images if you use base64
encodings:
import base64
import streamlit as st
from streamlit_clickable_images import clickable_images
images = []
for file in ["image1.jpeg", "image2.jpeg"]:
with open(file, "rb") as image:
encoded = base64.b64encode(image.read()).decode()
images.append(f"data:image/jpeg;base64,{encoded}")
clicked = clickable_images(
images,
titles=[f"Image #{str(i)}" for i in range(len(images))],
div_style={"display": "flex", "justify-content": "center", "flex-wrap": "wrap"},
img_style={"margin": "5px", "height": "200px"},
)
st.markdown(f"Image #{clicked} clicked" if clicked > -1 else "No image clicked")
Usage
clickable_images(paths, titles=[], div_style={}, img_style={}, key=None )
Displays one or several images and returns the index of the last image clicked on (or -1 before any click)
Parameters
paths
(list): the list of URLs of the imagestitles
(list): the (optional) titles of the imagesdiv_style
(dict): a dictionary with the CSS property/value pairs for the div containerimg_style
(dict): a dictionary with the CSS property/value pairs for the imageskey
(str or None): an optional key that uniquely identifies this component. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Close
Hashes for streamlit_clickable_images-0.0.3.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | d2800e67a7e518ae77ede61dd808231446735c139d361347b46b918c2a2f870f |
|
MD5 | ad414315408b49883a7636045261e1b0 |
|
BLAKE2b-256 | 5c508c1f722790538a7641a47565a27aaa7c721d2784e1c0aa6118088125b510 |
Close
Hashes for streamlit_clickable_images-0.0.3-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 4a32bca855913a52fd6afd1b2650d53a6aba82f4a75d58e447d1d967644cb7ab |
|
MD5 | 55fb5bde6e20f704f1299f32017cbfc6 |
|
BLAKE2b-256 | a19817b963794df39207770a7ae91eb9b8af2cefb33be700cd04fa0c090edaa5 |