No bb , show code
效果
后端代码
from flask import Flask, request, Response
import json
import requests
from flask_cors import CORSapp = Flask(__name__)
CORS(app) # Enable CORS for all routesdef 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-turbobase_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) + sourcedata = {"messages": [{"role": "user", "content": prompt}],"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.jsonprompt = body.get("prompt")return Response(gen_stream(prompt), mimetype='text/event-stream')if __name__ == '__main__':app.run(host='0.0.0.0', port=8000)
前端代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sample</title>
</head>
<body><label for="textInput">Prompt：</label><input type="textarea" id="textInput" placeholder="您有什么问题"><button onclick="run_prompt()">执行prompt</button><p><textarea id="answer" rows="10" cols="50" readonly></textarea></p>
<script>current_text = document.getElementById('answer');text = "";char_index = 0function 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>
