OpenAI for Next.js
添加了一些 hooks 和组件,用于处理 OpenAI 流。
安装
nextjs-openai
包含前端工具,openai-streams
包含用于在 API 路由中处理 OpenAI 流的工具。
yarn add nextjs-openai openai-streams
# -或者-
npm i --save nextjs-openai openai-streams
Hooks
useBuffer()
和 useTextBuffer()
用于从指定的 URL 加载增量缓冲区的数据(和文本)。
import { useTextBuffer } from "nextjs-openai";
export default function Demo() {
const { buffer, refresh, cancel, done } = useTextBuffer({
url: "/api/demo"
});
return (
<div>
<StreamingText buffer={buffer} fade={600} />
<button onClick={refresh} disabled={!done}>刷新</button>
<button onClick={cancel} disabled={done}>取消</button>
</div>
);
}
组件
<StreamingText>
和 <StreamingTextURL>
使用渐隐动画从流缓冲区中渲染文本。
import { StreamingTextURL } from "nextjs-openai";
export default function Demo() {
return (
<StreamingTextURL
url="/api/demo"
fade={600}
throttle={100}
/>
);
}
发送数据和高级用法
如果您想更改 <StreamingTextURL>
或 useBuffer()
和 useTextBuffer()
hooks 所发起的网络请求类型,您可以设置 { method, data }
选项。
默认情况下,{ data }
作为 POST 请求体发送。要使用 GET 请求,请设置 { method = "GET" }
并手动在 { url }
上设置 URL 查询参数。
参见
src/pages/index.tsx
以获得一个实时示例。
使用 <StreamingTextURL>
import { StreamingTextURL } from "nextjs-openai";
export default function Home() {
const [data, setData] = useState({ name: "John" });
// ...
return (
<StreamingTextURL url="/api/demo" data={data}>
);
}
使用 useTextBuffer()
import { useTextBuffer, StreamingText } from "nextjs-openai";
export default function Home() {
const [data, setData] = useState({ name: "John" });
const { buffer, refresh, cancel } = useTextBuffer({
url: "/api/demo",
throttle: 100,
data,
/**
* 可选:覆盖 `fetch(url, params)` 的参数。
*/
options: {
headers: {
// ...
}
}
});
// ...
return (
<StreamingText buffer={buffer}>
);
}
API 路由
使用 openai-streams
在您的 API 路由中处理流。
Edge Runtime
import { OpenAI } from "openai-streams";
export default async function handler() {
const stream = await OpenAI(
"completions",
{
model: "text-davinci-003",
prompt: "Write a happy sentence.\n\n",
max_tokens: 25
},
);
return new Response(stream);
}
export const config = {
runtime: "edge"
};
Node <18
如果您没有使用 Edge Runtime,请从 openai-streams/node
中引入 NodeJS.Readable
版本。
import type { NextApiRequest, NextApiResponse } from "next";
import { OpenAI } from "openai-streams/node";
export default async function test (_: NextApiRequest, res: NextApiResponse) {
const stream = await OpenAI(
"completions",
{
model: "text-davinci-003",
prompt: "Write a happy sentence.\n\n",
max_tokens: 25
}
);
stream.pipe(res);
}