如何配置openai的返回Stream数据并转发到h5页面按markdown格式流式输出

心已赠人 2024-03-24 13:38 3阅读 0赞

**如何配置openai返回数据，保持流式输出，可以分段加载**

可以使用OpenAI API的stream参数来实现流式输出，并且可以使用max\_tokens参数控制每次返回数据的长度。 以下是一个示例代码，演示如何使用OpenAI API来实现流式输出并分段加载：

python 
    import openai
    # 连接 OpenAI API openai.api_key = "YOUR_API_KEY" 
    # 设置 OpenAI API 参数 
    model_engine = "davinci" 
    # 模型引擎 
    prompt = "你好，我需要帮助进行自然语言处理任务。" # 请求语句 
    temperature = 0.5 # 温度参数 
    max_tokens = 100 # 每次最大输出长度 # 获取 OpenAI 返回数据 
    completions = openai.Completion.create( engine=model_engine, prompt=prompt, temperature=temperature, max_tokens=max_tokens, n=1, stream=True ) # 分段获取数据 
    for i, text in enumerate(iter(completions.choices), start=1): 
    print(f"============== 第 {
          i} 段输出 ==============") 
    print(text.text)

在这个示例中，我们将`stream`参数设置为`True`，这样OpenAI API将会实时地将数据传输回调用方，并且将返回一个生成器对象(`iter(completions.choices)`)，使得我们可以逐段获取数据并打印出来。 同时，我们使用`max_tokens`参数来控制每次返回的数据长度，这样也可以有效的避免返回数据过长导致内存不足的问题。 注意，这里的`YOUR_API_KEY`需要替换为您在OpenAI申请的API密钥。【请求时间：14秒】

openai 返回stream流，是UDP还是TCP，接收stream数据代码DEMO

OpenAI GPT-3 API 返回的是 HTTPS 流，使用的是 TCP 协议。  
如果您需要处理从 OpenAI GPT-3 API 返回的数据流，您可以使用 Python 中的 requests 库来处理它。  
以下是一个可以接收并处理由 OpenAI GPT-3 API 返回的数据流的示例代码：

python 
    import requests 
    def process_stream(stream): 
    for line in stream.iter_lines(): 
    	if line: # 处理返回的数据 
    		print(line.decode('utf-8')) # 发起 API 请求并处理返回的数据流 
    		response = requests.post(url, headers=headers, data=data, stream=True) 
    		process_stream(response.iter_lines())

在上面的代码中，我们使用 `requests.post` 方法发起了一个带有 `stream=True` 参数的 POST 请求，并将响应保存到 `response` 变量中。接着，我们调用 `process_stream` 函数来处理从 API 返回的数据流。在 `process_stream` 函数中，我们使用 `iter_lines` 迭代器来逐行处理数据流，并将每行转换为 UTF-8 编码字符串。在这个简单的示例中，我们只是将数据打印到控制台上，但您可以根据实际需求来编写相应的逻辑来处理数据。

接收stream数据的PHP代码示例如下：

php 
    <?php $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, 'STREAM_URL'); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_WRITEFUNCTION, function($curl, $data) 
    {
         // 处理获得的数据
     echo $data; 
     return strlen($data); }); 
     curl_exec($ch);
      curl_close($ch); ?>

其中，`STREAM_URL` 代表 OpenAI 的 stream URL 地址。这段代码会将数据逐步地写到屏幕上。  
相应的，接收stream数据的Java代码示例如下：

java
    import java.net.*; 
    import java.io.*; 
    public class StreamReceiver {
         
    	public static void main(String[] args) throws Exception 
    		{
         URL streamURL = new URL("STREAM_URL"); 
    		try (
    			BufferedReader reader = new BufferedReader( new InputStreamReader(streamURL.openStream()))) 
    				{
         String line; 
    					while ((line = reader.readLine()) != null) 
    					{
         // 处理获得的数据 System.out.println(line); 
    					}
    				} 
    		 } 
     }

同样的，`STREAM_URL` 代表 OpenAI 的 stream URL 地址。这段代码会将数据逐步地输出到命令行界面上

PHP代码示例：

<?php // 请求OpenAI接口获取stream数据，并转发到H5页面端 
    $openAIUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions'; $headers = array( 'Content-Type: application/json', 'Authorization: Bearer <YOUR_API_KEY>' ); 
    $data = array( 'prompt' => 'Hello, world!', 'max_tokens' => 5, 'temperature' => 0.7 ); 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $openAIUrl); 
    curl_setopt($ch, CURLOPT_POST, true); 
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data)); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); 
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    $output = fopen('php://output', 'w'); 
    curl_setopt($ch, CURLOPT_WRITEFUNCTION, function ($ch, $chunk) use ($output) {
         fwrite($output, $chunk); 
    return strlen($chunk); }); 
    curl_exec($ch); 
    fclose($output); // 将stream数据转发给H5页面端 
    header('Content-Type: text/event-stream'); 
    header('Cache-Control: no-cache'); 
    header('Connection: keep-alive'); 
    header('Access-Control-Allow-Origin: *'); 
    fpassthru($output);

Java代码示例：

