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)
Here is very rough example using a st.text_area to annotate each image.
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()
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!!