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 przeprowadzanie wnioskowania przy użyciu modeli na urządzeniu, gdy są dostępne, i płynne przełączanie się na modele hostowane w chmurze, gdy nie są dostępne (i odwrotnie).

Na tej stronie dowiesz się, jak zacząć korzystać z pakietu SDK klienta. Po zakończeniu standardowej konfiguracji zapoznaj się z dodatkowymi opcjami i możliwościami konfiguracji (takimi jak ustrukturyzowane dane wyjściowe).

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 zapewnia:

    • Zwiększona prywatność
    • Kontekst lokalny
    • Bezpłatne wnioskowanie
    • Funkcje offline

  • Korzystanie z funkcji hybrydowych zapewnia:

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

Obsługiwane funkcje i możliwości 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:

Możesz też generować uporządkowane dane wyjściowe, w tym dane w formacie JSON i typy wyliczeniowe.

Zanim zaczniesz

Zwróć uwagę na te kwestie:

Pierwsze kroki z localhost

Te kroki opisują wymaganą ogólną konfigurację dla każdego obsługiwanego żądania promptu, które chcesz wysłać.

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

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

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

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

  3. Uruchom ponownie Chrome.

  4. (Opcjonalnie) Pobierz model na urządzeniu przed pierwszym żądaniem.

    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.

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

  1. Zaloguj się w konsoli Firebase i wybierz projekt w Firebase.

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

  3. Kliknij Rozpocznij, aby uruchomić proces, który pomoże Ci skonfigurować wymagane interfejsy API i zasoby w projekcie.

  4. Jeśli pojawi się taka prośba, 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 interfejsu Gemini API”, zalecamy wybranie Gemini Developer API, który umożliwia szybkie rozpoczęcie korzystania z usługi bez opłat.

    W każdej chwili możesz skonfigurować Agent Platform Gemini API (formerly Vertex AI) (i wymagane płatności).

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

    Ten etap przepływu pracy automatycznie egzekwuje Firebase App Check dla AI Logic, czyli krytycznej usługi, która pomaga chronić Gemini API, gdy jest on bezpośrednio dostępny z Twojej aplikacji. W ramach rozpoczęcia (patrz kroki w dalszej części tego przewodnika) musisz skonfigurować dostawcę debugowania App Check na potrzeby lokalnego programowania, gdy App Check jest egzekwowany.

  7. Przejdź do kolejnego kroku w tym przewodniku, aby dodać do aplikacji wymagane pakiety SDK.

Krok 3. Dodaj pakiet SDK

Biblioteka Firebase zapewnia dostęp do interfejsów API umożliwiających interakcję z modelami generatywnymi. Biblioteka jest częścią pakietu Firebase JavaScript SDK dla aplikacji internetowych.

  1. Zainstaluj pakiet Firebase JS SDK dla aplikacji internetowych za pomocą npm:

    npm install firebase

  2. Zainicjuj Firebase w aplikacji:

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

Krok 4. Skonfiguruj dostawcę debugowania App Check na potrzeby programowania lokalnego

W ramach procesu konfiguracji z przewodnikiem dla AI Logic w konsoli Firebase App Check jest automatycznie wymuszane, aby chronić Gemini API. W przypadku programowania lokalnego musisz skonfigurować App Check dostawcę debugowania, aby pominąć atestację, zachowując jednocześnie wymuszanie App Check.

Aby używać dostawcy debugowania podczas interaktywnego uruchamiania aplikacji z localhost (np. podczas programowania lokalnego):

  1. W kompilacji do debugowania włącz tryb debugowania, ustawiając self.FIREBASE_APPCHECK_DEBUG_TOKEN na true przed zainicjowaniem App Check. Przykład:

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

  2. Otwórz aplikację internetową lokalnie i uruchom narzędzia dla programistów w przeglądarce. W konsoli debugowania zobaczysz token debugowania:

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

  3. Zarejestruj token debugowania w App Check:

    1. W konsoli Firebase otwórz kartę Zabezpieczenia > Sprawdzanie aplikacji > Aplikacje.

    2. Znajdź aplikację, kliknij rozszerzone menu (), a następnie wybierz Zarządzaj tokenami debugowania.

    3. Aby zarejestrować token debugowania, postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

