OpenAI SDK for Deno 入门指南

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

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

现在也是开始使用 OpenAI 平台的最佳时机。在他们最近的开发者日上，OpenAI 宣布推出 GPT-4 Turbo、Assistants API、DALL-E 3 等。

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

请注意，这篇文章中的代码示例假设您有权访问最新的 OpenAI 平台功能。截至本文撰写时（2023 年 12 月），这需要您至少支付 1 美元的 API 额度。

了解更多.

安装和配置

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

export OPENAI_API_KEY=sk-XXXXXXXX

import OpenAI from "https://deno.land/x/openai@v4.20.1/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/openai@v4.20.1/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/openai@v4.20.1/"
  }
}

然后，您将能够在多个文件中导入依赖项，而无需完整的版本化 URL

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

现在我们知道了如何初始化 SDK，让我们深入了解 OpenAI API 中一些关键功能的示例。

使用 GPT-4 Turbo 生成文本
使用 DALLE-3 生成图像
使用 GPT-4 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/openai@v4.20.1/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/openai@v4.20.1/mod.ts";
import { Hono } from "https://deno.land/x/hono@v3.11.6/mod.ts";
import {
  getCookie,
  setCookie,
} from "https://deno.land/x/hono@v3.11.6/helper.ts";
import { jsx } from "https://deno.land/x/hono@v3.11.6/jsx/index.ts";

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

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

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 Vision 分析图像内容

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

让我们看看 GPT-4 如何理解这张图像

The saxroll meme guy

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

import OpenAI from "https://deno.land/x/openai@v4.20.1/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 团队肯定已在即将到来的 sprint 中优先考虑这项工作。

后续步骤

这些只是使用新的 OpenAI Deno SDK 可以实现的少数示例。在 OpenAI 文档中，您可以找到其他 API，例如新的 Assistants API 或文本转语音，以及高级功能，例如函数，这些函数允许您在模型检测到需要时调用自定义代码。

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