إنشاء تجارب مختلطة في تطبيقات الويب باستخدام نماذج مستضافة على الجهاز ونماذج مستضافة على السحابة الإلكترونية

يمكنك إنشاء تطبيقات وميزات ويب مستندة إلى الذكاء الاصطناعي مع الاستنتاج المختلط باستخدام Firebase AI Logic. يتيح الاستنتاج المختلط تشغيل الاستنتاج باستخدام النماذج على الجهاز فقط عندما تكون متاحة، والرجوع بسلاسة إلى النماذج المستضافة على السحابة الإلكترونية في الحالات الأخرى (والعكس صحيح).

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

يُرجى العِلم أنّ الاستنتاج على الجهاز متاح لتطبيقات الويب التي تعمل على Chrome على الكمبيوتر المكتبي.

الانتقال إلى أمثلة الرموز

حالات الاستخدام المقترَحة والإمكانات المتاحة

حالات الاستخدام المقترَحة:

• يوفّر استخدام نموذج على الجهاز فقط للاستنتاج ما يلي:

  • خصوصية محسّنة
  • سياق محلي
  • استنتاج بدون تكلفة
  • وظائف بلا إنترنت

• يوفّر استخدام الوظائف المختلطة ما يلي:

  • الوصول إلى% 100 من جمهورك، بغض النظر عن مدى توفّر النموذج على الجهاز فقط أو الاتصال بالإنترنت

الإمكانات والميزات المتاحة للاستنتاج على الجهاز فقط:

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

• إنشاء نص من إدخال نصي فقط

• إنشاء نص من إدخال نصي وصورة، وتحديدًا أنواع صور الإدخال بتنسيقَي JPEG وPNG

يمكنك أيضًا إنشاء إخراج منظَّم، بما في ذلك JSON والقيم التعدادية.

قبل البدء

يُرجى أخذ ما يلي في الاعتبار:

• يستخدم الاستنتاج باستخدام نموذج على الجهاز فقط Prompt API من Chrome؛ بينما يستخدم الاستنتاج باستخدام نموذج مستضاف على السحابة الإلكترونية مقدِّم Gemini API الذي تختاره (إما Gemini Developer API أو Vertex AI Gemini API).

• توضّح هذه الصفحة كيفية البدء في التطوير باستخدام localhost (مزيد من المعلومات حول استخدام واجهات برمجة التطبيقات على localhost في مستندات Chrome).

  بعد إكمال عملية الإعداد العادية هذه، يمكنك الاطّلاع على خيارات الإعداد والقدرات الإضافية (مثل الإخراج المنظَّم).

• بعد تنفيذ الميزة، يمكنك السماح للمستخدمين النهائيين بتجربتها في تطبيقك الفعلي.

البدء على localhost

توضّح خطوات البدء هذه عملية الإعداد العامة المطلوبة لأي طلب موجّه متاح تريد إرساله.

الخطوة 1: إعداد Chrome وPrompt API للاستنتاج على الجهاز فقط

1. تأكَّد من استخدام إصدار حديث من Chrome. يمكنك تحديثه في chrome://settings/help.
   يتوفّر الاستنتاج على الجهاز فقط بدءًا من الإصدار 139 من Chrome والإصدارات الأحدث.

2. فعِّل النموذج المتعدّد الوسائط على الجهاز فقط من خلال ضبط العلامة التالية على مفعَّلة:

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

3. أعِد تشغيل Chrome.

4. (اختياري) نزِّل النموذج على الجهاز فقط قبل الطلب الأول.

   إنّ Prompt API مضمّنة في Chrome، ولكن النموذج على الجهاز فقط غير متاح تلقائيًا. إذا لم يسبق لك تنزيل النموذج قبل طلبك الأول للاستنتاج على الجهاز فقط، سيبدأ الطلب تلقائيًا في تنزيل النموذج في الخلفية.

   عرض تعليمات تنزيل النموذج على الجهاز فقط

   1. افتح أدوات المطوّرين > وحدة التحكّم.

   2. نفِّذ ما يلي:

      await LanguageModel.availability();
      

   3. تأكَّد من أنّ الناتج هو available أو downloading أو downloadable.

   4. إذا كان الناتج هو downloadable، ابدأ تنزيل النموذج من خلال تنفيذ ما يلي:

      await LanguageModel.create();
      

   5. يمكنك استخدام معاودة الاتصال monitor التالية للاستماع إلى تقدُّم التنزيل والتأكّد من أنّ النموذج available قبل تقديم الطلبات:

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

الخطوة 2: إعداد مشروع Firebase وربط تطبيقك بـ Firebase

