<ph type="x-smartling-placeholder">
本教程演示了如何直接从 Google Cloud 控制台 使用 Google AI JavaScript SDK 构建 Web 应用。如果您不 希望直接使用 REST API 或服务器端代码(如 Node.js) 在 Web 应用中访问 Gemini 模型。
在本教程中,您将了解如何执行以下操作:
此外,本教程还包含一些有关高级用例(如 计算词元)以及 控制内容生成。
前提条件
本教程假定您熟悉使用 JavaScript 开发 Web 应用。本指南独立于框架。
要完成本教程,请确保您的开发环境符合 以下要求:
- (可选)Node.js
- 现代网络浏览器
设置项目
在调用 Gemini API 之前,您需要设置项目,包括 获取 API 密钥、导入 SDK 并初始化模型。
设置您的 API 密钥
如需使用 Gemini API,您需要 API 密钥。如果您还没有账号, 在 Google AI Studio 中创建密钥。
保护您的 API 密钥
强烈建议您不要将 API 密钥签入您的版本 控制系统您应该先将 API 密钥传递给您的应用, 初始化模型。
本教程中的所有代码段均假定您以 全局常量。
导入 SDK 并初始化生成模型
要进行 API 调用,您需要先导入 SDK 并初始化 生成模型。
<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。本部分介绍了一些 可能被视为更高级的用例。
调用函数
函数调用可让您更轻松地从 Google Cloud 控制台获取结构化数据输出 生成模型。然后,您可以使用这些输出来调用其他 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 模型。