教程：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 密钥

如需使用 Gemini API，您需要 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.5 模型和 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 模型。