1. سجِّل الدخول إلى وحدة تحكّم Firebase، ثم اختَر مشروع Firebase الخاص بك.

   ليس لديك مشروع على Firebase؟

   إذا لم يكن لديك مشروع على Firebase، انقر على الزر لإنشاء مشروع جديد على Firebase، ثم استخدِم أحد الخيارَين التاليَين:

   • الخيار 1: أنشِئ مشروعًا جديدًا بالكامل على Firebase (ومشروع Google Cloud الأساسي تلقائيًا) من خلال إدخال اسم مشروع جديد في الخطوة الأولى من سير العمل.Google Cloud

   • الخيار 2: "أضِف Firebase" إلى مشروع حالي على Google Cloud من خلال النقر على إضافة Firebase إلى مشروع Google Cloud (في أسفل الصفحة). في الخطوة الأولى من سير العمل، ابدأ بإدخال اسم المشروع للمشروع الحالي، ثم اختَر المشروع من القائمة المعروضة.

   أكمِل الخطوات المتبقّية من سير العمل على الشاشة لإنشاء مشروع على Firebase. يُرجى العِلم أنّه ليس عليك إعداد Google Analytics لاستخدام Firebase AI Logic حزمة تطوير البرامج (SDK) عند مطالبتك بذلك.

2. في وحدة تحكّم Firebase، انتقِل إلى خدمات الذكاء الاصطناعي > منطق الذكاء الاصطناعي.

3. انقر على البدء لتشغيل سير عمل إرشادي يساعدك في إعداد واجهات برمجة التطبيقات المطلوبة والموارد لمشروعك.

4. أعِد إعداد مشروعك لاستخدام مقدِّم "Gemini API".

   ننصحك بالبدء باستخدام Gemini Developer API. يمكنك في أي وقت إعداد Vertex AI Gemini API (ومتطلباته المتعلقة بالفوترة).

   بالنسبة إلى Gemini Developer API، ستفعِّل وحدة التحكّم واجهات برمجة التطبيقات المطلوبة وتنشئ مفتاح Gemini API في مشروعك.
   لا تُضِف مفتاح API هذا إلى قاعدة رموز تطبيقك.Gemini مزيد من المعلومات

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

6. انتقِل إلى الخطوة التالية في هذا الدليل لإضافة حزمة SDK إلى تطبيقك.

الخطوة 3: إضافة حزمة SDK

توفّر مكتبة Firebase إمكانية الوصول إلى واجهات برمجة التطبيقات للتفاعل مع النماذج التوليدية. يتم تضمين المكتبة كجزء من حزمة Firebase JavaScript SDK لتطبيقات الويب.

1. ثبِّت حزمة Firebase JS SDK لتطبيقات الويب باستخدام npm:

   npm install firebase
   

2. أعِد إعداد Firebase في تطبيقك:

   import { initializeApp } from "firebase/app";
   
   // TODO(developer) Replace the following with your app's Firebase configuration
   // See: https://firebase.google.com/docs/web/learn-more#config-object
   const firebaseConfig = {
     // ...
   };
   
   // Initialize FirebaseApp
   const firebaseApp = initializeApp(firebaseConfig);
   

الخطوة 4: إعداد الخدمة وإنشاء مثيل للنموذج

أعِد إعداد ما يلي قبل إرسال طلب موجّه إلى النموذج.

1. أعِد إعداد الخدمة لمقدِّم واجهة برمجة التطبيقات الذي اخترته.

2. أنشِئ مثيلاً لـ GenerativeModel. تأكَّد من إجراء ما يلي:

   1. استدعِ getGenerativeModel بعد تفاعل المستخدم النهائي أو أثناءه (مثل النقر على زر). هذا شرط أساسي لـ inferenceMode.

   2. اضبط mode على أحد الخيارات التالية:

      • PREFER_ON_DEVICE: استخدِم النموذج على الجهاز فقط إذا كان متاحًا، وإلا ارجِع إلى النموذج المستضاف على السحابة الإلكترونية.

      • ONLY_ON_DEVICE: استخدِم النموذج على الجهاز فقط إذا كان متاحًا، وإلا اطرح استثناءً.

      • PREFER_IN_CLOUD: استخدِم النموذج المستضاف على السحابة الإلكترونية إذا كان متاحًا، وإلا ارجِع إلى النموذج على الجهاز فقط.

      • ONLY_IN_CLOUD: استخدِم النموذج المستضاف على السحابة الإلكترونية إذا كان متاحًا، وإلا اطرح استثناءً.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

الخطوة 5: إرسال طلب موجّه إلى نموذج

يوضّح لك هذا القسم كيفية إرسال أنواع مختلفة من الإدخالات لإنشاء أنواع مختلفة من الإخراج، بما في ذلك:

• إنشاء نص من إدخال نصي فقط
• إنشاء نص من إدخال نصي وصوري (متعدّد الوسائط)

