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

Twórz aplikacje internetowe i funkcje 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 (np. z 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 zapewnia:

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

• Korzystanie z ofert z funkcją hybrydową:

  • Docieranie do 100% odbiorców niezależnie od dostępności modelu urządzenia czy 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 przesyłaniem strumieniowym lub bez niego. 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 o strukturze, w tym JSON i wyliczenia.

Zanim zaczniesz

Zwróć uwagę na te kwestie:

• Wnioskowanie z użyciem modelu na urządzeniu korzysta z interfejsu Prompt API w 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 prawdziwej aplikacji.

Pierwsze kroki na serwerze lokalnym

Te instrukcje 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. Zaktualizuj 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 tę 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 przed pierwszym żądaniem wnioskowania na urządzeniu nie pobierzesz jeszcze modelu, żą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 dane wyjściowe to available, downloading lub downloadable.

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

      await LanguageModel.create();
      

   5. Możesz użyć tego wywołania zwrotnego monitor, aby nasłuchiwać postępu pobierania i upewnić się, że model jest available, zanim wyślesz żądania:

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

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

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

   Nie masz jeszcze projektu Firebase?

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

   • Opcja 1. Utwórz całkowicie nowy projekt 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 procesu zacznij wpisywać nazwę projektu istniejącego projektu, a następnie wybierz projekt z wyświetlonej listy.

   Wykonaj pozostałe kroki procesu wyświetlanego na ekranie, aby utworzyć projekt Firebase. 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 stronę Firebase AI Logic.

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

4. Skonfiguruj projekt, aby korzystać z dostawcy „Gemini API”.

   Zalecamy rozpoczęcie od Gemini Developer API. W każdej chwili możesz skonfigurować Vertex AI Gemini API (i jego wymagania dotyczące płatności).

   W przypadku Gemini Developer API konsola włączy wymagane interfejsy API i utworzy w Twoim projekcie klucz interfejsu API Gemini.
   Nie dodawaj tego klucza interfejsu API Gemini do kodu aplikacji. Więcej informacji

5. Jeśli w procesie w konsoli pojawi się odpowiedni monit, postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zarejestrować aplikację i połączyć ją z Firebase.

6. Aby dodać pakiet SDK do aplikacji, przejdź do następnego kroku w tym przewodniku.

Krok 3. Dodaj pakiet SDK

Biblioteka Firebase zapewnia dostęp do interfejsów API do interakcji z modelami generatywnymi. Biblioteka jest częścią pakietu Firebase JavaScript SDK for Web.

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. Pamiętaj, aby wykonać te czynności:

   1. Wywołuj funkcję getGenerativeModel po interakcji użytkownika (np. kliknięciu przycisku). Jest to warunek wstępny dla inferenceMode.

   2. 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
// 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 });

Krok 5. Wyślij do modelu prośbę (prompt)

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 określonej 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. W tym celu podaj 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 {
    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 ma ograniczony czas trwania i zakres 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 Web SDK są dostępne w przypadku 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 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 przesyłanie strumieniowe 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 i weryfikacja w wyszukiwarce Google).

• Liczba tokenów

  • Zawsze zwraca 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 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