From eda62faefcc6cc3999b15994386aa03236f36ede Mon Sep 17 00:00:00 2001 From: Luca Sacchi Ricciardi Date: Tue, 21 Apr 2026 21:09:41 +0200 Subject: [PATCH] add: ricerche per google ai edge --- docs/ricerca_google_ai_edge.md | 263 +++++++++++++++++++++++++++++++++ 1 file changed, 263 insertions(+) create mode 100644 docs/ricerca_google_ai_edge.md diff --git a/docs/ricerca_google_ai_edge.md b/docs/ricerca_google_ai_edge.md new file mode 100644 index 0000000..f6a17ec --- /dev/null +++ b/docs/ricerca_google_ai_edge.md @@ -0,0 +1,263 @@ +--- +title: "Guida all'inferenza LLM per il web  |  Google AI Edge" +source: "https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/web_js?hl=it" +author: +published: +created: 2026-04-21 +description: +tags: + - "clippings" +--- +[**Ti presentiamo Google AI Edge Portal**](https://ai.google.dev/edge/ai-edge-portal?hl=it): esegui il benchmarking dell'IA di Edge su larga scala. [Registrati](https://docs.google.com/forms/d/e/1FAIpQLSfTcGPycQve8TLAsfH46pBlXBZe9FrgJAClwbF7DeL1LgVn4Q/viewform?hl=it) per richiedere l'accesso durante l'anteprima privata. + +L'API LLM Inference consente di eseguire modelli linguistici di grandi dimensioni (LLM) completamente sul dispositivo per le applicazioni web, che puoi utilizzare per svolgere 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 da testo a testo, in modo da poter applicare i più recenti modelli di AI generativa sul dispositivo 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](#quickstart). Per un esempio di base di un'applicazione web che esegue l'API LLM Inference, consulta l' [applicazione di esempio](#sample-application). Per una comprensione più approfondita del funzionamento dell'API LLM Inference, consulta le sezioni [Opzioni di configurazione](#configuration-options), [Conversione del modello](#model-conversion) e [Ottimizzazione LoRA](#lora-customization). + +Puoi vedere questa attività in azione con la [demo di MediaPipe Studio](https://mediapipe-studio.webapps.google.com/studio/demo/llm_inference?hl=it). Per saperne di più sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la [panoramica](https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/index?hl=it). + +## Guida rapida + +Segui questa procedura 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à dei browser con le GPU](https://developer.mozilla.org/en-US/docs/Web/API/GPU#browser_compatibility). + +### Aggiungi dipendenze + +L'API LLM Inference utilizza il pacchetto [`@mediapipe/tasks-genai`](https://www.npmjs.com/package/@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](https://www.jsdelivr.com/) per aggiungere il codice direttamente alla tua pagina HTML: + +``` + + + +``` + +### Scaricare un modello + +Scarica Gemma-3n [E4B](https://huggingface.co/google/gemma-3n-E4B-it-litert-lm/blob/main/gemma-3n-E4B-it-int4-Web.litertlm) o [E2B](https://huggingface.co/google/gemma-3n-E2B-it-litert-lm/blob/main/gemma-3n-E2B-it-int4-Web.litertlm) 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](https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/index?hl=it#models) o sfoglia la nostra [pagina della community di HuggingFace](https://huggingface.co/litert-community/models), che offre le nuove versioni di Gemma 4 [E2B](https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm) ed [E4B](https://huggingface.co/litert-community/gemma-4-E4B-it-litert-lm), nonché diverse varianti aggiuntive di Gemma 3 non trattate nella documentazione, ma tutte convertite appositamente per il web, come [270M](https://huggingface.co/litert-community/gemma-3-270m-it), [4B](https://huggingface.co/litert-community/Gemma3-4B-IT), [12B](https://huggingface.co/litert-community/Gemma3-12B-IT), [27B](https://huggingface.co/litert-community/Gemma3-27B-IT) e [MedGemma-27B-Text](https://huggingface.co/litert-community/MedGemma-27B-IT). + +Archivia il modello nella directory del progetto: + +``` +/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](https://huggingface.co/google/gemma-3n-E4B-it-litert-lm/blob/main/gemma-3n-E4B-it-int4-Web.litertlm) o [Gemma-3n E2B](https://huggingface.co/google/gemma-3n-E2B-it-litert-lm/blob/main/gemma-3n-E2B-it-int4-Web.litertlm), in formato compatibile con MediaPipe e web. Per saperne di più, consulta la [documentazione di Gemma-3n](https://ai.google.dev/gemma/docs/gemma-3n?hl=it). + +Per attivare il supporto per la vista, assicurati che `maxNumImages` sia impostato su un valore positivo. Questo determina il numero massimo di pezzi di immagine 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([ + 'user\n', + 'Describe ', + {imageSource: '/assets/test_image.png'}, + ' and then transcribe ', + {audioSource: '/assets/test_audio.wav'}, + '\nmodel\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](https://cs.opensource.google/mediapipe/mediapipe/+/master:mediapipe/web/graph_runner/graph_runner_llm_inference_lib.ts?hl=it). + +## 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](https://github.com/google-ai-edge/mediapipe-samples/tree/main/examples/llm_inference/js). + +Clona il repository Git utilizzando il seguente comando: + +``` +git clone https://github.com/google-ai-edge/mediapipe-samples +``` + +Per saperne di più, consulta la [guida alla configurazione per il web](https://ai.google.dev/mediapipe/solutions/setup_web?hl=it). + +## 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 il metodo dei passaggi 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](https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/index?hl=it#supported-models) | Android, iOS, web | .bin | +| Tutti i modelli LLM PyTorch | [Libreria generativa LiteRT Torch](https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/index?hl=it#pytorch-models) | Android, iOS | .task | + +Per scoprire come convertire altri modelli, consulta la sezione [Conversione del modello](https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/index?hl=it#convert-model). + +## Personalizzazione LoRA + +L'API LLM Inference supporta l'ottimizzazione LoRA (Low-Rank Adaptation) utilizzando la libreria [PEFT](https://huggingface.co/docs/peft/main/en/index) (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](https://huggingface.co/google/gemma-2-2b), [Gemma 2B](https://huggingface.co/google/gemma-2b) e [Phi-2](https://huggingface.co/microsoft/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 [Metodi LoRA](https://huggingface.co/docs/peft/main/en/task_guides/lora_based_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 il runtime, 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; +}); +```