python Streamlit AI应用开发-界面-笔记

admin · 发表于 2026-1-20 09:57:42

购买主题本主题需向作者支付 30 金币 才能浏览

admin · 发表于 2026-1-20 13:31:20

label_visibility="visible", 显示标签名与help内容
label_visibility="collapsed"隐藏标签

base_file = st.file_uploader(
"产品图上传",
type=["png", "jpg", "jpeg"],
key="hidden_base",
label_visibility="visible",
help="推荐PNG,JPG,JPEG,不推荐webp,gif"
)

复制代码

admin · 发表于 2026-1-20 14:13:14

针对 Streamlit 1.58 可以隐藏文件上传列表的解决方案

# 在创建文件上传组件后立即应用CSS,

# ===================== 第二列：参数设置 =====================
with param_col:
with st.container(border=True, height=820):
st.markdown("**⚙️ 参数设置**")
left_col, right_col = st.columns([2, 3])
# -------- 左侧：图生图 / 文生图 --------
with left_col:
with st.container(border=True, height=745):
tab1, tab2 = st.tabs(["图生图", "文生图"])
# ===== 图生图 =====
with tab1:
# 首先，添加 CSS 样式来隐藏文件列表
st.markdown("""
<style>
/* 隐藏最近创建的文件上传组件的文件列表 */
div[data-testid="stFileUploader"]:has(input[type="file"]) > div:last-child {
display: none !important;
}
</style>
""", unsafe_allow_html=True)
# ⭐ 底图上传控件
base_file = st.file_uploader(
"产品图上传",
type=["png", "jpg", "jpeg", "webp", "bmp", "tiff"],
key="hidden_base",
label_visibility="visible",
help="推荐PNG,JPG,JPEG,不推荐webp,gif",
)
# ⭐ 保存到 session_state
if base_file:
st.session_state.base_image = base_file
# ⭐ 上传后显示底图，宽度固定100px，点击放大
if st.session_state.base_image:
img_bytes = st.session_state.base_image.getvalue()
img_base64 = base64.b64encode(img_bytes).decode()
st.markdown(f"""
<img
src="data:image/png;base64,{img_base64}"
style="width:100px; object-fit:contain; cursor:pointer;"
onclick="showPreview(this.src)"
/>
""", unsafe_allow_html=True)
# ⭐ 删除底图按钮（兼容新旧版本）
if st.button("删除底图", key="del_base"):
st.session_state.base_image = None
# 适配 Streamlit 版本：1.28+ 用 st.rerun()，低版本用 st.experimental_rerun()
try:
st.rerun()
except AttributeError:
st.experimental_rerun()
st.divider()
# ===== 参考图上传=====
ref_files = st.file_uploader(
"参考图上传",
type=["png", "jpg", "jpeg", "webp", "bmp", "tiff"],
accept_multiple_files=True,
key="ref_uploader",
label_visibility="visible",
help="推荐PNG,JPG,JPEG,不推荐webp,gif"
)
# ⭐ 处理参考图上传（去重 + 限制数量）
if ref_files:
for f in ref_files:
if len(st.session_state.ref_images) >= 9:
st.warning("最多只能上传9张参考图！")
break
# 文件去重（MD5哈希）
file_hash = hashlib.md5(f.getvalue()).hexdigest()
exists = any(x.get("hash") == file_hash for x in st.session_state.ref_images)
if not exists:
st.session_state.ref_images.append({
"id": str(uuid.uuid4()),
"file": f,
"hash": file_hash
})
# ⭐ 参考图缩略图显示 + 删除逻辑（每行3张）
if st.session_state.ref_images:
cols = st.columns(3)
delete_id = None
clear_all = False
for idx, img in enumerate(st.session_state.ref_images):
with cols[idx % 3]:
# 生成图片Base64
img_base64 = base64.b64encode(img["file"].getvalue()).decode()
# 显示图片（点击放大）
st.markdown(f"""
<img
src="data:image/png;base64,{img_base64}"
style="width:120px; max-height:160px; object-fit:contain; cursor:pointer;"
onclick="showPreview(this.src)"
/>
""", unsafe_allow_html=True)
# 单个删除按钮（唯一key）
if st.button("🗑 删除", key=f"del_ref_{img['id']}", use_container_width=True):
delete_id = img["id"]
# 清空所有参考图按钮
if st.button("清空所有参考图", key="clear_all_ref", use_container_width=True):
clear_all = True
# ⭐ 执行删除/清空操作（立即刷新）
if delete_id or clear_all:
if clear_all:
st.session_state.ref_images.clear()
else:
st.session_state.ref_images = [x for x in st.session_state.ref_images if x["id"] != delete_id]
# 适配 Streamlit 版本
try:
st.rerun()
except AttributeError:
st.experimental_rerun()

