بدء استخدام Gemini API في تطبيقات الويب

يوضِّح هذا البرنامج التعليمي كيفية الوصول إلى واجهة برمجة تطبيقات Gemini مباشرةً من تطبيق الويب باستخدام حزمة تطوير البرامج (SDK) لترميز JavaScript للذكاء الاصطناعي من Google. يمكنك استخدام حزمة SDK هذه إذا كنت لا تريد العمل مباشرةً باستخدام واجهات برمجة تطبيقات REST أو الرمز من جهة الخادم (مثل Node.js) للوصول إلى نماذج Gemini في تطبيق الويب الخاص بك.

في هذا البرنامج التعليمي، ستتعرّف على كيفية إجراء ما يلي:

بالإضافة إلى ذلك، يتضمّن هذا البرنامج التعليمي أقسامًا حول حالات الاستخدام المتقدّمة (مثل رموز العدّ المميزة)، بالإضافة إلى خيارات للتحكّم في إنشاء المحتوى.

المتطلبات الأساسية

يفترض هذا البرنامج التعليمي أنك على دراية باستخدام JavaScript لتطوير تطبيقات الويب. هذا الدليل مستقل عن إطار العمل.

لإكمال هذا البرنامج التعليمي، تأكد من أن بيئة التطوير تفي بالمتطلبات التالية:

  • (اختياري) Node.js
  • متصفح ويب حديث

إعداد مشروعك

قبل طلب واجهة برمجة تطبيقات Gemini، عليك إعداد مشروعك الذي يشمل الحصول على مفتاح واجهة برمجة التطبيقات واستيراد حزمة تطوير البرامج (SDK) وإعداد النموذج.

إعداد مفتاح واجهة برمجة التطبيقات

لاستخدام Gemini API، يجب استخدام مفتاح واجهة برمجة التطبيقات. إذا لم يسبق لك إنشاء مفتاح، أنشئ مفتاحًا في Google AI Studio

الحصول على مفتاح واجهة برمجة التطبيقات

تأمين مفتاح واجهة برمجة التطبيقات

ننصحك بشدة بعدم التحقّق من مفتاح واجهة برمجة التطبيقات في نظام التحكّم في الإصدار. بدلاً من ذلك، يجب عليك تمرير مفتاح واجهة برمجة التطبيقات إلى تطبيقك مباشرة قبل إعداد النموذج.

تفترض جميع المقتطفات في هذا البرنامج التعليمي أنّك تصل إلى مفتاح واجهة برمجة التطبيقات كثابت عام.

استيراد حزمة تطوير البرامج (SDK) وإعداد النموذج التوليدي

قبل أن تتمكن من إجراء أي طلبات بيانات من واجهة برمجة التطبيقات، عليك استيراد حزمة تطوير البرامج (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. يصف هذا القسم بعض حالات الاستخدام التي يمكن اعتبارها أكثر تقدمًا.

استدعاء الدوال

يُسهّل استدعاء الدوال عليك الحصول على مخرجات البيانات المنظَّمة من النماذج التوليدية. ويمكنك بعد ذلك استخدام هذه المخرجات لطلب واجهات برمجة تطبيقات أخرى وعرض بيانات الاستجابة ذات الصلة للنموذج. بعبارة أخرى، يساعدك استدعاء الوظيفة على ربط النماذج التوليدية بالأنظمة الخارجية، بحيث يتضمن المحتوى الذي يتم إنشاؤه أحدث المعلومات ودقتها. يمكنك الاطّلاع على مزيد من المعلومات في البرنامج التعليمي الخاص باستدعاء الوظائف.

عدد الرموز المميّزة

عند استخدام المطالبات الطويلة، قد يكون من المفيد حساب الرموز قبل إرسال أي محتوى إلى النموذج. توضِّح الأمثلة التالية كيفية استخدام علامة 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).