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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قبل البدء

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

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

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

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

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

البدء على المضيف المحلي

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

الخطوة 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. تأكَّد من ضبط 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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

الخطوة 5: إعداد النموذج على الجهاز فقط

عليك استدعاء initializeDeviceModel() بعد تفاعل المستخدم النهائي مع الصفحة (مثل النقر على زر) أو في الوقت نفسه و قبل إرسال طلب موجّه إلى النموذج. مزيد من المعلومات عن متطلبات تفعيل المستخدم في مستندات Chrome

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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

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

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

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

إذا أردت إنشاء إخراج منظَّم (مثل 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 with Google Search وGrounding with Google Maps)

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

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

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

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

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