Day 93：【99天精通Python】终极项目 - AI 聊天机器人 (下)

Day 93：【99天精通Python】终极项目 - AI 聊天机器人 (下) - 前端界面与部署

前言

欢迎来到第93天！

在过去的两个章节中，我们已经搭建了一个功能强大的后端：

支持流式对话和多轮记忆。
支持上传 PDF 作为知识库进行 RAG 问答。

今天，我们要为这个强大的"大脑"配上一副漂亮的"面孔"。我们将使用原生HTML, CSS, JavaScript编写一个聊天界面，并学习如何将整个项目部署上线。

本节内容：

聊天界面 HTML 结构
CSS 美化
JavaScript 核心逻辑 (EventSource)
文件上传交互
项目最终部署

一、HTML 骨架 (templates/chat.html)

我们需要一个聊天记录框、一个输入框、一个发送按钮和一个文件上传按钮。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>AI 聊天机器人</title><linkrel="stylesheet"href="{{ url_for('static', filename='style.css') }}"></head><body><divclass="chat-container"><divclass="chat-header"><h2>Python AI Bot</h2></div><divclass="chat-messages"id="chat-messages"><!-- 聊天记录放这里 --></div><divclass="chat-input-form"><inputtype="file"id="file-input"style="display:none;"><buttonid="upload-btn">📎</button><inputtype="text"id="user-input"placeholder="输入消息..."><buttonid="send-btn">发送</button></div></div><scriptsrc="{{ url_for('static', filename='app.js') }}"></script></body></html>

二、CSS 美化 (static/style.css)

让界面看起来像一个真正的聊天软件。

/* 省略基础样式 */.chat-container{display:flex;flex-direction:column;height:90vh;max-width:800px;...}.chat-messages{flex-grow:1;overflow-y:auto;padding:20px;border-bottom:1px solid #ddd;}.message{margin-bottom:15px;display:flex;flex-direction:column;}.message.user{align-items:flex-end;}.message.bot{align-items:flex-start;}.message .bubble{max-width:70%;padding:10px 15px;border-radius:18px;}.message.user .bubble{background-color:#007bff;color:white;}.message.bot .bubble{background-color:#f1f0f0;}/* ... 更多样式 */

三、JS 核心逻辑 (static/app.js)

这是前端的灵魂，负责与后端 API 交互。

3.1 监听事件

constchatMessages=document.getElementById('chat-messages');constuserInput=document.getElementById('user-input');constsendBtn=document.getElementById('send-btn');constuploadBtn=document.getElementById('upload-btn');constfileInput=document.getElementById('file-input');// 随机生成一个 Session ID，或者从 localStorage 读取letsessionId=localStorage.getItem('sessionId')||'session_'+Date.now();localStorage.setItem('sessionId',sessionId);sendBtn.addEventListener('click',sendMessage);userInput.addEventListener('keydown',(e)=>{if(e.key==='Enter')sendMessage();});uploadBtn.addEventListener('click',()=>fileInput.click());fileInput.addEventListener('change',uploadFile);

3.2 发送消息与接收流式响应 (SSE)

我们使用EventSource来接收后端的流式数据。

functionsendMessage(){constmessage=userInput.value.trim();if(!message)return;appendMessage('user',message);userInput.value='';// 创建 AI 的消息容器，准备接收流式数据constbotMessageContainer=appendMessage('bot','');constbubble=botMessageContainer.querySelector('.bubble');// 使用 EventSource 连接流式 APIconsteventSource=newEventSource(`/api/chat?session_id=${sessionId}&input=${encodeURIComponent(message)}`);// 注意：GET 请求示例，POST 更佳eventSource.onmessage=function(event){constdata=JSON.parse(event.data);// 逐字追加到 bubble 中bubble.textContent+=data.token;chatMessages.scrollTop=chatMessages.scrollHeight;// 自动滚动};eventSource.onerror=function(){eventSource.close();};}

(注：为简化演示，这里将 POST 改为 GET 传参，生产环境中应保持 POST)

3.3 文件上传

functionuploadFile(){constfile=fileInput.files[0];if(!file)return;constformData=newFormData();formData.append('file',file);formData.append('session_id',sessionId);appendMessage('system',`正在上传并学习文件:${file.name}...`);fetch('/api/upload',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{appendMessage('system',data.message||'处理完成！');}).catch(error=>{appendMessage('system','上传失败: '+error);});}

四、部署到生产环境

我们使用Gunicorn + Nginx的经典组合。

4.1 Gunicorn 启动

gunicorn -w4-k gevent -b127.0.0.1:5001"app:app"

-k gevent: 使用gevent作为 worker 类型，非常适合流式 IO 场景。
(需pip install gevent)

4.2 Nginx 配置

流式响应对 Nginx 配置有特殊要求，需要禁用代理缓冲。

server { # ... location /api/chat { proxy_pass http://127.0.0.1:5001; proxy_buffering off; # 关闭缓冲！ proxy_cache off; proxy_set_header Connection ''; proxy_http_version 1.1; chunked_transfer_encoding off; } location / { proxy_pass http://127.0.0.1:5001; # ... } }