إذا أردت إنشاء إخراج منظَّم (مثل JSON أو القيم التعدادية)، فـ استخدِم أحد أمثلة "إنشاء نص" التالية وأعِد أيضًا إعداد النموذج للردّ وفقًا لمخطط محدّد.

إنشاء نص من إدخال نصي فقط

يمكنك استخدام generateContent() لإنشاء نص من طلب يتضمّن نصًا:

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

يُرجى العِلم أنّ Firebase AI Logic يتيح أيضًا تدفُّق الردود النصية باستخدام generateContentStream (بدلاً من generateContent).

إنشاء نص من إدخال نصي وصورة (متعدّد الوسائط)

يمكنك استخدام generateContent() لإنشاء نص من طلب يتضمّن ملفات نصية وملفات صور، مع توفير لكل ملف إدخال mimeType والملف نفسه.

أنواع صور الإدخال المتاحة للاستنتاج على الجهاز فقط هي PNG وJPEG.

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a 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() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

يُرجى العِلم أنّ Firebase AI Logic يتيح أيضًا تدفُّق الردود النصية باستخدام generateContentStream (بدلاً من generateContent).

السماح للمستخدمين النهائيين بتجربة الميزة

لكي يتمكّن المستخدمون النهائيون من تجربة الميزة في تطبيقك، عليك التسجيل في تجارب المصدر في Chrome. يُرجى العِلم أنّ هذه التجارب لها مدة واستخدام محدودان.

1. سجِّل في تجربة المصدر في Chrome لـ Prompt API. سيتم منحك رمزًا مميّزًا.

2. قدِّم الرمز المميّز في كل صفحة ويب تريد تفعيل ميزة التجربة لها. استخدِم أحد الخيارات التالية:

   • قدِّم الرمز المميّز كعلامة وصفية في العلامة <head>: <meta http-equiv="origin-trial" content="TOKEN">

   • قدِّم الرمز المميّز كعنوان HTTP: Origin-Trial: TOKEN

   • قدِّم الرمز المميّز برمجيًا.

ما المهام الأخرى التي يمكنك تنفيذها؟

يمكنك استخدام خيارات وقدرات إضافية متنوعة لإعداد تجاربك المختلطة:

• ضبط وضع الاستنتاج

• إلغاء النموذج التلقائي للرجوع إلى النموذج المستضاف على السحابة الإلكترونية

• استخدام إعدادات النموذج للتحكّم في الردود (مثل درجة العشوائية)

• إنشاء إخراج منظَّم (مثل JSON)

الميزات التي لا تتوفّر بعد للاستنتاج على الجهاز فقط

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

• إنشاء نص من أنواع ملفات الصور غير JPEG وPNG

  • يمكن الرجوع إلى النموذج المستضاف على السحابة الإلكترونية، ولكن الوضع ONLY_ON_DEVICE سيعرض خطأً.

• إنشاء نص من إدخالات الصوت والفيديو والمستندات (مثل ملفات PDF)

  • يمكن الرجوع إلى النموذج المستضاف على السحابة الإلكترونية، ولكن الوضع ONLY_ON_DEVICE سيعرض خطأً.

• إنشاء صور باستخدام نماذج Gemini أو Imagen

  • يمكن الرجوع إلى النموذج المستضاف على السحابة الإلكترونية، ولكن الوضع ONLY_ON_DEVICE سيعرض خطأً.

• توفير الملفات باستخدام عناوين URL في الطلبات المتعدّدة الوسائط: يجب تقديم الملفات كبيانات مضمّنة للنماذج على الجهاز. يجب تقديم الملفات كبيانات مضمّنة للنماذج على الجهاز فقط.

• محادثة متعدّدة الجولات

  • يمكن الرجوع إلى النموذج المستضاف على السحابة الإلكترونية، ولكن الوضع ONLY_ON_DEVICE سيعرض خطأً.

• التدفُّق الثنائي الاتجاه باستخدام Gemini Live API

• تزويد النموذج بالأدوات لمساعدته في إنشاء ردّه (مثل استدعاء الدوال وتنفيذ الرموز البرمجية وسياق عنوان URL و Grounding باستخدام Google Search)

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

  • يعرض خطأً دائمًا. سيختلف العدد بين النماذج المستضافة على السحابة الإلكترونية والنماذج على الجهاز فقط، لذا ليس هناك رجوع بديهي.

• تتبّع استخدام الذكاء الاصطناعي في وحدة تحكّم Firebase للاستنتاج على الجهاز فقط

  • يُرجى العِلم أنّه يمكن مراقبة أي استنتاج باستخدام النماذج المستضافة على السحابة الإلكترونية تمامًا مثل الاستنتاج الآخر باستخدام Firebase AI Logic حزمة SDK للعميل لتطبيقات الويب.

تقديم ملاحظات حول تجربتك مع Firebase AI Logic