使用 Streamlit 打造一个简单的照片墙应用

在现代 web 开发中，快速构建交互式应用是一项重要的技能。Streamlit 是一个强大的 Python 库，允许开发者以最小的代码量创建美观且功能丰富的 web 应用。今天，我们将通过分析一段简单的 Streamlit 代码，展示如何构建一个照片墙应用，让用户可以上传图片并以网格形式展示。

C:\pythoncode\new\output\Photo_Wall.py

代码分析

以下是我们将要分析的代码，这是一个基于 Streamlit 的照片墙应用：

import streamlit as st
from PIL import Image
import os

# 页面标题
st.title("优美的照片墙")

# 创建文件上传控件
uploaded_files = st.file_uploader("上传图片文件", type=["jpg", "jpeg", "png"], accept_multiple_files=True)

# 显示照片墙
if uploaded_files:
    st.subheader("照片墙展示")
    cols = st.columns(4)  # 设置列数，可根据需要调整

    # 遍历上传的图片文件
    for i, uploaded_file in enumerate(uploaded_files):
        # 使用 PIL 打开图片
        image = Image.open(uploaded_file)
        
        # 将图片显示在列中
        with cols[i % 4]:  # 控制图片排列，每行显示4列
            st.image(image, use_column_width=True)
else:
    st.warning("请上传图片文件以生成照片墙！")

代码功能分解

导入必要的库：
- streamlit as st：Streamlit 库，用于构建交互式 web 界面。
- PIL.Image：Python Imaging Library（Pillow），用于处理图片文件。
- os：虽然代码中未直接使用 os，但导入它可能是为了后续可能的扩展（如文件路径操作）。
设置页面标题：
- st.title("优美的照片墙")：在页面顶部显示一个标题，简洁明了地告诉用户这是一个照片墙应用。
文件上传控件：
- st.file_uploader：创建一个文件上传控件，限制文件类型为常见的图片格式（jpg、jpeg、png），并允许用户一次上传多个文件（accept_multiple_files=True）。
条件渲染照片墙：
- 如果用户上传了图片（if uploaded_files），则显示一个子标题“照片墙展示”并创建一个包含 4 列的网格布局（st.columns(4)）。
- 如果没有上传图片，则显示警告信息（st.warning），提示用户上传图片。
遍历并显示图片：
- 使用 enumerate 遍历上传的文件列表，获取索引 i 和文件对象 uploaded_file。
- 使用 PIL.Image.open 打开图片文件。
- 通过 i % 4 将图片分配到 4 列中的一列，确保图片按顺序填充网格。
- st.image(image, use_column_width=True)：将图片显示在指定列中，并自动调整大小以适应列宽。

代码的优点

简洁易懂：代码结构清晰，逻辑简单，适合初学者学习。
响应式设计：通过 use_column_width=True，图片会自动适应列宽，确保在不同设备上显示良好。
用户友好：提供明确的提示信息（如警告），提升用户体验。
可扩展性：代码逻辑简单，可以轻松添加新功能，如调整列数、添加图片滤镜等。

代码的改进空间

错误处理：

当前代码未处理上传无效图片文件的情况（如损坏的图片文件）。可以添加 try-except 块来捕获异常并提示用户。

示例改进：

try:
    image = Image.open(uploaded_file)
    with cols[i % 4]:
        st.image(image, use_column_width=True)
except Exception as e:
    st.error(f"无法加载图片 {uploaded_file.name}：{str(e)}")

动态列数：

列数固定为 4，可能不适合所有场景。可以根据屏幕大小或用户输入动态调整列数。

示例改进：

num_cols = st.slider("选择列数", min_value=1, max_value=6, value=4)
cols = st.columns(num_cols)
with cols[i % num_cols]:
    st.image(image, use_column_width=True)

图片预览优化：
- 可以添加图片缩略图或限制上传文件大小，以提高性能。
- 示例改进：
```
image = Image.open(uploaded_file).resize((200, 200))  # 调整为缩略图
```
样式美化：
- Streamlit 支持自定义 CSS，可以为照片墙添加边框、阴影或动画效果，提升视觉吸引力。
- 示例改进：
```
st.markdown("""
<style>
img {
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
</style>
""", unsafe_allow_html=True)
```