}

}
“`

构建上下文

在这里，你需要使用 OpenAI 的 token-counting 库 tiktoken 运行 npm i @dqbd/tiktoken。

现在我们要构建一个上下文化 ChatGPT 的提示，在 NextJS API 端点中。创建一个名为 pages/api/buildPrompt.ts 的文件，代码以下：

“`javascript
// pages/api/buildPrompt.ts

import { get_encoding } from “@dqbd/tiktoken”;

// Load the tokenizer which is designed to work with the embedding model

const enc = get_encoding(‘cl100k_base’);

const apiKey = process.env.EMBEDBASE_API_KEY;

// this is how you search Embedbase with a string query

const search = async (query: string) => {

return fetch(“https://api.embedbase.xyz/v1/documentation/search”, {

method: “POST”,

headers: {

Authorization: “Bearer ” + apiKey,

“Content-Type”: “application/json”

},

body: JSON.stringify({

query: query

})

}).then(response => response.json());

};

const createContext = async (question: string, maxLen = 1800) => {

// get the similar data to our query from the database

const searchResponse = await search(question);

let curLen = 0;

const returns = [];

// We want to add context to some limit of length (tokens)

// because usually LLM have limited input size

for (const similarity of searchResponse[“similarities”]) {

const sentence = similarity[“data”];

// count the tokens

const nTokens = enc.encode(sentence).length;

// a token is roughly 4 characters, to learn more

// https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them

curLen += nTokens + 4;

if (curLen > maxLen) {

break;

}

returns.push(sentence);

}

// we join the entries we found with a separator to show it’s different

return returns.join(”

###

“);

}

// this is the endpoint that returns an answer to the client

export default async function buildPrompt(req, res) {

const prompt = req.body.prompt;

const context = await createContext(prompt);

const newPrompt = `Answer the question based on the context below, and if the question can’t be answered based on the context, say “I don’t know”

Context: ${context}

—

Question: ${prompt}

Answer:`;

res.status(200).json({ prompt: newPrompt });

}
“`

调用 ChatGPT

首先，在 utils/OpenAIStream.ts 文件中添加一些用于进行 OpenAI 流式调用的实用函数，你需要运行 npm i eventsource-parser 安装 eventsource-parser。

“`javascript
import {

createParser,

ParsedEvent,

ReconnectInterval,

} from “eventsource-parser”;

export interface OpenAIStreamPayload {

model: string;

// this is a list of messages to give ChatGPT

messages: { role: “user”; content: string }[];

stream: boolean;

}

export async function OpenAIStream(payload: OpenAIStreamPayload) {

const encoder = new TextEncoder();

const decoder = new TextDecoder();

let counter = 0;

const res = await fetch(“https://api.openai.com/v1/chat/completions”, {

headers: {

“Content-Type”: “application/json”,

“Authorization”: `Bearer ${process.env.OPENAI_API_KEY ?? “”}`,

},

method: “POST”,

body: JSON.stringify(payload),

});

