st-clickable-images
st-clickable-images copied to clipboard
While changing the tabs, images disappear
Hi,
I have the app with 2 tabs. Both of them load some set of images with clickable-images
to give me access to selected image id.
However, when I move from one tab to another and click on the image, moving back to previous tab does not show any images.
Below is code snippet:
with tab1:
st.header("Tab1")
col1, col2 = st.columns(2)
with col1:
clicked1 = 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"},key="b"
)
uploaded_file = st.file_uploader("Choose a file")
with col2:
placeholder = st.empty()
if clicked1 != -1:
placeholder = st.empty()
img = detect(img_paths[clicked1])
placeholder.image(img)
if uploaded_file is not None:
placeholder.empty()
image = Image.open(uploaded_file)
img_array = np.array(image)
img_array = detect(img_array, True)
detection = detector.detect(img_array)
placeholder.image(img_array)
with tab2:
st.header("Tab2")
col1, col2 = st.columns(2)
with col1:
clicked2 = 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"}, key="two"
)
with col2:
if clicked2 != -1:
name, score, image = search(img_paths[clicked2])
if name is not None:
st.header(f"{name} {score}!")
original_crop = detect(img_paths[clicked2], crop=True)
together = np.concatenate([original_crop, image], axis=1)
col2.image(together)
else:
st.header(f"Person not found!")
I tried different component to refresh the page whenever tab clicked, but that automatically calls my API several times which is not the right solution.