文章目录
- 前言
- 一、实现目标
- 二、代码解析
-
- 2.1目录结构
- [2.2 后端：Flask 服务器的搭建](#2.2 后端：Flask 服务器的搭建)
-
- [2.2.1 安装 Flask](#2.2.1 安装 Flask)
- [2.2.2 创建 Flask 应用](#2.2.2 创建 Flask 应用)
- [2.3 实现聊天界面与消息交互](#2.3 实现聊天界面与消息交互)
-
- [2.3.1 创建聊天界面](#2.3.1 创建聊天界面)
- 三、跨域问题的解决
-
- [3.1 安装 flask-cors](#3.1 安装 flask-cors)
- [3.2 在 Flask 中启用 CORS](#3.2 在 Flask 中启用 CORS)
- [五 效果展示](#五 效果展示)
前言
AI 聊天机器人已经成为了许多应用场景中的重要组成部分。通过与用户的对话，聊天机器人不仅能够提升用户体验，还能通过不断学习与优化，提高互动的精准性和智能化水平。
一、实现目标
本次实现的目标是创建一个简单的网页聊天机器人，用户通过输入消息与 AI 进行交互。系统将通过与后端 API 的请求交互，将用户的消息传递给服务器，获取 AI 的回答，并实时展示聊天内容。
具体实现步骤包括：
创建聊天框和用户输入区域。
实现用户消息的发送和显示。
将用户消息发送到后端 API。
获取后端返回的 AI 回复并显示。
增加消息加载时的提示（"AI 正在思考中..."）。
处理可能的请求错误。
二、代码解析
2.1目录结构
bash
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。如果没有安装，可以通过以下命令进行安装：
bash
pip install flask2.2.2 创建 Flask 应用
在 app.py 文件中，创建了一个基本的 Flask 应用，并且设置了一个 API 接口 /api/chat 用于处理 POST 请求。代码如下：
python
from flask import Flask, request, jsonify
from flask_cors import CORS
app = 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_message
return jsonify({'response': ai_response})
else:
return jsonify({'response': '没有收到消息'}), 400
if __name__ == '__main__':
app.run(debug=True)2.3 实现聊天界面与消息交互
前端部分使用纯 HTML 和 JavaScript 来实现用户界面，并通过 fetch API 向后端发送请求。需要一个简单的聊天框，用户可以在其中输入消息，点击按钮后消息会发送到后端并返回 AI 的回答。
2.3.1 创建聊天界面
在 index.html 文件中，创建了一个简单的聊天界面，并使用 JavaScript 来控制消息的发送和显示。HTML 代码如下：
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：
bash
pip install flask-cors3.2 在 Flask 中启用 CORS
在 app.py 中导入并启用 CORS，如下所示：
python
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许跨域请求四、大模型调用
在ai_model.py中使用ollama调用qwen大模型。首先ollama sever启动ollama。
python
import requests
import json
def 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()方法直接解析JSON
context = data['message']['content']
return f"AI 响应: {context}"
except Exception as e:
return f"AI 错误: {str(e)}"五 效果展示
这里已经通过系统级别提示，把qwen大模型改为贾维斯！！！
