Przewodnik po wnioskowaniu LLM dla witryn internetowych

Interfejs LLM Inference API umożliwia uruchamianie dużych modeli językowych (LLM) w całości na urządzeniu w przypadku aplikacji internetowych. Możesz go używać do wykonywania wielu różnych zadań, takich jak generowanie tekstu, wyszukiwanie informacji w formie języka naturalnego i podsumowywanie dokumentów. Zadanie ma wbudowaną obsługę wielu dużych modeli językowych typu tekst-tekst, dzięki czemu możesz stosować w aplikacjach internetowych najnowsze modele generatywnej AI na urządzeniu. Jeśli używasz najnowszych modeli Gemma-3n, obsługiwane są też dane wejściowe w postaci obrazów i dźwięku.

Aby szybko dodać interfejs LLM Inference API do aplikacji internetowej, postępuj zgodnie z instrukcjami w tym przewodniku. Podstawowy przykład aplikacji internetowej korzystającej z interfejsu LLM Inference API znajdziesz w przykładowej aplikacji. Szczegółowe informacje o działaniu interfejsu LLM Inference API znajdziesz w sekcjach opcje konfiguracji, konwersja modelu i dostrajanie LoRA.

Możesz zobaczyć to zadanie w działaniu w demonstracji MediaPipe Studio. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w tym artykule.

Krótkie wprowadzenie

Aby dodać interfejs LLM Inference API do aplikacji internetowej, wykonaj te czynności. Interfejs LLM Inference API wymaga przeglądarki internetowej zgodnej z WebGPU. Pełną listę zgodnych przeglądarek znajdziesz w sekcji Zgodność przeglądarek z GPU.

Dodawanie zależności

Interfejs LLM Inference API korzysta z pakietu @mediapipe/tasks-genai.

Zainstaluj wymagane pakiety na potrzeby lokalnego środowiska testowego:

npm install @mediapipe/tasks-genai

Aby wdrożyć kod na serwerze, użyj usługi sieci dostarczania treści (CDN), takiej jak jsDelivr, aby dodać kod bezpośrednio do strony HTML:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

Pobieranie modelu

Pobierz model Gemma-3n w wersji E4B lub E2B z HuggingFace. Modele z dopiskiem „-Web” w nazwie są konwertowane specjalnie do użytku w internecie, dlatego zalecamy, aby zawsze używać jednego z nich.

Więcej informacji o dostępnych modelach znajdziesz w dokumentacji modeli lub na naszej stronie społeczności HuggingFace, gdzie znajdziesz kilka dodatkowych wariantów Gemy 3, które nie są opisane w dokumentacji, ale zostały specjalnie przekonwertowane na potrzeby internetu, np. 270M, 4B, 12B, 27B i MedGemma-27B-Text.

Zapisz model w katalogu projektu:

<dev-project-root>/assets/gemma-3n-E4B-it-int4-Web.litertlm

Określ ścieżkę modelu za pomocą parametru baseOptions obiektu modelAssetPath:

baseOptions: { modelAssetPath: `/assets/gemma-3n-E4B-it-int4-Web.litertlm`}

Inicjowanie zadania

Zainicjuj zadanie za pomocą podstawowych opcji konfiguracji:

