打造属于您的AI对话伙伴：基于Flask和Socket.IO的交互式聊天应用
前言
在这个科技迅速发展的时代，人工智能（AI）技术不仅改变了我们的生活方式，更在重新定义我们的工作方式。尽管许多人已经开始使用现成的AI工具，但对AI技术的深入理解和应用开发仍然是一个挑战。本项目旨在突破这一限制，引导您从零开始，亲手打造一个基于Flask和Socket.IO的实时AI聊天助手。
让我们跳出"用户"的角色，成为"创造者"。让你不再只是用户，而是成为技术的创造者和推动者。这不仅是学习新技术的机会，更是参与塑造AI未来的宝贵经历。
通过这个项目，您将能够：
- 探索AI对话系统的核心原理和运作方式
- 掌握开发实时Web应用的关键技术和最佳实践
- 研究如何将AI技术与现代Web开发无缝结合
技术栈
- Flask：
功能强大的Python Web框架，提供灵活的后端支持。 - Socket.IO：
实现实时、双向的基于事件的通信，是实现实时对话的关键。 - 通义千问API：
具有强大的AI对话生成能力。
这个技术栈的组合使我们能够创建一个反应迅速、智能度高的聊天助手，为用户带来良好的交互体验。
技术亮点
-
AI驱动的对话生成：
利用OpenAI的强大API，我们的助手能够理解用户输入的上下文，并生成相关、连贯且信息丰富的回复。无论是日常闲聊、专业咨询还是创意激发，AI都能够胜任。 -
Socket.IO实现实时通信：
通过Socket.IO，我们建立了服务器和客户端之间的实时双向通信通道。这使得AI生成的回答可以立即传送到用户界面，实现了真正的实时对话。 -
通义千问API集成：
深度集成了阿里云通义千问API，利用其强大的语言模型来生成高质量的对话内容。通过精心设计的提示和上下文管理，我们确保了AI回答的相关性和连贯性。 -
流式响应技术：
这是本项目的一大亮点。不同于传统的等待整个回复生成后再显示，我们的系统能够实时流式显示AI的回答。用户可以看到回答是如何一字一句"打出来"的，大大提升了交互的即时性和趣味性。 -
Markdown格式化消息：
支持Markdown格式，使得消息内容不仅限于文本，还可以包括代码块、列表、加粗等丰富的格式选项。这使得对话内容更加多样化和丰富，提高了用户体验。
详细实现
为了帮助大家理解前后端的实现细节，下面我将提供一个详细的步骤指南，并附上相关的代码示例。
后端实现
步骤 1: 初始化 Flask 应用和 SocketIO 实例
from flask import Flask, render_template, session
from flask_socketio import SocketIO, emit
from openai import OpenAI
import os
import threading
import uuid
app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)
socketio = SocketIO(app)
client = OpenAI(
api_key="sk-", # 替换为实际的 API 密钥
base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
)
stop_event = threading.Event()
conversation_history = {}
步骤 2: 设置路由
这部分主要涉及到 Flask 的路由配置，这里只有一个简单的路由，用于渲染聊天界面。
@app.route('/')
def index():
# 为每个新用户生成一个唯一的会话ID
session['user_id'] = str(uuid.uuid4())
# 渲染聊天界面模板
return render_template('chat.html')
步骤 3: 设置 SocketIO 事件处理
这部分涉及到 SocketIO 的事件监听和处理逻辑，我们将其拆分为几个小步骤以便于理解和实现。
步骤 3.1: 处理停止生成事件
@socketio.on('stop_generating')
def handle_stop():
stop_event.set() # 通知模型停止生成
emit('message_stopped') # 通知前端停止生成
步骤 3.2: 处理发送消息事件
当用户在前端界面输入消息并点击发送按钮时，这个消息会通过Socket.IO发送到服务器。服务器端的 handle_message 函数会被触发，处理这个消息。
@socketio.on('send_message')
def handle_message(message):
stop_event.clear() # 清除停止标志位
user_id = session.get('user_id') # 获取当前用户的会话ID
# 初始化或更新用户的对话历史
conversation_history.setdefault(user_id, [
{'role': 'system', 'content': '你是一个有帮助的助手。'}
])
conversation_history[user_id].append({'role': 'user', 'content': message})
handle_ai_response(user_id) # 调用函数处理AI响应
步骤 3.3: 生成并发送AI响应
此步骤负责生成AI的响应并将其发送给用户。当用户发送消息后，系统会调用此函数来处理AI的生成和响应过程。
功能描述
- **生成AI响应：**使用OpenAI的API，根据用户的对话历史生成响应。这个过程是流式的，即AI的回答会逐渐生成并发送。
- **实时发送响应：**通过Socket.IO，将AI生成的响应实时发送给前端，用户可以看到AI回答的逐字生成过程。
- **处理中断请求：**如果用户在AI响应生成过程中请求停止，系统将立即停止生成并通知用户。
代码实现
def handle_ai_response(user_id):
try:
# 启动与AI模型的会话，传入用户的对话历史
completion = client.chat.completions.create(
model="qwen-long",
messages=conversation_history[user_id],
stream=True
)
ai_response = "" # 初始化AI响应字符串
# 处理每一个生成的数据块
for chunk in completion:
if stop_event.is_set():
break # 如果接收到停止信号，则中断响应生成
if chunk.choices[0].delta.content:
content = chunk.choices[0].delta.content
ai_response += content
emit('message_chunk', {'content': content}) # 发送内容增量给前端
# 如果生成完成且未被中断，发送完整的响应
if not stop_event.is_set():
conversation_history[user_id].append({'role': 'assistant', 'content': ai_response})
emit('message_complete')
except Exception as e:
print(f"Error: {str(e)}")
emit('error', {'message': str(e)}) # 处理可能发生的异常
前端实现
前端部分主要负责与用户的交互以及与后端SocketIO服务的通信。
步骤 1: 编写基本的 HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI聊天助手</title>
</head>
<body>
<div class="chat-container">
<div class="header">AI聊天助手</div>
<div class="chat-area" id="chatArea">
<!-- 对话记录 -->
</div>
<div class="input-area">
<textarea id="userInput" placeholder="有什么想问的吗..." rows="2"></textarea>
<button id="sendButton" onclick="toggleSendStop()">发送</button>
</div>
<div class="usage-info">
<details>
<summary>使用说明 </summary>
<p>- 在输入框中输入你的问题或指令</p>
<p>- 点击发送按钮或按回车键发送消息</p>
<p>- AI助手会根据你的输入给出回应</p>
<p>- 你可以继续提问或进行对话</p>
</details>
</div>
</div>
</body>
</html>
步骤 2: 使用 JavaScript 脚本来处理事件，以下为部分代码
// 发送消息逻辑...
async function sendMessage() {
const userInput = document.getElementById('userInput');
const chatArea = document.getElementById('chatArea');
const sendButton = document.getElementById('sendButton');
const message = userInput.value.trim();
if (message && !isResponding) {
isResponding = true;
stopRequested = false;
aiStartedResponding = false; // 重置AI回复状态
sendButton.textContent = '停止';
sendButton.classList.add('stop');
// 添加用户消息
const userMessage = document.createElement('div');
userMessage.className = 'message user-message';
userMessage.textContent = message;
chatArea.appendChild(userMessage);
scrollToBottom();
// 清空输入框并重置高度
userInput.value = '';
adjustTextareaHeight();
// 创建AI消息元素
const aiMessage = document.createElement('div');
aiMessage.className = 'message ai-message';
chatArea.appendChild(aiMessage);
scrollToBottom();
// 重置currentAiMessage
currentAiMessage = '';
// 发送消息到服务器
socket.emit('send_message', message);
}
}
// 自动调整文本区域高度...
function adjustTextareaHeight() {
const textarea = document.getElementById('userInput');
textarea.style.height = 'auto';
textarea.style.height = (textarea.scrollHeight) + 'px';
}
// 处理Enter键事件...
function handleKeyPress(event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault(); // 阻止默认的回车行为
if (!isResponding) {
sendMessage();
}
}
}
// 滚动监听...
function handleScroll() {
const chatArea = document.getElementById('chatArea');
userScrolled = true;
// 如果用户滚动到接近底部，重置 userScrolled
if ((chatArea.scrollHeight - chatArea.scrollTop - chatArea.clientHeight) < scrollThreshold) {
userScrolled = false;
}
}
总结
通过开发这个基于Flask和Socket.IO的实时AI聊天助手，我们不仅创造了一个功能强大的应用，更重要的是，我们深入探索了AI技术与Web开发的结合。这个项目为我们提供了宝贵的实践经验，让我们能够：
- 深入理解AI对话系统的工作原理，包括自然语言处理和上下文管理。
- 掌握实时Web应用开发的关键技术，特别是Socket.IO的使用。
- 体验AI与Web技术的融合过程，了解如何将AI能力无缝集成到Web应用中。
通过亲手构建这样一个系统，我们跨越了从"使用者"到"创造者"的鸿沟，为未来参与更复杂、更有挑战性的AI项目做好了准备。
版本说明
基础版本
- 功能：基本的消息发送和接收，无需连续对话支持。
- 技术：使用基础的HTTP请求处理，不涉及WebSocket技术。
- 用户界面：简单的文本输入和显示，不支持Markdown语法或其他富文本格式。
升级版本
- 功能：支持连续对话，能够根据上下文生成响应。
- 技术：采用WebSocket实现实时双向通信，提高响应速度和交互体验。
- 用户界面：支持Markdown语法，可以显示富文本格式，提升用户交互体验。
源码获取
关注公众号：码上Code，回复AI聊天助手获取源码。
扫一扫
53
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
