Disable reloading of image every time a widget is updated


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 ###

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)

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.


1 Like

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!