st-clickable-images icon indicating copy to clipboard operation
st-clickable-images copied to clipboard

While changing the tabs, images disappear

Open OrkhanHI opened this issue 2 years ago • 2 comments

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.

OrkhanHI avatar Oct 12 '22 05:10 OrkhanHI