文章目录
- 前言
- 一、实现目标
- 二、代码解析
- 2.1目录结构
- 2.2 后端：Flask 服务器的搭建
- 2.2.1 安装 Flask
- 2.2.2 创建 Flask 应用
- 2.3 实现聊天界面与消息交互
- 2.3.1 创建聊天界面
- 三、跨域问题的解决
- 3.1 安装 flask-cors
- 3.2 在 Flask 中启用 CORS
- 五 效果展示
前言
AI 聊天机器人已经成为了许多应用场景中的重要组成部分。通过与用户的对话，聊天机器人不仅能够提升用户体验，还能通过不断学习与优化，提高互动的精准性和智能化水平。
一、实现目标
本次实现的目标是创建一个简单的网页聊天机器人，用户通过输入消息与 AI 进行交互。系统将通过与后端 API 的请求交互，将用户的消息传递给服务器，获取 AI 的回答，并实时展示聊天内容。
具体实现步骤包括：
创建聊天框和用户输入区域。
实现用户消息的发送和显示。
将用户消息发送到后端 API。
获取后端返回的 AI 回复并显示。
增加消息加载时的提示（“AI 正在思考中…”）。
处理可能的请求错误。
二、代码解析
2.1目录结构
ai-chatbot-project/
│
├── backend/ # 后端目录
│ ├── app.py # 后端主文件 (Flask / FastAPI)
│ ├── requirements.txt # 后端依赖 (Flask/FastAPI等)
│ ├── ai_model.py # 集成大模型的文件
│ └── config.py # 配置文件
│
├── frontend/ # 前端目录
│ ├── index.html # 主页 HTML 文件
│ ├── script.js # 前端交互逻辑 (JS)
│ ├── style.css # 页面样式
│ └── package.json # 前端依赖 (Node.js)
│
└── README.md # 项目说明
2.2 后端：Flask 服务器的搭建
使用 Python 的 Flask 框架搭建后端服务器，用于接收前端发来的请求并返回 AI 的回应。首先，需要创建一个 app.py 文件，其中定义路由 /api/chat 来处理聊天请求。
2.2.1 安装 Flask
首先，确保你已经安装了 Flask。如果没有安装，可以通过以下命令进行安装：
pip install flask
2.2.2 创建 Flask 应用
在 app.py 文件中，创建了一个基本的 Flask 应用，并且设置了一个 API 接口 /api/chat 用于处理 POST 请求。代码如下：
from flask import Flask, request, jsonify
from flask_cors import CORSapp = Flask(__name__)
CORS(app)@app.route('/api/chat', methods=['POST'])
def chat():user_message = request.json.get('message')if user_message:# 假设你有 AI 模型的接口来处理用户消息ai_response = "这是AI的回应：" + user_messagereturn jsonify({'response': ai_response})else:return jsonify({'response': '没有收到消息'}), 400if __name__ == '__main__':app.run(debug=True)
2.3 实现聊天界面与消息交互
前端部分使用纯 HTML 和 JavaScript 来实现用户界面，并通过 fetch API 向后端发送请求。需要一个简单的聊天框，用户可以在其中输入消息，点击按钮后消息会发送到后端并返回 AI 的回答。
2.3.1 创建聊天界面
在 index.html 文件中，创建了一个简单的聊天界面，并使用 JavaScript 来控制消息的发送和显示。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><style>body {font-family: 'Arial', sans-serif;background-color: #f5f5f5;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.chat-container {width: 100%;max-width: 500px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);overflow: hidden;}#chat-box {height: 350px;overflow-y: auto;padding: 20px;border-bottom: 1px solid #eee;background-color: #fafafa;}.user, .ai {margin-bottom: 15px;padding: 10px;border-radius: 5px;}.user {background-color: #e0f7fa;color: #00796b;text-align: right;}.ai {background-color: #f1f8e9;color: #388e3c;text-align: left;}.input-container {padding: 10px;display: flex;border-top: 1px solid #eee;background-color: #fff;}#user-input {flex-grow: 1;padding: 10px;border: 1px solid #ccc;border-radius: 20px;font-size: 14px;}button {padding: 10px 20px;margin-left: 10px;background-color: #00796b;color: white;border: none;border-radius: 20px;cursor: pointer;font-size: 14px;}button:hover {background-color: #004d40;}button:active {background-color: #004d40;}/* 滚动条样式 */#chat-box::-webkit-scrollbar {width: 8px;}#chat-box::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 4px;}#chat-box::-webkit-scrollbar-thumb:hover {background-color: #888;}.loading {text-align: center;color: #00796b;font-size: 14px;}</style>
</head>
<body><div class="chat-container"><div id="chat-box"></div><div class="input-container"><input type="text" id="user-input" placeholder="请输入消息..." onkeypress="handleKeyPress(event)"><button onclick="sendMessage()">发送</button></div>
</div><script>function sendMessage() {const userMessage = document.getElementById('user-input').value;if (userMessage.trim() !== '') {// 显示用户消息appendMessage('用户：' + userMessage, 'user');// 清空输入框document.getElementById('user-input').value = '';// 显示AI正在处理中const loadingElement = document.createElement('div');loadingElement.classList.add('loading');loadingElement.innerText = 'AI 正在思考中...';appendMessage(loadingElement.outerHTML, 'ai');// 向后端发送请求fetch('http://localhost:5000/api/chat', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ message: userMessage })}).then(response => response.json()).then(data => {const aiMessage = data.response || '抱歉，我无法理解你的问题。';// 确保加载提示被替换const lastAiMessage = document.querySelector('.ai:last-child');if (lastAiMessage && lastAiMessage.querySelector('.loading')) {lastAiMessage.innerHTML = aiMessage;} else {appendMessage('AI：' + aiMessage, 'ai');}}).catch(error => {console.error('Error:', error);// 处理请求失败的情况const lastAiMessage = document.querySelector('.ai:last-child');if (lastAiMessage && lastAiMessage.querySelector('.loading')) {lastAiMessage.innerHTML = 'AI：请求失败，请稍后再试。';}});}}// 按下回车键发送消息function handleKeyPress(event) {if (event.key === 'Enter') {sendMessage();}}// 将消息添加到聊天框function appendMessage(message, sender) {const chatBox = document.getElementById('chat-box');const messageElement = document.createElement('div');messageElement.classList.add(sender);messageElement.innerHTML = message; // 使用innerHTML以便渲染HTML标签chatBox.appendChild(messageElement);chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部}
</script></body>
</html>
三、跨域问题的解决
在开发过程中，如果前端和后端不在同一域名或端口上运行，浏览器会限制跨域请求。为了避免这种问题，我们可以在 Flask 中使用 flask-cors 库来启用跨域资源共享（CORS）。
3.1 安装 flask-cors
通过以下命令安装 flask-cors：
pip install flask-cors
3.2 在 Flask 中启用 CORS
在 app.py 中导入并启用 CORS，如下所示：
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许跨域请求
四、大模型调用
在ai_model.py中使用ollama调用qwen大模型。首先ollama sever启动ollama。
import requests
import jsondef get_ai_response(user_message):try:messages = [{"role": "system", "content": '你是我的专属人工智能助手，你的名字是贾维斯'}]messages.append({"role": "user", "content": user_message})res = requests.post(url="http://localhost:11434/api/chat",json={"model": "qwen2.5:7b", "messages": messages, "stream": False},)res.raise_for_status()data = res.json() # 使用.json()方法直接解析JSONcontext = data['message']['content']return f"AI 响应: {context}"except Exception as e:return f"AI 错误: {str(e)}"
五 效果展示
这里已经通过系统级别提示，把qwen大模型改为贾维斯！！！
