Kinda love how much you can customise streamlit using markdown

Show the Community!
1

The other day I wanted to turn a python script into a website and came across streamlit - fell in love immediately. One thing leads to another and I ended up making this:
Bandcamp Explorer (bc-explorer.app)

Love that streamlit gives you such a nice clean base to work with that you can customise (almost) how you like! My favourite thing here might be the use of a wrapping div around some generated markdown so that I could target it with CSS easily.

3 Likes
2

Whoa, this is super cool, @roniqueh!! :heart_eyes: I especially love that you can listen to previews within the app :exploding_head: It’s been years since I’ve used bandcamp, and your app has nudged me to re-explore it.

image
image1756Ă—1467 485 KB

2 Likes
4

:slight_smile: Glad it’s got you going through bandcamp again! Honestly my favourite way to find music. And yes was so glad when I realised just pasting embeds with the right data works for the previews. Btw if a recommended release is an album/ep, there should be a next/back button in the embed to listen to the other tracks in there too

1 Like
5

Hi @roniqueh very nice app! Few ideas regarding usability:

  1. It seems that dark theme should be forced. The main site with a light theme is quite hard to read.
  2. Maybe the input field “what bandcamp release do you want to explore?” could have some initial example?
  3. You could use st.experimental_get_query_params - Streamlit Docs and allow users to share their results :wink:
3 Likes
6

Wow @TomJohn, totally forgot that I had dark mode enabled on all my devices - thanks for that! Was working on 3 before, just need to think about how to implement it properly (since running with the same inputs won’t necessarily give same results between runs) - probably a UID that I can associate with the data produced from the run. Thank you for the idea with point 2, will get on that asap :smiley:

7

Just curious: was there a reason you decided to self-host rather than deploy on Community Cloud?

1 Like
8

Hmm @snehankekre a couple small reasons: I noticed the initial load on streamlit cloud would take a while, so I ended up wondering what it’d be like running on a cheap VPS and it seems to load initially 4-5 seconds faster for me. Since I don’t think I’ll get too many concurrent users, I figured this trade off would be worth it. Also I wanted to add my own meta tags so it’d show up on twitter/facebook etc how I’d want it to. First time making a web server too so it was nice to learn a couple of things at once.

9

Hmm tougher than I thought to implement your second point, since the key of that text input uses session states from the sidebar if the user selects an input from there. I’ve done it using the placeholder argument for now. Hopefully dark mode should be forced now too!

Thanks for the suggestions again :slight_smile:

1 Like
10

Unfortunately, dark mode is not yet available. In the streamlit community cloud, you must restart your app for changes to take effect; I’m not sure what happens when you self-host.

About default value: in one of my projects I am providing default values to the user using:

st.text_input("Base population # successes", value=a)

And a is just a variable. It seems that similar approach could be used in your app as well?

https://chisquared.streamlit.app/

image
image1920Ă—830 32 KB

1 Like
12

Hmm that’s strange - I’ve updated the app through Github actions which seems to work with the placeholder coming up on your screenshot. I can also see the config.toml file on my server… wonder what’s up.

And ooo yes change value argument wasn’t working before but I realised I needed to change the initial session state to the value I want to use too.

Just working on the custom urls for sharing now!

13

Hey, could you do me a big favour and see if dark mode forced now? I checked on edge and looks like it was… Also finally added saving results to a url :smiley:

14

Yup. Seems to work now :slight_smile:

1 Like
15

Hi roniqueh
May i know which component you are using for the search box.
Like the way it shows the results would like to use it.
Thanks
Sai

16

Hey Sai, it’s just a normal text input with buttons. I made the buttons have full width in css:

button_style = """
                <style>

                section[data-testid="stSidebar"] div.stButton button {
                width: 100%;
                }
                
                </style>
                """

st.markdown(button_style, unsafe_allow_html=True)
17

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.