Checkbox and image keeps disappearing

[cyter]

Summary

I’m a Streamlit newbie. I’m trying to create a GUI to help users annotate some images (multilabel image annotation). I’ve created a next button to display the images sequentially. However, when the user clicks on a checkbox, the image and all checkboxes disappear.

Steps to reproduce

Code snippet:

import streamlit as st
import os, glob

# Get list of images in folder
pathsImages = glob.glob(os.path.join("./animals", "*.jpeg"))
    
if 'counter' not in st.session_state: 
    st.session_state.counter = 0

if 'label_dict' not in st.session_state: 
    st.session_state.label_dict = {}

col1, col2 = st.columns(2)

def select_objects():
    col1.write('Select objects observed:')
    option_1 = col1.checkbox('Cat')
    option_2 = col1.checkbox('Dog')
    option_3 = col1.checkbox('Sheep')

    st.session_state.label_dict = {'Cat': option_1,
                                    'Dog': option_2,
                                    'Sheep': option_3,
                                    }
    col2.write(st.session_state.label_dict)

def show_nextPhoto(photo):
    col2.image(photo,caption=photo)
    col2.write(f"Index as a session_state attribute: {st.session_state.counter}")
    
    ## Increments the counter to get next photo
    st.session_state.counter += 1
    if st.session_state.counter >= len(pathsImages):
        st.session_state.counter = 0
        
    select_objects()

col1.subheader("List of images in folder")
col1.write(pathsImages)

with col2:
    photo = pathsImages[st.session_state.counter]
    show_btn = col1.button("Show next pic ⏭️", on_click=show_nextPhoto, args=([photo]))

Expected behavior:

1. The image and checkboxes should stay on the display until the “Show next” button is hit.
2. Users should be able to click on multiple checkboxes.
3. The checkboxes should be empty when a new image is shown.
4. Users choice of checkboxes should remain on the display when the same image is shown again (I’m only showing a “Show next” button here for a minimum reproducible example. However, for my application, I will also have a “Show previous” button. Users should be able to see their checkbox choices when they revisit old images).

Actual behavior:

1. The image and checkboxes disappear when the “Show next” button is hit.
2. Users can only click on one checkbox before the image and checkboxes disappear.
3. Users choice of checkboxes is not retained when the same image is re-displayed.

Debug info

• Streamlit version: 1.15.2
• Python version: 3.9.6
• OS version: Ubuntu 18.04.5 LTS
• Browser version: Firefox 107.0.1

[mathcatsand]

As soon as a checkbox is interacted with, the page is going to reload with your “Show next pic” returning a false value and taking away everything that was presented from the previous click.

I think it would be simpler if your show next button just focused on committing the selection to memory and incrementing the image counter. Then you could have the checkboxes and image display created at the top level, inside of maybe a simple conditional to check if the current image counter is valid.

def show_nextPhoto(cat, dog, sheep):
    # For example, assigning a selection 3-tuple to each image index, or appending a row to a dataframe
    st.session_state.label_dict(st.session_state.counter) = (cat, dog, sheep)
    st.session_state.counter += 1

col1.button("Show next pic ⏭️", on_click=show_nextPhoto, args=(option_1,option_2,option_3))

I have a gallery-type example related to this if it’s any help (although it’s not an optimized example and there are extra details I omitted in favor of simplicity over robustness to illustrate the Streamlit logic):

MathCatsAnd/Streamlit-Mechanics-Examples/blob/main/pages/relabeling_images.py

https://mathcatsand-examples.streamlit.app/relabeling_images