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

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

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

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

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

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

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

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

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

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

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

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

• יצירת תוכן בפעולה אחת, סטרימינג ותוכן ללא סטרימינג
• יצירת טקסט מקלט טקסט בלבד
• יצירת טקסט מקלט של טקסט ותמונה, במיוחד סוגי קלט של תמונות מסוג JPEG ו-PNG
• יצירת פלט מובנה, כולל JSON וממשקי enum

שנתחיל?

במדריך הזה נסביר איך להתחיל להשתמש ב-SDK של Firebase AI Logic לאינטרנט כדי לבצע הסקת מסקנות היברידית.

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

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

1. מורידים את גרסת ה-build העדכנית של Chrome Dev.

   הסקת מסקנות במכשיר זמינה ב-Chrome מגרסה 138 ואילך.

2. כדי להפעיל את Prompt API במכונה של Chrome, מגדירים את הדגלים הבאים:

   • chrome://flags/#optimization-guide-on-device-model: מגדירים את הערך Enabled.
   • chrome://flags/#prompt-api-for-gemini-nano: מגדירים את הערך Enabled.

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

3. כדי להפעיל את המודל המולטימודלי במכשיר, מגדירים את הדגל הבא:

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input: מגדירים את הערך Enabled.

4. מאמתים את ה-API באופן מקומי:

   1. מפעילים מחדש את Chrome.

   2. פותחים את כלים למפתחים > מסוף.

   3. מריצים את הפקודה הבאה:

      await LanguageModel.availability();
      

   4. מוודאים שהפלט הוא available,‏ downloading או downloadable. .

   5. אם הפלט הוא downloadable, אפשר להריץ את await LanguageModel.create(); כדי להתחיל את הורדת המודל. אחרת, הבקשה הראשונה להסקה במכשיר תגרום להורדת מודל ברקע, שתהליך ההורדה שלה עשוי להימשך כמה דקות.

שלב 2: מגדירים פרויקט Firebase ומקשרים את האפליקציה ל-Firebase

1. נכנסים למסוף Firebase ובוחרים את הפרויקט ב-Firebase.

   עדיין אין לכם פרויקט ב-Firebase?

   אם עדיין אין לכם פרויקט ב-Firebase, לוחצים על Create project (יצירת פרויקט) ואז משתמשים באחת מהאפשרויות הבאות:

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

   • אפשרות 2: 'הוספת Firebase' לפרויקט Google Cloud קיים. לשם כך, בוחרים את שם הפרויקט ב-Google Cloud בתפריט הנפתח בשלב הראשון בתהליך העבודה 'יצירת פרויקט'.

   הערה: כשמוצגת בקשה, לא צריך להגדיר את Google Analytics כדי להשתמש ב-SDKs של Firebase AI Logic.

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

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

4. בוחרים את ספק ה-Gemini API שבו רוצים להשתמש עם ערכות ה-SDK של Firebase AI Logic. תמיד אפשר להגדיר את ספק ה-API השני ולהשתמש בו מאוחר יותר, אם רוצים.

   • Gemini Developer API — חיוב אופציונלי (זמין בתוכנית התמחור ללא עלות של Spark)
     במסוף יופעלו ממשקי ה-API הנדרשים וייווצר מפתח API מסוג Gemini בפרויקט.
     אין להוסיף את מפתח ה-API Gemini הזה לקוד של האפליקציה. מידע נוסף

     אם תרצו לשדרג את חבילת השירות, תוכלו להגדיר את החיוב מאוחר יותר.

   • Vertex AI Gemini API — נדרש חיוב (נדרשת תוכנית התמחור Blaze בתשלום לפי שימוש)
     במסוף תוכלו להגדיר את החיוב ולהפעיל את ממשקי ה-API הנדרשים בפרויקט.

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

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

שלב 3: מוסיפים את ה-SDK

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

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

   התכונה המשולבת פורסמה בתג npm אחר, לכן חשוב לכלול אותו בפקודת ההתקנה.

   npm install firebase@eap-ai-hybridinference
   

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: מאתחלים את השירות ויוצרים מודל

לפני ששולחים הנחיה למודל Gemini, צריך לאתחל את השירות של ספק ה-API שבחרתם וליצור מכונה של GenerativeModel.

מגדירים את mode לאחד מהערכים הבאים:

• prefer_on_device: מגדיר את ה-SDK כך שישתמש במודל במכשיר אם הוא זמין, או יעבור לשימוש במודל שמתארח בענן.

• only_on_device: מגדיר את ה-SDK להשתמש במודל במכשיר או להפעיל חריגה.

• only_in_cloud: מגדירה את ה-SDK כך שלא ישתמש אף פעם במודל במכשיר.

