این آموزش نحوه دسترسی مستقیم به Gemini API را از برنامه وب خود با استفاده از Google AI JavaScript SDK نشان می دهد. اگر نمیخواهید مستقیماً با REST API یا کدهای سمت سرور (مانند Node.js) برای دسترسی به مدلهای Gemini در برنامه وب خود کار کنید، میتوانید از این SDK استفاده کنید.
در این آموزش، نحوه انجام کارهای زیر را خواهید آموخت:
- پروژه خود را تنظیم کنید، از جمله کلید API
- متن را از ورودی فقط متنی تولید کنید
- تولید متن از ورودی متن و تصویر (چند وجهی)
- ایجاد مکالمات چند نوبتی (چت)
- برای تعامل سریعتر از پخش جریانی استفاده کنید
علاوه بر این، این آموزش شامل بخش هایی در مورد موارد استفاده پیشرفته (مانند شمارش توکن ها ) و همچنین گزینه هایی برای کنترل تولید محتوا است .
پیش نیازها
این آموزش فرض می کند که شما با استفاده از جاوا اسکریپت برای توسعه برنامه های وب آشنا هستید. این راهنما مستقل از چارچوب است.
برای تکمیل این آموزش، مطمئن شوید که محیط توسعه شما شرایط زیر را دارد:
- (اختیاری) Node.js
- مرورگر وب مدرن
پروژه خود را تنظیم کنید
قبل از فراخوانی Gemini API، باید پروژه خود را راهاندازی کنید، که شامل دریافت کلید API، وارد کردن SDK و مقداردهی اولیه مدل میشود.
کلید API خود را تنظیم کنید
برای استفاده از Gemini API، به یک کلید API نیاز دارید. اگر قبلاً یکی ندارید، یک کلید در Google AI Studio ایجاد کنید.
کلید 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 یا مدل Gemini 1.0 Pro با generateContent
برای تولید خروجی متن استفاده کنید:
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
: نقشی که پاسخ ها را ارائه می دهد. این نقش هنگام فراخوانیstartChat()
باhistory
موجود قابل استفاده است.
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 آشنا شوید.