Ti presentiamo Google AI Edge Portal: esegui il benchmarking dell'IA di Edge su larga scala. Registrati per richiedere l'accesso durante l'anteprima privata.

Questa pagina è stata tradotta dall'API Cloud Translation.

Guida all'inferenza LLM per il web

L'API LLM Inference consente di eseguire modelli linguistici di grandi dimensioni (LLM) completamente sul dispositivo per le applicazioni web, che puoi utilizzare per eseguire un'ampia gamma di attività, ad esempio generare testo, recuperare informazioni in linguaggio naturale e riassumere documenti. L'attività fornisce supporto integrato per più modelli linguistici di grandi dimensioni text-to-text, in modo da poter applicare i più recenti modelli di AI generativa on-device alle tue app web. Se utilizzi gli ultimi modelli Gemma-3n, sono supportati anche gli input di immagini e audio.

Per aggiungere rapidamente l'API LLM Inference alla tua applicazione web, segui la Guida rapida. Per un esempio di base di un'applicazione web che esegue l'API LLM Inference, consulta l'applicazione di esempio. Per una comprensione più approfondita del funzionamento dell'API LLM Inference, consulta le sezioni Opzioni di configurazione, Conversione del modello e Ottimizzazione LoRA.

Puoi vedere questa attività in azione nella demo di MediaPipe Studio. Per saperne di più sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la panoramica.

Guida rapida

Segui questi passaggi per aggiungere l'API LLM Inference alla tua applicazione web. L'API LLM Inference richiede un browser web compatibile con WebGPU. Per un elenco completo dei browser compatibili, consulta la sezione Compatibilità del browser con la GPU.

Aggiungi dipendenze

L'API LLM Inference utilizza il pacchetto @mediapipe/tasks-genai.

Installa i pacchetti richiesti per lo staging locale:

npm install @mediapipe/tasks-genai

Per il deployment su un server, utilizza un servizio di rete CDN (Content Delivery Network) come jsDelivr per aggiungere codice direttamente alla pagina HTML:

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

Scaricare un modello

Scarica Gemma-3n E4B o E2B da HuggingFace. I modelli con "-Web" nel nome vengono convertiti appositamente per l'utilizzo web, pertanto è consigliabile utilizzarne sempre uno.

Per ulteriori informazioni sui modelli disponibili, consulta la documentazione sui modelli o sfoglia la nostra pagina della community di Hugging Face, che offre diverse varianti aggiuntive di Gemma 3 non trattate nella documentazione, ma che sono state convertite appositamente per il web, come 270M, 4B, 12B, 27B e MedGemma-27B-Text.

Archivia il modello nella directory del progetto:

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

Specifica il percorso del modello con il parametro baseOptions dell'oggetto modelAssetPath:

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

Inizializza l'attività

Inizializza l'attività con le opzioni di configurazione di base:

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

Esegui l'attività

Utilizza la funzione generateResponse() per attivare le inferenze.

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

Per trasmettere in streaming la risposta, utilizza quanto segue:

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

Prompt multimodali

Per i modelli Gemma-3n, le API web dell'API LLM Inference supportano i prompt multimodali. Con la multimodalità attivata, gli utenti possono includere una combinazione ordinata di immagini, audio e testo nei prompt. L'LLM fornisce quindi una risposta testuale.

Per iniziare, utilizza Gemma-3n E4B o Gemma-3n E2B, in formato compatibile con MediaPipe e il web. Per ulteriori informazioni, consulta la documentazione di Gemma-3n.

Per attivare il supporto per la vista, assicurati che maxNumImages sia impostato su un valore positivo. Questo determina il numero massimo di parti di immagini che l'LLM può elaborare in un singolo prompt.

Per attivare il supporto audio, assicurati che supportAudio sia impostato su 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,
});

Ora le risposte possono essere generate come prima, ma utilizzando un array ordinato di stringhe, immagini e dati 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',
]);

Per la visione, sono supportati gli URL delle immagini e gli oggetti immagine, video o canvas più comuni. Per l'audio, sono supportati solo AudioBuffer a un solo canale e URL di file audio mono canale. Per ulteriori dettagli, consulta il codice sorgente.

Applicazione di esempio

L'applicazione di esempio è un esempio di app di generazione di testo di base per il web, che utilizza l'API LLM Inference. Puoi utilizzare l'app come punto di partenza per la tua app web o farvi riferimento quando modifichi un'app esistente. Il codice di esempio è ospitato su GitHub.

