Disable reloading of image every time a widget is updated

🎈 Using Streamlit
1

Hi,

First of all big kudos to the Streamlit team for this awesome piece of software.

I have run into a mild annoyance. I am creating an app to do image labeling (with multiple label classes). The categories are binary, and each label category is represented by a checkbox. The labels are stored and the next image is shown when upon clicking a ‘Submit’ button.

The problem:
Whenever a checkbox is checked, the app makes a new call to st.image(picture) rerenders the (same) picture, which makes the app ‘fade’ for a moment. I would like to avoid this fading if possible, or at least minimize it. Right now, it seems that the caching isn’t really doing a lot for the speed. I see some approaches.

1: Somehow pause rerendering until submit button is hit. I.e. ability to change the value of the widget without impacting the state of the app before clicking a ‘submit’ button (preferred option).
2: Make the caching work properly so that the image does not rerender (perhaps I am making some mistake regarding how caching is used?)

Can any of you good people give me some pointers?

Minimal example:

from PIL import Image
from collections import OrderedDict
import streamlit as st

categories= ['a', 'b', 'c']
checkboxes = OrderedDict({category: st.sidebar.checkbox(category) for category in categories})

### Omitted code with submit button and writing labels to file ###

@st.cache
def load_image(img_id):
    image = Image.open(f"images/{img_id}.jpg")
    return image

image = load_image("example")
st.image(image, use_column_width=True)
1 Like
2

Hey @PeterT, welcome to Streamlit, and thanks for the kind words!

As you’ve noted, this fade happens every time your app re-runs (and therefore re-renders), if it takes longer than 1 second to complete the re-render. There isn’t a real workaround for this right now, but we have an open GitHub issue that you can follow. There have been a number of requests for “form-like” widget behavior, and it’s something we’re discussing internally!

In the meantime, there are several sub-optimal workarounds if this is a real show-stopper for you:

  • Make your app run faster. (This may not be possible! It looks like you’re already using caching. Are there other long-running operations that could be cached?)
  • Modify the .stale-element CSS selector in ReportView.scss, extending the duration of the opacity transition (or removing the opacity change altogether). This would require you to build your own Streamlit, which is more work, so I’d certainly not recommend it to most users, but it’s an escape hatch if needed.

Tim

2 Likes
3

Thanks a lot for the answer @tim! It is exactly a form-like widget that I need even though I never thought of it that way - so I will be following the updates closely :slight_smile:

The second option actually sounds like a great hack for now, as I think it would suffice to remove the opacity transition for now. I will look into it. Thank you!

4

Were you able to fix this issue? I am also trying to create an image annotator.

5

Hi johnyquest

Not really, but I got to a point where it worked OK with some performance improvement and additional use of the @st.cache decorator. True ‘form-like’ behavior where reloading is disabled is as far as I am aware not a part of Streamlit yet.

Best,
Peter

1 Like
6

I just noticed that it seems to be WIP with form-like behaviour! See this pull request. Don’t know when we can expect it to be released though. @tim I can see you did a lot of work on this. Do you have a rough time estimate on when we can expect it to be released? :blush:

1 Like
7

I was having a similar “fading” issue with a canvas fading out every time a change was made to it (see this awesome package https://github.com/andfanilo/streamlit-drawable-canvas)

What I noticed was the opacity of the elements with the .element-container class were getting a class added to them while the streamlit app was rerendering, which contained the css styling of opacity{0.33}, which was causing the fading. To override this, I just added the following code, which is working for now:

st.markdown("<style>.element-container{opacity:1 !important}</style>", unsafe_allow_html=True)

Realize this isn’t a totally ideal solution but is working for now.

5 Likes
8

You can use now forms! Batch Input Widgets | Introducing Submit Button & Forms