Deno OpenAI SDK 入门

几周前，我们来自 OpenAI 的朋友发布了他们的官方 Deno SDK 在 deno.land/x 上。虽然在一段时间内，可以使用 npm: 指定符从 npm 使用 OpenAI SDK，但此 SDK 具有许多 Deno 特定的优势

通过 HTTPS 加载模块将更加高效，尤其是在 Deno Deploy 边缘网络、Netlify 边缘函数或 Supabase 边缘函数上。
您可以根据需要直接导入 TypeScript 源代码文件。
由于该模块以 TypeScript 为先，因此您可以在 VS Code 中获得出色的编辑器支持，无需任何额外的配置。

现在也是加入 OpenAI 平台并开始使用它的最佳时机。在他们最近的开发者日上，OpenAI 宣布了 GPT-4 Turbo、助手 API、DALL-E 3 等的可用性。

所有这些 API 现在都可以在 Deno SDK 中使用，到目前为止，它们使用起来很愉快。在这篇文章中，我们将探讨 OpenAI SDK 的一些关键功能以及如何在 Deno 中使用它们。

请注意，本文中的代码示例假设您有权访问最新的 OpenAI 平台功能。截至撰写本文时 (2023 年 12 月)，这要求您至少为 API 积分支付了 1 美元。

了解更多.

安装和配置

您可以使用来自 deno.land/x 的新 SDK，使用 HTTPS 导入，如下所示。确保先将您的 OpenAI API 密钥导出为名为 OPENAI_API_KEY 的环境变量！

export OPENAI_API_KEY=sk-XXXXXXXX

import OpenAI from "https://deno.land/x/[email protected]/mod.ts";
const client = new OpenAI();

虽然您可以在代码中直接包含 SDK 的 URL，但您可能更愿意使用导入映射来管理此依赖项和其他 HTTPS 依赖项。将以下内容添加到项目文件夹根目录下的 deno.jsonc 中

{
  "imports": {
    // Link to the main module of the SDK
    "openai": "https://deno.land/x/[email protected]/mod.ts",

    // Optionally add a shorthand for the module root, so you can import
    // other TypeScript source files from the SDK when convenient
    "openai/": "https://deno.land/x/[email protected]/"
  }
}

然后，您就可以在多个文件中导入依赖项，而无需使用整个版本化的 URL

import OpenAI from "openai";
const client = new OpenAI();

既然我们知道了如何初始化 SDK，让我们来介绍一下 OpenAI API 中一些关键功能的示例。

使用 GPT-4 Turbo 生成文本
使用 DALLE-3 生成图像
使用 GPT-4 with Vision 分析图像

使用 GPT-4 Turbo 生成文本

OpenAI SDK 的最新版本支持使用他们最新的大型语言模型 GPT-4 Turbo 进行文本生成。下面的代码示例演示了在 Deno 中基本使用此 API。在代码中，最新 GPT-4 模型的名称为 gpt-4-1106-preview，但随着未来版本的发布，这可能会改变 - 您可以在此处查看可用模型的完整列表。

创建一个名为 main.ts 的 TypeScript 文件，并包含以下代码

import OpenAI from "https://deno.land/x/[email protected]/mod.ts";

const client = new OpenAI();

const chatCompletion = await client.chat.completions.create({
  messages: [{ role: "user", content: "tell me a joke about dinosaurs" }],
  model: "gpt-4-1106-preview",
});

console.log(chatCompletion);

您可以在终端中使用以下命令运行上面的代码示例

deno run -A main.ts

来自 API 的响应将是一个类似于这样的 JSON 数据结构

{
  id: "chatcmpl-8VQpWz9ZaTBC5cxxKzq3sLaAXlVDq",
  object: "chat.completion",
  created: 1702501994,
  model: "gpt-4-1106-preview",
  choices: [
    {
      index: 0,
      message: {
        role: "assistant",
        content: "Why can't you hear a pterodactyl go to the bathroom?\n\nBecause the \"P\" is silent!"
      },
      finish_reason: "stop"
    }
  ],
  usage: { prompt_tokens: 13, completion_tokens: 24, total_tokens: 37 },
  system_fingerprint: "fp_6aca3b5ce1"
}

如果您使用的是 VS Code 的 Deno 扩展，您还会注意到您的编辑器会识别出此 API 调用的返回值是一个 ChatCompletion TypeScript 对象，并为 API 响应的属性提供智能感知。

VS Code intellisense for chat completions

您可以在 OpenAI 文档中找到更多关于在 JavaScript/TypeScript 中进行文本生成的示例。

使用 DALL-E 3 生成图像

OpenAI 的最新图像生成工具 DALL-E 3 现在也可以通过 API 使用。为了试用它，让我们构建一个小的 Hono 应用程序，它接受图像提示作为输入，并使用 DALL-E 3 生成图像。完成后，我们的应用程序将看起来像这样。

screenshot of a Hono app server that uses DALL-E 3

首先，创建一个名为 server.tsx 的新文件。请注意，无需任何额外的配置即可在 Deno 应用程序中使用 TypeScript 和 JSX - 我们可以在单个文件中实现整个应用程序。应用程序的完整源代码可以在此 gist 中找到。

在 server.tsx 的顶部，添加必要的依赖项，并创建一个 Hono 应用程序和一个 OpenAI 客户端。

