文章目录【44.PythonAI】用Streamlit 大模型API30分钟搭一个AI聊天网页并部署到公网导入语1 ~ Streamlit快速上手1.1 安装与Hello World1.2 架构总览2 ~ 完整AI聊天应用2.1 核心代码2.2 运行效果3 ~ 增强版切换模型Markdown渲染费用统计4 ~ 一键部署到公网4.1 准备部署文件4.2 部署方式对比4.3 Streamlit Cloud部署推荐5 ~ 进阶方向思考 总结结尾【44.PythonAI】用Streamlit 大模型API30分钟搭一个AI聊天网页并部署到公网文章简介本文是AI大模型入门系列的实战终章——用Streamlit框架30分钟搭建一个完整的AI聊天网页应用。内容涵盖Streamlit环境搭建与核心组件、会话状态管理与多轮对话、Markdown渲染与流式输出集成、以及一键部署到Streamlit Cloud公网访问的完整链路。文末有Mermaid架构图展示前后端交互全流程适合学完前面API调用知识、想快速做出一个可展示的AI产品的开发者。 个人主页源码骑士❄专栏传送门《Android开发基础》《python基础课程》⭐️热衷从源码视角拆解技术底层原理将复杂架构讲得通俗易懂 源码骑士的简介5年Android Framework系统开发经验曾主导多项系统级性能优化专项技术栈覆盖Android系统全链路Binder/Handler/AMS/WMS/启动流程及Java后端全家桶Spring MyBatis Redis Oracle累计产出原创技术文章100篇文章以流程图为特色被读者评价为看一篇胜过啃一周源码导入语从第一篇文章3行Python代码调用GPT到现在你已经学会了API调用、多模型切换、Token计算、流式输出、参数调优、Function Calling、结构化输出。但你都只在终端里跑——别人没法用。这篇文章就是收割成果篇用Streamlit这个Python框架把你前面学的所有技能打包成一个网页应用——有输入框、有聊天记录、有流式输出、30分钟写完、一键部署到公网。把你的AI项目链接发给朋友的那一刻你就不是自己玩了是在做一个产品。1 ~ Streamlit快速上手1.1 安装与Hello Worldpipinstallstreamlit# app.pyimportstreamlitasst st.title(我的第一个AI聊天应用)st.write(欢迎在下方输入你的问题)user_inputst.text_input(你的问题)ifuser_input:st.write(f你说{user_input})运行streamlit run app.py# 浏览器自动打开 http://localhost:85011.2 架构总览HTTP/WebSocket用户输入API调用流式响应渲染Markdown页面更新用户浏览器Streamlit 服务localhost:8501Python 代码OpenAI / 国产模型 API2 ~ 完整AI聊天应用2.1 核心代码# ai_chat.pyimportstreamlitasstfromopenaiimportOpenAI# ---- 页面配置 ----st.set_page_config(page_titleAI聊天助手,page_icon,layoutcentered,)st.title( AI 聊天助手)st.caption(基于 GPT-3.5-Turbo | 支持多轮对话)# ---- 初始化会话状态 ----ifmessagesnotinst.session_state:st.session_state.messages[{role:system,content:你是一个有用的AI助手回答简洁清晰。}]ifclientnotinst.session_state:st.session_state.clientOpenAI()# ---- 侧边栏参数设置 ----withst.sidebar:st.header(⚙️ 参数设置)temperaturest.slider(Temperature,0.0,2.0,0.7,0.1)max_tokensst.slider(最大输出Token,50,2000,500,50)ifst.button( 清空对话):st.session_state.messages[{role:system,content:你是一个有用的AI助手回答简洁清晰。}]st.rerun()# ---- 显示聊天记录 ----formsginst.session_state.messages:ifmsg[role]user:withst.chat_message(user):st.write(msg[content])elifmsg[role]assistant:withst.chat_message(assistant):st.write(msg[content])# ---- 用户输入 ----ifprompt:st.chat_input(输入你的问题...):# 显示用户消息withst.chat_message(user):st.write(prompt)st.session_state.messages.append({role:user,content:prompt})# 调用API流式withst.chat_message(assistant):message_placeholderst.empty()full_responsestreamst.session_state.client.chat.completions.create(modelgpt-3.5-turbo,messagesst.session_state.messages,temperaturetemperature,max_tokensmax_tokens,streamTrue,)forchunkinstream:ifchunk.choices[0].delta.content:full_responsechunk.choices[0].delta.content message_placeholder.markdown(full_response▌)message_placeholder.markdown(full_response)st.session_state.messages.append({role:assistant,content:full_response})2.2 运行效果streamlit run ai_chat.py浏览器中你会看到一个干净的聊天界面——左侧有参数滑块右侧是聊天区。输入问题后AI逐字回复完全就是ChatGPT的体验。3 ~ 增强版切换模型Markdown渲染费用统计# ai_chat_pro.py —— 在基础版上增加功能importstreamlitasstfromopenaiimportOpenAIimporttiktoken# 多模型支持MODEL_OPTIONS{GPT-3.5 Turbo:{model:gpt-3.5-turbo,base_url:None},DeepSeek:{model:deepseek-chat,base_url:https://api.deepseek.com},通义千问:{model:qwen-turbo,base_url:https://dashscope.aliyuncs.com/compatible-mode/v1},}withst.sidebar:st.header(⚙️ 设置)# 模型选择model_choicest.selectbox(选择模型,list(MODEL_OPTIONS.keys()))configMODEL_OPTIONS[model_choice]ifconfig[base_url]:clientOpenAI(api_keyst.secrets.get(f{model_choice}_KEY,),base_urlconfig[base_url])else:clientOpenAI()temperaturest.slider(Temperature,0.0,2.0,0.7,0.1)# Token计数ifst.button( 统计当前Token消耗):enctiktoken.encoding_for_model(gpt-3.5-turbo)totalsum(len(enc.encode(m[content]))forminst.session_state.messages)st.metric(累计Token,total)# 使用 st.chat_message 的原生Markdown渲染# 代码块、表格、列表都会自动美化显示4 ~ 一键部署到公网4.1 准备部署文件项目结构 ai-chat-app/ ├── app.py# 主程序└── requirements.txt# 依赖# requirements.txtstreamlit1.28openai1.0tiktoken0.54.2 部署方式对比方式难度费用适合Streamlit Cloud⭐ 极简免费个人项目/演示Hugging Face Spaces⭐⭐ 简单免费ML项目首选自己服务器 (Docker)⭐⭐⭐$5~50/月生产环境4.3 Streamlit Cloud部署推荐Step1: 把项目推送到 GitHub ├─gitinit ├─gitadd.├─gitcommit-mAI chat app└─gitpush origin main Step2: 打开 share.streamlit.io ├─ 用GitHub登录 ├─ 点击New app├─ 选择你的仓库 → 分支 → 主文件(app.py)└─ 点击 Deploy!Step3: 等待2分钟 └─ 获得公网URL: https://xxx.streamlit.app Step4: 配置SecretsAPI Key ├─ 在Streamlit Cloud dashboard ├─ Settings → Secrets └─ 添加: OPENAI_API_KEYsk-xxx5 ~ 进阶方向方向一接入Function Calling ├─ 给聊天机器人加上查天气、搜新闻的功能 └─ 侧边栏显示可用技能列表 方向二多模态 ├─ 加一个 st.file_uploader 上传图片 └─ 调用GPT-4V分析图片内容 方向三对话导出 ├─ st.download_button 导出对话为Markdown/PDF └─ 用户可以把聊天记录保存下来 方向四用户认证 ├─ st.text_input 做简单的密码保护 └─ 或者对接OAuth登录思考 总结Streamlit是Python开发者最快的AI→网页通道不用学HTML/CSS/JS纯Python就能写出一个像样的Web UI。st.chat_inputst.chat_message原生支持聊天界面。st.session_state保持多轮对话Streamlit每次交互都会重新运行整个脚本。session_state是你在两次运行之间唯一能保存数据的地方。流式输出MarkdownChatGPT体验循环中用message_placeholder.markdown(full_response ▌)实现打字机效果。Streamlit Cloud免费部署只要代码在GitHub上3分钟就能获得公网URL。Secrets管理API Key绝对不要把Key写进代码。Streamlit Cloud的Secrets功能安全且方便。终端里的AI是玩具网页上的AI是产品。Streamlit就是这座桥。结尾各位小伙伴本系列AI大模型入门10篇文章到此全部结束源码骑士在这里再次感谢你的陪伴源码骑士 — Android Framework 全栈开发关注深耕底层原理❤️点赞让知识传递⭐收藏app.py模板直接复用评论你的AI应用长什么样发链接来看看一键四连系列完结不要忘记给博主一键四连哦️寄语写代码的终点不是写完是有人用上。结语从3行代码调用GPT到Streamlit网页部署到公网——你走完了AI大模型应用的从0到1。下一个目标把AI嵌入到你自己的项目中让更多人用上你做的产品。不要忘记给博主一键四连哦