Tworzenie hybrydowych funkcji w aplikacjach internetowych za pomocą modeli na urządzeniu i w chmurze

Twórz aplikacje i funkcje internetowe oparte na AI z wykorzystaniem wnioskowania hybrydowego za pomocą Firebase AI Logic. Wnioskowanie hybrydowe umożliwia uruchamianie wnioskowania przy użyciu modeli na urządzeniu, gdy są one dostępne, i bezproblemowe przełączanie się na modele hostowane w chmurze w innych przypadkach (i odwrotnie).

Na tej stronie dowiesz się, jak zacząć korzystać z pakietu SDK klienta. Po zakończeniu tej standardowej konfiguracji zapoznaj się z dodatkowymi opcjami i możliwościami konfiguracji (np. danymi wyjściowymi w formacie strukturalnym).

Pamiętaj, że wnioskowanie na urządzeniu jest obsługiwane w przypadku aplikacji internetowych działających w Chrome na komputerze.

Przejdź do przykładów kodu

Zalecane przypadki użycia i obsługiwane funkcje

Zalecane przypadki użycia:

• Korzystanie z modelu na urządzeniu do wnioskowania:

  • Zwiększona prywatność
  • Kontekst lokalny
  • Wnioskowanie bez opłat
  • Funkcje offline

• Korzystanie z ofert funkcji hybrydowych:

  • Docieranie do 100% odbiorców niezależnie od dostępności modelu na urządzeniu lub połączenia z internetem

Obsługiwane funkcje wnioskowania na urządzeniu:

Wnioskowanie na urządzeniu obsługuje tylko generowanie tekstu w jednej turze (nie czat) z wyjściem strumieniowym lub niestrumieniowym. Obsługuje te funkcje generowania tekstu:

• Generowanie tekstu na podstawie danych wejściowych zawierających tylko tekst

• Generowanie tekstu na podstawie danych wejściowych w postaci tekstu i obrazu, w szczególności typów obrazów wejściowych JPEG i PNG.

Możesz też generować dane wyjściowe w formacie uporządkowanym, w tym JSON i wyliczenia.

Zanim zaczniesz

Pamiętaj o tych kwestiach:

• Wnioskowanie z użyciem modelu na urządzeniu korzysta z interfejsu Prompt API z Chrome, natomiast wnioskowanie z użyciem modelu hostowanego w chmurze korzysta z wybranego przez Ciebie dostawcy Gemini API (Gemini Developer API lub Vertex AI Gemini API).

• Na tej stronie dowiesz się, jak rozpocząć tworzenie aplikacji przy użyciu hosta lokalnego (więcej informacji o korzystaniu z interfejsów API na hoście lokalnym znajdziesz w dokumentacji Chrome).

  Po zakończeniu tej standardowej konfiguracji zapoznaj się z dodatkowymi opcjami i możliwościami konfiguracji (np. z danymi wyjściowymi w formacie strukturalnym).

• Po zaimplementowaniu funkcji możesz umożliwić użytkownikom wypróbowanie jej w rzeczywistej aplikacji.

Pierwsze kroki na serwerze lokalnym

Te kroki wprowadzające opisują ogólną konfigurację wymaganą w przypadku każdego obsługiwanego żądania prompta, które chcesz wysłać.

Krok 1. Skonfiguruj Chrome i interfejs Prompt API do wnioskowania na urządzeniu

1. Upewnij się, że używasz najnowszej wersji Chrome. Aktualizacja w chrome://settings/help.
   Wnioskowanie na urządzeniu jest dostępne w Chrome w wersji 139 lub nowszej.

2. Włącz model multimodalny na urządzeniu, ustawiając ten flagę na Włączone:

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

3. Uruchom ponownie Chrome.

4. (Opcjonalnie) Pobierz model na urządzenie przed pierwszą prośbą.

   Interfejs Prompt API jest wbudowany w Chrome, ale model na urządzeniu nie jest domyślnie dostępny. Jeśli nie pobierzesz modelu przed pierwszym żądaniem wnioskowania na urządzeniu, żądanie automatycznie rozpocznie pobieranie modelu w tle.

   Wyświetlanie instrukcji pobierania modelu na urządzenie

   1. Otwórz Narzędzia dla deweloperów > Konsola.

   2. Wykonaj zapytanie:

      await LanguageModel.availability();
      

   3. Sprawdź, czy wynik to available, downloading lub downloadable.

   4. Jeśli wynik to downloadable, rozpocznij pobieranie modelu, uruchamiając to polecenie:

      await LanguageModel.create();
      

   5. Aby nasłuchiwać postępu pobierania i upewnić się, że model jest available przed wysłaniem żądań, możesz użyć tego wywołania zwrotnego monitor:

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

Krok 2. Skonfiguruj projekt w Firebase i połącz aplikację z Firebase

