פיתוח חוויות היברידיות באפליקציות אינטרנט באמצעות מודלים שמתארחים בענן ובמכשיר

פיתוח אפליקציות אינטרנט ותכונות מבוססות-AI עם הסקת מסקנות היברידית באמצעות Firebase AI Logic. הסקת מסקנות היברידית מאפשרת להריץ הסקת מסקנות באמצעות מודלים במכשיר כשהם זמינים, ולעבור בצורה חלקה למודלים שמארחים בענן אם לא (ולהיפך).

בדף הזה מוסבר איך להתחיל להשתמש ב-SDK של הלקוח. אחרי שתשלימו את ההגדרה הרגילה, כדאי לעיין באפשרויות ההגדרה והיכולות הנוספות (כמו פלט מובנה).

שימו לב שהסקת מסקנות במכשיר נתמכת באפליקציות אינטרנט שפועלות ב-Chrome במחשב.

מעבר לדוגמאות קוד

תרחישי שימוש מומלצים ויכולות נתמכות

תרחישים מומלצים לשימוש:

• השימוש במודל במכשיר לצורך הסקת מסקנות מציע:

  • פרטיות משופרת
  • הקשר מקומי
  • הסקת מסקנות ללא עלות
  • פונקציונליות אופליין

• שימוש במוצרים משולבים:

  • הגעה ל-100% מהקהל, ללא קשר לזמינות הדגם במכשיר או לחיבור לאינטרנט

יכולות ותכונות נתמכות להסקת מסקנות במכשיר:

הסקת מסקנות במכשיר תומכת רק ביצירת טקסט בשיחה אחת (לא צ'אט), עם פלט בסטרימינג או ללא סטרימינג. הוא תומך ביכולות הבאות של יצירת טקסט:

• יצירת טקסט מקלט של טקסט בלבד

• יצירת טקסט מקלט של טקסט ותמונה, במיוחד סוגי תמונות קלט של JPEG ו-PNG

אפשר גם ליצור פלט מובנה, כולל JSON ו-enums.

לפני שמתחילים

חשוב לשים לב לנקודות הבאות:

• הסקת מסקנות באמצעות מודל במכשיר מתבצעת באמצעות Prompt API מ-Chrome, ואילו הסקת מסקנות באמצעות מודל שמתארח בענן מתבצעת באמצעות הספק שבחרתם (Gemini API או Gemini Developer API או Vertex AI Gemini API).

• בדף הזה מוסבר איך מתחילים לפתח באמצעות localhost (מידע נוסף על שימוש בממשקי API ב-localhost זמין במסמכי התיעוד של Chrome).

  אחרי שמסיימים את ההגדרה הרגילה, כדאי לעיין באפשרויות ההגדרה והיכולות הנוספות (כמו פלט מובנה).

• אחרי שמטמיעים את התכונה, אפשר לאפשר למשתמשי הקצה לנסות את התכונה באפליקציה בפועל.

איך מתחילים להשתמש ב-localhost

בשלבים האלה מוסבר איך לבצע את ההגדרה הכללית הנדרשת לכל בקשת הנחיה נתמכת שרוצים לשלוח.

שלב 1: הגדרת Chrome ו-Prompt API להסקת מסקנות במכשיר

1. מוודאים שאתם משתמשים בגרסה עדכנית של Chrome. עדכון בכתובת chrome://settings/help.
   הסקת מסקנות במכשיר זמינה מ-Chrome מגרסה 139 ואילך.

2. כדי להפעיל את המודל הרב-אופני במכשיר, מגדירים את הדגל הבא לערך Enabled:

   • 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 callback הבא כדי לעקוב אחרי התקדמות ההורדה ולוודא שהמודל 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 הבסיסי שלו באופן אוטומטי) על ידי הזנת שם פרויקט חדש בשלב הראשון של תהליך העבודה.

   • אפשרות 2: מוסיפים את Firebase לפרויקט Google Cloud קיים על ידי לחיצה על הוספת Firebase לפרויקט Google Cloud (בתחתית הדף). בשלב הראשון של תהליך העבודה, מתחילים להזין את שם הפרויקט של הפרויקט הקיים, ואז בוחרים את הפרויקט מהרשימה שמוצגת.

   משלימים את השלבים שנותרו בתהליך העבודה במסך כדי ליצור פרויקט Firebase. שימו לב: כשמוצגת בקשה, לא צריך להגדיר את Google Analytics כדי להשתמש בערכות ה-SDK של Firebase AI Logic.

2. במסוף Firebase, עוברים אל AI Services (שירותי AI) >‏ AI Logic (לוגיקת AI).

3. לוחצים על Get started (תחילת העבודה) כדי להפעיל תהליך עבודה מודרך שיעזור לכם להגדיר את ממשקי ה-API והמשאבים הנדרשים לפרויקט.

