从零开始搭建AI对话系统_Streamlit网页端开发教程

想快速搭建一个AI对话网页，又不想碰复杂的前端？Streamlit给出了一个纯粹的Python方案：安装依赖 → 用Ollama拉起本地模型 → 编写app.py串联界面与API → 在侧边栏加点配置 → 最后运行一条命令，浏览器打开localhost:8501就能开聊。

如果你正想在本地快速搭建一个可交互的AI对话网页，却苦于没有前端经验，或者被各种框架的配置搞得头大，那么Streamlit这条纯Python的轻量路径，或许正是你需要的。下面，我们就来一步步拆解如何实现。

一、安装Streamlit与基础依赖

Streamlit这个框架妙就妙在，你完全不用懂HTML、CSS或Ja vaScript，光靠Python就能生成响应式的Web界面。当然，前提是得先把环境准备好。一个干净、独立的环境能有效避免后续可能出现的版本冲突问题。

1、确认Python版本：首先，确保你的系统已经安装了Python 3.8或更高版本。打开终端，输入python --version验证一下。

2、创建虚拟环境：接着，为项目创建一个独立的虚拟环境。执行python -m venv streamlit_ai_env。

3、激活环境：创建好后，需要激活它。Windows用户请运行streamlit_ai_env\Scripts\activate，而macOS或Linux用户则执行source streamlit_ai_env/bin/activate。

4、安装核心库：最后，在激活的环境中，安装我们需要的核心包：pip install streamlit torch transformers accelerate。

二、选择并接入本地大模型服务

为了保证数据隐私和获得更低的响应延迟，我们推荐在本地运行模型。Ollama就是一个非常趁手的工具，它提供了一个统一的API接口，集成了多种轻量级开源模型，最关键的是，它帮你屏蔽了复杂的CUDA配置和权重加载逻辑。

1、安装Ollama客户端：前往Ollama官网下载安装程序。Windows用户运行OllamaSetup.exe，安装时注意路径不要包含中文或空格。

2、验证安装：安装完成后，重启命令行，输入ollama --version，如果能看到版本号，说明服务就绪。

3、拉取模型：接下来，拉取一个适合在本地运行的模型。例如，可以试试小巧的ollama pull qwen2:0.5b，或者能力更强的ollama pull deepseek-r1:7b。

4、启动服务：让Ollama在后台运行起来。在Linux或macOS上，可以执行ollama serve &；在Windows上，保持运行Ollama的PowerShell窗口不要关闭即可。

三、编写Streamlit主应用文件

整个Web界面的核心都在app.py这个文件里。它需要囊括页面配置、会话状态管理、模型调用逻辑以及UI渲染这四个部分。这里有个小技巧：利用Streamlit的@st.cache_resource装饰器来缓存模型实例，能有效避免重复加载带来的延迟。

1、创建文件：新建一个文本文件，命名为app.py。

2、导入模块：在文件开头，导入必要的库：import streamlit as st、import requests、import json。

3、页面配置：设置一下网页的标题和图标，让界面更友好：st.set_page_config(page_title="AI对话助手", page_icon="?")。

4、初始化会话：我们需要一个地方来存储对话历史。用以下代码初始化：if "messages" not in st.session_state: st.session_state.messages = []。

5、渲染历史消息：将存储的历史对话显示出来：for msg in st.session_state.messages: st.chat_message(msg["role"]).write(msg["content"])。

四、实现Ollama API通信逻辑

Streamlit本身并不具备大模型推理能力，所以我们需要让它和后台的Ollama服务“对话”。通过HTTP请求调用Ollama暴露的/api/chat接口，是一个通用且高效的方法。这种方式兼容Ollama托管的所有模型，并且支持流式响应，能让对话显得更自然。

1、定义请求函数：编写一个如ask_ollama(user_input, history)的函数，其内部负责构造符合Ollama要求的JSON数据包。

2、设置请求：在函数中，设置POST请求头{"Content-Type": "application/json"}，并指定目标URL为"http://localhost:11434/api/chat"。

3、处理流式响应：为了模拟真实的打字机效果，可以启用流式响应处理。循环读取服务器发送的事件，实时提取出message.content字段的内容，并逐字输出到前端的st.chat_message("assistant")聊天容器中。

4、保存对话：别忘了，每次用户输入和AI的回复，都需要及时追加到st.session_state.messages中，这样即使页面刷新，对话历史也不会丢失。

五、添加交互增强组件

除了基础的聊天输入框，我们还可以在侧边栏增加一些实用功能，比如切换模型、清空历史、调节生成参数等。这些组件Streamlit都提供了原生控件，无需额外编写Ja vaScript代码。

1、创建侧边栏：使用with st.sidebar:语句开启侧边栏区域，并添加一个标题，例如st.title("⚙️ 配置面板")。

2、添加模型选择器：放一个下拉菜单，让用户可以选择不同的模型：selected_model = st.selectbox("选择模型", ["qwen2:0.5b", "deepseek-r1:7b", "llama3"])。

3、调节生成参数：加入一个滑动条来控制生成文本的随机性（温度参数）：temperature = st.slider("Temperature", 0.1, 1.0, 0.7)。

4、部署清空按钮：最后，放一个按钮，一键清空对话历史：if st.button("?️ 清空对话历史"): st.session_state.messages = []。

六、运行与本地访问

Streamlit内置的开发服务器支持热重载，这意味着你修改代码并保存后，浏览器中的页面会自动刷新，调试效率非常高。服务默认运行在本地的8501端口，同一局域网内的其他设备也能通过你电脑的IP地址进行访问。

1、启动应用：在之前激活的虚拟环境中，运行命令：streamlit run app.py。

2、查看地址：终端会输出启动日志，其中包含一行Local URL: http://localhost:8501。

3、打开浏览器：直接点击这个链接，或者手动在浏览器地址栏输入http://localhost:8501。

4、耐心等待：首次加载时，如果后台模型尚未预热完成，可能需要等待10到30秒左右，直到Ollama返回第一个响应字节，之后对话就会变得流畅。

来源：互联网