Szczegółowe informacje o dostawcy debugowania (w tym o tym, jak uzyskać nowy token debugowania) znajdziesz w oficjalnej dokumentacji App Check.

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

Kliknij dostawcę Gemini API, aby wyświetlić na tej stronie treści i kod dotyczące tego dostawcy.

Zanim wyślesz do modelu prompt, skonfiguruj te elementy:

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

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

    • PREFER_ON_DEVICE: używaj modelu na urządzeniu, jeśli jest dostępny. W przeciwnym razie użyj modelu hostowanego w chmurze.

    • ONLY_ON_DEVICE: użyj modelu na urządzeniu, jeśli jest dostępny. W przeciwnym razie wygeneruj 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 6. Zainicjuj model na urządzeniu

Funkcję initializeDeviceModel() musisz wywołać po interakcji użytkownika ze stroną (np. kliknięciu przycisku) lub w jej trakcie, ale przed wysłaniem prompta do modelu. 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 7. Wyślij do modelu żądanie promptu

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

Jeśli chcesz wygenerować uporządkowane dane wyjściowe (np. JSON lub typy wyliczeniowe), użyj jednego z poniższych 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

Zanim wypróbujesz ten przykład, zapoznaj się z sekcją Pierwsze kroki w tym przewodniku.

Możesz użyć generateContent(), aby wygenerować tekst 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ż strumieniowe przesyłanie odpowiedzi tekstowych za pomocą generateContentStream (zamiast generateContent).

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

Zanim wypróbujesz ten przykład, zapoznaj się z sekcją Pierwsze kroki w tym przewodniku.

Możesz użyć generateContent(), aby wygenerować tekst z prompta zawierającego pliki tekstowe i graficzne, podając mimeType każdego pliku wejściowego i sam plik.

Obsługiwane typy obrazów wejściowych do wnioskowania na urządzeniu 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 {
    type: "inlineData",
    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ż strumieniowe przesyłanie odpowiedzi tekstowych za pomocą generateContentStream (zamiast generateContent).

Co jeszcze możesz zrobić?

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

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

Nie wszystkie funkcje pakietu Web SDK są dostępne do wnioskowania na urządzeniu. Te funkcje nie są jeszcze obsługiwane w przypadku wnioskowania na urządzeniu (ale zwykle są dostępne w przypadku wnioskowania działającego w chmurze).

  • generowanie tekstu z plików graficznych innych niż JPEG i PNG;

    • Można przełączyć się na model hostowany w chmurze, ale tryb ONLY_ON_DEVICE zwróci błąd.

  • generowanie tekstu na podstawie danych wejściowych w postaci dźwięku, obrazu i dokumentów (np. plików PDF);

    • Można użyć modelu hostowanego w chmurze, ale tryb ONLY_ON_DEVICE zwróci błąd.

  • Generowanie obrazów za pomocą modeli Gemini Nano Banana

    • Można użyć modelu hostowanego w chmurze, ale tryb ONLY_ON_DEVICE zwróci błąd.

  • podawanie plików za pomocą adresów URL w żądaniach multimodalnych; Pliki musisz przekazywać do modeli na urządzeniu jako dane wbudowane.

  • Czat wieloetapowy

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

  • Dwukierunkowe przesyłanie strumieniowe za pomocą Gemini Live API

  • udostępnianie modelowi narzędzi, które pomogą mu wygenerować odpowiedź (np. wywoływanie funkcji, wykonywanie kodu, kontekst adresu URL, grounding za pomocą Google Search i grounding za pomocą Google Maps);

  • Zliczanie tokenów

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

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

    • Pamiętaj, że każde wnioskowanie przy użyciu modeli hostowanych w chmurze można monitorować tak samo jak inne wnioskowanie przy użyciu pakietu SDK klienta Firebase AI Logic dla sieci.


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