我如何将 ChatGPT 放入编辑器中

柔光的暖阳◎ 2024-03-16 21:00 52阅读 0赞

随着所有炒作的进行，人工智能（或者更确切地说是*机器学习*（ML）和*大型语言模型*（LLM））无处不在。就个人而言，我可能不会经常使用 ChatGPT（和类似的替代品），但我确实依赖[GitHub Copilot][]之类的东西（用于 VS Code 中的智能自动完成）或[Grammarly][GitHub Copilot]（用于编辑我的博客文章）每天。

我认为我们距离 AGI 仍有相当多的突破，而目前的技术不足以让我们到达那里（谢天谢地或不谢天谢地）。也就是说，我们已经深入到*“AI 增强型”*应用程序的时代，顶级应用程序可能没有最好的 AI 系统，但它们以最好的方式集成了它们。

这就是为什么这是一个有趣的过程，探索 OpenAI 的 API 并尝试将其集成到 Vrite 的富文本编辑器 (RTE) — 我的开源无头 CMS。

### 扩展所见即所得编辑器 ###

对于那些不熟悉的人来说，简而言之，Vrite 是一个用于技术内容的无头 CMS，例如编程博客或软件文档。它可以看作是两个应用程序合二为一——用于内容管理的看板仪表板和用于编写的所见即所得编辑器，以及嵌入式代码片段编辑器和格式化程序等附加的开发友好功能。

Vrite 的最新重要补充是早期扩展系统，可以轻松构建集成并扩展 Vrite 的功能。对我来说，这似乎是将 ChatGPT 作为扩展引入编辑器的完美**方式**。

#### 阻止操作 ####

为了能够使用扩展系统将 ChatGPT 集成到编辑器中，必须引入一个新的 API。我称它为*Block Action API*，因为它专门用于向编辑器添加快速操作，对顶级内容块（如段落、标题或图像）进行操作，如下所示：

![0409aad21b4fb3c0e38ac88108f2f212.png][]

使用 Block Actions API，扩展可以读取活动块的 JSON 内容并使用 HTML 格式的内容更新它，就像在 Vrite API 中所做的一样（一方面，解析 JSON 输出更容易，另一方面，HTML 更容易）适合将内容转换成）。

从 UI 端来看，块操作显示为主动选择的块一侧的按钮。他们可以直接在点击时调用一个动作，或者——就像 ChatGPT 一样——打开一个下拉菜单来提示用户提供更多详细信息。

![f612dddd4eea196a7eb1a6dbd2ba2e40.png][]

按钮必须绝对定位，这需要自定义[TipTap][GitHub Copilot]扩展和更深入地挖掘底层[ProseMirror][GitHub Copilot]（这两个库都支持 Vrite 编辑器）。

该过程基本上归结为确定块节点的位置和大小，给定整个顶级节点或仅其子节点的选择（[源代码][Link 1]）：

<code>// ...
 const BlockActionMenuPlugin = Extension.create({
 // ...
 onSelectionUpdate() {
 const { selection } = this.editor.state;
 const isTextSelection = selection instanceof TextSelection;
 const selectedNode = selection.$from.node(1) || selection.$from.nodeAfter;
 
 if (!selectedNode) {
 box.style.display = 'none';
 return;
 }
 
 const { view } = this.editor;
 const node =
 view.nodeDOM(selection.$from.pos) ||
 view.nodeDOM(selection.$from.pos - selection.$from.parentOffset) ||
 view.domAtPos(selection.$from.pos)?.node;
 
 if (!node) return;
 
 const blockParent = getBlockParent(node);
 const parentPos = document
 .getElementById('pm-container')
 ?.getBoundingClientRect();
 const childPos = blockParent?.getBoundingClientRect();
 
 if (!parentPos || !childPos) return;
 
 const relativePos = {
 top: childPos.top - parentPos.top,
 right: childPos.right - parentPos.right,
 bottom: childPos.bottom - parentPos.bottom,
 left: childPos.left - parentPos.left,
 };
 
 let rangeFrom = selection.$from.pos;
 let rangeTo = selection.$to.pos;
 
 box.style.top = `${relativePos.top}px`;
 box.style.left = `${relativePos.left + parentPos.width}px`;
 box.style.display = 'block';
 
 if (isTextSelection) {
 try {
 const p = findParentAtDepth(selection.$from, 1);
 rangeFrom = p.start - 1;
 rangeTo = p.start + p.node.nodeSize - 1;
 } catch (e) {
 box.style.display = 'none';
 }
 }
 
 // ...
 },
 });
 
 </code>

#### 替换编辑器内容 ####

第二部分涉及处理用新提供的内容替换块内容的实际过程。这里最棘手的事情是获取块节点的正确范围（ProseMirror 中的开始和结束位置）。这是使用 TipTap 的命令正确替换范围所必需的。

如果您仔细查看最后的代码片段 — 其代码已经存在。在每次选择更新时，块的范围以及块操作 UI 定位都会更新。

用新内容实际替换范围要容易得多。它所要做的就是将 HTML 转换为遵循模式的 JSON 并涉及适当的命令（[源代码][Link 1]）：

`replaceContent()`然后可以通过向主框架发送适当的消息，从扩展的沙箱远程调用该函数。

为了启用像 ChatGPT 集成这样的用例，其中内容将在过程完成之前连续多次更新（即替换），该函数还会在调用函数的短时间内锁定编辑器并更新范围，和每次调用的 UI 定位。但为什么需要这样做呢？

### 与 OpenAI 的 API 集成 ###

集成 OpenAI 的 API 的过程在[其官方文档][Link 1]中有很好的记录。鉴于官方提供了SDK，整个过程只需要几行代码就可以搞定：

现在，所有这些都是真的，但前提是您愿意等待通常为**+20 秒**的单个响应！这对于单个请求来说已经很多了。`max_tokens`从更改服务器位置到通过限制或自定义其他参数来优化请求，都没有任何效果。这一切都归结为当前的 LLM（至少是 GPT-3 级别的）仍然相当缓慢。

话虽如此，ChatGPT 应用程序仍然设法被认为相当快速和响应迅速。**这要归功于流媒体和服务器发送事件**(SSE)的使用。

#### 流式聊天 GPT 响应 ####

OpenAI 的 API 的聊天完成和其他端点支持通过服务器发送的事件进行流式传输，本质上是保持一个开放的连接，新令牌一旦可用就会通过该连接发送。

不幸的是，官方 Node.js SDK[不支持流式传输][Link 1]，需要您使用变通方法才能使其正常工作，从而导致需要更多代码，仅用于连接 API（[源代码][GitHub Copilot]）：

<code>async ({ ctx, input }) => {
 const configuration = new Configuration({
 apiKey: ctx.fastify.config.OPENAI_API_KEY,
 organization: ctx.fastify.config.OPENAI_ORGANIZATION,
 });
 const openai = new OpenAIApi(configuration);
 const response = await openai.createChatCompletion(
 {
 model: 'gpt-3.5-turbo',
 stream: true,
 messages: [{ role: 'user', content: input.prompt }],
 },
 { responseType: 'stream' }
 );
 ctx.res.raw.writeHead(200, {
 ...ctx.res.getHeaders(),
 'content-type': 'text/event-stream',
 'cache-control': 'no-cache',
 connection: 'keep-alive',
 });
 
 return new Promise<void>((resolve) => {
 const responseData = response.data as unknown as {
 on(event: string, data: (data: string) => void): void;
 };
 
 responseData.on('data', (data) => {
 const lines = data
 .toString()
 .split('\n')
 .filter((line) => line.trim() !== '');
 for (const line of lines) {
 const message = line.replace(/^data: /, '');
 if (message === '[DONE]') {
 ctx.res.raw.end();
 resolve();
 continue;
 }
 try {
 const parsed = JSON.parse(message);
 
 const content = parsed.choices[0].delta.content || '';
 
 if (content) {
 ctx.res.raw.write(`data: ${encodeURIComponent(content)}`);
 ctx.res.raw.write('\n\n');
 }
 } catch (error) {
 console.error('Could not JSON parse stream message', message, error);
 }
 }
 });
 });
 };
 
 </code>

最重要的是，你还必须在你的 API 服务器和 Web 客户端之间支持流式传输，对于 Vrite，这意味着将 SSE 与[Fastify][GitHub Copilot]和[tRPC][GitHub Copilot]集成。不是最干净的解决方案，但仍然非常稳定。

从前端（准确地说是扩展沙箱），必须建立与新流端点的连接并正确处理传入数据（[源代码][GitHub Copilot]）：

