后端代码
[Python] 纯文本查看 复制代码
import json
from flask import Flask, Response, render_template, request
from zhipuai import ZhipuAI
app = Flask(__name__)
api_key = "" # 替换为你的API密钥
model_name = "glm-4-0520"
# 初始化ZhipuAI客户端
client = ZhipuAI(api_key=api_key)
# 初始化对话上下文
context = [
{
"role": "system",
"content": "你是一个乐于解答各种问题的助手，你的任务是为用户提供专业、准确、有见地的建议。",
}
]
@app.route("/")
def index():
return render_template("index.html") # 渲染前端模板
def generate_chat(content):
global context
# 将用户输入添加到上下文中
context.append({"role": "user", "content": content})
# 发送请求到模型
response = client.chat.completions.create(
model="glm-4-0520",
messages=context,
top_p=0.7,
temperature=0.95,
max_tokens=4095,
tools=[{"type": "web_search", "web_search": {"search_result": True}}],
stream=True,
)
for chunk in response:
for choice in chunk.choices:
yield json.dumps({"message": choice.delta.content})
# 如果finish_reason是'stop'，说明这是最后一个Chunk或者句子已经完成
if choice.finish_reason == "stop":
return
else:
# 如果这个Chunk中没有finish_reason为'stop'的Choice，则继续下一个Chunk
continue
return
@app.route("/chat", methods=["POST"])
def chat():
global context
# 获取前端发送的用户输入
user_input = request.json.get("input", "")
# 如果用户输入是'exit'，则结束对话
if user_input.lower() == "exit":
context = []
return Response(
json.dumps({"message": "对话已结束"}), content_type="application/json"
)
return Response(generate_chat(user_input), content_type="application/json")
if __name__ == "__main__":
app.run(debug=True)
前端代码
[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask Chat App</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>简易ai聊天</h1>
<textarea id="chat-input" placeholder="请输入你的问题或对话内容（输入'exit'结束对话）"></textarea>
<button onClick="sendMessage()">发送</button>
<div id="chat-output"></div>
<script>
function sendMessage() {
var input = $('#chat-input').val();
fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ input: input }),
})
.then(response => {
// 检查响应是否成功
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// 处理数据流
return handleStreamResponse(response);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
const chatOut = document.getElementById('chat-output');
// 定义一个函数来处理每次接收到的数据
function handleStreamResponse(response) {
const outPut = document.createElement('p');
chatOut.appendChild(outPut);
const reader = response.body.getReader();
function read() {
return reader.read().then(({ done, value }) => {
if (done) {
console.log('Stream complete');
return;
}
// 处理接收到的数据，这里假设数据是 JSON 格式
const text = new TextDecoder().decode(value);
const data = JSON.parse(text);
// 将数据展示在页面上
const span = document.createElement('span');
span.textContent = data.message;
outPut.appendChild(span);
// 继续读取下一部分数据
return read();
});
}
return read();
}
</script>
</body>
</html> | 
发表于 2024-6-26 15:07
|
发表于 2024-6-26 15:59
