UI content retains on using multiple sliders/buttons

Using Streamlit
1

Hi All, I am creating multipage streamlit ui…
In one page I have the option to upload File only
In another page there are 10 slider buttons. The user should be able to move around the pages… When the user moves from one page to another, the contents of page1 which has 10 sliders are getting copied in the backgroud… is there any way I could get fresh Page when the user toggles between the pages…

The code is as follows:
main_app.py

import app1
import app2
import streamlit as st
PAGES = {
    "Page 1": app1,
    "Page 2": app2
}
st.sidebar.title('Navigation')
selection = st.sidebar.radio("Go to", list(PAGES.keys()))
page = PAGES[selection]
page.app()

app1.py

import streamlit as st
def app():
    st.empty()
    st.title('APP1')
    st.write('Welcome to app1')
    for i in range(10):
        st.slider("Helpful ?", 1, 5, key = str(i))
    return

app2.py

import streamlit as st
def app():
    st.empty()
    st.title('Welcome to App2')
    uploaded_file = st.file_uploader("Upload New File")

When we run 1st time Page looks like below

image
image1750×890 18.1 KB

When clicked on Page 2

image
image1742×649 18.5 KB

If we see above, we can see welcome to Page/App 1 in background

When I click on Page 1 again

image
image1737×602 15.3 KB

Now when I click on Page 2:

image
image1782×599 20.7 KB

It goes on forever!!! how can I get rid of this?

Thank You,
Chait

2

Hi @chait333, welcome to the Streamlit community!! :wave: :partying_face:

I was able to resolve this issue by removing st.empty() from app1.py

multipage-render

Best, :balloon:
Snehan

3

Hey Thanks for the response… removing empty helped and also How can I get the values entered in the slidebars? I want to store them locally for future reference.There are 10 sliders and I want to store the result of all the selected values of these sliders.