如何调整图片转素描Streamlit应用按钮的居中、着色与尺寸统一

我需要对这款图片转铅笔素描的Streamlit应用做三个按钮样式修改：

• 让下载按钮和发送邮件按钮居中对齐
• 给按钮添加自定义颜色
• 确保两个按钮尺寸一致

以下是修改后的完整代码，包含所有样式优化：

import streamlit as st  # Web应用与相机
import numpy as np       # 图像处理
from PIL import Image    # 图像处理
import cv2               # 计算机视觉
import os

# 注入自定义CSS，实现按钮样式修改
st.markdown("""
<style>
/* 统一所有按钮样式 */
.stButton > button {
    background-color: #4CAF50; /* 自定义背景色：绿色 */
    color: white; /* 文字颜色 */
    min-width: 180px; /* 统一最小宽度，确保尺寸一致 */
    border-radius: 5px; /* 可选：圆角效果 */
}
/* 按钮hover效果 */
.stButton > button:hover {
    background-color: #45a049;
}
/* 居中容器样式 */
.center-btn {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
</style>
""", unsafe_allow_html=True)

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

def download_image(sketch_img):
    # 先保存素描图像到临时文件
    cv2.imwrite("final_image.jpeg", sketch_img)
    with open("final_image.jpeg", "rb") as file:
        # 使用居中容器包裹下载按钮
        with st.container():
            st.markdown('<div class="center-btn">', unsafe_allow_html=True)
            btn = st.download_button(
                label="Download image",
                data=file,
                file_name="final_image.jpeg",
                mime="image/jpg"
            )
            st.markdown('</div>', unsafe_allow_html=True)
    # 清理临时文件
    os.remove("final_image.jpeg")

def email_box(x):
    if st.checkbox("Email"):
        form = st.form(key='my-form')
        name = form.text_input('Enter your name')
        # 表单内的按钮会自动应用全局CSS样式，保持尺寸一致
        submit = form.form_submit_button('Send Email')
        if submit:
            st.write(f'Hi {name}!')

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)
    download_image(final_sketch)
    email_box("hello")
else:
    st.write("You haven't uploaded any image file")

关键修改说明： #

1. 自定义CSS注入：通过st.markdown添加了自定义样式，统一设置按钮的背景色、文字颜色和最小宽度，确保两个按钮尺寸一致；同时定义了居中容器类center-btn。
2. 按钮居中对齐：下载按钮使用自定义的center-btn容器包裹，实现水平居中；表单内的提交按钮会自动继承全局样式，结合表单布局自然居中。
3. 统一按钮尺寸：CSS中设置min-width: 180px，强制所有按钮保持相同的最小宽度，避免因文字长度不同导致尺寸差异。
4. 额外优化：修复了原代码中下载函数的潜在问题，直接传入生成的素描图像保存，避免文件读写冲突，并添加了临时文件清理逻辑。

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