Display images with next and back button

🎈 Using Streamlit
1

Summary

I have a list of images to display. I load the images and display them with annotations. I want the user to be able to edit existing annotations or add new ones. I want to display each image one by one, and I want to let the user the option to go back and forth through the image series. How can this be done?
I was thinking of a form, but I know there is only a single submit buttin in a form and no option to add buttons (next/back)

2

Here is very rough example using a st.text_area to annotate each image.

imageAnnotate

Code: 
import streamlit as st
from dataclasses import dataclass

def next(): st.session_state.counter += 1
def prev(): st.session_state.counter -= 1
if 'counter' not in st.session_state: st.session_state.counter = 0

@dataclass
class AnnotatedImage():
    '''
    Dataclass to store an image with an id and an annotation
    '''
    id: int
    annotation = ""
    
    def __post_init__(self):
        self.url = f"https://dummyimage.com/600x200/000/fff&text=IMAGE_{self.id}"

def main():

    # Load images and the current annotations
    if "my_images" not in st.session_state:
        my_images = [AnnotatedImage(id=i) for i in range(5)]
        st.session_state.my_images = my_images

    else: 
        my_images = st.session_state.my_images

    n_imgs = len(my_images)

    # App layout
    container = st.empty()
    cols = st.columns(2)
    with cols[1]: st.button("Next ➡️", on_click=next, use_container_width=True)
    with cols[0]: st.button("⬅️ Previous", on_click=prev, use_container_width=True)    
    
    # Fill layout
    with container.container():
        ## Select image based on the current counter
        img = my_images[st.session_state.counter%n_imgs]

        ## Display image
        st.image(img.url, use_column_width=True)
        
        ## Get annotation from text_area and allow modification
        text = st.text_area(f"Insert annotation for image {img.id}:", value=img.annotation)
        img.annotation = text

    # Show state of changes
    with st.sidebar:
        "****"
        "### Debug"
        f" `{st.session_state.counter=}`"
        st.table({img.id : img.annotation for img in my_images})

if __name__ == "__main__":
    main()
1 Like
3

:slight_smile: hank you so much! I never used the datacalss module, In my app I just built a data structure of nested dicts to include metadata of images e.g., fu;; path, annotated object lables, bbox values and more.
I see you used container (also never used that feature) and defined a function of “next” and “prev” and values are stored in session state. Will try to implement this. thank you so much!!:slight_smile: