关于javascript:构建-JavaScript-ChatGPT-插件

31次阅读

共计 8542 个字符，预计需要花费 22 分钟才能阅读完成。

聊天插件零碎是一种令人兴奋的新形式，能够扩大 ChatGPT 的性能，纳入您本人的业务数据，并为客户与您的业务互动减少另一个渠道。在这篇文章中，我将解释什么是聊天插件，它们能做什么，以及你如何用 JavaScript 建设你本人的聊天插件。

这篇文章（或 OpenAI 所称的 ” 训练数据 ”）提供了一个疾速入门指南，来建设你的第一个 ChatGPT 插件，并将其与 ChatGPT 界面整合。

聊天插件是否会成为扭转生存的贾维斯般的体验，或者只是一个低廉的 Alexa-for-your-browser，目前还没有定论。让咱们通过看看插件能提供什么，须要留神什么，以及如何制作你本人的插件，来决定咱们本人的想法。

目录

  • 什么是聊天插件?

    • 插件组成部分
    • 聊天插件生态系统的新机遇
    • 插件开发的考量和局限

  • 构建第一个 JavaScript ChatGPT 插件

    • 设置我的项目
    • 增加 OpenAI 清单和 API 标准
    • 创立服务器
    • 设置强制性的插件路由
    • 设置 Todo 路由
    • 验证和测试插件
    • (可选）将该服务器作为代理
  • 下一步

什么是聊天插件？

“ 聊天插件 ” 容许 ChatGPT 模型应用并与第三方应用程序互动。从实质上讲，它是一套指令和标准，语言模型能够遵循这些指令和标准在聊天对话中创立 API 的调用和操作。与第三方零碎的整合为 ChatGPT 的用户提供了一系列新的性能：

  • 创立、更新和批改咱们本人的业务数据和数据库（如销售、营销零碎）
  • 从内部服务中获取信息（如金融、天气 API）
  • 执行操作（例如，发送 Slack 音讯）

插件组成部分

建设一个能与 AI 互动的应用程序仿佛是一个令人生畏的简单零碎，然而，一旦你开始做，你会发现它非常简单。一个 ” 插件 ” 是一套简略的指令，它通知 ChatGPT 模型你的 API 是做什么的，以及如何和何时拜访它。

这能够归结为两个重要文件：

  1. ai-plugin.json：插件清单，蕴含插件的根本元数据。这包含名称、作者、形容、认证和分割等细节。该清单被 ChatGPT 用来了解插件的作用。
  2. openapi.yaml：在 OpenAPI 标准中，你的 API 路由和模式的标准。也能够以 json 文件的模式提供。这将通知 ChatGPT 能够应用哪些 API，出于什么起因，以及申请和响应会是什么样子。

插件服务的根底性能和托管由你决定。你的 API 能够托管在任何中央，应用任何 REST API 或编程语言。

聊天插件生态系统的新机遇

聊天插件的到来为开发者、设计师、企业和企业家带来了一系列的机会：

  • 交互能够更 ” 聪慧 ” 和更 ” 晦涩 ”：插件引入了人性化、假如和上下文的能力，并联合申请提供这些能力。这为互动减少了一个流动性的元素，而这是一个死板的 GUI 或结构化的数据 API 所不能满足的。例如，” 我明天应该穿外套吗？” 这个提醒将导致 API 调用一个基于你的地位的天气服务，对天气的解释，以及对原始问题的答复：” 是的，你应该穿一件夹克。明天的温度是 12 度，有 80% 的机会下雨。”。
  • 新的客户渠道：ChatGPT 在 2023 年 4 月以 1.73 亿沉闷用户发明了增长最快的用户记录。毫无疑问，在这个平台上占有一席之地，为你提供了接触大量潜在客户的机会。它还提供了一种潜在的更容易、更直观、更容易与应用它的现有客户互动的形式。
  • 人工智能界面（A.I.I.）的崛起：用户当初无需点击 ” 按钮 ” 就能够执行简单的操作。从实践上讲，一个插件能够提供一个惊人的服务，而不须要像传统的用户界面那样须要关注界面才行（或基本不须要）。一个直观的标准可能变得和一个直观的网络应用一样重要。
  • 新的商业机会：人工智能在提供工作的同时也会带走工作。如果胜利的话，插件生态系统将为插件开发者、人工智能 API 开发者，以及为企业托管、认证和治理插件的全新垂直业务发明新的机会和空间。

插件开发的考量和局限

直观和无代码界面的益处带来了一系列挑战。抵赖生态系统、逻辑和界面会随着工夫的推移而倒退，在构建插件时，咱们依然须要记住一些事件。特地是如果你想把它们作为一项业务来建设。

  • 响应速度慢：解释自然语言、抉择插件、建设申请和解释响应都须要工夫。对于简略的信息申请或操作，本人做就能够更快。依据下面的例子，我看一下我的手机主屏幕比期待 15 秒让 ChatGPT 解释天气并写给我要快得多。
  • 老本高：用户将破费 token 来与任何插件互动。这减少了潜在的老本，即便你是收费提供给他们的货色。你还必须为托管和经营这些 API 的基础设施付费。
  • 不同形式：在外部，与插件的互动依然是 REST API，只能执行咱们与其余客户端雷同的操作。插件更像是一个与企业互动的新渠道，而不是目前让人工智能为咱们服务的新范式。
  • 可操纵性：因为用户在默认状况下看不到 API 响应，误导性信息和其余歹意策略可能会被插件制造商用来扭曲答案。
  • 不可预测性：让生成模型负责决策是有危险的，行为是不牢靠的。有很多推理和猜想工作在幕后产生，以依据人类书面聊天提醒创立 API 申请。打字不标准的信息或含糊不清的形容可能会导致调用谬误的 API 或做出谬误的口头。

构建第一个 JavaScript ChatGPT 插件

咱们将为咱们的聊天插件建设本人的 express 服务器。这不仅是一个容易上手的办法，而且 express 能够被扩大到包含中间件、认证和所有其余你想要的生产级的货色。

以下是咱们将在下列步骤中创立和增加代码的所有文件。如果你感到困惑，能够回到这里，或者克隆这里的源码。

my-chat-plugin/
├─ .well-known/
│  ├─ ai-plugin.json  <- 插件元数据
├─ routes/
│  ├─ todos.js        <- 解决 Todo 申请的路由
│  ├─ openai.js       <- 解决 openAI 申请的路由
openapi.yaml          <- Open API 标准
index.js              <- 插件入口

先决条件

  1. OpenAI 账号：在这里注册
  2. ChatGPT 插件拜访：如果你还没有通过付费账户拜访，你能够在这里退出期待名单。

设置我的项目

创立一个名为 my-chat-plugin 的文件夹，执行上面的命令来开始：

## 1. Create the directory and open it
mkdir my-chat-plugin && cd my-chat-plugin

## 2. Initialize a project with the default values
npm init --yes

## 3. Install our dependencies
npm install axios express cors js-yaml

增加 OpenAI 清单和 API 标准

当初，咱们要创立所需的聊天插件清单和 OpenAPI 标准。ChatGPT 会在你服务器的特定路由上申请这些文件，所以咱们要把它们放在：

  • /.well-known/ai-plugin.json
  • /openapi.yaml

这些文件中的形容是十分重要的！如果你在 summary 和description_for_model字段中的语言含糊不清，你可能会让 ChatGPT 对何时和如何应用你的插件感到困惑。请遵循以下步骤：

  1. 创立一个名为 .well-known 的文件夹，并在其中增加一个名为 ai-plugin.json 的文件。通过终端进行操作：
mkdir .well-known && touch .well-known/ai-plugin.json

粘贴上面代码到 ai-plugin.json 中：

{
    "schema_version": "v1",
    "name_for_human": "My ChatGPT To Do Plugin",
    "name_for_model": "todo",
    "description_for_human": "Plugin for managing a To Do list. You can add, remove and view your To Dos.",
    "description_for_model": "Plugin for managing a To Do list. You can add, remove and view your ToDos.",
    "auth": {"type": "none"},
    "api": {
        "type": "openapi",
        "url": "<http://localhost:3000/openapi.yaml>",
        "is_user_authenticated": false
    },
    "logo_url": "<http://localhost:3000/logo.png>",
    "contact_email": "support@yourdomain.com",
    "legal_info_url": "<http://www.yourdomain.com/legal>"
}
  1. 在我的项目根门路下创立一个名为openapi.yaml，并且增加下列代码到文件中。

这是 OpenAPI 标准，ChatGPT 会用它来了解您的 API 路由的作用（留神每个路由的summary）以及申请和响应的格局。如果 ChatGPT 在应用您的 API 时遇到问题，十有八九是因为这个标准与您的 API 的响应不统一。

openapi: 3.0.1
info:
  title: TODO Plugin
  description: A plugin that allows the user to create and manage a To Do list using ChatGPT.
  version: 'v1'
servers:
  - url: <http://localhost:3000>
paths:
  /todos:
    get:
      operationId: getTodos
      summary: Get the list of todos
      responses:
        "200":
          description: OK
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Todo'
    post:
      operationId: addTodo
      summary: Add a todo to the list
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/Todo'
      responses:
        "201":
          description: Created
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Todo'
  /todos/{id}:
    delete:
      operationId: removeTodo
      summary: Delete a todo from the list when it is complete, or no longer required.
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        "204":
          description: No Content
components:
  schemas:
    Todo:
      type: object
      properties:
        id:
          type: integer
          format: int64
        task:
          type: string
      required:
        - id
        - task

创立服务器

咱们的下一步是创立咱们的主文件，也就是咱们插件的入口。在我的项目根目录下，增加一个名为 index.js 的文件，并增加以下代码。

留神：ChatGPT 文档显示 openapi.yaml 和openapi.json都有一个路由。本地测试显示只有 yaml 文件被申请，但值得把它们都放在那里，因为当前可能会用到。

粘贴上面代码到 index.js 中：

const express = require('express');
const cors = require('cors');
const todoRouter = require('./routes/todos');
const openaiRoutes = require('./routes/openai');

const app = express();
const PORT = 3000;

// Setting CORS to allow chat.openapi.com is required for ChatGPT to access your plugin
app.use(cors({ origin: [`http://localhost:${PORT}`, '<https://chat.openai.com>'] }));
app.use(express.json());

// Simple request logging to see if your plugin is being called by ChatGPT
app.use((req, res, next) => {console.log(`Request received: ${req.method}: ${req.path}`)
  next()})

// OpenAI Required Routes
app.use(openaiRoutes);

// The dummy todos API
app.use('/todos', todoRouter);

app.listen(PORT, () => {console.log(`Plugin server listening on port ${PORT}`);
});

上述代码做了下列事件：

  • 导入 express 和cors所需的库
  • 导入咱们的路由特定逻辑，在下一步增加
  • 增加日志中间件，将任何传入的申请打印到控制台中
  • 提供一个通用的转发函数，如果你曾经有一个 API 服务就能够应用

设置强制性的插件路由

在这一步中，咱们将为 OpenAI / ChatGPT 增加强制性的路由，来获取所需文件。咱们将把所有具体的路由逻辑放在一个 ”routes” 目录中。这就是咱们将存储插件路由以及其余自定义路由的中央。

(你可能心愿用额定的文件夹（控制器、中间件、服务等）扩大这个构造，或者创立你本人的构造）。

  1. 创立 /routes 文件夹
  2. 创立名为 openai.js 的文件
  3. 粘贴下列代码到 routes/openai.js 中：
const express = require('express');
const router = express.Router();
const fs = require('fs');
const path = require('path');
const yaml = require('js-yaml');

router.get('/openapi.yaml', async function(req, res) {
  try {const yamlData = fs.readFileSync(path.join(process.cwd(), 'openapi.yaml'), 'utf8');
    const jsonData = yaml.load(yamlData);
    res.json(jsonData);

  } catch(e) {console.log(e.message)
    res.status(500).send({error: 'Unable to fetch manifest.'});
  }
});

router.get('/.well-known/ai-plugin.json', function(req, res) {res.sendFile(path.join(process.cwd(), '/.well-known/ai-plugin.json'));
});

router.get('/logo.png', function(req, res) {res.sendFile(path.join(process.cwd(), 'logo.png'));
})

module.exports = router;

上述代码做了下列事件：

  • 定义了两个路由，供插件检索你的清单和 API 标准。
  • 定义了一个路由，让插件在聊天中检索并显示你的插件标识。
  • 导出所有的路由，以便咱们能够在 index.js 中导入它们。

设置 Todo 路由

当初咱们将创立一些简略的路由来模仿一个简略的创立、更新、删除性能。咱们通常防止应用 todo 教程，但思考到文档中应用这个作为指南，咱们心愿尽可能放弃它的可转移性。

  1. 在你的路由文件夹中，创立一个名为 todos.js 的新文件
  2. 将以下代码粘贴到 routes/todos.js 中：
const express = require('express');
const router = express.Router();

let todos = [{ id: 1, task: 'Wake up'},
    {id: 2, task: 'Grab a brush'},
    {id: 3, task: 'Put a little makeup'},
    {id: 4, task: 'Build a Chat Plugin'}
]; // placeholder todos

let currentId = 5; // to assign unique ids to new todos

getTodos = async function(req, res) {res.json(todos);
}

addTodo = async function(req, res) {const { task} = req.body;
    const newTodo = {id: currentId, task};
    todos.push(newTodo);
    currentId++;
    res.json(newTodo);
}

removeTodo = async function(req, res) {const { id} = req.params;
    todos = todos.filter(todo => todo.id !== Number(id));
    res.json({"message" : "Todo successfully deleted"});
}

router.get('/', getTodos);
router.post('/', addTodo);
router.delete('/:id', removeTodo);

module.exports = router;

上述代码做了下列事件：

  • 创立 3 条路由，从一个简略的 todo 我的项目列表中获取、创立和删除。
  • 将这些路由导出，导入到咱们的 index.js 文件。

验证和测试插件

当初，乏味的局部来了。咱们曾经有了所有必要的代码和设置，能够在 ChatGPT 上手动建设和运行一个本地插件了！咱们开始吧：

  1. 开启服务

在终端中输出node index.js。这会在终端中开启服务并打印’Plugin server listening on port 3000’。

  1. 将其连贯到 ChatGPT 本地插件

进入 chat.openai.com，在你的账户中关上一个新的聊天窗口。点击 GPT- 4 下拉菜单，Plugins > Plugin Store > 点击Develop Your Own Plugin > 输出localhost:3000 > 点击Find manifest file。

  1. 测试插件

你应该看到一条验证信息，即 ChatGPT 可能取得你的清单文件，这样你就能够开始了。如果没有，请查看你的终端，服务器正在运行，并且正在接管传入的申请。

试试上面的一些命令：

  • “what are my todos?“
  • I have woken up（你不须要说出确切的 Todo 工作，它就能了解你指的是什么）

(可选）将该服务器作为代理

如果你曾经有一个在本地或内部运行的 API 来发送申请，你能够把这个服务器作为一个代理，把申请转发给它。这是一个值得举荐的选项，因为它使你可能疾速测试和迭代如何解决清单和标准文件，而不用重新部署或更新你现有的代码库。

在你创立的路由下的 index.js 中增加以下代码：

// PASTE IN BEFORE app.listen(... 

// Proxy server to an existing API
const api_url = '<http://localhost>';

app.all('/:path', async (req, res) => {const { path} = req.params;
  const url = `${api_url}/${path}`;

  console.log(`Forwarding call: ${req.method} ${path} -> ${url}`);

  const headers = {'Content-Type': 'application/json',};

  try {
    const response = await axios({
      method: req.method,
      url,
      headers,
      params: req.query,
      data: req.body,
    });

    res.send(response.data);
  } catch (error) {console.error(`Error in forwarding call: ${error}`);
    res.status(500).send('Error in forwarding call');
  }
});

下一步

这个根本教程应该是你开始建设本人的基于 JavaScript 的成熟聊天插件所须要的。将你的应用程序部署到生产环境中，须要一些额定的认证和部署步骤。教程中没有提到这些，但我举荐以下资源来实现这些工作：

  • 官网插件实例：服务水平认证，和检索插件。
  • 生产你的应用程序：在 Plugin store 中呈现的主机、平安和性能要求无关的官网指南。

以上就是本文的全部内容，感激浏览。

正文完
javascript
发表至： javascript
2023-06-25
 0
javaScript的-7-种设计模式
Vue原理Props-白话版
关于javascript:JS部分知识点解释
找出一个字符串中出现次数最多的字符并统计次数