const stream = new ReadableStream({

async start(controller) {

// callback

function onParse(event: ParsedEvent | ReconnectInterval) {

if (event.type === “event”) {

const data = event.data;

// https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream

if (data === “[DONE]”) {

controller.close();

return;

}

try {

const json = JSON.parse(data);

// get the text response from ChatGPT

const text = json.choices[0]?.delta?.content;

if (!text) return;

if (counter < 2 && (text.match(/ /) || []).length) { // this is a prefix character (i.e., " "), do nothing return; } const queue = encoder.encode(text); controller.enqueue(queue); counter++; } catch (e) { // maybe parse error controller.error(e); } } } // stream response (SSE) from OpenAI may be fragmented into multiple chunks // this ensures we properly read chunks and invoke an event for each SSE event stream const parser = createParser(onParse); // https://web.dev/streams/#asynchronous-iteration for await (const chunk of res.body as any) { parser.feed(decoder.decode(chunk)); } }, }); return stream; } ``` 然后，在 pages/api/qa.ts 文件中创建一个简单的端点，只需对 ChatGPT 进行流式调用。 ```javascript // pages/api/qa.ts import { OpenAIStream, OpenAIStreamPayload } from "../../utils/OpenAIStream"; export const config = { // We are using Vercel edge function for this endpoint runtime: "edge", }; interface RequestPayload { prompt: string; } const handler = async (req: Request, res: Response): Promise => {

const { prompt } = (await req.json()) as RequestPayload;

if (!prompt) {

return new Response(“No prompt in the request”, { status: 400 });

}

const payload: OpenAIStreamPayload = {

model: “gpt⑶.5-turbo”,

messages: [{ role: “user”, content: prompt }],

stream: true,

};

const stream = await OpenAIStream(payload);

return new Response(stream);

};

export default handler;
“`

连接一切并发问

现在是通过 API 调用发问的时候了。编辑 theme.config.tsx 文件，向 Search 组件添加功能：

“`javascript
// theme.config.tsx

const Search = () => {

const [open, setOpen] = useState(false);

const [question, setQuestion] = useState(“”);

const [answer, setAnswer] = useState(“”);

const answerQuestion = async (e: any) => {

e.preventDefault();

setAnswer(“”);

// build the contextualized prompt

const promptResponse = await fetch(“/api/buildPrompt”, {

method: “POST”,

headers: {

“Content-Type”: “application/json”,

},

body: JSON.stringify({

prompt: question,

}),

});

const promptData = await promptResponse.json();

// send it to ChatGPT

const response = await fetch(“/api/qa”, {

method: “POST”,

headers: {

“Content-Type”: “application/json”,

},

body: JSON.stringify({

prompt: promptData.prompt,

}),

});

if (!response.ok) {

throw new Error(response.statusText);

}

const data = response.body;

if (!data) {

return;

}

const reader = data.getReader();

const decoder = new TextDecoder();

let done = false;

// read the streaming ChatGPT answer

while (!done) {

const { value, done: doneReading } = await reader.read();

done = doneReading;

const chunkValue = decoder.decode(value);

// update our interface with the answer

setAnswer((prev) => prev + chunkValue);

}

};

return (

<>

setOpen(true)}

type=”text”

/>

setOpen(false)}>

{answer}

);

}
“`

你现在应当有这个：

固然，随时可以改进样式。

总结思路

总之，我们：

创建了一个 Nextra 文档

准备并存储了我们的文档在 Embedbase 中

建立了一个获得用户查询的接口

在我们的数据库中搜索问题的上下文以提供给 ChatGPT

通过这个上下文构建提示并调用 ChatGPT

让用户通过连接一切来发问

感谢浏览这篇文章，这里有一个开源模板可以创建这类类型的文档。

如果你喜欢这篇博客文章，给 https://github.com/another-ai/embedbase 加一个星星，我们也非常期待反馈。如果你想自己托管，可以预约一个演示。

进一步浏览

嵌入是一种机器学习的概念，它允许你将数据的语义表示为一个数字，从而可以创建以下特点：

语义搜索（例如，“牛吃草”和“猴子吃香蕉”之间的类似度是多少，这也适用于比较图象等）

推荐系统（如果你喜欢电影《阿凡达》，你可能会喜欢《星球大战》）

分类（“这部电影很棒”是一个肯定的句子，“这部电影糟透了”是一个否定的句子）

生成搜索（聊天机器人回答关于 PDF、网站、YouTube 视频等的问题）

嵌入其实不是一项新技术，但最近由于 OpenAI 提供的嵌入端点变得更加流行、更加通用和更加易用。我们不会深入探讨嵌入的技术细节，由于互联网上有很多关于它们的信息。

AI 嵌入可以被看做是“哈利·波特”的分院帽。就像分院帽根据学生的特点为他们分配院系一样，AI 嵌入根据特点为类似的内容分配嵌入。当我们想要找到类似的项目时，我们可以要求 AI 为我们提供项目的嵌入，然后计算它们之间的距离。嵌入之间的距离越近，项目越类似。这个进程类似于分院帽根据每一个学生的特点来肯定他们最合适的学院的进程。通过使用 AI 嵌入，我们可以快速、简便地根据特点比较项目，从而做出更明智的决策和更高效的搜索结果。

上述方法仅仅是为了嵌入单词，但是现在，句子、图象、句子+图象和许多其他东西都是可能的。

当你想在生产软件中使用嵌入时，要注意一些问题：

存储嵌入的所有基础设施

本钱优化（例如，避免重复计算数据）

用户嵌入的分段（你不希望搜索功能显示其他用户的数据）

处理模型输入尺寸限制

与流行利用的基础设施集成（supabase、firebase、google cloud 等）

在 GitHub Actions 中不断准备数据

嵌入的目的是能够对任何类型的非结构化数据进行索引，我们希望我们的文档在每次修改时都能被索引，对吧？这是一个 GitHub action，当在主分支上进行 git push 时，将索引每一个 markdown 文件：

“`yaml
# .github/workflows/index.yaml

name: Index documentation

on:

push:

branches:

– main

jobs:

index:

runs-on: ubuntu-latest

steps:

– uses: actions/checkout@v2

– uses: actions/setup-node@v2

with:

node-version: 14

– run: npm install

– run: node scripts/sync.js

env:

EMBEDBASE_API_KEY: ${{ secrets.EMBEDBASE_API_KEY }}

“`

chatgpt markdown support的常见问答Q&A