Access the edited text from st.textarea

🎈 Using Streamlit
1

Summary

I’m very new to streamlit library. Currently, I’m building OCR application with streamlit. My current flow is that the output of OCR is shown at the textarea and I want to edit the wrong characters from OCR output. Then I want to download the OCR output as a document file so I used with download button. My current problem is that the OCR output text I edited at the textarea is not updated at the downloaded file. Only the unedited previous (original) OCR output is downloaded.

Steps to reproduce

Code snippet:

output = st.text_area("Output is: ", text, height=200) ## the value of the text came from ocr function and u can assume it as some random value; then I wanted to edit the character from this text area 

st.download_button(label="Download data as docx", data=output, file_name='output.docx', mime='docx') ## I want to download the output of the text area from download_button and I also want to edit the text area and want to get the edited text when I downloaded

Expected behavior:

I want to download the output of the text area from download_button and I also want to edit the text area and want to get the edited text when I downloaded

Actual behavior:

Only the original ocr output is downloaded from the download_button although I edited it. The value of the text area is not updated when downloaded.

Debug info

  • Streamlit version: latest(get it with $ streamlit version)
  • Python version: 3.10(get it with $ python --version)
  • Using PipEnv?
  • OS version: Ubuntu 22.04
  • Browser version: Chrome
2

I cannot reproduce the problem. The downloaded file always contains the same text as the text area.

3

If you want to reproduce the code, here is the sample code.

import streamlit as st
from PIL import Image

st.markdown("<h2 style='text-align: center'>For OCR app</h1>", unsafe_allow_html=True)
image = st.file_uploader("Upload Image",type=['jpg','png','jpeg','JPG'])

col1, col2 = st.columns(2)

if image is not None:
    with col1:
        input_image = Image.open(image) #read image
        width, height = input_image.size
        st.image(input_image, caption="Input Image is: ") #display image
        extract_button = st.button("Extract text")

        if extract_button:
            with col2:
                text = "OCR text with a lot of errors and need to edit it "
                output = st.text_area("Output is: ", text, height=220)
                st.download_button(label="Download data as docx", data=output, file_name='output.docx', mime='docx')
                st.success('Text Extraction Completed!')

else:
    st.write("Upload an Image")

You will need to upload some image and need to click the button called Extract. Then you will see the text area box with OCR text with a lot of errors and need to edit it. What I wanna do is that I want to edit the text inside text area.

Then, I want to edit the text inside the text area like that

Screenshot from 2022-12-16 10-33-58
Screenshot from 2022-12-16 10-33-58967×918 50.6 KB

Normally, when I edit the text inside the text area, I need to press ctrl+enter to update the value of the text area. But with my current code flow, the text area part disappeared when I pressed ctrl+enter.
I need to download the text file with edited text. How can I do that to achieve this?

4

After you edit to the text area, extract_button becomes False and you no longer have a text area nor a download button and nothing is downloaded. You can try something like this instead.

extract_button = st.button("Extract text")
if extract_button:
    st.session_state["text"] = "OCR text with a lot of errors and need to edit it "

if "text" in st.session_state:
    st.text_area("Output is: ", key="text", height=220)
    st.download_button(
        label="Download data as docx",
        data=st.session_state["text"],
        file_name="output.docx",
        mime="docx",
    )
1 Like