const genai = await FilesetResolver.forGenAiTasks(
    // path/to/wasm/root
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
);
llmInference = await LlmInference.createFromOptions(genai, {
    baseOptions: {
        modelAssetPath: '/assets/gemma-3n-E4B-it-int4-Web.litertlm'
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.8,
    randomSeed: 101
});

Uruchamianie zadania

Funkcji generateResponse() możesz używać do aktywowania wnioskowania.

const response = await llmInference.generateResponse(inputPrompt);
document.getElementById('output').textContent = response;

Aby przesyłać strumieniowo odpowiedź, użyj tego kodu:

llmInference.generateResponse(
  inputPrompt,
  (partialResult, done) => {
        document.getElementById('output').textContent += partialResult;
});

Multimodalne prompty

W przypadku modeli Gemma-3n interfejsy API LLM Inference API Web obsługują promptowanie multimodalne. Po włączeniu multimodalności użytkownicy mogą dodawać do promptów uporządkowaną kombinację obrazów, dźwięku i tekstu. Następnie LLM podaje odpowiedź tekstową.

Na początek użyj modelu Gemma-3n E4B lub Gemma-3n E2B w formacie zgodnym z MediaPipe i internetem. Więcej informacji znajdziesz w dokumentacji Gemma-3n.

Aby włączyć obsługę funkcji związanych z widzeniem, ustaw wartość maxNumImages na liczbę dodatnią. Określa to maksymalną liczbę fragmentów obrazu, które model LLM może przetworzyć w ramach jednego promptu.

Aby włączyć obsługę dźwięku, upewnij się, że supportAudio jest ustawione na true.

llmInference = await LlmInference.createFromOptions(genai, {
    baseOptions: {
        modelAssetPath: '/assets/gemma-3n-E4B-it-int4-Web.litertlm'
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.8,
    randomSeed: 101,
    maxNumImages: 5,
    supportAudio: true,
});

Odpowiedzi można teraz generować jak wcześniej, ale używając uporządkowanej tablicy ciągów znaków, obrazów i danych audio:

const response = await llmInference.generateResponse([
  '<ctrl99>user\nDescribe ',
  {imageSource: '/assets/test_image.png'},
  ' and then transcribe ',
  {audioSource: '/assets/test_audio.wav'},
  '<ctrl100>\n<ctrl99>model\n',
]);

W przypadku funkcji związanych z widzeniem obsługiwane są adresy URL obrazów oraz najpopularniejsze obiekty obrazów, filmów i płócien. W przypadku dźwięku obsługiwane są tylko jednokanałowe adresy URL plików AudioBuffer i jednokanałowych plików audio. Więcej informacji znajdziesz w kodzie źródłowym.

Przykładowa aplikacja

Przykładowa aplikacja to podstawowa aplikacja do generowania tekstu w internecie, która korzysta z interfejsu LLM Inference API. Możesz użyć tej aplikacji jako punktu wyjścia do utworzenia własnej aplikacji internetowej lub skorzystać z niej podczas modyfikowania istniejącej aplikacji. Przykładowy kod jest hostowany w GitHub.

Sklonuj repozytorium Git za pomocą tego polecenia:

git clone https://github.com/google-ai-edge/mediapipe-samples

Więcej informacji znajdziesz w przewodniku po konfiguracji.

Opcje konfiguracji

Aby skonfigurować aplikację internetową, użyj tych opcji konfiguracji:

Nazwa opcji Opis Zakres wartości Wartość domyślna
modelPath Ścieżka do miejsca, w którym model jest przechowywany w katalogu projektu. PATH Nie dotyczy
maxTokens Maksymalna liczba tokenów (tokenów wejściowych i wyjściowych), które obsługuje model. Liczba całkowita 512
topK Liczba tokenów, które model bierze pod uwagę na każdym etapie generowania. Ogranicza prognozy do k najbardziej prawdopodobnych tokenów. Liczba całkowita 40
temperature Wielkość losowości wprowadzanej podczas generowania. Wyższa temperatura zapewnia większą kreatywność generowanego tekstu, a niższa – bardziej przewidywalne generowanie. Liczba zmiennoprzecinkowa 0,8
randomSeed Losowy seed użyty podczas generowania tekstu. Liczba całkowita 0
loraRanks Rangi LoRA, które będą używane przez modele LoRA w czasie działania. Uwaga: ta opcja jest zgodna tylko z modelami GPU. Tablica liczb całkowitych Nie dotyczy

Konwersja modelu

Interfejs LLM Inference API jest zgodny z tymi typami modeli, z których niektóre wymagają konwersji. W tabeli znajdziesz wymagane kroki i metody dla Twojego modelu.

Modele Metoda konwersji Zgodne platformy Typ pliku
Gemma-3 1B Nie wymaga konwersji Android, internet .task
Gemma 2B, Gemma 7B, Gemma-2 2B Nie wymaga konwersji Android, iOS, internet .bin
Phi-2, StableLM, Falcon Skrypt konwersji MediaPipe Android, iOS, internet .bin
Wszystkie modele LLM PyTorch Biblioteka generatywna AI Edge Torch Android, iOS .task

Więcej informacji o tym, jak przekonwertować inne modele, znajdziesz w sekcji Konwersja modelu.

Dostosowywanie LoRA

Interfejs LLM Inference API obsługuje dostrajanie LoRA (Low-Rank Adaptation) za pomocą biblioteki PEFT (Parameter-Efficient Fine-Tuning). Dostrajanie LoRA dostosowuje działanie dużych modeli językowych za pomocą ekonomicznego procesu trenowania, który tworzy mały zestaw wag podlegających trenowaniu na podstawie nowych danych treningowych, zamiast ponownie trenować cały model.

Interfejs LLM Inference API obsługuje dodawanie wag LoRA do warstw uwagi modeli Gemma-2 2B, Gemma 2B i Phi-2. Pobierz model w formacie safetensors.

Aby utworzyć wagi LoRA, model podstawowy musi być w formacie safetensors. Po wytrenowaniu modelu LoRA możesz przekonwertować go do formatu FlatBuffers, aby uruchomić go w MediaPipe.

Przygotowywanie wag LoRA

Skorzystaj z przewodnika LoRA Methods z biblioteki PEFT, aby wytrenować dostrojony model LoRA na własnym zbiorze danych.

Interfejs LLM Inference API obsługuje LoRA tylko w przypadku warstw uwagi, więc w polu LoraConfig należy określić tylko warstwy uwagi:

# For Gemma
from peft import LoraConfig
config = LoraConfig(
    r=LORA_RANK,
    target_modules=["q_proj", "v_proj", "k_proj", "o_proj"],
)

# For Phi-2
config = LoraConfig(
    r=LORA_RANK,
    target_modules=["q_proj", "v_proj", "k_proj", "dense"],
)

Po wytrenowaniu modelu na przygotowanym zbiorze danych i zapisaniu modelu dostrojone wagi modelu LoRA są dostępne w adapter_model.safetensors. Plik safetensors to punkt kontrolny LoRA używany podczas konwersji modelu.

Konwersja modelu

Użyj pakietu MediaPipe Python, aby przekonwertować wagi modelu na format Flatbuffer. Symbol ConversionConfig określa opcje modelu podstawowego wraz z dodatkowymi opcjami LoRA.

import mediapipe as mp
from mediapipe.tasks.python.genai import converter

config = converter.ConversionConfig(
  # Other params related to base model
  ...
  # Must use gpu backend for LoRA conversion
  backend='gpu',
  # LoRA related params
  lora_ckpt=LORA_CKPT,
  lora_rank=LORA_RANK,
  lora_output_tflite_file=LORA_OUTPUT_FILE,
)

converter.convert_checkpoint(config)

Konwerter utworzy 2 pliki zgodne z MediaPipe: jeden dla modelu podstawowego, a drugi dla modelu LoRA.

Wnioskowanie modelu LoRA

W przypadku internetu dynamiczne LoRA są obsługiwane w czasie działania, co oznacza, że użytkownicy deklarują rangi LoRA podczas inicjowania. Oznacza to, że w czasie działania możesz zamieniać różne modele LoRA.

const genai = await FilesetResolver.forGenAiTasks(
    // path/to/wasm/root
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
);
const llmInference = await LlmInference.createFromOptions(genai, {
    // options for the base model
    ...
    // LoRA ranks to be used by the LoRA models during runtime
    loraRanks: [4, 8, 16]
});

Modele LoRA są wczytywane w czasie działania po zainicjowaniu modelu podstawowego. Wywołaj model LoRA, przekazując odwołanie do modelu podczas generowania odpowiedzi LLM.

// Load several LoRA models. The returned LoRA model reference is used to specify
// which LoRA model to be used for inference.
loraModelRank4 = await llmInference.loadLoraModel(loraModelRank4Url);
loraModelRank8 = await llmInference.loadLoraModel(loraModelRank8Url);

// Specify LoRA model to be used during inference
llmInference.generateResponse(
  inputPrompt,
  loraModelRank4,
  (partialResult, done) => {
        document.getElementById('output').textContent += partialResult;
});