import java.io.IOException; 
    import java.io.InputStream; 
    import java.io.OutputStream; 
    import java.net.HttpURLConnection; 
    import java.net.URL; 
    import java.util.concurrent.ExecutorService; 
    import java.util.concurrent.Executors; 
    import javax.servlet.AsyncContext; 
    import javax.servlet.ServletException; 
    import javax.servlet.annotation.WebServlet; 
    import javax.servlet.http.HttpServlet; 
    import javax.servlet.http.HttpServletRequest; 
    import javax.servlet.http.HttpServletResponse; 
    @WebServlet(asyncSupported = true, urlPatterns = {
        "/stream"}) 
    public class StreamServlet extends HttpServlet 
    {
         
    private static final ExecutorService executor = Executors.newCachedThreadPool(); 
    @Override 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         
    // 创建异步上下文 
    AsyncContext asyncContext = request.startAsync(); // 提交任务到线程池
     executor.submit(() -> {
         try {
         
    // 请求OpenAI接口获取stream数据 
    URL url = new URL("https://api.openai.com/v1/engines/davinci-codex/completions"); 
    HttpURLConnection conn = (HttpURLConnection) url.openConnection(); 
    conn.setRequestMethod("POST"); 
    conn.setRequestProperty("Content-Type", "application/json"); 
    conn.setRequestProperty("Authorization", "Bearer <YOUR_API_KEY>"); conn.setDoOutput(true); 
    OutputStream out = conn.getOutputStream(); 
    out.write("{\"prompt\": \"Hello, world!\", \"max_tokens\": 5, \"temperature\": 0.7}".getBytes());
     out.flush(); 
    out.close(); 
    InputStream in = conn.getInputStream(); 
    response.setContentType("text/event-stream"); 
    response.setHeader("Cache-Control", "no-cache"); 
    response.setHeader("Connection", "keep-alive"); 
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    byte[] buffer = new byte[1024];
    int count;
    while ((count = in.read(buffer)) != -1) {
         
    // 将stream数据转发给H5页面端 
    OutputStream outputStream = asyncContext.getResponse().getOutputStream(); 
    String data = new String(buffer, 0, count); 
    outputStream.write(("data: " + data + "\n\n").getBytes()); 
    outputStream.flush(); } in.close(); } 
    catch (IOException e) {
         e.printStackTrace(); } 
    finally {
         asyncContext.complete(); } }); } }

Python代码示例：

import requests from flask 
    import Flask, Response app = Flask(__name__) @app.route('/stream') 
    def stream(): # 请求OpenAI接口获取stream数据 
    url = 'https://api.openai.com/v1/engines/davinci-codex/completions' 
    headers = {
         'Content-Type': 'application/json', 'Authorization': 'Bearer <YOUR_API_KEY>' } 
    data = {
         'prompt': 'Hello, world!', 'max_tokens': 5, 'temperature': 0.7 } res = requests.post(url, headers=headers, json=data, stream=True) 
    # 将stream数据转发给H5页面端 
    def generate(): 
    for chunk in res.iter_content(chunk_size=1024): 
    if chunk: yield 'data: ' + chunk.decode() + '\n\n' 
    return Response(generate(), mimetype='text/event-stream', headers={
         'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*' }) 
    if __name__ == '__main__': 
    app.run()

注意：以上代码仅供参考，具体实现需要根据自己的业务需求进行适当修改。

**如何让前端Html能显示mardown格式**

要在前端HTML中显示Markdown格式，您可以使用一个叫做Markdown解析器的库或工具。下面是一个简单的例子：  
1.首先，通过CDN或将其下载到本地文件夹中，引入一个Markdown解析器库，比如marked.js。

html <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

1.  在页面上添加一个textarea标签用于输入Markdown格式的文本，添加一个div标签用于显示解析后的HTML内容。

javascripthtml <textarea id="mdInput"></textarea> <div id="htmlOutput"></div>

1.  在JavaScript中获取textarea的值，将其传递给Markdown解析器，并将输出的HTML代码插入到div中。

javascript 
    var markdown = document.getElementById('mdInput').value; 
    var html = marked(markdown); 
    document.getElementById('htmlOutput').innerHTML = html;

这样就可以在浏览器中显示Markdown格式的文本了。

类似于ChatGPT网站使用Node.js中的流（Stream）处理技术将输出转换成markdown格式。  
流是一种在处理大量数据时很有用的技术，它允许以逐块的方式处理数据而不必等待加载整个数据集。 在ChatGPT网站中，可能使用了类似于以下代码的方法来将输出流转换为markdown格式：

javascript 
     const markdown = require('markdown').markdown; 
     const stream = require('stream'); 
     const outputStream = new stream.Writable({
         
     	write(chunk, encoding, callback) {
         
    		 const text = chunk.toString(); 
    		 const markdownText = markdown.toHTML(text); 
    		 process.stdout.write(markdownText); 
    		 callback(); }, 
    		 }); 
     // Stream output to markdown formatter 
     originalOutputStream.pipe(outputStream);

在这个代码示例中，`markdown`库用于将输入的纯文本转换为Markdown格式。一个`Writable`可写流用于接收输出，并将其转换为Markdown格式并将其发送到标准输出流（`process.stdout.write()`）。最后将原始输出流（`originalOutputStream`）连接到新的可写流（`outputStream`），并通过该管道输出到标准输出流。 这只是一个简单的示例，实际上，ChatGPT网站可能使用更复杂的技术来流式处理并转换输出到Markdown格式