AI大模型-流式处理 (以百度接口为例)
沉心ss 2024-07-21 17:01:02 阅读 85
No bb , show code
效果
后端代码
<code>from flask import Flask, request, Response
import json
import requests
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # Enable CORS for all routes
def get_access_token(ak, sk):
auth_url = "https://aip.baidubce.com/oauth/2.0/token"
resp = requests.get(auth_url, params={"grant_type": "client_credentials", "client_id": ak, 'client_secret': sk})
return resp.json().get("access_token")
def get_stream_response(prompt):
ak = "你的AK"
sk = "你的SK"
source = "&sourceVer=0.0.1&source=app_center&appName=streamDemo"
# ERNIE-Bot-turbo
base_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/eb-instant"
# ERNIE-Bot 4.0
# base_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro"
# base_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/plugin/57wt8rb5b3kzhnrd"
url = base_url + "?access_token=" + get_access_token(ak, sk) + source
data = {
"messages": [{"role": "user", "content": prompt}],code>
"stream": True
}
payload = json.dumps(data)
headers = {'Content-Type': 'application/json'}
return requests.post(url, headers=headers, data=payload, stream=True)
def gen_stream(prompt):
response = get_stream_response(prompt)
for chunk in response.iter_lines():
chunk = chunk.decode("utf8")
if chunk[:5] == "data:":
chunk = chunk[5:]
yield chunk
@app.route('/eb_stream', methods=['POST'])
def eb_stream():
body = request.json
prompt = body.get("prompt")
return Response(gen_stream(prompt), mimetype='text/event-stream')code>
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8000)code>
前端代码
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<title>Sample</title>
</head>
<body>
<label for="textInput">Prompt：</label>code>
<input type="textarea" id="textInput" placeholder="您有什么问题">code>
<button onclick="run_prompt()">执行prompt</button>code>
<p><textarea id="answer" rows="10" cols="50" readonly></textarea></p>code>
<script>
current_text = document.getElementById('answer');
text = "";
char_index = 0
function run_prompt() {
var inputValue = document.getElementById('textInput').value;
document.getElementById('answer').value = "";
// 调用服务端的流式接口, 修改为自己的服务器地址和端口号
fetch('http://127.0.0.1:8000/eb_stream', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({'prompt': inputValue})
})
.then(response => {
return response.body;
})
.then(body => {
const reader = body.getReader();
const decoder = new TextDecoder();
function read() {
return reader.read().then(({ done, value }) => {
if (done) { // 读取完成
return;
}
data = decoder.decode(value, { stream: true });
text += JSON.parse(data).result;
type(); // 打字机效果输出
return read();
});
}
return read();
})
.catch(error => {
console.error('发生错误:', error);
});
}
function type() {
let enableCursor = true; // 启用光标效果
if (char_index < text.length) {
let txt = document.getElementById('answer').value;
let cursor = enableCursor ? "|" : "";
if (enableCursor && txt.endsWith("|")) {
txt = txt.slice(0, -1);
}
document.getElementById('answer').value = txt + text.charAt(char_index) + cursor;
char_index++;
setTimeout(type, 1000/5); // 打字机速度控制, 每秒5个字
}
}
</script>
</body>
</html>
上一篇： 微信公众号写作时必备的AI提示词（也称为指令或Prompt）
下一篇： 0基础学会在亚马逊云科技AWS上利用SageMaker、PEFT和LoRA高效微调AI大语言模型（含具体教程和代码）
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。