【Python】Day29:项目开发(下):界面优化 —— 使用 Streamlit 封装为完整 Web 应用

🎯 学习目标

1. 使用 st.sidebar 设计侧边栏：上传文件、设置参数、清空对话
2. 实现文件上传组件：st.file_uploader
3. 添加加载状态提示：st.spinner
4. 将代码模块化重构：界面与逻辑分离
5. 完成完整的、可展示的毕业项目

一、侧边栏设计

1. 文件上传与参数设置

   with st.sidebar:    st.header("⚙️ 设置")# 文件上传    uploaded_file = st.file_uploader("上传文档", type=["txt", "md"])if uploaded_file:        st.session_state.doc_content = read_text_file(uploaded_file)        st.success(f"✅ 已加载：{uploaded_file.name}")# 系统提示词    system_prompt = st.text_area("系统提示词",        value="你是一个文档问答助手，请基于提供的文档内容回答问题。",        height=100    )    st.session_state.system_prompt = system_prompt# 温度参数    temperature = st.slider("创造性", min_value=0.0, max_value=1.0, value=0.7, step=0.1)# 清空对话if st.button("🗑️ 清空对话"):        st.session_state.messages = []        st.rerun()

二、主聊天区域

st.title("📚 智能文档问答助手")st.caption("上传文档，基于文档内容回答问题")# 检查是否已上传文档if"doc_content"notin st.session_state ornot st.session_state.doc_content:    st.info("👈 请先在侧边栏上传文档")    st.stop()   # 停止运行，等待用户上传# 显示历史消息for msg in st.session_state.messages:with st.chat_message(msg["role"]):        st.write(msg["content"])# 聊天输入if prompt := st.chat_input("请输入关于文档的问题："):# 用户消息    st.session_state.messages.append({"role": "user", "content": prompt})with st.chat_message("user"):        st.write(prompt)# AI回复（带加载动画）with st.chat_message("assistant"):with st.spinner("思考中..."):            api_messages = build_messages(                st.session_state.system_prompt,                st.session_state.doc_content,                prompt,                st.session_state.messages[:-1]            )            reply = call_llm(api_messages, temperature=st.session_state.get("temperature", 0.7))        st.write(reply)    st.session_state.messages.append({"role": "assistant", "content": reply})

三、模块化重构

1. 项目结构

   smart_doc_assistant/├── .gitignore├── .env├── requirements.txt├── README.md├── app.py              # Streamlit 界面├── api_utils.py        # API 调用├── file_utils.py       # 文件读取└── prompt_utils.py     # Prompt 构造

2. requirements.txt

   streamlitrequestspython-dotenv

⚠️ 常见坑

1. 上传文件后切换页面，文件内容丢失
• 必须把读取的文件内容存到 st.session_state.doc_content
2. st.stop() 之后代码不执行
• 确保初始化 session_state 在 st.stop() 之前

✍️ 实战练习

1. 完成完整项目
• 把所有代码整合，确保上传文档 → 提问 → 获得回答的完整流程跑通。
2. 编写 README.md
• 写项目说明、安装步骤、使用方法。

✅ 自测清单

• [ ] 侧边栏能上传文件、设置参数、清空对话
• [ ] 用 st.file_uploader 上传 .txt / .md 文件
• [ ] 用 st.spinner 显示加载状态
• [ ] 文件内容存入 st.session_state，不会因交互而丢失
• [ ] 代码已模块化：界面与逻辑分离