כברירת מחדל, כשמשתמשים ב-prefer_on_device או ב-only_in_cloud, המודל שמתארח בענן הוא gemini-2.0-flash-lite, אבל אפשר לשנות את ברירת המחדל.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend } 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 to use on-device model when possible
const model = getGenerativeModel(ai, { mode: "prefer_on_device" });

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

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

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

אם אתם רוצים ליצור פלט מובנה (כמו 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();

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

אפשר להשתמש ב-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();

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

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

שימוש במצבי היסק חלופיים

בדוגמאות שלמעלה השתמשנו במצב prefer_on_device כדי להגדיר את ה-SDK כך שישתמש במודל במכשיר אם הוא זמין, או יעבור לשימוש במודל שמתארח בענן. ב-SDK יש שני מצבי היסק חלופיים: only_on_device ו-only_in_cloud.

• משתמשים במצב only_on_device כדי ש-SDK יוכל להשתמש רק במודל במכשיר. בהגדרה הזו, ה-API יגרום לשגיאה אם מודל במכשיר לא יהיה זמין.

  const model = getGenerativeModel(ai, { mode: "only_on_device" });
  

• משתמשים במצב only_in_cloud כדי שה-SDK יוכל להשתמש רק במודל שמתארח בענן.

  const model = getGenerativeModel(ai, { mode: "only_in_cloud" });
  

שינוי של מודל ברירת המחדל החלופי

כשמשתמשים במצב prefer_on_device, ה-SDK יעבור לשימוש במודל שמתארח בענן אם המודל במכשיר לא זמין. מודל ברירת המחדל החלופי שמתארח בענן הוא gemini-2.0-flash-lite. המודל הזה שמתארח בענן הוא גם ברירת המחדל כשמשתמשים במצבonly_in_cloud.

אפשר להשתמש באפשרות התצורה inCloudParams כדי לציין מודל ברירת מחדל חלופי שמתארח בענן:

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.0-flash"
  }
});

כאן אפשר למצוא את שמות המודלים של כל המודלים הנתמכים של Gemini.

שימוש בתצורת המודל כדי לשלוט בתשובות

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

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

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

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

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.0-flash"
    temperature: 0.8,
    topK: 10
  }
});

הגדרת ההגדרות של מודל במכשיר

חשוב לזכור שההסקה באמצעות מודל במכשיר מתבצעת באמצעות Prompt API מ-Chrome.

משתמשים באפשרות onDeviceParams כדי להגדיר מודל במכשיר. מידע על הפרמטרים הזמינים

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  onDeviceParams: {
    createOptions: {
      temperature: 0.8,
      topK: 8
    }
  }
});

הגדרת ההגדרות לפלט מובנה

אפשר ליצור פלט מובנה (כמו JSON וממשקי enum) להסקה באמצעות מודלים שמתארחים בענן ומודלים במכשיר.

להסקה היברידית, משתמשים גם ב-inCloudParams וגם ב-onDeviceParams כדי להגדיר את המודל להגיב עם פלט מובנה. בשאר המצבים, צריך להשתמש רק בתצורה הרלוונטית.

• עבור inCloudParams: מציינים את responseMimeType המתאים (בדוגמאות האלה, application/json) ואת responseSchema שבו רוצים שהמודל ישתמש.

• עבור onDeviceParams: מציינים את responseConstraint שבו רוצים שהמודל ישתמש.

פלט JSON

הדוגמה הבאה היא עיבוד של הדוגמה הכללית לפלט JSON להסקה היברידית:

import {
  getAI,
  getGenerativeModel,
  Schema
} from "firebase/ai";

const jsonSchema = Schema.object({
 properties: {
    characters: Schema.array({
      items: Schema.object({
        properties: {
          name: Schema.string(),
          accessory: Schema.string(),
          age: Schema.number(),
          species: Schema.string(),
        },
        optionalProperties: ["accessory"],
      }),
    }),
  }
});

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.0-flash"
    generationConfig: {
      responseMimeType: "application/json",
      responseSchema: jsonSchema
    },
  }
  onDeviceParams: {
    promptOptions: {
      responseConstraint: jsonSchema
    }
  }
});

פלט של טיפוס בן מנייה (enum)

כמו למעלה, אבל מתאימים את המסמך בנושא פלט של enum להסקה היברידית:

// ...

const enumSchema = Schema.enumString({
  enum: ["drama", "comedy", "documentary"],
});

const model = getGenerativeModel(ai, {

// ...

    generationConfig: {
      responseMimeType: "text/x.enum",
      responseSchema: enumSchema
    },

// ...

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

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

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

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

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

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

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

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

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

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

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

• שידור דו-כיווני באמצעות Gemini Live API

  • שימו לב ש-SDK של לקוח Firebase AI Logic לא תומך בכך באינטרנט גם לגבי מודלים שמתארחים בענן.

• קריאה לפונקציה

  • בקרוב!

• ספירת אסימונים

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

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

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

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