• AI大模型-流式处理 (以百度接口为例)

    No bb , show code

    效果

    后端代码

    1. from flask import Flask, request, Response
    2. import json
    3. import requests
    4. from flask_cors import CORS
    5.  
    6. app = Flask(__name__)
    7. CORS(app)  # Enable CORS for all routes
    8.  
    9. def get_access_token(ak, sk):
    10.     auth_url = "https://aip.baidubce.com/oauth/2.0/token"
    11.     resp = requests.get(auth_url, params={"grant_type": "client_credentials", "client_id": ak, 'client_secret': sk})
    12.     return resp.json().get("access_token")
    13.  
    14. def get_stream_response(prompt):
    15.     ak = "你的AK"
    16.     sk = "你的SK"
    17.     source = "&sourceVer=0.0.1&source=app_center&appName=streamDemo"
    18.     # ERNIE-Bot-turbo
    19.     base_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/eb-instant"
    20.     # ERNIE-Bot 4.0
    21.     # base_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro"
    22.     # base_url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/plugin/57wt8rb5b3kzhnrd"
    23.     url = base_url + "?access_token=" + get_access_token(ak, sk) + source
    24.     data = {
    25.         "messages": [{"role": "user", "content": prompt}],
    26.         "stream": True
    27.     }
    28.     payload = json.dumps(data)
    29.     headers = {'Content-Type': 'application/json'}
    30.     return requests.post(url, headers=headers, data=payload, stream=True)
    31.  
    32. def gen_stream(prompt):
    33.     response = get_stream_response(prompt)
    34.     for chunk in response.iter_lines():
    35.         chunk = chunk.decode("utf8")
    36.         if chunk[:5] == "data:":
    37.             chunk = chunk[5:]
    38.         yield chunk
    39.  
    40. @app.route('/eb_stream', methods=['POST'])
    41. def eb_stream():
    42.     body = request.json
    43.     prompt = body.get("prompt")
    44.     return Response(gen_stream(prompt), mimetype='text/event-stream')
    45.  
    46. if __name__ == '__main__':
    47.     app.run(host='0.0.0.0', port=8000)

    前端代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Sampletitle>
    6. head>
    7. <body>
    8.   <label for="textInput">Prompt：label>
    9.   <input type="textarea" id="textInput" placeholder="您有什么问题">
    10.   <button onclick="run_prompt()">执行promptbutton>
    11.   <p><textarea id="answer" rows="10" cols="50" readonly>textarea>p>
    12. <script>
    13.   current_text = document.getElementById('answer');
    14.   text = "";
    15.   char_index = 0
    16.   function run_prompt() {
    17.     var inputValue = document.getElementById('textInput').value;
    18.     document.getElementById('answer').value = "";
    19.     // 调用服务端的流式接口, 修改为自己的服务器地址和端口号
    20.     fetch('http://127.0.0.1:8000/eb_stream', {
    21.       method: 'post',
    22.       headers: {'Content-Type': 'application/json'},
    23.       body: JSON.stringify({'prompt': inputValue})
    24.     })
    25.     .then(response => {
    26.       return response.body;
    27.     })
    28.     .then(body => {
    29.       const reader = body.getReader();
    30.       const decoder = new TextDecoder();
    31.       function read() {
    32.         return reader.read().then(({ done, value }) => {
    33.           if (done) { // 读取完成
    34.             return;
    35.           }
    36.           data = decoder.decode(value, { stream: true });
    37.           text += JSON.parse(data).result;
    38.           type();  // 打字机效果输出
    39.           return read();
    40.         });
    41.       }
    42.       return read();
    43.     })
    44.     .catch(error => {
    45.       console.error('发生错误:', error);
    46.     });
    47.   }
    48.  
    49.   function type() {
    50.     let enableCursor = true;  // 启用光标效果
    51.     if (char_index < text.length) {
    52.       let txt = document.getElementById('answer').value;
    53.       let cursor = enableCursor ? "|" : "";
    54.       if (enableCursor && txt.endsWith("|")) {
    55.         txt = txt.slice(0, -1);
    56.       }
    57.       document.getElementById('answer').value = txt + text.charAt(char_index) + cursor;
    58.       char_index++;
    59.       setTimeout(type, 1000/5);  // 打字机速度控制, 每秒5个字
    60.     }
    61.   }
    62. script>
    63. body>
    64. html>

  • 相关阅读:
    机器学习笔记 - 使用机器学习进行鸟类物种分类
    CSS 常用样式 显示模式
    MySQL学习笔记：锁2
    微软：Octo Tempest是最危险的金融黑客组织之一
    c++新特性 语言运行期强化
    【前端面试题】
    基于c++的简易web服务器搭建(初尝socket编程)
    牛客-模拟、枚举、贪心 2022.11.15
    抵御风险网站防攻击，国产浏览器能做的有很多
    Swift的NSClassFromString转换
  • 原文地址：https://blog.csdn.net/langchao7946/article/details/136345519