Adding more images with button clicks

🎈 Using Streamlit
1

I am currently writing a Spotify artist recommendation system.
I’ve structured it so that after the user enters an Artist’s name, they receive three entries (artist image + name) of similar artists. The user can then click a button to load three more entries each time. This works for 6 entries before the bottom 3 are replaced by the next three (looks like a grid of square images). Is there any way I could change this so the previous suggestions are maintained and the subsequent entries are appended?
Thanks!

2

You can use a value in Session State to dictate how many results to show. If you use a button to increase that number, then each time the app reruns form the button click it will show more results. For example, a two-column display can work something like this:

import streamlit as st

if "results" not in st.session_state:
    st.session_state.results = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"]
    st.session_state.show = 2

def add_two():
    st.session_state.show += 2
    st.session_state.show = min(st.session_state.show, len(st.session_state.results))

cols = st.columns(2)

for i in range(st.session_state.show):
    cols[i%2].write(st.session_state.results[i])

no_more_results = st.session_state.show >= len(st.session_state.results)
st.button("Show more", disabled=no_more_results, on_click=add_two)
3

Thank you!
However, one problem I’m facing is that if the user presses the
‘more button’, upon the next search the website will display more than three entries. How can I ‘refresh’ the state so if another artist search is made it wipes out the previous entries and spits out only three results? I’ve tried using st.rerun and a counter but seem to be experiencing an infinite loop.

4

When a new search is performed, set the value of st.session_state.show back to the initial quantity. Exactly where and how depends on the rest of your script. If you have things arranged nicely so that your searching function only happens upon a new query, then it’s as easy as setting the “show” value at the end of that query (to the minimum of your row size or number of results, for instance). If your search is being executed with each script rerun, you might need to take a few extra steps to set the value only on a changed search.