Streamlit中点击Email按钮输入框自动关闭，无法捕获文本求助

在开发Streamlit应用时，尝试通过“Email”按钮配合文本输入框捕获用户输入，但点击该按钮后输入框会自动关闭，无法正常显示输入内容。相关代码如下：

import streamlit as st #web app and camera
import numpy as np # for image processing 
from PIL import Image #Image processing 
import cv2 #computer vision 

def dodgeV2(x, y):
    return cv2.divide(x, 255 - y, scale=256)

def pencilsketch(inp_img):
    img_gray = cv2.cvtColor(inp_img, cv2.COLOR_BGR2GRAY)
    img_invert = cv2.bitwise_not(img_gray)
    img_smoothing = cv2.GaussianBlur(img_invert, (21, 21),sigmaX=0, sigmaY=0)
    final_img = dodgeV2(img_gray, img_smoothing)
    return(final_img)


file_image = st.camera_input(label = "Take a pic of you to be sketched out")

if file_image:
    input_img = Image.open(file_image)
    final_sketch = pencilsketch(np.array(input_img))
    st.write("**Output Pencil Sketch**")
    st.image(final_sketch, use_column_width=True)
    if st.button("Download Sketch Images"):
        im_pil = Image.fromarray(final_sketch)
        im_pil.save('final_image.jpeg')
        st.write('Download completed')
#the issue code starts from here
        if st.button("Email"):
            form = st.form(key='my-form')
            name = form.text_input('Enter your name')
            submit = form.form_submit_button('Submit')
            st.write('Press submit to have your name printed below')
            if submit:
                st.write(f'hello {name}')
                
    
    else:
         st.write("You haven't uploaded any image file")

问题根源 #

Streamlit的核心运行机制是每次用户交互都会从头重新执行整个脚本。原代码中“Email”按钮嵌套在“Download Sketch Images”按钮的if块内，点击“Email”按钮触发脚本重新运行时，“Download Sketch Images”按钮的激活状态会被重置，内层的Email按钮和表单因此不再被渲染，导致输入框直接消失。

解决方案 #

使用Streamlit的st.session_state跟踪表单的显示状态，避免嵌套按钮带来的状态依赖问题。调整后的代码如下：

import streamlit as st #web app and camera
import numpy as np # for image processing 
from PIL import Image #Image processing 
import cv2 #computer vision 

def dodgeV2(x, y):
    return cv2.divide(x, 255 - y, scale=256)

def pencilsketch(inp_img):
    img_gray = cv2.cvtColor(inp_img, cv2.COLOR_BGR2GRAY)
    img_invert = cv2.bitwise_not(img_gray)
    img_smoothing = cv2.GaussianBlur(img_invert, (21, 21),sigmaX=0, sigmaY=0)
    final_img = dodgeV2(img_gray, img_smoothing)
    return(final_img)

# 初始化会话状态，控制Email表单显示
if 'show_email_form' not in st.session_state:
    st.session_state.show_email_form = False

file_image = st.camera_input(label = "Take a pic of you to be sketched out")

if file_image:
    input_img = Image.open(file_image)
    final_sketch = pencilsketch(np.array(input_img))
    st.write("**Output Pencil Sketch**")
    st.image(final_sketch, use_column_width=True)
    
    if st.button("Download Sketch Images"):
        im_pil = Image.fromarray(final_sketch)
        im_pil.save('final_image.jpeg')
        st.write('Download completed')
    
    # 单独放置Email按钮，脱离嵌套结构
    if st.button("Email"):
        st.session_state.show_email_form = not st.session_state.show_email_form
    
    # 根据会话状态决定是否渲染表单
    if st.session_state.show_email_form:
        form = st.form(key='my-form')
        name = form.text_input('Enter your name')
        submit = form.form_submit_button('Submit')
        st.write('Press submit to have your name printed below')
        if submit:
            st.write(f'hello {name}')
                
else:
    st.write("You haven't uploaded any image file")

关键改动说明 #

1. 初始化st.session_state.show_email_form变量，用于记录是否显示Email表单，默认值为False。
2. 将“Email”按钮从“Download Sketch Images”的if块中移出，避免按钮状态相互依赖。
3. 点击“Email”按钮时，切换st.session_state.show_email_form的布尔值，实现表单的显示/隐藏切换。
4. 脚本重新运行时，会话状态会被保留，确保表单不会因按钮状态重置而消失。

内容的提问来源于stack exchange，提问作者Nazima