在本文中，我们将探讨如何使用 OpenAI 的 GPT-3.5 模型实现打字机效果，即用户输入一条消息后，模型逐步返回一个完整的对话文本。我们将介绍一个 Node.js 服务器和一个 HTML 页面的示例代码，这两个组件通过 HTTP 请求和 SSE（Server-Sent Events）协议连接，并实现了基于流式 API 的长时间运行的聊天功能。
对接ChatGPT3.5/4接口本身很简单，但是实现stream以打字机效果展示并且实现自动长回复，不少小伙伴遇到问题，特整理了一份3.5接口开放当天用于临时验证的示例代码供学习参考（千万不要用于生产环境）：
node.js代码：
import dotenv from 'dotenv'
import http from 'node:http'
import { Readable } from 'node:stream'
import url from 'node:url'
import { Configuration, OpenAIApi } from "openai"
dotenv.config()
const configuration = new Configuration({
organization: process.env.OPENAI_API_ORGANIZATION,
apiKey: process.env.OPENAI_API_KEY,
})
const openai = new OpenAIApi(configuration)
const server = http.createServer((req, res) => {
const { pathname } = url.parse(req.url || '/')
if (req.method === 'OPTIONS') {
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
res.end()
} else if (req.method === 'POST' && pathname === '/chatgpt') {
let body = ''
req.on('data', (chunk) => {
body += chunk
})
req.on('end', async () => {
const { messages } = JSON.parse(body)
// Set the response headers
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader("Content-Type", "text/event-stream; charset=utf-8")
res.setHeader("Cache-Control", "no-cache")
res.setHeader("Connection", "keep-alive")
const streamResponse = await openai.createChatCompletion({
model: "gpt-3.5-turbo",
stream: true,
messages: messages
}, { responseType: 'stream' })
// Convert the response to a Readable stream (this is a temporary workaround)
const stream = streamResponse.data as any as Readable
stream.on('data', chunk => {
res.write(chunk)
})
stream.on('end', () => {
res.end()
})
})
} else {
res.statusCode = 404
res.end()
}
})
server.listen(65532, '0.0.0.0', () => {
console.log('Server listening on port 65532')
})
这段 Node.js 代码实现了一个 HTTP 服务器，接受 POST 请求并将请求体中的消息发送给 OpenAI 的 GPT-3.5 模型进行对话，返回模型对消息的回复。具体实现细节包括：
需要注意的是，这段代码中的 dotenv 库用于从 .env 文件中加载环境变量，因此需要确保该文件位于正确的位置且包含正确的变量名和值。同时，该代码假定 OpenAI 的 GPT-3.5/GPT-4 模型已经创建并部署，并且已经获得了相应的 API 凭证。
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ChatGPT Streaming Demo</title>
<!-- 加载 marked.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="module">
window.onload = async () => {
const url = "http://127.0.0.1:65532/chatgpt";
const jsonBody = {
messages: [
{
role: 'user',
content: 'Hello'
}
]
};
const outputDiv = document.getElementById("output");
let result = "";
const answer = async (isContinue) => {
const res = await fetch(url, {
method: "POST",
body: JSON.stringify(jsonBody),
headers: {
"Content-Type": "application/json"
}
})
// Create a reader for the response body
const reader = res.body.getReader();
// Create a decoder for UTF-8 encoded text
const decoder = new TextDecoder("utf-8");
let render = 0
// Function to read chunks of the response body
const readChunk = async () => {
return reader.read().then(({ value, done }) => {
if (!done) {
const dataString = decoder.decode(value);
console.log(dataString)
dataString.toString().trim().split("data: ").forEach(async (line) => {
if (line != '') {
const text = line.replace("data: ", "")
try {
// Parse the chunk as a JSON object
const data = JSON.parse(text)
console.log(data.choices[0])
if (data.choices[0].delta.content) {
result += data.choices[0].delta.content
if (render++ > 5) {
outputDiv.innerHTML += data.choices[0].delta.content
render = 0
} else {
outputDiv.innerHTML = marked.parse(result + data.choices[0].delta.content)
}
}
if (data.choices[0].finish_reason === 'length') { // 支持长回复
await answer(true)
} else if (data.choices[0].finish_reason === 'stop') {
outputDiv.innerHTML = marked.parse(result);
jsonBody.result = result
return
}
return readChunk();
} catch (error) {
// End the stream but do not send the error, as this is likely the DONE message from createCompletion
// console.error(error)
console.log(text)
if (text.trim() === '[DONE]') {
outputDiv.innerHTML = marked.parse(result);
jsonBody.result = result
return
}
}
}
})
} else {
console.log("done");
}
});
};
await readChunk();
}
await answer()
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
这段前端代码实现了一个 HTML 页面，其中包含一个 div 元素用于显示与 ChatGPT3.5/4 模型的对话（EventSource API来实现SSE的接收和处理）。具体实现细节包括：
marked.js 库，用于将 Markdown 格式文本转换为 HTML 格式；marked.js 将其转换为 HTML 文本；div 元素中以在页面上显示出来；finish_reason 字段为 "stop" 时，停止递归调用 answer() 函数并将最终生成的所有文本存储在 JSON 对象 result 字段中。需要注意的是，该代码假定 Node.js 服务器已经启动并正确响应 /chatgpt 路径的请求，并且浏览器能够正常访问该服务器。同时，在实际使用中需要替换 url 变量为实际的服务器地址。以上代码没有考虑中止请求的情况，如需中止请求并展示新内容，可参考《Vue3对接ChatGPT4接口》。
以上示例代码支持长回复（if (data.choices[0].finish_reason === 'length')则持续请求API直到所有内容输出完成），关于chatgpt-api如何支持长回复：https://github.com/transitive-bullshit/chatgpt-api/pull/459。
关于对接Stream方式的API，我看到一些开源项目或多或少存在问题，因精力有限无法一一分析也无力去一一修复开源项目的bug。大家遇到时参考我给的示例代码修改就好。
Q: 前端没有打字机效果？
A: 一种可能原因是经过 Nginx 反向代理，开启了 buffer，则 Nginx 会尝试从后端缓冲一定大小的数据再发送给浏览器。请尝试在反代参数后添加
proxy_buffering off;，然后重载 Nginx。其他 web server 配置同理。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。