4. מגדירים את הפרויקט לשימוש בספק Gemini API.

   מומלץ להתחיל להשתמש בGemini Developer API. בכל שלב, תמיד אפשר להגדיר את Vertex AI Gemini API (ואת הדרישה שלו לחיוב).

   במקרה של Gemini Developer API, במסוף יופעלו ממשקי ה-API הנדרשים וייווצר מפתח API ‏Gemini בפרויקט.
   אין להוסיף את Gemini מפתח ה-API הזה לבסיס הקוד של האפליקציה. מידע נוסף

5. אם מופיעה בקשה בתהליך העבודה של המסוף, פועלים לפי ההוראות במסך כדי לרשום את האפליקציה ולקשר אותה ל-Firebase.

6. כדי להוסיף את ה-SDK לאפליקציה, ממשיכים לשלב הבא במדריך הזה.

שלב 3: הוספת ה-SDK

הספרייה של Firebase מספקת גישה לממשקי ה-API לצורך אינטראקציה עם מודלים גנרטיביים. הספרייה כלולה כחלק מ-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. מאתחלים את השירות עבור ספק ה-API שבחרתם.

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 או enums), צריך להשתמש באחת מהדוגמאות הבאות של 'יצירת טקסט' וגם להגדיר את המודל כך שיגיב בהתאם לסכימה שסופקה.

יצירת טקסט מקלט טקסט בלבד

אתם יכולים להשתמש ב-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. נרשמים לגרסת המקור לניסיון של Prompt API ב-Chrome. יינתן לכם טוקן.

2. צריך לספק את האסימון בכל דף אינטרנט שרוצים להפעיל בו את תכונת תקופת הניסיון. אפשר לבחור באחת מהאפשרויות הבאות:

   • מזינים את הטוקן כמטא תג בתג <head>: <meta http-equiv="origin-trial" content="TOKEN">

   • מעבירים את הטוקן ככותרת HTTP: Origin-Trial: TOKEN

   • מספקים את הטוקן באמצעות תוכנה.

מה עוד אפשר לעשות?

אתם יכולים להשתמש באפשרויות הגדרה וביכולות נוספות שונות כדי לשפר את החוויה ההיברידית:

• הגדרת מצב הסקה

• שינוי מודל ברירת המחדל של גיבוי בענן

• שימוש בהגדרת המודל כדי לשלוט בתגובות (כמו רמת אקראיות)

• יצירת פלט מובנה (כמו JSON)

תכונות שעדיין לא זמינות להסקת מסקנות במכשיר

בגרסת התצוגה המקדימה הזו, לא כל היכולות של Web SDK זמינות להסקת מסקנות במכשיר. התכונות הבאות עדיין לא נתמכות בהסקת מסקנות במכשיר (אבל הן בדרך כלל זמינות להסקת מסקנות מבוססת-ענן).

• יצירת טקסט מקבצים של תמונות בפורמטים שאינם JPEG ו-PNG

  • אפשר לחזור למודל שמתארח בענן, אבל במצב ONLY_ON_DEVICE תוצג שגיאה.

• יצירת טקסט מקלט שמע, סרטונים ומסמכים (כמו קובצי PDF)

  • אפשר לחזור למודל שמתארח בענן, אבל במצב ONLY_ON_DEVICE תוצג שגיאה.

• יצירת תמונות באמצעות מודלים של Gemini או Imagen

  • אפשר לחזור למודל שמתארח בענן, אבל במצב ONLY_ON_DEVICE תוצג שגיאה.

• העברת קבצים באמצעות כתובות URL בבקשות מולטימודאליות. צריך לספק קבצים כנתונים מוטבעים למודלים במכשיר.

• שיחה עם זיכרון

  • אפשר לחזור למודל שמתארח בענן, אבל במצב ONLY_ON_DEVICE תוצג שגיאה.

• שידור דו-כיווני עם Gemini Live API

• מספקים למודל כלים שיעזרו לו ליצור את התגובה שלו (כמו קריאה לפונקציה, הפעלת קוד, הקשר של כתובת URL, ביסוס על Google Search וביסוס על Google Maps)

• ספירת טוקנים

  • תמיד מחזירה שגיאה. המספר יהיה שונה בין מודלים שמתארחים בענן לבין מודלים שפועלים במכשיר, ולכן אין מעבר אינטואיטיבי למודל חלופי.

• מעקב אחרי שימוש בתכונות AI במסוף Firebase להיקש במכשיר.

  • שימו לב שאפשר לעקוב אחרי כל מסקנה שמתקבלת באמצעות המודלים שמארחים בענן, בדיוק כמו אחרי מסקנות אחרות שמתקבלות באמצעות Firebase AI Logic client SDK for Web.

רוצה לתת משוב על חוויית השימוש ב-Firebase AI Logic?