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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. כשמתבקשים לבחור 'ספק Gemini API', מומלץ לבחור באפשרות Gemini Developer API, שמאפשרת להתחיל במהירות ללא עלות.

   בכל שלב בהמשך, תמיד תוכלו להגדיר את Agent Platform Gemini API (formerly Vertex AI) (ואת הדרישה שלו לחיוב).

6. ממשיכים בתהליך העבודה כדי להגדיר את ממשקי ה-API הנדרשים ואת השירותים המשויכים ל-Firebase AI Logic.

   החל מתחילת יולי 2026, בשלב הזה של תהליך העבודה, תופעל Firebase App Check באופן אוטומטי עבור AI Logic, שהוא שירות חיוני שעוזר להגן על Gemini API כשניגשים אליו ישירות מהאפליקציה. כדי להתחיל (ראו את השלבים בהמשך המדריך), תצטרכו להגדיר את App Check ספק ניפוי הבאגים לפיתוח מקומי כשApp Check מופעל.

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

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

ספריית Firebase מספקת גישה לממשקי ה-API לאינטראקציה עם מודלים גנרטיביים. הספרייה כלולה כחלק מ-Firebase JavaScript SDK for Web.

1. מתקינים את Firebase JS SDK לאינטרנט באמצעות npm:

   npm install firebase
   

2. מפעילים את Firebase באפליקציה:

   import { initializeApp } from "firebase/app";
   import { initializeAppCheck } from "firebase/app-check";
   
   // 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: הגדרת ספק ניפוי הבאגים App Check לפיתוח מקומי

החל מתחילת יולי 2026, כחלק מתהליך העבודה המודרך להגדרה של AI Logic במסוף, Firebase App Check נאכף באופן אוטומטי כדי להגן על Gemini API. לפיתוח מקומי, צריך להגדיר את App Check ספק אימות לצורכי ניפוי באגים כדי לעקוף את האימות, ועדיין לשמור על האכיפה של App Check.

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

1. בגרסת build לניפוי באגים, מפעילים את מצב ניפוי הבאגים על ידי הגדרת self.FIREBASE_APPCHECK_DEBUG_TOKEN ל-true לפני שמפעילים את App Check. לדוגמה:

   self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   initializeAppCheck(firebaseApp, { /* App Check options */ });
   

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

   AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
   You will need to safelist it in the Firebase console for it to work.
   

3. רושמים את אסימון ניפוי הבאגים ב-App Check:

   1. במסוף Firebase, עוברים אל Security (אבטחה) > App Check (בדיקת אפליקציות) > הכרטיסייה Apps (אפליקציות).

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

   3. פועלים לפי ההוראות במסך כדי לרשום את אסימון הניפוי באגים.

פרטים על ספק אימות לצורכי ניפוי באגים (כולל איך מקבלים אסימון חדש לניפוי באגים) זמינים במסמכים הרשמיים של App Check.

שלב 5: מאתחלים את השירות ויוצרים מופע של מודל

לפני ששולחים למודל בקשת פרומפט, צריך להגדיר את הפריטים הבאים:

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 });

שלב 6: הפעלת המודל במכשיר

צריך להתקשר אל 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}%`)
);

שלב 7: שליחת בקשת הנחיה למודל

בקטע הזה מוסבר איך לשלוח סוגים שונים של קלט כדי ליצור סוגים שונים של פלט, כולל:

• יצירת טקסט דינמי מבוסס-AI מקלט טקסט בלבד
• יצירת טקסט מקלט של טקסט ותמונה (מולטימודאלי)

אם רוצים ליצור פלט מובנה (למשל JSON או טיפוסים בני מנייה (enum)), צריך להשתמש באחת מהדוגמאות הבאות של 'טקסט דינמי מבוסס-AI' וגם להגדיר את המודל כך שיגיב לפי סכימה שסופקה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• סטרימינג דו-כיווני עם Gemini Live API

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

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

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

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

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

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