Hướng dẫn này minh hoạ cách truy cập Gemini API ngay trên ứng dụng web bằng SDK AI JavaScript của Google. Bạn có thể dùng SDK này nếu không muốn làm việc trực tiếp với API REST hoặc mã phía máy chủ (như Node.js) để truy cập vào các mô hình Gemini trong ứng dụng web của mình.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách thực hiện những việc sau:
- Thiết lập dự án, bao gồm cả khoá API
- Tạo văn bản từ dữ liệu nhập chỉ có văn bản
- Tạo văn bản bằng cách nhập văn bản và hình ảnh (đa phương thức)
- Tạo cuộc trò chuyện nhiều lượt (trò chuyện)
- Sử dụng tính năng truyền trực tuyến để tương tác nhanh hơn
Ngoài ra, hướng dẫn này chứa các phần về các trường hợp sử dụng nâng cao (như đếm mã thông báo) cũng như các tuỳ chọn để kiểm soát việc tạo nội dung.
Điều kiện tiên quyết
Hướng dẫn này giả định rằng bạn đã quen thuộc với việc sử dụng JavaScript để phát triển các ứng dụng web. Hướng dẫn này độc lập với khung.
Để hoàn tất hướng dẫn này, hãy đảm bảo rằng môi trường phát triển của bạn đáp ứng các yêu cầu sau:
- (Không bắt buộc) Node.js
- Trình duyệt web hiện đại
Thiết lập dự án
Trước khi gọi Gemini API, bạn cần thiết lập dự án, bao gồm việc nhận khoá API, nhập SDK và khởi chạy mô hình.
Thiết lập khoá API
Để sử dụng Gemini API, bạn sẽ cần có khoá API. Nếu bạn chưa có khoá, hãy tạo một khoá trong Google AI Studio.
Bảo mật khoá API của bạn
Bạn không nên kiểm tra khoá API trong hệ thống quản lý phiên bản của mình. Thay vào đó, bạn nên truyền khoá API đến ứng dụng ngay trước khi khởi tạo mô hình.
Tất cả các đoạn mã trong hướng dẫn này giả định rằng bạn đang truy cập vào khoá API dưới dạng một hằng số chung.
Nhập SDK và khởi chạy mô hình tạo sinh
Để có thể thực hiện lệnh gọi API, bạn cần nhập SDK và khởi chạy mô hình tạo sinh.
<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>
Khi chỉ định một mô hình, hãy lưu ý những điều sau:
Sử dụng một mô hình dành riêng cho trường hợp sử dụng của bạn (ví dụ:
gemini-1.5-flashdành cho phương thức nhập đa phương thức). Trong hướng dẫn này, hướng dẫn cho từng phương thức triển khai sẽ liệt kê mô hình được đề xuất cho từng trường hợp sử dụng.
Triển khai các trường hợp sử dụng phổ biến
Giờ đây dự án của bạn đã được thiết lập, bạn có thể khám phá việc sử dụng Gemini API để triển khai các trường hợp sử dụng khác nhau:
- Tạo văn bản từ dữ liệu nhập chỉ có văn bản
- Tạo văn bản bằng cách nhập văn bản và hình ảnh (đa phương thức)
- Tạo cuộc trò chuyện nhiều lượt (trò chuyện)
- Sử dụng tính năng truyền trực tuyến để tương tác nhanh hơn
Tạo văn bản từ dữ liệu đầu vào chỉ có văn bản
Khi câu lệnh nhập chỉ bao gồm văn bản, hãy sử dụng mô hình Gemini 1.5 hoặc mô hình Gemini 1.0 Pro có generateContent để tạo đầu ra văn bản:
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();
Tạo văn bản bằng cách nhập văn bản và hình ảnh (đa phương thức)
Gemini cung cấp nhiều mô hình có thể xử lý phương thức nhập đa phương thức (mô hình Gemini 1.5 và Gemini 1.0 Pro Vision) để bạn có thể nhập cả văn bản và hình ảnh. Hãy nhớ xem lại các yêu cầu về hình ảnh đối với câu lệnh.
Khi câu lệnh nhập bao gồm cả văn bản và hình ảnh, hãy sử dụng mô hình Gemini 1.5 hoặc mô hình Tầm nhìn Gemini 1.0 Pro bằng phương thức generateContent để tạo đầu ra văn bản:
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();
Xây dựng cuộc trò chuyện nhiều lượt
Khi sử dụng Gemini, bạn có thể tạo các cuộc trò chuyện dạng tự do ở nhiều chặng. SDK đơn giản hoá quy trình bằng cách quản lý trạng thái cuộc trò chuyện. Vì vậy, không giống như generateContent, bạn không phải tự lưu trữ nhật ký trò chuyện.
Để tạo một cuộc trò chuyện nhiều lượt (chẳng hạn như cuộc trò chuyện), hãy sử dụng mô hình Gemini 1.5 hoặc mô hình Gemini 1.0 Pro và bắt đầu cuộc trò chuyện bằng cách gọi startChat().
Sau đó, hãy sử dụng sendMessage() để gửi tin nhắn mới cho người dùng. Thao tác này cũng sẽ thêm tin nhắn và câu trả lời vào nhật ký trò chuyện.
Có hai lựa chọn có thể áp dụng cho role liên kết với nội dung trong cuộc trò chuyện:
user: vai trò đưa ra lời nhắc. Giá trị này là giá trị mặc định cho các lệnh gọisendMessagevà hàm sẽ gửi một ngoại lệ nếu một vai trò khác được truyền.model: vai trò đưa ra câu trả lời. Bạn có thể dùng vai trò này khi gọistartChat()bằnghistoryhiện có.
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();
Sử dụng tính năng phát trực tuyến để tương tác nhanh hơn
Theo mặc định, mô hình này trả về một phản hồi sau khi hoàn tất toàn bộ quy trình tạo. Bạn có thể đạt được các lượt tương tác nhanh hơn bằng cách không phải chờ toàn bộ kết quả mà thay vào đó hãy sử dụng tính năng truyền trực tuyến để xử lý một phần kết quả.
Ví dụ sau đây cho thấy cách triển khai truyền trực tuyến bằng phương thức generateContentStream để tạo văn bản từ lời nhắc nhập văn bản và hình ảnh.
// ...
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;
}
// ...
Bạn có thể sử dụng phương pháp tương tự cho các trường hợp sử dụng chỉ nhập văn bản và trò chuyện.
// Use streaming with text-only input
const result = await model.generateContentStream(prompt);
Hãy xem ví dụ về cuộc trò chuyện ở trên để biết cách tạo chat.
// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);
Triển khai các trường hợp sử dụng nâng cao
Các trường hợp sử dụng phổ biến được mô tả trong phần trước của hướng dẫn này sẽ giúp bạn làm quen với việc sử dụng Gemini API. Phần này mô tả một số trường hợp sử dụng có thể được coi là nâng cao hơn.
Gọi hàm
Lệnh gọi hàm giúp bạn dễ dàng nhận kết quả đầu ra dữ liệu có cấu trúc từ các mô hình tạo sinh. Sau đó, bạn có thể sử dụng những dữ liệu đầu ra này để gọi các API khác và trả về dữ liệu phản hồi liên quan cho mô hình. Nói cách khác, lệnh gọi hàm giúp bạn kết nối các mô hình tạo sinh với các hệ thống bên ngoài để nội dung được tạo có chứa thông tin mới nhất và chính xác nhất. Hãy tìm hiểu thêm trong hướng dẫn gọi hàm.
Đếm mã
Khi sử dụng các câu lệnh dài, bạn nên đếm mã thông báo trước khi gửi bất kỳ nội dung nào đến mô hình. Các ví dụ sau đây minh hoạ cách sử dụng countTokens() cho nhiều trường hợp sử dụng:
// 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 });
Các tuỳ chọn kiểm soát việc tạo nội dung
Bạn có thể kiểm soát việc tạo nội dung bằng cách định cấu hình các tham số của mô hình và sử dụng các chế độ cài đặt an toàn.
Định cấu hình tham số của mô hình
Mọi lời nhắc bạn gửi đến mô hình đều bao gồm các giá trị tham số kiểm soát cách mô hình tạo một phản hồi. Mô hình có thể tạo ra kết quả khác nhau cho các giá trị tham số khác nhau. Tìm hiểu thêm về Thông số mô hình. Cấu hình này được duy trì trong suốt thời gian hoạt động của phiên bản mô hình.
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 });
Sử dụng chế độ cài đặt an toàn
Bạn có thể sử dụng chế độ cài đặt an toàn để điều chỉnh khả năng nhận được những phản hồi có thể được coi là gây hại. Theo mặc định, các chế độ cài đặt an toàn sẽ chặn nội dung có xác suất trung bình và/hoặc cao là nội dung không an toàn trên mọi phương diện. Tìm hiểu thêm về Chế độ cài đặt an toàn.
Dưới đây là cách đặt một chế độ cài đặt an toàn:
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 });
Bạn cũng có thể đặt nhiều chế độ cài đặt an toàn:
const safetySettings = [
{
category: HarmCategory.HARM_CATEGORY_HARASSMENT,
threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
},
{
category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
},
];
Bước tiếp theo
Thiết kế câu lệnh là quá trình tạo các câu lệnh để gợi ra phản hồi mong muốn từ các mô hình ngôn ngữ. Việc viết câu lệnh có cấu trúc hợp lý là một phần thiết yếu để đảm bảo các câu trả lời chính xác, có chất lượng cao từ một mô hình ngôn ngữ. Tìm hiểu các phương pháp hay nhất để viết câu lệnh.
Gemini cung cấp một số biến thể của mô hình để đáp ứng nhu cầu của nhiều trường hợp sử dụng, chẳng hạn như các loại dữ liệu đầu vào và độ phức tạp, phương thức triển khai cho tính năng trò chuyện hoặc các tác vụ khác về ngôn ngữ của hộp thoại, cũng như các hạn chế về kích thước. Tìm hiểu về các mô hình Gemini hiện có.