核心观点传统 AI 项目的前后端分离太沉重。模型工程师调参优化已经够累还要学 JavaScript、写 API 接口、处理跨域请求。用 Python 脚本直接生成 Web 应用——这就是 Streamlit。一、Streamlit 核心概念1.1 为什么选择 Streamlit方案学习成本开发速度定制能力适用场景Streamlit低最快中快速原型、数据展示React API高慢高产品级应用Flask HTML中中中简单服务Gradio低快低ML 可视化1.2 工作原理Streamlit App ↓ 用户交互 (点击/输入) ↓ Streamlit 检测到变化 ↓ 重新运行整个脚本 (自上而下) ↓ 更新 UI二、基础组件2.1 文本显示importstreamlitasst# 标题st.title(AI 文本生成助手)st.header(这是一个副标题)st.subheader(三级标题)# 文本st.write(普通文本)# 最常用st.text(固定宽度文本)st.markdown(**Markdown** 支持)st.code(print(hello),languagepython)# 格式化st.success(成功消息)st.info(提示信息)st.warning(警告)st.error(错误)2.2 输入组件# 文本输入namest.text_input(请输入名字,placeholder你的名字)passwordst.text_input(密码,typepassword)# 文本区域biost.text_area(个人简介,height150)# 数字输入agest.number_input(年龄,min_value0,max_value150,value25)# 选择框countryst.selectbox(国家,[中国,美国,日本])# 多选languagesst.multiselect(编程语言,[Python,JavaScript,Java,Go,Rust])# 滑块temperaturest.slider(温度参数,min_value0.0,max_value2.0,value0.7,step0.1)# 日期时间importdatetime datest.date_input(选择日期)timest.time_input(选择时间)# 文件上传uploaded_filest.file_uploader(上传文件,type[txt,pdf,csv,png,jpg])2.3 布局组件# 1. 侧边栏withst.sidebar:st.title(设置)model_namest.selectbox(选择模型,[GPT-3.5,GPT-4])api_keyst.text_input(API Key,typepassword)st.divider()st.caption(© 2024 AI 应用)# 2. 标签页tab1,tab2,tab3st.tabs([对话,设置,关于])withtab1:st.write(对话界面)withtab2:st.write(设置界面)withtab3:st.write(关于)# 3. 列布局col1,col2,col3st.columns(3)withcol1:st.metric(用户数,1,234,12%)withcol2:st.metric(活跃度,89%,-5%)withcol3:st.metric(转化率,3.2%,0.8%)# 4. 容器withst.container():st.write(这是容器内的内容)# 5. 展开器withst.expander(查看更多):st.write(详细信息...)三、实战构建 AI 对话应用3.1 基础对话界面importstreamlitasstfromopenaiimportOpenAI# 页面配置st.set_page_config(page_titleAI 对话助手,page_icon,layoutwide)# 初始化 session stateifmessagesnotinst.session_state:st.session_state.messages[]ifopenai_modelnotinst.session_state:st.session_state.openai_modelgpt-4# 侧边栏配置withst.sidebar:st.title(⚙️ 设置)api_keyst.text_input(OpenAI API Key,typepassword,help在 https://platform.openai.com 获取)model_namest.selectbox(选择模型,[gpt-4,gpt-3.5-turbo],index0)temperaturest.slider(Temperature,min_value0.0,max_value2.0,value0.7,step0.1)max_tokensst.slider(最大 Token,min_value100,max_value4000,value1000,step100)ifst.button(清空对话历史):st.session_state.messages[]st.rerun()# 主界面st.title( AI 对话助手)# 显示历史消息formessageinst.session_state.messages:withst.chat_message(message[role]):st.markdown(message[content])# 输入框ifprompt:st.chat_input(发送消息...):# 添加用户消息st.session_state.messages.append({role:user,content:prompt})# 显示用户消息withst.chat_message(user):st.markdown(prompt)# 调用 APIwithst.chat_message(assistant):ifnotapi_key:st.error(请先在侧边栏设置 API Key)else:clientOpenAI(api_keyapi_key)streamclient.chat.completions.create(modelmodel_name,messages[{role:m[role],content:m[content]}forminst.session_state.messages],temperaturetemperature,max_tokensmax_tokens,streamTrue)responsest.write_stream(stream)# 保存助手回复st.session_state.messages.append({role:assistant,content:response})3.2 RAG 问答应用importstreamlitasstfromlangchain.vectorstoresimportFAISSfromlangchain.embeddingsimportHuggingFaceEmbeddingsfromlangchain.chainsimportRetrievalQAfromlangchain.chat_modelsimportChatOpenAIimporttempfile st.set_page_config(page_title 智能问答系统,page_icon)# 侧边栏withst.sidebar:st.header( 文档管理)# 文档上传uploaded_filesst.file_uploader(上传文档 (PDF/TXT),type[pdf,txt],accept_multiple_filesTrue)# 向量存储ifst.button(构建知识库):ifnotuploaded_files:st.warning(请先上传文档)else:withst.spinner(正在处理文档...):# 加载文档docs[]forfileinuploaded_files:iffile.typeapplication/pdf:# PDF 处理passelse:docs.append(file.read().decode())# 向量化embeddingsHuggingFaceEmbeddings(model_nameBAAI/bge-small-zh-v1.5)# 构建向量库vectorstoreFAISS.from_texts(docs,embeddings)# 保存到 sessionst.session_state.vectorstorevectorstore st.success(知识库构建完成!)# 清空ifst.button(清空知识库):ifvectorstoreinst.session_state:delst.session_state.vectorstore st.rerun()# 主界面st.title( 智能问答系统)# 检查知识库ifvectorstorenotinst.session_state:st.info( 请在侧边栏上传文档并构建知识库)st.markdown( ### 使用说明 1. 在侧边栏上传 PDF 或 TXT 文档 2. 点击构建知识库按钮 3. 在下方输入问题进行问答 )else:# 问答界面queryst.text_input( 请输入问题,placeholder例如文档的主要内容是什么)ifquery:withst.spinner(正在检索...):# 构建 QA 链qaRetrievalQA.from_chain_type(llmChatOpenAI(temperature0),chain_typestuff,retrieverst.session_state.vectorstore.as_retriever(search_kwargs{k:3}))# 获取答案answerqa.run(query)# 显示答案st.markdown(### 答案)st.write(answer)# 显示_sourcesst.caption(答案基于上传的文档)3.3 图片生成应用importstreamlitasstimportrequestsimportbase64fromioimportBytesIO st.set_page_config(page_title AI 图片生成,page_icon,layoutcentered)st.title( AI 图片生成器)# 侧边栏设置withst.sidebar:st.header(⚙️ 参数设置)api_providerst.selectbox(API 提供商,[Stable Diffusion,DALL-E 3,Midjourney])ifapi_providerStable Diffusion:api_urlhttps://api.stability.ai/v1/generationapi_keyst.text_input(API Key,typepassword)elifapi_providerDALL-E 3:modeldall-e-3widthst.select_slider(宽度,options[256,512,1024],value1024)heightst.select_slider(高度,options[256,512,1024],value1024)# 主界面promptst.text_area( 描述你想要生成的图片,height100,placeholder一只可爱的橘猫坐在窗台上阳光透过窗帘照进来...)# 高级选项withst.expander(⚡ 高级选项):negative_promptst.text_input(负面提示词,placeholder不要出现模糊、变形...)num_imagesst.slider(生成数量,min_value1,max_value4,value1)stepsst.slider(采样步数,min_value20,max_value150,value50)# 生成按钮ifst.button( 生成图片,typeprimary):ifnotprompt:st.warning(请输入提示词)else:withst.spinner( 正在创作中...):# 调用 API 生成# 这里用模拟代码image_urlsgenerate_image(promptprompt,negative_promptnegative_prompt,widthwidth,heightheight,num_imagesnum_images,stepssteps)# 显示结果st.success( 生成完成!)colsst.columns(num_images)fori,(col,url)inenumerate(zip(cols,image_urls)):withcol:st.image(url,captionf图片{i1})# 下载按钮st.download_button(label⬇️ 下载,datadownload_image(url),file_namefimage_{i1}.png,mimeimage/png)# 图片到图片withst.expander(️ 图片到图片):uploaded_imagest.file_uploader(上传图片,type[png,jpg,jpeg])ifuploaded_image:st.image(uploaded_image,caption上传的图片)ifst.button( 基于图片生成):# ...pass四、状态管理4.1 Session Stateimportstreamlitasst# 初始化ifcounternotinst.session_state:st.session_state.counter0# 增量和显示ifst.button(增加):st.session_state.counter1st.rerun()st.write(f计数:{st.session_state.counter})# 回调函数defincrement_counter():st.session_state.counter1st.button(增加 (使用回调),on_clickincrement_counter)4.2 组件值变化检测# 检测输入变化defprocess_input():st.write(f处理:{st.session_state.input_text})st.text_input(输入,keyinput_text,on_changeprocess_input)# 表单withst.form(my_form):namest.text_input(名字)emailst.text_input(邮箱)submittedst.form_submit_button(提交)ifsubmitted:st.success(f收到:{name},{email})五、性能优化5.1 缓存importstreamlitasstfromfunctoolsimportlru_cache# 简单缓存lru_cache(maxsize32)defget_model_prediction(text:str):# 耗时计算returnmodel.predict(text)# 使用缓存resultget_model_prediction(输入文本)# 装饰器缓存st.cache_datadefload_data(file):# 只运行一次returnpd.read_csv(file)# 资源缓存st.cache_resourcedefload_model():# 模型只加载一次returntorch.load(model.pt)5.2 进度条# 进度条progress_barst.progress(0)foriinrange(100):# 更新进度progress_bar.progress(i1)time.sleep(0.01)# 步骤显示withst.spinner(加载中...):time.sleep(2)st.success(完成!)六、部署6.1 本地运行# 安装pipinstallstreamlit# 运行streamlit run app.py# 指定端口streamlit run app.py--server.port8501# 开启热重载streamlit run app.py--runner.fastRerunstrue6.2 Streamlit Cloud 部署# .streamlit/config.toml[server]port 8501 enableCORS false[theme]primaryColor #0078D4backgroundColor #FFFFFFsecondaryBackgroundColor #F0F2F6# 1. 推送到 GitHubgitadd.gitcommit-mAdd Streamlit appgitpush origin main# 2. 在 https://share.streamlit.io 部署# 选择 GitHub 仓库和分支# 设置运行命令: streamlit run app.py七、总结核心要点组件用途st.write()万能显示st.text_input()用户输入st.button()交互触发st.selectbox()选择st.sidebar侧边栏布局st.cache缓存优化Session State状态管理适用场景✓ 快速原型 ✓ 数据可视化 ✓ 机器学习演示 ✓ 内部工具 ✓ Demo 展示不适用场景✗ 需要复杂交互 ✗ 需要用户认证 ✗ 需要高并发 ✗ 需要精细 UI 控制参考资源Streamlit 官方文档https://docs.streamlit.io/Streamlit 组件库https://streamlit.io/componentsAwesome Streamlithttps://awesome-streamlit.readthedocs.io/