复制代码

admin · 发表于 2026-1-20 14:16:33

上传图片后,没有文件列表,并可删随便文件的方法

如果不想要文件名:

移除文件名显示：
- 删除了 <small style="color: #666; margin-top: 4px;">{st.session_state.base_image.name}</small> 部分
- 只保留图片元素，保持居中显示

# ===================== 在整个应用顶部初始化session_state =====================
if 'base_image' not in st.session_state:
st.session_state.base_image = None
if 'base_uploader_key' not in st.session_state:
st.session_state.base_uploader_key = 0
# ===================== 第二列：参数设置 =====================
with param_col:
with st.container(border=True, height=820):
st.markdown("**⚙️ 参数设置**")
left_col, right_col = st.columns([2, 3])
# -------- 左侧：图生图 / 文生图 --------
with left_col:
with st.container(border=True, height=745):
tab1, tab2 = st.tabs(["图生图", "文生图"])
# ===== 图生图 =====
with tab1:
# ⭐ 关键CSS：只隐藏视觉元素，保留功能
st.markdown("""
<style>
/* 隐藏文件列表的视觉元素，但保留功能 */
div[data-testid="stFileUploader"] div[data-testid="stFileUploaderFileContainer"] > div:nth-child(2),
div[data-testid="stFileUploader"] div[data-testid="stFileUploaderFileContainer"] > div:nth-child(3) {
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 隐藏进度条和额外空间 */
div[data-testid="stFileUploader"] div[role="progressbar"],
div[data-testid="stFileUploader"] > div:last-child div {
visibility: hidden !important;
height: 0 !important;
}
/* 减小上传区域高度 */
div[data-testid="stFileUploader"] div[data-testid="stFileUploaderDropzone"] {
min-height: 60px !important;
padding: 5px 10px !important;
}
</style>
""", unsafe_allow_html=True)
# ⭐ 增强型底图上传控件 - 每次删除后重置key
base_file = st.file_uploader(
"产品图上传",
type=["png", "jpg", "jpeg", "webp", "bmp", "tiff"],
key=f"hidden_base_{st.session_state.base_uploader_key}",
label_visibility="visible",
help="推荐PNG,JPG,JPEG,不推荐webp,gif",
)
# ⭐ 智能处理文件上传
if base_file:
# 仅当新文件与当前文件不同时才更新
if not st.session_state.base_image or base_file.name != st.session_state.base_image.name:
st.session_state.base_image = base_file
st.rerun() # 立即刷新显示新上传的图片
# ⭐ 上传后显示底图
if st.session_state.base_image:
img_bytes = st.session_state.base_image.getvalue()
img_base64 = base64.b64encode(img_bytes).decode()
st.markdown(f"""
<div style="display: flex; flex-direction: column; align-items: center; margin: 10px 0;">
<img
src="data:image/png;base64,{img_base64}"
style="width:100px; height:100px; object-fit:contain; cursor:pointer; border: 1px solid #ddd; border-radius: 4px; padding: 2px;"
onclick="showPreview(this.src)"
title="{st.session_state.base_image.name}"
/>
<small style="color: #666; margin-top: 4px;">{st.session_state.base_image.name}</small>
</div>
""", unsafe_allow_html=True)
# ⭐ 改进的删除底图按钮 - 完全重置上传状态
if st.button("🗑️ 删除底图", key="del_base", use_container_width=True):
st.session_state.base_image = None
# 关键：增加key值强制重置上传组件
st.session_state.base_uploader_key += 1
st.rerun() # 立即刷新
st.divider()
# ===== 参考图上传部分保持不变 =====
# [您的参考图上传代码保持不变...]

复制代码

[代码编程] python Streamlit AI应用开发-界面-笔记