/** @jsx jsx */
import OpenAI from "https://deno.land/x/[email protected]/mod.ts";
import { Hono } from "https://deno.land/x/[email protected]/mod.ts";
import {
  getCookie,
  setCookie,
} from "https://deno.land/x/[email protected]/helper.ts";
import { jsx } from "https://deno.land/x/[email protected]/jsx/index.ts";

// Create OpenAI API client and Hono app
const client = new OpenAI();
const app = new Hono();

现在，我们需要创建两个路由。下面的代码将呈现这两个路由中的第一个，即主页。它包含一个用于图像生成工作的表单，并从存储在 cookie 中的 URL（如果以前已创建）显示已生成的图像。

app.get("/", (c) => {
  const imageUrl = getCookie(c, "dalle3_url");
  const lastPrompt = getCookie(c, "dalle3_last_prompt");

  const imgOrPrompt = imageUrl
    ? <img src={imageUrl} width="100%" />
    : <p>Enter a prompt to generate your first image!</p>;

  // Tiny bit of JS to make UX a (very little) bit nicer
  const script = `
    const b = document.querySelector("button");
    b.disabled = true;
    b.innerHTML = "Generating image, please wait...";
  `;

  return c.html(
    <html>
      <body style={{ maxWidth: "540px", margin: "10px auto" }}>
        <h1>DALL-E 3 Image Generator</h1>
        <form method="POST" action="/generate" onsubmit={script}>
          <textarea
            name="prompt"
            placeholder="Describe an image..."
            style={{ width: "100%", display: "block", marginBottom: "10px" }}
          >
            {lastPrompt}
          </textarea>
          <button type="submit">Generate Image</button>
        </form>
        {imgOrPrompt}
      </body>
    </html>,
  );
});

第二个路由处理 POST 请求，我们使用 OpenAI 根据文本字段中输入的提示生成图像。POST 处理程序正下方的行启动了一个 HTTP 服务器，这就是我们拥有 DALL-E 3 的基本前端所需的一切！

// Make an OpenAI API request to generate an image
app.post("/generate", async (c) => {
  const body = await c.req.parseBody();
  const p = String(body.prompt);

  try {
    const imagesResponse = await client.images.generate({
      model: "dall-e-3",
      prompt: p,
      n: 1,
      size: "1024x1024",
    });

    setCookie(c, "dalle3_url", imagesResponse?.data[0]?.url || "");
    setCookie(c, "dalle3_last_prompt", p);
    return c.redirect("/");
  } catch (e) {
    console.error(e);
    return c.text("Error during image creation: " + e.message);
  }
});

Deno.serve(app.fetch);

同样，您可以在此处找到示例的完整源代码。要在本地运行此应用程序，请使用

deno run -A --watch server.tsx

--watch 标志是可选的，但如果您希望服务器在您对代码进行更改时自动重新启动，则它会很方便。

使用 GPT-4 with Vision 分析图像内容

我们今天最后的示例（但绝不是您可以使用 OpenAI API 做的最后一件事）展示了如何使用 GPT-4 with Vision 分析图像内容。从 Deno 或 REST API，您实际上会使用我们之前用于文本补全的相同资源，但使用不同的模型和略微不同的参数。

让我们看看 GPT-4 对这张图像的理解

The saxroll meme guy

创建一个名为 vision.ts 的新文件，并包含以下代码

import OpenAI from "https://deno.land/x/[email protected]/mod.ts";

const client = new OpenAI();

const saxroll =
  "https://i1.sndcdn.com/artworks-000025837950-q3jvhm-t240x240.jpg";

const chatCompletion = await client.chat.completions.create({
  model: "gpt-4-vision-preview",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "What’s in this image?" },
        { type: "image_url", image_url: { "url": saxroll } },
      ],
    },
  ],
});

console.log(chatCompletion);

上面的代码将要分析的图像 URL 传递给请求。如果方便，您也可以传递一个包含图像的 base64 编码字符串以及请求。

对于 model 参数，它现在使用 gpt-4-vision-preview 而不是我们之前使用的 GPT-4 Turbo 模型（同样，可以在此处找到可用模型的完整列表）。

当您使用以下命令运行脚本时

deno run -A vision.ts

您应该会看到类似于以下内容的输出

{
  id: "chatcmpl-8VnP55lzLNB5hdDwhxqvRcDaYrSg0",
  object: "chat.completion",
  created: 1702588767,
  model: "gpt-4-1106-vision-preview",
  usage: { prompt_tokens: 268, completion_tokens: 16, total_tokens: 284 },
  choices: [
    {
      message: {
        role: "assistant",
        content: "The image shows a person playing the saxophone. The person is wearing sunglasses,"
      },
      finish_details: { type: "max_tokens" },
      index: 0
    }
  ]
}

GPT-4 简洁地指出有一个戴着太阳镜的人在演奏萨克斯风。我不认为该模型能够提取出萨克斯风滚动背后的文化意义，但我相信 OpenAI 团队已经将这项工作列入了下一个冲刺计划。

下一步

这些只是使用新的 OpenAI Deno SDK 所能做到的几个例子。在 OpenAI 文档中，您可以找到其他 API，例如新的助手 API 或文本到语音，以及高级功能，例如函数，它允许您在模型检测到需要时调用自定义代码。

告诉我们您使用 OpenAI 的新 Deno SDK 创建了什么！