با Gemini API در برنامه های وب شروع کنید

این آموزش نحوه دسترسی مستقیم به Gemini API را از برنامه وب خود با استفاده از Google AI JavaScript SDK نشان می دهد. اگر نمی‌خواهید مستقیماً با REST API یا کدهای سمت سرور (مانند Node.js) برای دسترسی به مدل‌های Gemini در برنامه وب خود کار کنید، می‌توانید از این SDK استفاده کنید.

در این آموزش، نحوه انجام کارهای زیر را خواهید آموخت:

علاوه بر این، این آموزش شامل بخش هایی در مورد موارد استفاده پیشرفته (مانند شمارش توکن ها ) و همچنین گزینه هایی برای کنترل تولید محتوا است .

پیش نیازها

این آموزش فرض می کند که شما با استفاده از جاوا اسکریپت برای توسعه برنامه های وب آشنا هستید. این راهنما مستقل از چارچوب است.

برای تکمیل این آموزش، مطمئن شوید که محیط توسعه شما شرایط زیر را دارد:

  • (اختیاری) Node.js
  • مرورگر وب مدرن

پروژه خود را تنظیم کنید

قبل از فراخوانی Gemini API، باید پروژه خود را راه‌اندازی کنید که شامل دریافت کلید API، وارد کردن SDK و مقداردهی اولیه مدل می‌شود.

کلید API خود را تنظیم کنید

برای استفاده از Gemini API، به یک کلید API نیاز دارید. اگر قبلاً یکی ندارید، یک کلید در Google AI Studio ایجاد کنید.

یک کلید API دریافت کنید

کلید 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 = "...";

      // 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>

هنگام تعیین یک مدل به موارد زیر توجه کنید:

  • از مدلی استفاده کنید که مخصوص مورد استفاده شما باشد (مثلاً gemini-pro-vision برای ورودی چندوجهی است). در این راهنما، دستورالعمل‌های هر پیاده‌سازی، مدل پیشنهادی را برای هر مورد استفاده فهرست می‌کند.

موارد استفاده رایج را اجرا کنید

اکنون که پروژه شما راه اندازی شده است، می توانید با استفاده از Gemini API برای پیاده سازی موارد استفاده مختلف، کاوش کنید:

متن را از ورودی فقط متنی تولید کنید

هنگامی که ورودی سریع فقط متن را شامل می شود، از مدل gemini-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() {
  // 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();

تولید متن از ورودی متن و تصویر (چند وجهی)

Gemini یک مدل چندوجهی ( gemini-pro-vision ) ارائه می‌کند، بنابراین می‌توانید هم متن و هم تصاویر را وارد کنید. حتماً شرایط مورد نیاز تصویر را برای ورودی بررسی کنید.

هنگامی که ورودی سریع شامل متن و تصویر می شود، از مدل gemini-pro-vision با متد 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() {
  // 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();

ایجاد مکالمات چند نوبتی (چت)

با استفاده از Gemini، می توانید مکالمات آزاد را در چندین نوبت ایجاد کنید. SDK با مدیریت وضعیت مکالمه، فرآیند را ساده می‌کند، بنابراین برخلاف generateContent ، مجبور نیستید تاریخچه مکالمه را خودتان ذخیره کنید.

برای ایجاد یک مکالمه چند نوبتی (مانند چت)، از مدل gemini-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() {
  // 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();

برای تعامل سریعتر از پخش جریانی استفاده کنید

به‌طور پیش‌فرض، مدل پس از تکمیل کل فرآیند تولید، پاسخی را برمی‌گرداند. شما می توانید با منتظر ماندن برای کل نتیجه به تعاملات سریع تری برسید و در عوض از استریم برای مدیریت نتایج جزئی استفاده کنید.

مثال زیر نحوه پیاده‌سازی استریم را با متد 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,
};

const model = genAI.getGenerativeModel({ model: "MODEL_NAME",  generationConfig });

از تنظیمات ایمنی استفاده کنید

می توانید از تنظیمات ایمنی برای تنظیم احتمال دریافت پاسخ هایی که ممکن است مضر تلقی شوند استفاده کنید. به‌طور پیش‌فرض، تنظیمات ایمنی محتوایی را با احتمال متوسط ​​و/یا زیاد ناامن بودن محتوا در همه ابعاد مسدود می‌کند. درباره تنظیمات ایمنی بیشتر بیاموزید.

در اینجا نحوه تنظیم یک تنظیم ایمنی آورده شده است:

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 });

همچنین می توانید بیش از یک تنظیم ایمنی را تنظیم کنید:

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 آشنا شوید.

  • Gemini گزینه هایی را برای درخواست افزایش محدودیت نرخ ارائه می دهد. محدودیت نرخ برای مدل های Gemini Pro 60 درخواست در دقیقه (RPM) است.