1. Zaloguj się w Firebasekonsoli, a potem wybierz projekt w Firebase.

   Nie masz jeszcze projektu w Firebase?

   Jeśli nie masz jeszcze projektu Firebase, kliknij przycisk, aby utworzyć nowy projekt Firebase, a następnie skorzystaj z jednej z tych opcji:

   • Opcja 1: utwórz całkowicie nowy projekt w Firebase (i powiązany z nim projektGoogle Cloud automatycznie), wpisując nową nazwę projektu w pierwszym kroku procesu.

   • Opcja 2: „Dodaj Firebase” do istniejącego projektu Google Cloud, klikając Dodaj Firebase do projektu Google Cloud (u dołu strony). W pierwszym kroku zacznij wpisywać nazwę projektu istniejącego projektu, a następnie wybierz projekt z wyświetlonej listy.

   Aby utworzyć projekt Firebase, wykonaj pozostałe kroki w procesie wyświetlanym na ekranie. Pamiętaj, że po wyświetleniu odpowiedniego komunikatu nie musisz konfigurować usługi Google Analytics, aby korzystać z pakietów SDK Firebase AI Logic.

2. W konsoli Firebase otwórz Usługi AI > Logika AI.

3. Kliknij Rozpocznij, aby uruchomić przepływ pracy z instrukcjami, który pomoże Ci skonfigurować wymagane interfejsy API i zasoby w projekcie.

4. Jeśli pojawi się monit, postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zarejestrować aplikację i dodać do niej konfigurację Firebase.

5. Gdy pojawi się prośba o wybranie „dostawcy Gemini API”, zalecamy wybranie Gemini Developer API, które umożliwia szybkie rozpoczęcie pracy bezpłatnie.

   W dowolnym momencie możesz później skonfigurować Vertex AI Gemini API (i jego wymagania dotyczące płatności).

6. Kontynuuj proces, aby skonfigurować wymagane interfejsy API i powiązane usługi dla Firebase AI Logic.

   Na początku lipca 2026 roku ten etap przepływu pracy automatycznie wymusi Firebase App Check w przypadku AI Logic, co jest kluczową usługą pomagającą chronić Gemini API, gdy jest ona bezpośrednio dostępna z Twojej aplikacji. Aby rozpocząć (patrz kroki w dalszej części tego przewodnika), musisz skonfigurować App Check dostawcę debugowania na potrzeby lokalnego programowania, gdy App Check jest wymuszane.

7. Przejdź do kolejnego kroku tego przewodnika, aby dodać wymagane pakiety SDK do aplikacji.

Krok 3. Dodaj pakiet SDK

Biblioteka Firebase zapewnia dostęp do interfejsów API do korzystania z modeli generatywnych. Biblioteka jest częścią pakietu Firebase JavaScript SDK na potrzeby internetu.

1. Zainstaluj pakiet Firebase JS SDK na potrzeby internetu za pomocą npm:

   npm install firebase
   

2. Zainicjuj Firebase w aplikacji:

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

Krok 4. Zainicjuj usługę i utwórz instancję modelu

Zanim wyślesz do modelu żądanie prompta, skonfiguruj te elementy:

1. Zainicjuj usługę dla wybranego dostawcy interfejsu API.

2. Utwórz instancję GenerativeModel. Ustaw wartość mode na jedną z tych opcji:

   • PREFER_ON_DEVICE: używaj modelu na urządzeniu, jeśli jest dostępny; w przeciwnym razie wróć do modelu hostowanego w chmurze.

   • ONLY_ON_DEVICE: użyj modelu na urządzeniu, jeśli jest dostępny; w przeciwnym razie zgłoś wyjątek.

   • PREFER_IN_CLOUD: używaj modelu hostowanego w chmurze, jeśli jest dostępny; w przeciwnym razie wróć do modelu na urządzeniu.

   • ONLY_IN_CLOUD: użyj modelu hostowanego w chmurze, jeśli jest dostępny; w przeciwnym razie zgłoś wyjątek.

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

Krok 5. Zainicjuj model na urządzeniu.