Clona il repository Git utilizzando il seguente comando:

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

Per ulteriori informazioni, consulta la guida alla configurazione per il web.

Opzioni di configurazione

Utilizza le seguenti opzioni di configurazione per configurare un'app web:

Nome opzione	Descrizione	Intervallo di valori	Valore predefinito
`modelPath`	Il percorso in cui è memorizzato il modello all'interno della directory del progetto.	PERCORSO	N/D
`maxTokens`	Il numero massimo di token (token di input + token di output) gestiti dal modello.	Numero intero	512
`topK`	Il numero di token che il modello prende in considerazione a ogni passaggio della generazione. Limita le previsioni ai primi k token più probabili.	Numero intero	40
`temperature`	Il grado di casualità introdotto durante la generazione. Una temperatura più alta genera un testo più creativo, mentre una temperatura più bassa produce una generazione più prevedibile.	Float	0,8
`randomSeed`	Il seme casuale utilizzato durante la generazione del testo.	Numero intero	0
`loraRanks`	I ranghi LoRA da utilizzare dai modelli LoRA durante l'esecuzione. Nota: questa opzione è compatibile solo con i modelli di GPU.	Array di numeri interi	N/D

Conversione del modello

L'API LLM Inference è compatibile con i seguenti tipi di modelli, alcuni dei quali richiedono la conversione del modello. Utilizza la tabella per identificare i passaggi del metodo richiesti per il tuo modello.

Modelli	Metodo di conversione	Piattaforme compatibili	Tipo di file
Gemma-3 1B	Nessuna conversione richiesta	Android, web	.task
Gemma 2B, Gemma 7B, Gemma-2 2B	Nessuna conversione richiesta	Android, iOS, web	.bin
Phi-2, StableLM, Falcon	Script di conversione MediaPipe	Android, iOS, web	.bin
Tutti i modelli LLM PyTorch	Libreria AI Edge Torch Generative	Android, iOS	.task

Per scoprire come convertire altri modelli, consulta la sezione Conversione modelli.

Personalizzazione LoRA

L'API LLM Inference supporta l'ottimizzazione LoRA (Low-Rank Adaptation) utilizzando la libreria PEFT (Parameter-Efficient Fine-Tuning). La messa a punto LoRA personalizza il comportamento degli LLM tramite un processo di addestramento conveniente, creando un piccolo insieme di pesi addestrabili basati su nuovi dati di addestramento anziché riaddestrare l'intero modello.

L'API LLM Inference supporta l'aggiunta di pesi LoRA ai livelli di attenzione dei modelli Gemma-2 2B, Gemma 2B e Phi-2. Scarica il modello in formato safetensors.

Il modello di base deve essere nel formato safetensors per creare i pesi LoRA. Dopo l'addestramento LoRA, puoi convertire i modelli nel formato FlatBuffers per l'esecuzione su MediaPipe.

Prepara i pesi LoRA

Utilizza la guida LoRA Methods di PEFT per addestrare un modello LoRA ottimizzato sul tuo set di dati.

L'API LLM Inference supporta solo LoRA sui livelli di attenzione, quindi specifica solo i livelli di attenzione in LoraConfig:

# 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"],
)

Dopo l'addestramento sul set di dati preparato e il salvataggio del modello, i pesi del modello LoRA ottimizzato sono disponibili in adapter_model.safetensors. Il file safetensors è il checkpoint LoRA utilizzato durante la conversione del modello.

Conversione del modello

Utilizza il pacchetto Python MediaPipe per convertire i pesi del modello nel formato Flatbuffer. ConversionConfig specifica le opzioni del modello di base insieme alle opzioni LoRA aggiuntive.

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)

Il convertitore produrrà due file compatibili con MediaPipe, uno per il modello di base e l'altro per il modello LoRA.

Inferenza del modello LoRA

Il web supporta LoRA dinamico durante l'esecuzione, il che significa che gli utenti dichiarano i ranghi LoRA durante l'inizializzazione. Ciò significa che puoi sostituire diversi modelli LoRA durante l'esecuzione.

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

Carica i modelli LoRA durante l'esecuzione, dopo aver inizializzato il modello di base. Attiva il modello LoRA passando il riferimento al modello durante la generazione della risposta 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;
});