教程:Gemini API 使用入门


本教程演示了如何使用 Google AI JavaScript SDK 直接从 Web 应用访问 Gemini API。如果您不想直接使用 REST API 或服务器端代码(如 Node.js)来访问 Web 应用中的 Gemini 模型,则可以使用此 SDK。

在本教程中,您将了解如何执行以下操作:

此外,本教程还包含一些高级用例(例如令牌计数)以及控制内容生成的选项。

前提条件

本教程假定您熟悉使用 JavaScript 开发 Web 应用的方法。本指南独立于框架。

如需完成本教程,请确保您的开发环境满足以下要求:

  • (可选)Node.js
  • 现代网络浏览器

设置项目

在调用 Gemini API 之前,您需要设置项目,包括获取 API 密钥、导入 SDK 和初始化模型。

设置您的 API 密钥

您需要 API 密钥才能使用 Gemini API。如果您还没有密钥,请在 Google AI Studio 中创建密钥。

获取 API 密钥

保护您的 API 密钥

强烈建议您不要将 API 密钥签入版本控制系统。您应在初始化模型之前将 API 密钥传递给应用。

本教程中的所有代码段均假定您以全局常量的形式访问 API 密钥。

导入 SDK 并初始化生成模型

您需要先导入 SDK 并初始化生成模型,然后才能进行任何 API 调用。

<html>
  <body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script type="module">
      import { GoogleGenerativeAI } from "@google/generative-ai";

      // Fetch your API_KEY
      const API_KEY = "...";
      // Reminder: This should only be for local testing

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      // The Gemini 1.5 models are versatile and work with most use cases
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

      // ...
    </script>
  </body>
</html>

指定模型时,请注意以下事项:

  • 使用特定于您的用例的模型(例如,gemini-1.5-flash 适用于多模态输入)。在本指南中,每种实现的说明都列出了针对每个应用场景推荐的模型。

实现常见使用场景

现在,您的项目已设置完毕,接下来,您可以探索如何使用 Gemini API 实现不同的用例:

根据纯文本输入生成文本

当提示输入仅包含文本时,请使用 Gemini 1.5 模型或带 generateContent 的 Gemini 1.0 Pro 模型生成文本输出:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const prompt = "Write a story about a magic backpack."

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

根据文本和图片输入生成文本(多模态)

Gemini 提供各种可以处理多模态输入的模型(Gemini 1.5 模型和 Gemini 1.0 Pro Vision),以便您可以输入文本和图片。请务必查看提示的图片要求

当提示输入同时包含文字和图片时,请将 Gemini 1.5 模型或 Gemini 1.0 Pro Vision 模型与 generateContent 方法结合使用以生成文本输出:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

// Converts a File object to a GoogleGenerativeAI.Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const prompt = "What's different between these pictures?";

  const fileInputEl = document.querySelector("input[type=file]");
  const imageParts = await Promise.all(
    [...fileInputEl.files].map(fileToGenerativePart)
  );

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

发起多轮对话(聊天)

使用 Gemini,您可以构建多轮自由对话。该 SDK 通过管理对话状态来简化流程,因此与 generateContent 不同,您不必自行存储对话记录。

如需构建多轮对话(如聊天),请使用 Gemini 1.5 模型或 Gemini 1.0 Pro 模型,并通过调用 startChat() 初始化聊天。然后,使用 sendMessage() 发送一条新用户消息,该消息还会将消息和响应附加到聊天记录中。

对于与对话内容关联的 role,有两个可能的选项:

  • user:提供提示的角色。此值是 sendMessage 调用的默认值。如果传递了其他角色,函数将抛出异常。

  • model:提供响应的角色。使用现有 history 调用 startChat() 时,可以使用此角色。

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

使用流式传输加快互动速度

默认情况下,模型会在完成整个生成过程后返回响应。您可以不等待整个结果,而是使用流式传输来处理部分结果,从而实现更快的互动。

以下示例展示了如何使用 generateContentStream 方法实现流式传输,以根据文本和图像输入提示生成文本。

// ...

const result = await model.generateContentStream([prompt, ...imageParts]);

let text = '';
for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
  text += chunkText;
}

// ...

您可以在纯文本输入和聊天用例中使用类似的方法。

// Use streaming with text-only input
const result = await model.generateContentStream(prompt);

如需了解如何实例化 chat,请参阅上面的聊天示例

// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);

实现高级用例

本教程上一部分中介绍的常见用例可帮助您熟练使用 Gemini API。本部分介绍了一些可能被视为更高级的用例。

调用函数

借助函数调用,您可以更轻松地从生成模型中获取结构化数据输出。然后,您可以使用这些输出调用其他 API,并将相关响应数据返回给模型。换言之,函数调用可帮助您将生成模型连接到外部系统,以使生成的内容包含最新且准确的信息。如需了解详情,请参阅函数调用教程

计算词元数

使用长提示时,在将任何内容发送到模型之前统计令牌数可能很有用。以下示例展示了如何针对各种用例使用 countTokens()

// For text-only input
const { totalTokens } = await model.countTokens(prompt);
// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);
// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });

用于控制内容生成的选项

您可以通过配置模型参数和使用安全设置来控制内容生成。

配置模型参数

您向模型发送的每个提示都包含控制模型如何生成回答的参数值。对于不同的参数值,模型会生成不同的结果。详细了解模型参数。该配置会在模型实例的生命周期内保持不变。

const generationConfig = {
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
};

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",  generationConfig });

使用安全设置

您可以使用安全设置来调整收到可能被视为有害的响应的可能性。默认情况下,安全设置会屏蔽在所有维度上可能是中等和/或高可能性为不安全内容的内容。详细了解安全设置

设置一项安全设置的方法如下:

import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", safetySettings });

您还可以设定多项安全设置:

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

后续步骤

  • 提示设计是创建提示以从语言模型引出所需回复的过程。编写结构良好的提示是确保语言模型提供准确、高质量的响应的重要部分。了解撰写提示的最佳做法

  • Gemini 提供了多个模型变体来满足不同用例的需求,例如输入类型和复杂度、聊天或其他对话框语言任务的实现,以及大小限制。了解可用的 Gemini 模型

  • Gemini 提供了用于请求提高速率限制的选项。Genmini Pro 型号的速率限制为每分钟 60 个请求。