怎样设置openai的返回Stream数据并转发到h5页面按markdown格式流式输出

显示全部楼层 · 2023-8-23 12:05:16

怎样设置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>

复制代码

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

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

复制代码

在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格式

来源：https://blog.csdn.net/Climbman/article/details/129920946
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

[web教学] 怎样设置openai的返回Stream数据并转发到h5页面按markdown格式流式输出