【44.Python+AI】用Streamlit + 大模型API，30分钟搭一个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 World

pip install streamlit

# app.py
import streamlit as st

st.title("我的第一个AI聊天应用")
st.write("欢迎！在下方输入你的问题：")

user_input = st.text_input("你的问题：")
if user_input:
    st.write(f"你说：{user_input}")

运行：

streamlit run app.py
# 浏览器自动打开 http://localhost:8501

1.2 架构总览

---

2 ~> 完整AI聊天应用

2.1 核心代码

# ai_chat.py
import streamlit as st
from openai import OpenAI

# ---- 页面配置 ----
st.set_page_config(
    page_title="AI聊天助手",
    page_icon="🤖",
    layout="centered",
)

st.title("🤖 AI 聊天助手")
st.caption("基于 GPT-3.5-Turbo | 支持多轮对话")

# ---- 初始化会话状态 ----
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "你是一个有用的AI助手，回答简洁清晰。"}
    ]

if "client" not in st.session_state:
    st.session_state.client = OpenAI()

# ---- 侧边栏：参数设置 ----
with st.sidebar:
    st.header("⚙️ 参数设置")
    temperature = st.slider("Temperature", 0.0, 2.0, 0.7, 0.1)
    max_tokens = st.slider("最大输出Token", 50, 2000, 500, 50)
    
    if st.button("🧹 清空对话"):
        st.session_state.messages = [
            {"role": "system", "content": "你是一个有用的AI助手，回答简洁清晰。"}
        ]
        st.rerun()

# ---- 显示聊天记录 ----
for msg in st.session_state.messages:
    if msg["role"] == "user":
        with st.chat_message("user"):
            st.write(msg["content"])
    elif msg["role"] == "assistant":
        with st.chat_message("assistant"):
            st.write(msg["content"])

# ---- 用户输入 ----
if prompt := st.chat_input("输入你的问题..."):
    # 显示用户消息
    with st.chat_message("user"):
        st.write(prompt)
    st.session_state.messages.append({"role": "user", "content": prompt})
    
    # 调用API（流式）
    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        full_response = ""
        
        stream = st.session_state.client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=st.session_state.messages,
            temperature=temperature,
            max_tokens=max_tokens,
            stream=True,
        )
        
        for chunk in stream:
            if chunk.choices[0].delta.content:
                full_response += chunk.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 —— 在基础版上增加功能
import streamlit as st
from openai import OpenAI
import tiktoken

# 多模型支持
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"},
}

with st.sidebar:
    st.header("⚙️ 设置")
    
    # 模型选择
    model_choice = st.selectbox("选择模型", list(MODEL_OPTIONS.keys()))
    config = MODEL_OPTIONS[model_choice]
    
    if config["base_url"]:
        client = OpenAI(api_key=st.secrets.get(f"{model_choice}_KEY", ""), base_url=config["base_url"])
    else:
        client = OpenAI()
    
    temperature = st.slider("Temperature", 0.0, 2.0, 0.7, 0.1)
    
    # Token计数
    if st.button("📊 统计当前Token消耗"):
        enc = tiktoken.encoding_for_model("gpt-3.5-turbo")
        total = sum(len(enc.encode(m["content"])) for m in st.session_state.messages)
        st.metric("累计Token", total)

# 使用 st.chat_message 的原生Markdown渲染
# 代码块、表格、列表都会自动美化显示

---

4 ~> 一键部署到公网

4.1 准备部署文件

项目结构：
ai-chat-app/
├── app.py              # 主程序
└── requirements.txt    # 依赖

# requirements.txt
streamlit>=1.28
openai>=1.0
tiktoken>=0.5

4.2 部署方式对比

方式	难度	费用	适合
Streamlit Cloud	⭐ 极简	免费	个人项目/演示
Hugging Face Spaces	⭐⭐ 简单	免费	ML项目首选
自己服务器 (Docker)	⭐⭐⭐	$5~50/月	生产环境

4.3 Streamlit Cloud部署（推荐）

Step 1: 把项目推送到 GitHub
├─ git init
├─ git add .
├─ git commit -m "AI chat app"
└─ git push origin main

Step 2: 打开 share.streamlit.io
├─ 用GitHub登录
├─ 点击 "New app"
├─ 选择你的仓库 → 分支 → 主文件(app.py)
└─ 点击 Deploy!

Step 3: 等待2分钟
└─ 获得公网URL: https://xxx.streamlit.app

Step 4: 配置Secrets（API Key）
├─ 在Streamlit Cloud dashboard
├─ Settings → Secrets
└─ 添加: OPENAI_API_KEY = "sk-xxx"

---

5 ~> 进阶方向

方向一：接入Function Calling
├─ 给聊天机器人加上查天气、搜新闻的功能
└─ 侧边栏显示"可用技能"列表

方向二：多模态
├─ 加一个 st.file_uploader 上传图片
└─ 调用GPT-4V分析图片内容

方向三：对话导出
├─ st.download_button 导出对话为Markdown/PDF
└─ 用户可以把聊天记录保存下来

方向四：用户认证
├─ st.text_input 做简单的密码保护
└─ 或者对接OAuth登录

---

思考 && 总结

1. Streamlit是Python开发者最快的"AI→网页"通道： 不用学HTML/CSS/JS，纯Python就能写出一个像样的Web UI。st.chat_input + st.chat_message 原生支持聊天界面。
2. st.session_state 保持多轮对话： Streamlit每次交互都会重新运行整个脚本。session_state 是你在两次运行之间唯一能保存数据的地方。
3. 流式输出+Markdown=ChatGPT体验： 循环中用 message_placeholder.markdown(full_response + "▌") 实现打字机效果。
4. Streamlit Cloud免费部署： 只要代码在GitHub上，3分钟就能获得公网URL。
5. Secrets管理API Key： 绝对不要把Key写进代码。Streamlit Cloud的Secrets功能安全且方便。

终端里的AI是玩具，网页上的AI是产品。Streamlit就是这座桥。

---

结尾

各位小伙伴，本系列AI大模型入门10篇文章到此全部结束，源码骑士在这里再次感谢你的陪伴！

源码骑士 — Android Framework & 全栈开发

👀 关注：深耕底层原理

❤️ 点赞：让知识传递

⭐ 收藏：app.py模板直接复用

💬 评论：你的AI应用长什么样？发链接来看看！

🔄 一键四连：系列完结，不要忘记给博主"一键四连"哦！

🗡️ 寄语：写代码的终点不是写完，是有人用上。

结语：从3行代码调用GPT，到Streamlit网页部署到公网——你走完了AI大模型应用的"从0到1"。下一个目标：把AI嵌入到你自己的项目中，让更多人用上你做的产品。不要忘记给博主"一键四连"哦！