Hướng dẫn này minh hoạ cách truy cập vào API Gemini ngay từ ứng dụng web bằng cách sử dụng SDK JavaScript của Google AI của Google. Bạn có thể sử 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 bằng thông tin chỉ nhập bằng văn bản
- Tạo văn bản từ dữ liệu nhập bằng văn bản và hình ảnh (đa phương thức)
- Xây dựng cuộc trò chuyện nhiều lượt (trò chuyện)
- Sử dụng tính năng phát trực tuyến để tương tác nhanh hơn
Ngoài ra, hướng dẫn này còn có các phần về các trường hợp sử dụng nâng cao (chẳng hạn 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 với việc sử dụng JavaScript để phát triển ứng dụng web. Hướng dẫn này không phụ thuộc vào khung.
Để hoàn tất phần hướng dẫn này, hãy đảm bảo 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 API Gemini, 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 tạo mô hình.
Thiết lập khoá API
Để sử dụng API Gemini, bạn cần có một khoá API. Nếu bạn chưa có khoá, hãy tạo khoá trong Google AI Studio.
Bảo mật khoá API
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 của mình ngay trước khi khởi động mô hình.
Tất cả các đoạn mã trong hướng dẫn này đều giả định rằng bạn đang truy cập khoá API dưới dạng một hằng số toàn cục.
Nhập SDK và khởi chạy mô hình tạo sinh
Để có thể thực hiện bất kỳ lệnh gọi API nào, 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 = "...";
// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);
// ...
const model = genAI.getGenerativeModel({ model: "MODEL_NAME"});
// ...
</script>
</body>
</html>
Khi chỉ định một mô hình, hãy lưu ý những điều sau:
Sử dụng mô hình dành riêng cho trường hợp sử dụng của bạn (ví dụ:
gemini-pro-visiondà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 mỗi cách triển khai 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
Bây giờ, dự án của bạn đã được thiết lập, bạn có thể khám phá cách sử dụng API Gemini để triển khai các trường hợp sử dụng khác nhau:
- Tạo văn bản bằng thông tin chỉ nhập bằng văn bản
- Tạo văn bản từ dữ liệu nhập bằng văn bản và hình ảnh (đa phương thức)
- Xây dựng cuộc trò chuyện nhiều lượt (trò chuyện)
- Sử dụng tính năng phát trực tuyến để tương tác nhanh hơn
Tạo văn bản từ phương thức nhập chỉ bằng văn bản
Khi câu lệnh đầu vào chỉ bao gồm văn bản, hãy sử dụng mô hình gemini-pro với 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);
async function run() {
// For text-only input, use the gemini-pro model
const model = genAI.getGenerativeModel({ model: "gemini-pro"});
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 phương thức nhập văn bản và hình ảnh (đa phương thức)
Gemini cung cấp một mô hình đa phương thức (gemini-pro-vision) để bạn có thể nhập cả văn bản và hình ảnh. Hãy nhớ tham khảo các yêu cầu về hình ảnh để nhập.
Khi đầu vào của lời nhắc bao gồm cả văn bản và hình ảnh, hãy sử dụng mô hình gemini-pro-vision với 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() {
// For text-and-images input (multimodal), use the gemini-pro-vision model
const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });
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 (trò chuyện)
Khi dùng Gemini, bạn có thể tạo các cuộc trò chuyện dạng tự do qua nhiều lượt. SDK đơn giản hoá quy trình bằng cách quản lý trạng thái của 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ý cuộc trò chuyện.
Để tạo một cuộc trò chuyện nhiều lượt (như cuộc trò chuyện), hãy sử dụng mô hình gemini-pro và khởi động cuộc trò chuyện bằng cách gọi startChat(). Sau đó, 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ó 2 tuỳ chọn 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 lệnh gọisendMessagevà hàm sẽ gửi một ngoại lệ nếu được truyền một vai trò khác.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() {
// For text-only input, use the gemini-pro model
const model = genAI.getGenerativeModel({ model: "gemini-pro"});
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 sẽ trả về một phản hồi sau khi hoàn tất toàn bộ quá trình tạo. Bạn có thể đạt được tương tác nhanh hơn bằng cách không đợi toàn bộ kết quả, mà thay vào đó sử dụng phương thức truyền trực tuyến để xử lý một phần kết quả.
Ví dụ sau 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ể áp 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);
Xem ví dụ về cuộc trò chuyện ở trên để biết cách tạo thực thể cho 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 giúp bạn làm quen với việc sử dụng API Gemini. 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
Tính năng gọi hàm giúp bạn dễ dàng nhận được kết quả 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 các kết quả đầ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, tính năng gọi hàm giúp bạn kết nối các mô hình tạo sinh với hệ thống bên ngoài để nội dung được tạo bao gồm thông tin chính xác và mới nhất. Hãy tìm hiểu thêm trong hướng dẫn gọi hàm.
Số lượng mã thông báo
Khi sử dụng lời nhắc 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ố mô hình và sử dụng các chế độ cài đặt an toàn.
Định cấu hình thông số 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 ra một phản hồi. Mô hình này có thể tạo ra các kết quả khác nhau cho các giá trị tham số khác nhau. Tìm hiểu thêm về Tham số mô hình. Cấu hình được duy trì trong suốt thời gian thực thể mô hình của bạn tồn tại.
const generationConfig = {
stopSequences: ["red"],
maxOutputTokens: 200,
temperature: 0.9,
topP: 0.1,
topK: 16,
};
const model = genAI.getGenerativeModel({ model: "MODEL_NAME", generationConfig });
Sử dụng các chế độ cài đặt an toàn
Bạn có thể sử dụng các chế độ cài đặt an toàn để điều chỉnh khả năng nhận được những câu trả lời có thể bị 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 là nội dung không an toàn trên mọi phương diện ở mức trung bình và/hoặc cao. Tìm hiểu thêm về Chế độ cài đặt an toàn.
Sau đâ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,
},
];
const model = genAI.getGenerativeModel({ model: "MODEL_NAME", 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ế lời nhắc là quá trình tạo các câu lệnh để khơi gợi 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 cần thiết để đảm bảo câu trả lời chính xác và chất lượng cao từ mô hình ngôn ngữ. Tìm hiểu các phương pháp hay nhất để viết gợi ý.
Gemini cung cấp một số biến thể mô hình để đáp ứng nhu cầu của nhiều trường hợp sử dụng, chẳng hạn như loại dữ liệu đầu vào và độ phức tạp, cách triển khai cho cuộc trò chuyện hoặc các tác vụ khác về ngôn ngữ hộp thoại cũng như các quy tắc ràng buộc về kích thước. Tìm hiểu về các mô hình Gemini hiện có.
Gemini đưa ra các tuỳ chọn để yêu cầu tăng giới hạn tốc độ. Giới hạn tốc độ cho các mô hình Genmini Pro là 60 yêu cầu mỗi phút (RPM).