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

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

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

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

2. במסוף Firebase, עוברים לדף Firebase AI Logic.

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. חשוב לבצע את הפעולות הבאות:

   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 או 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)

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

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

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

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

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