AI 聊天机器人前端界面构建与生产部署实战

样式美化

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

/* 省略基础样式 */
.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;
}

交互逻辑与流式处理

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

事件监听

const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const uploadBtn = document.getElementById('upload-btn');
const fileInput = document.getElementById('file-input');

// 随机生成一个 Session ID，或者从 localStorage 读取
let sessionId = 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);

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

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

function sendMessage() {
    const message = userInput.value.trim();
    if (!message) return;
    appendMessage('user', message);
    userInput.value = '';

    // 创建 AI 的消息容器，准备接收流式数据
    const botMessageContainer = appendMessage('bot', '');
    const bubble = botMessageContainer.querySelector('.bubble');

    // 使用 EventSource 连接流式 API
    const eventSource = new EventSource(`/api/chat?session_id=${sessionId}&input=${encodeURIComponent(message)}`);

    // 注意：GET 请求示例，POST 更佳 eventSource.onmessage = function(event) {
        const data = JSON.parse(event.data);
        // 逐字追加到 bubble 中
        bubble.textContent += data.token;
        chatMessages.scrollTop = chatMessages.scrollHeight; // 自动滚动
    };
    eventSource.onerror = function() {
        eventSource.close();
    };
}

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

文件上传

function uploadFile() {
    const file = fileInput.files[0];
    if (!file) return;
    const formData = new FormData();
    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 的经典组合。

Gunicorn 启动

gunicorn -w 4 -k gevent -b 127.0.0.1:5001 "app:app"

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

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;
        # ...
    }
}

总结

至此，全栈 AI 聊天机器人就完成了。

实现了：

• 一个能理解上下文的 AI 大脑 (LangChain Memory)。
• 一个能读取外部知识的 RAG 系统 (VectorDB)。
• 一个支持流式打字效果的 Web 界面 (Flask SSE + JS EventSource)。
• 一套可部署到生产环境的架构。

未来可扩展的方向：

• 用户系统：集成用户认证，实现多用户隔离。
• 工具调用 (Agent)：让 AI 能调用外部 API（如查询天气、计算器）。
• 模型切换：增加一个下拉框，允许用户在 GPT-4, 文心一言，通义千问之间切换。

这个项目是对技术组合运用的一次大阅兵。它不仅是一个酷炫的玩具，更是一个可以不断迭代、具备商业潜力的产品原型。希望这能让你学会如何组合各种技术，去创造一个完整的产品。