<code>import { fetchEventSource } from "@microsoft/fetch-event-source";
 // ...
 
 const generate = async (context: ExtensionBlockActionViewContext): Promise<void> => {
 const includeContext = context.temp.includeContext as boolean;
 const prompt = context.temp.prompt as string;
 
 let content = "";
 
 context.setTemp("$loading", true);
 window.currentRequestController = new AbortController();
 window.currentRequestController.signal.addEventListener("abort", () => {
 context.setTemp("$loading", false);
 context.refreshContent();
 });
 await fetchEventSource("https://extensions.vrite.io/gpt", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 "Accept": "text/event-stream"
 },
 body: JSON.stringify({
 prompt: includeContext ? `"${gfmTransformer(context.content)}"\n\n${prompt}` : prompt
 }),
 signal: window.currentRequestController?.signal,
 async onopen() {
 return;
 },
 onerror(error) {
 context.setTemp("$loading", false);
 context.refreshContent();
 context.notify({ text: "Error while generating content", type: "error" });
 throw error;
 },
 onmessage(event) {
 const partOfContent = decodeURIComponent(event.data);
 
 content += partOfContent;
 context.replaceContent(marked.parse(content));
 },
 onclose() {
 context.setTemp("$loading", false);
 context.refreshContent();
 }
 });
 };
 </code>

不幸的是，用于处理 SSE 的EventSource [Web API][GitHub Copilot]（内置于大多数现代浏览器中）仅支持`GET`请求，这在需要`POST`具有较大 JSON 数据的请求时非常有限。`body`作为替代方案，您可以使用 Fetch API 或现成的库，例如[Microsoft 的 Fetch Event Source][GitHub Copilot]。

同样，启用流式传输后，您现在将在可用时立即收到新令牌。鉴于 OpenAI 的 API 在其响应格式中使用 Markdown，因此需要将传入的令牌放在一起并解析为函数接受的 HTML 的完整消息`replaceContent`。为此，我使用了[Marked.js 解析器][GitHub Copilot]。

现在，随着每个新令牌的出现，更大的响应正在建立。每次出现新的标记时，都会解析完整的 Markdown 并更新内容，从而形成一种很好的“类似打字的效果”。

虽然这个过程确实有一些开销，但在使用中并不明显，而 Markdown 只需用每个新标记进行解析，因为它可能包含例如代码块的结束或格式化段的结尾。因此，虽然这个过程可能会被优化，但在大多数情况下它不会导致任何可识别的性能改进。

最后，值得注意的是 的使用`AbortController`，它可用于在用户选择的任何时间停止流。这对于较长的响应尤其有用。

动图

![6a9ab5c760a4002c8766fed81c8b84d3.gif][]

### 底线 ###

总的来说，我对结果很满意。得益于 Markdown 解析，数据流、良好的打字效果以及与编辑器现有内容块的良好集成——所有这些共同创造了引人注目的用户体验。

现在，肯定还有改进的余地。Block Actions API 以及 Vrite Extensions 作为一个整体，在它们可以被其他用户创建之前，还有很多开发工作要做。其他需要考虑的 UI/UX 改进，比如一次在多个块上操作（例如，用于 ChatGPT 的额外上下文）和内联显示 UI（很像 Notion AI）而不是模糊视图，这些只是我正在考虑的几个例子。也就是说，要很好地实施这些想法还需要一些时间。

![1cf5b8ae9b7850b7c3505717a9c43e25.png][]

Vrite 不仅仅是一个 GPT 增强型编辑器。它是一个完整的开源 CMS，专注于编程博客等技术内容，包括代码编辑器、API、看板管理仪表板和简单的发布集成。因此，如果您有兴趣尝试并可能使用它来为您的博客提供动力，请一定要检查一下！

[GitHub Copilot]: https://zhifj.com
[0409aad21b4fb3c0e38ac88108f2f212.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/4ba40c2b7e9a4a298b4716024a3b2ec9.png
[f612dddd4eea196a7eb1a6dbd2ba2e40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/72b2d8e74dc84de9b9f189bc97a42b59.png
[Link 1]: http://telegeram1.com
[6a9ab5c760a4002c8766fed81c8b84d3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/62d9d6cd81964654a0f8ab810f6c4160.png
[1cf5b8ae9b7850b7c3505717a9c43e25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/78403a9c5bd84f04bb1bdfa472244ea9.png