برنامج تعليمي: بدء استخدام Gemini API


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

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

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

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

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

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

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

إعداد مشروعك

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

استدعاء الدالة

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

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

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