本教學課程示範如何直接透過 導入 Google AI 並運用 Google AI JavaScript SDK要是您沒有這個 SDK,就能使用這個 SDK 想直接使用 REST API 或伺服器端程式碼 (例如 Node.js) 存取 Gemini 模型
在本教學課程中,您將瞭解如何執行下列操作:
此外,本教學課程還包含進階用途的相關章節 (例如 計算符記) 以及 控管內容生成功能。
必要條件
本教學課程假設您熟悉使用 JavaScript 開發 網頁應用程式。本指南與架構無關。
如要完成本教學課程,請確認您的開發環境符合 下列要求:
- (選用) Node.js
- 新式網路瀏覽器
設定專案
呼叫 Gemini API 前,您必須先設定專案,包括 取得 API 金鑰、匯入 SDK 並初始化模型。
設定 API 金鑰
如要使用 Gemini API,您必須具備 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 模型或
接著,您就能呼叫 startChat()
來初始化 Gemini 1.0 Pro 模型。
接著,使用 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();
使用串流加快互動速度
根據預設,模型會在完成整個生成程序後傳回回應 上傳資料集之後,您可以運用 AutoML 自動完成部分資料準備工作您不必等待整個 並改用串流處理部分結果
以下範例顯示如何使用
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 模型。