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

如何配置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 inenumerate(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 
defprocess_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;returnstrlen($data);});curl_exec($ch);curl_close($ch);?>

其中，

STREAM_URL

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

 java
importjava.net.*;importjava.io.*;publicclassStreamReceiver{publicstaticvoidmain(String[] args)throwsException{URL streamURL =newURL("STREAM_URL");try(BufferedReader reader =newBufferedReader(newInputStreamReader(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);returnstrlen($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代码示例：

importjava.io.IOException;importjava.io.InputStream;importjava.io.OutputStream;importjava.net.HttpURLConnection;importjava.net.URL;importjava.util.concurrent.ExecutorService;importjava.util.concurrent.Executors;importjavax.servlet.AsyncContext;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;@WebServlet(asyncSupported =true, urlPatterns ={"/stream"})publicclassStreamServletextendsHttpServlet{privatestaticfinalExecutorService executor =Executors.newCachedThreadPool();@OverrideprotectedvoiddoGet(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{// 创建异步上下文 AsyncContext asyncContext = request.startAsync();// 提交任务到线程池
 executor.submit(()->{try{// 请求OpenAI接口获取stream数据 URL url =newURL("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 =newbyte[1024];int count;while((count = in.read(buffer))!=-1){// 将stream数据转发给H5页面端 OutputStream outputStream = asyncContext.getResponse().getOutputStream();String data =newString(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')defstream():# 请求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页面端 defgenerate():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 =newstream.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格式