Funkcję initializeDeviceModel() musisz wywołać po lub w trakcie interakcji użytkownika ze stroną (np. kliknięcia przycisku) i przed wysłaniem do modelu żądania prompta. Więcej informacji o wymaganiu aktywacji użytkownika znajdziesz w dokumentacji 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}%`)
);

Krok 6. Wyślij do modelu prośbę w formie prompta

W tej sekcji dowiesz się, jak wysyłać różne typy danych wejściowych, aby generować różne typy danych wyjściowych, w tym:

• Generowanie tekstu na podstawie danych wejściowych zawierających tylko tekst
• Generowanie tekstu na podstawie danych wejściowych w postaci tekstu i obrazu (multimodalnych)

Jeśli chcesz generować dane wyjściowe o strukturze (np. JSON lub wyliczenia), użyj jednego z tych przykładów „generowania tekstu” i dodatkowo skonfiguruj model tak, aby odpowiadał zgodnie z podanym schematem.

Generowanie tekstu na podstawie danych wejściowych zawierających tylko tekst

Możesz użyć generateContent() do wygenerowania tekstu na podstawie prompta zawierającego tekst:

// 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();

Pamiętaj, że Firebase AI Logic obsługuje też strumieniowanie odpowiedzi tekstowych za pomocą generateContentStream (zamiast generateContent).

Generowanie tekstu na podstawie danych wejściowych w postaci tekstu i obrazu (multimodalnych)

Możesz użyć generateContent() do wygenerowania tekstu na podstawie prompta zawierającego pliki tekstowe i pliki obrazów – podaj mimeType każdego pliku wejściowego i sam plik.

W przypadku wnioskowania na urządzeniu obsługiwane typy obrazów wejściowych to PNG i 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();

Pamiętaj, że Firebase AI Logic obsługuje też strumieniowanie odpowiedzi tekstowych za pomocą generateContentStream (zamiast generateContent).

Umożliwianie użytkownikom wypróbowania funkcji

Aby użytkownicy mogli wypróbować Twoją funkcję w aplikacji, musisz zarejestrować się w programie Chrome Origin Trials. Pamiętaj, że okres próbny jest ograniczony czasowo i pod względem wykorzystania.

1. Zarejestruj się w testowaniu origin interfejsu Prompt API w Chrome. Otrzymasz token.

2. Podaj token na każdej stronie internetowej, na której chcesz włączyć funkcję próbną. Użyj jednej z tych opcji:

   • Podaj token jako metatag w tagu <head>:<meta http-equiv="origin-trial" content="TOKEN">

   • Podaj token jako nagłówek HTTP:Origin-Trial: TOKEN

   • Podaj token automatycznie.

Co jeszcze możesz zrobić?

W przypadku środowisk hybrydowych możesz korzystać z różnych dodatkowych opcji konfiguracji i funkcji:

• Ustawianie trybu wnioskowania

• Zastępowanie domyślnego modelu rezerwowego hostowanego w chmurze

• Używanie konfiguracji modelu do kontrolowania odpowiedzi (np. temperatury)

• Generowanie danych wyjściowych w formacie strukturalnym (np. JSON)

Funkcje niedostępne jeszcze w przypadku wnioskowania na urządzeniu

W wersji testowej nie wszystkie funkcje pakietu SDK na komputery są dostępne w przypadku wnioskowania na urządzeniu. Poniższe funkcje nie są jeszcze obsługiwane w przypadku wnioskowania na urządzeniu (ale zwykle są dostępne w przypadku wnioskowania w chmurze).

• Generowanie tekstu z plików graficznych w formatach innych niż JPEG i PNG

  • Może przełączyć się na model hostowany w chmurze, ale w trybie ONLY_ON_DEVICE wystąpi błąd.

• Generowanie tekstu na podstawie danych wejściowych audio, wideo i dokumentów (np. plików PDF)

  • Może przełączyć się na model hostowany w chmurze, ale w trybie ONLY_ON_DEVICE wystąpi błąd.

• Generowanie obrazów za pomocą modeli Gemini lub Imagen

  • Może przełączyć się na model hostowany w chmurze, ale w trybie ONLY_ON_DEVICE wystąpi błąd.

• Przesyłanie plików za pomocą adresów URL w żądaniach multimodalnych. Pliki musisz podać jako dane wbudowane w modelach na urządzeniu.

• Czat wieloetapowy

  • Może przełączyć się na model hostowany w chmurze, ale w trybie ONLY_ON_DEVICE wystąpi błąd.

• Dwukierunkowe strumieniowanie za pomocą Gemini Live API

• Udostępnianie modelowi narzędzi, które pomogą mu generować odpowiedzi (takich jak wywoływanie funkcji, wykonywanie kodu, kontekst adresu URL, Grounding z Google Search i Grounding z Google Maps).

• Liczba tokenów

  • Zawsze zgłasza błąd. Liczba będzie się różnić w przypadku modeli hostowanych w chmurze i modeli na urządzeniu, więc nie ma intuicyjnego rozwiązania rezerwowego.

• Monitorowanie wykorzystania AI w konsoli Firebase na potrzeby wnioskowania na urządzeniu.

  • Pamiętaj, że każde wnioskowanie z użyciem modeli hostowanych w chmurze można monitorować tak samo jak inne wnioskowania z użyciem Firebase AI Logicpakietu SDK klienta na potrzeby internetu.

Prześlij opinię o korzystaniu z usługi Firebase AI Logic