Regarding Layout of Streamlit web app

Using Streamlit
1

Hi All,

I have a question, in the attached image i have a summarize button, My question is if i want to add multiple buttons containing different functionalities next to summarize button which are currently available in dropdown, How can i do that

image
image1181Ă—573 3.59 KB

Also my 2nd question is can i remove the space on the left from dropdowns or radio buttons and have the entire space for Input Text on Streamlit webapp.

Also Can you share different layouts available for Streamlit Webapp so that i can customize my Streamlit Webapp.

Please Advise.

Thanks,
Abhi

2

Hello @amrev15, welcome to the community :slight_smile:

There’s a great blogpost by the Streamlit team summarizing the current layout options available, most notably horizontal layout. Using this, you can put widgets side by side:

import streamlit as st

st.text_area("Input text")

c1, c2, c3 = st.beta_columns(3)

c1.button("Summarize")

with c2:
  st.button("Summarize me too")

c3.button("Hey Streamlit")

st.header("Tighten up left buttons with empty right columns!")

cont1, cont2, _, _, _, _ = st.beta_columns(6)
cont1.button("Tight")

with cont2:
  st.button("Tighter")

st.header("You can even control relative size of columns")
tc1, tc2, _= st.beta_columns([1,1,9])
tc1.button("Tighty")

with tc2:
  st.button("Tighterer")

image
image766Ă—470 13.9 KB

I am not sure I’m answering the correct question, but you can configure your app to be in wide mode by default with st.set_page_config(layout="wide") (the non programmatic way to configure this would be through the hamburger menu on the right, in Settings > Show app in wide mode). That way your app will be greatly expanded!

import streamlit as st

st.set_page_config(layout="wide")
st.title("Hello")
st.text_area("Enter text")
st.radio("Change me", ["Hello", "Streamlit"])
st.selectbox("Change me", ["Hello", "Streamlit"])

Hope this answers most of your thoughts! :balloon:
Fanilo

3 Likes
3

Thanks @andfanilo for the answers…you made my day brother…also i had one more below mentioned question if you can answer the same:-

Question : Can you send me examples where when we click on lets say summarize button then how to invoke the function in streamlit to summarize the text or what are the best practices in streamlit to write functions which gets invoked when user clicks on different buttons…Please Advice.

4

Well @Marisa_Smith has a great short video on this :slight_smile: Streamlit Shorts: How to make a button - YouTube

In short:

t = st.text_area("Write smthg")
if st.button("Summarize"):
    # here apply your summary functions to the text input
    summary = t.lower()
    st.write(summary)

Try and play with this. If you get stuck because you need to preserve in memory the fact that the user has hit a certain button, know that this is managed by a small gist called SessionState and you can find snippets all around the forum using this gist to preserve state accross Streamlit runs (like here).

Fanilo

2 Likes
5

Thank you so much @andfanilo for the responses, also i had 1 more question as mentioned below:-

image
image1773Ă—277 6.48 KB

My Question is in the attached image you can see i have 4 buttons with equidistant space between them but lets say if i want to add 4 more buttons, how can i reduce the space between them or it will automatically equidistance all the 8 buttons if i add ?

Another Question related to above question is what are the best practices in terms of Layout of Webapp which we want to be used by millions of customers ?

Please Advice.

6

Underneath, this is implemented via a Flexbox so all 8 buttons are going to be equidistant. You can play around with the size of containers with an array argument like st.beta_columns([2,1,2,1,2,1,2,1])

Hmmmm…this is a hard open question in which I am absolutely not a specialist, since I’m not a frontend developer nor a UX designer. So take my answer with a grain of salt.

Streamlit is designed to quickly let you build and deploy Data Science Web Apps using modern web technologies. It enables this by providing a framework, a modern layout (sidebar/content, horizontal layout and responsive design) and a set of widgets carefully designed and implemented for you with the latest web trends so you don’t have to care too much about it. For example st.beta_columns uses Flexbox underneath, a common concept in the web ecosystem that is used everywhere.

There is a lot of thought from their Product Managers, UX Designers and Developers poured into Streamlit about features, interactivity, layout, customization, scalability, accessibility and security (see this blog post for example) to make those web features easily accessible to Data Scientists in simple Python. I can see behind the closed doors of Streamlit as a Creator :smirk:

So Streamlit layout and data model already integrate the “usual” best practices for presenting Data Science on the web (Streamlit is not alone on this terrain, e.g. Shiny has success on this front too). And given the success of apps on Streamlit Sharing platform, I can say that apps are shared to millions of person and get relatively good success, at least on Twitter/Linkedin :stuck_out_tongue: .

  • (if you really want advanced deployment features for millions of paying customers maybe you need to look at Streamlit for teams instead ? pm @randyzwitch if you need more info on this)

So yes, Streamlit gives you the well-known battle-tested web practices through a simple Python interface :wink: and if you have other ideas of layout, feel free to drop an issue on their Github, some widgets and layout ideas come from other users like st.file_uploader, then the team will see how they can integrate it in a modern way.

NOW obviously:

you won’t be able to easily integrate the very latest ultra modern grid layout/accessibility keyboard options with Streamlit (it is possible through Streamlit components but those are mostly built by engineers like me who need to integrate a plugin in Streamlit and not validated by the dev team).
You won’t easily build crazy sleek looking interfaces with ultra simple and accessible design like the Stripe website or Financial Times COVID dashboards with super interactive graphs.
You won’t build a ecommerche platform with Streamlit (even if technically you could with a looooooot of work)
For all those use cases you’re better off learning the Javascript ecosystem

The aim is to let you build and showcase Data Science / Python libraries (I did a Pyspark lecture with Streamlit, or Spacy has got its own Streamlit demo!) on the web to millions of users. For that Streamlit does wonders :balloon:

2 Likes
7

Thanks @andfanilo for the detailed answer and I completely agree with you that Streamlit is awesome and will continue to become popular day by day as Streamlit has provided the framework which Data Scientist were looking out for Long time…Thanks for creating Streamlit framework.

1 Like
8

Hi @andfanilo I have a question for example if i click on button 5 and want to display 5 to 6 different options Lets say button 5 is a translator button and when i click on button 5 how we can present 5 to 6 different languages option , Should we use radio buttons, and once we select the radio button we should get the translated text on the app, Please refer any sample code for the above question.

image
image1785Ă—277 6.49 KB

Please Advice regarding above question.

1 Like