How to maintain images and text even if change some widget on sidebar

I have some page that show some figures depending on which configuration of choices you make in selectboxes in sidebar, and it will show the figure only if you hit an ‘OK’ button on sidebar, but i want to know if there is a way of maintaing all the previous configuration even if you change something and reload the new image only if you hit ‘OK’ button again… If it is, can you tell me how i do?
Thanks!!

Please, someone know anything about?

Hey @matthewsjones,

Your questions seems to be related to this post

Please let us know if this helps you

I don’t exactly know how to use SessionState in my example, I am a little confused about that, it can really be my solution, but I can’t see it right… I just want to hold the last previous configuration until change a widget, if you know any other easy way to help me I’ll be much appreciated… Thanks!!

to simplify the question:
I just want to keep showing the last previous configuration until change a widget

1 Like

Hi @matthewsjones

I’ve tried to understand your pain but it’s difficult without a small code example and/ or a screenshot.

Could you post some?

1 Like

Hi @Marc

My code:

import streamlit as st
st.sidebar.title('CLIMATE FORECAST')
model_choice = st.sidebar.selectbox('MODELS:', ['CFSv2', 'GFDL'])
var_choice = st.sidebar.selectbox('VARS:', ['PCP', 'TEMP'])
fig = f'{model_choice}_{var_choice}.png'
submit = st.sidebar.button('submit')
if submit:
    st.image(open(fig, 'rb').read(), format='png')

If I choose any option in select box, streamlit will display image after click ‘submit’ button. It’s works very well.

But… After that, if I change any option in select box the current image will disappear:

I would like to keep current image until click ‘submit’ button to display images for the other options.

Thanks in advance!

1 Like

There are two states (sets of variables) you need to maintain for your use case. One is for the image you are currently displaying and the other is the new image you are accumulating settings for.
One way to handle this would be to pass your image into a cached function, with the update option on
Then add an else clause to the if submit:

> if submit:
>     get image with new parameters 
>     update cache
>     display image
> else:
>     get cached image
>     display image

Declaring the figure

fig = f'{model_choice}_{var_choice}.png'

inside the if doesn’t work?

If I understood the functionality of the button, the image should only change after clicking the submit button. However, the images are changing (disappearing) before I click the submit button.

nope

I updated my code for anyone to test.

Just type:

streamlit run https://gitlab.com/marcelorodriguesss/streamlit-button-test/raw/master/streamlit_button.py

okay I found you a solution, but you need to use session_state

import streamlit as st
from session_state import SessionState

st.sidebar.title('CLIMATE FORECAST')

model_choice = st.sidebar.selectbox('MODELS:', ['CFSv2', 'GFDL'])
var_choice = st.sidebar.selectbox('VARS:', ['PCP', 'TEMP'])

fig = f'{model_choice}_{var_choice}.jpg'

img = SessionState.get(img = None)

submit = st.sidebar.button('submit')
if submit:
	img.img = open(fig, 'rb').read()

try:
	st.image(img.img, format='jpg')
except:
	pass
1 Like

just add this file to your repo and change the variables names in my code

2 Likes

Great!

Thanks @Soufiane_Fartit that is really helpful, is there any way of doing closer to this with text? not only images, like text cache!
Sorry the delay to answer, because of end year reccess I wasn’t working in this project.

And also, one thing, always that I put 2 images over a SessionState like this:

import streamlit as st
import SessionState

st.sidebar.title('CLIMATE FORECAST')

model_choice = st.sidebar.selectbox('MODELS:', ['CFSv2', 'GFDL'])
var_choice = st.sidebar.selectbox('VARS:', ['PCP', 'TEMP'])

fig = f'{model_choice}_{var_choice}.jpg'
fig2 = 'CFSv2_PCP.jpg'

img = SessionState.get()
img2 = SessionState.get()

submit = st.sidebar.button('submit')
if submit:
    img.img = open(fig, 'rb').read()
    img2.img = open(fig2, 'rb').read()

try:
    st.image(img.img, format='jpg')
    st.image(img2.img, format ='jpg')
except:
    pass

It bugs the code, ignore all caching and exhibit only one image doubled no matter what choices I press and pressed submit button…
Happens this:


The image it’s just an example that I google searched .
Do you know any way of caching more than one image with text?
Thanks!

1 Like

Hi @matthewsjones

I have not installed or used session state yet but my understanding is that you should use it as

import streamlit as st
import SessionState

st.sidebar.title('CLIMATE FORECAST')

model_choice = st.sidebar.selectbox('MODELS:', ['CFSv2', 'GFDL'])
var_choice = st.sidebar.selectbox('VARS:', ['PCP', 'TEMP'])

fig = f'{model_choice}_{var_choice}.jpg'
fig2 = 'CFSv2_PCP.jpg'

state = SessionState.get(img=None, img2=None)

submit = st.sidebar.button('submit')
if submit:
    state.img = open(fig, 'rb').read()
    state.img2 = open(fig2, 'rb').read()

try:
    st.image(state.img, format='jpg')
    st.image(state.img2, format ='jpg')
except:
    pass

Maybe you could try it out and see if it works?

2 Likes

Thank you! Really worked :smiley:

1 Like

Awesome @matthewsjones. Thanks that you reported back that it works. It will help me and others :+1:

1 Like