Button to change text field

[pere]

I am new to Streamlit, and are trying to build a demo application in the HuggingFace Spaces.

The app has a text_area that contains the text that finally will be sent to the machine learning model. I want to change the content of this text_area multiple ways: a) I want to have the options of choosing pre-filled content from a dropdown list (this replaces all content in the text_area), b) I want the user to be able to modify the content directly and c) I want some «action-buttons» to modify the text already in the text box. This could for instance be to lowercase all of the text.

It is specially the «action-buttons» that are causing problems here. I can not find a way that the buttons simply modifies the content without triggering a reload (and then also a initialisation of the drop-down boxes).

What is the correct approach here?

The current version of the app is available here: DeUnCaser - a Hugging Face Space by north. It does however not have the «action buttons», since I have not gotten that part to work.

[llsis]

I would use a combination of session state and callbacks:

import streamlit as st

if 'options' not in st.session_state:
    st.session_state['options'] = ""

def sidebar_callback():
    st.session_state['options'] = st.session_state['sidebar']
def button1_callback():
    st.session_state['options'] = "foo"
def button2_callback():
    st.session_state['options'] = "bar"

placeholder = st.empty()

st.sidebar.selectbox(
     "Examples:",
     ("tirsdag var travel for ukrainas president volodymyr zelenskyj på morgenen tok han imot polens statsminister mateusz morawiecki","tirsdagvartravelforukrainaspresidentvolodymyrzelenskyjpåkveldentokhanimotpolensstatsministermateuszmorawiecki","deterikkelettåholderedepåstoreogsmåbokstavermanmåforeksempelhuskestorforbokstavnårmanskriveromkrimhalvøyamenkunbrukelitenforbokstavnårmanhenvisertilenkrimroman","detteerenlitendemosomerlagetavperegilkummervoldhanerenforskersomtidligerejobbetvednasjonalbiblioteketimoirana", "sentpå60talletvardetfaktisknoensomkalteungensinperegilkummervoldidagerdetikkelengersåvanligåbrukedobbeltnavninorgehvasynesduomdet"),
     key = 'sidebar', on_change = sidebar_callback)

st.button('Run DeUnCaser', on_click = button1_callback)
st.button('Run DeUnCaser but not like before', on_click = button2_callback)

with placeholder:
    text = st.text_area(f"",max_chars=1000, key = 'options')

im not sure how you define “reload”, but the drop down menu wont be reinitialisied
Regards Leo

[pere]

Hi Leo,
I can see that this solves one of the issues I was struggling with, the reinitiation of the selectbox. Clever solution. I like it.

However, I am still a bit lost here about the other issue I am facing. I might not have explained the issue good enough. Let me try again.

What the demo/model is doing is adding capitalisation/punctation to sentences. Lets say we have the following input: «my name is john what is your name». The model will try to understand this and hopefully output «My name is John. What is your name?».

Only the «submit button» will actually invoke the model. The other buttons are «effect buttons», like «lowercasing», «removing spaces», «removing punctation» etc.

One use scenario is this:

• User copies text from the Internet, and paste it into the textbok. Lets say the text is «My name is John. What is your name?».
• The user changes «John» to «Peter».
• The user clicks «effect button 1- lowercase». This button should take the current text in the textbox, ie «My name is Peter. What is your name?» and then lowercase it. The output (ie both the value of the «text»-variable and the visible content in «st.text_area») should now be «my name is peter. what is your name?»
• When the «submit-button» is pressed, this is the value that is passed along to the model.

Was that clearer? Or am I missing something here?

[llsis]

You can just add a button with another callback function to alter the string.
This would be an example for a lowercase string

def lowercase_callback():
    st.session_state['options'] = st.session_state['options'].lower()

If you havent used session states and widget keys yet this might help.
Regards Leo

[pere]

Thanks a lot. Leo. I totally misunderstood the two-way link between session_state and key. It was really super easy when I got the concept. Thanks a lot for taking the time explaining it to me!