Vai al contenuto principale

Llama 3.2 e Gradio: crea un'app web multimodale

Scopri come usare il modello vision Llama 3.2 11B con Gradio per creare un'app web multimodale che funge da assistente al supporto clienti.
Aggiornato 29 set 2026  · 10 min leggi

Scopri con l'IA

ChatGPTClaudePerplexity

Sono finiti i tempi in cui ci accontentavamo di large language model capaci solo di elaborare testo. Ora vogliamo LLM multimodali in grado di comprendere e interagire con testo, immagini e video.

Ecco i modelli vision Llama 3.2 11B & 90B, i primi modelli multimodali open source di Meta AI, in grado di elaborare sia input testuali che immagini.

In questa guida pratica ti mostrerò come creare un assistente al supporto clienti multimodale con Llama 3.2 e Gradio. Alla fine del tutorial avrai un'app web pienamente funzionante capace di analizzare descrizioni testuali e immagini caricate per generare soluzioni utili — proprio come farebbe un assistente ai ticket di supporto!

Se ti serve una breve introduzione a Llama 3.2 prima di iniziare, ti consiglio di leggere questa guida a Llama 3.2.

Configurazione iniziale

In questa demo pratica useremo il modello Llama3.2-11B-Vision (multimodale). Prima di scrivere codice, assicuriamoci di avere tutte le dipendenze necessarie.

Ci servono alcune librerie perché tutto funzioni. Le principali sono:

  • Transformers: la libreria core per lavorare con modelli come Llama 3.2.
  • Torch: la libreria di deep learning che alimenta il nostro modello.
  • Gradio: per costruire l'interfaccia utente.

Esegui i seguenti comandi per installare le dipendenze necessarie:

!pip3 install -U transformers bitsandbytes accelerate peft -q
!pip3 install gradio -q

Caricare il modello e il processor di Llama 3.2

Ora carichiamo il modello e il processor di Llama 3.2. Useremo la libreria transformers di Hugging Face per caricare il modello e il processor, assicurandoci che il modello giri su GPU se disponibile, o altrimenti su CPU. Essendo un modello da 11B parametri, funziona bene su una GPU A100 in Google Colab.

Nel blocco di codice qui sotto:

  • Impostiamo gli import necessari.
  • Carichiamo sia il modello che il processor con supporto GPU, se disponibile. Questo garantisce che l'app giri in modo efficiente, soprattutto con grandi quantità di dati.
  • Una parte importante del codice è tie_weight(), che garantisce che i pesi dei livelli di embedding in input e in output siano identici. Questo riduce il consumo di memoria e può migliorare le prestazioni.
import torch
from PIL import Image
import gradio as gr
from transformers import MllamaForConditionalGeneration, AutoProcessor

def load_model():
    model_id = "meta-llama/Llama-3.2-11B-Vision-Instruct"  
    device = "cuda" if torch.cuda.is_available() else "cpu"  # Check if GPU is available

    model = MllamaForConditionalGeneration.from_pretrained(
        model_id,
        torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,  
        device_map="auto",  # Automatically map to available device
        offload_folder="offload",  # Offload to disk if necessary
    )
    
    model.tie_weights()  # Tying weights for efficiency
    processor = AutoProcessor.from_pretrained(model_id)
    print(f"Model loaded on: {device}")
    
    return model, processor

Perché Gradio?

Gradio è una libreria Python leggera che permette di creare rapidamente app di machine learning con interfacce web. Invece di scrivere HTML o JavaScript complessi, possiamo definire i componenti dell'app (come caselle di testo, pulsanti o immagini) direttamente in Python.

Ecco come si presenta una UI di base in Gradio:

Interfaccia UI di Gradio

Gradio offre alcuni vantaggi:

  • Nessuna seccatura di installazione: le app Gradio si ospitano e si condividono con poche righe di Python. La condivisione integrata consente l'accesso tramite link pubblico.
  • Interfaccia collaborativa: permette demo live dei modelli condivise con collaboratori o pubblico. Più utenti possono interagire contemporaneamente.
  • Supporta più tipi di input e output: offre una gamma di componenti di input/output oltre a testo e immagini.
  • Configurazione minima per l'hosting in cloud: distribuzione semplice su piattaforme come Hugging Face Spaces o altri servizi cloud.
  • Integrazione cross-platform: le interfacce possono essere incorporate in altre applicazioni web, Jupyter Notebook o post di blog.
  • Auto-generazione API: genera automaticamente un'API per l'app.
  • Sicurezza integrata: include limiti di dimensione dei file e altre misure per prevenire usi malevoli.

Per questa demo, Gradio rende semplice per gli utenti inserire sia testo che immagini e vedere l'output (analisi di testo e immagine, in questo caso) in tempo reale. È perfetto per mostrare la potenza di modelli come Llama 3.2 in un ambiente user-friendly.

Costruire l'app multimodale con Llama 3.2

Ora che abbiamo già predisposto gli import e configurato correttamente il modello, passiamo alla parte principale dell'app — elaborare gli input (testo e immagine) e generare la risposta.

Generazione da testo a testo

Partiamo definendo una funzione che accetta il testo dell'utente e, opzionalmente, un'immagine. Questa funzione usa poi il modello Llama 3.2 per generare una risposta.

def process_ticket(text, image=None):
    model, processor = load_model()
    
    try:
        if image:
            # Resize the image for consistency
            image = image.convert("RGB").resize((224, 224))
            prompt = f"<|image|><|begin_of_text|>{text}"
            # Process both the image and text input
            inputs = processor(images=[image], text=prompt, return_tensors="pt").to(model.device)
        else:
            prompt = f"<|begin_of_text|>{text}"
            # Process text-only input
            inputs = processor(text=prompt, return_tensors="pt").to(model.device)
        
        # Generate response (restrict token length for faster output)
        outputs = model.generate(**inputs, max_new_tokens=200)
        # Decode the response from tokens to text
        response = processor.decode(outputs[0], skip_special_tokens=True)
        return response
    
    except Exception as e:
        print(f"Error processing ticket: {e}")
        return "An error occurred while processing your request."

Questa funzione gestisce due tipi di input all'interno del ciclo:

  • Solo testo: se non viene fornita un'immagine, il modello genera una risposta basata sull'input testuale.
  • Testo + immagine: se viene fornita un'immagine, il modello elabora sia il testo che l'immagine prima di generare la risposta.

Una volta identificato il tipo di input, questo viene passato a un processor della libreria transformers per l'elaborazione. Poi il modello genera un output entro il limite di max_new_tokens.

Creare l'interfaccia Gradio

L'interfaccia Gradio mette tutto insieme e ci permette di eseguire test in formato web. Questa interfaccia consente agli utenti di inviare il testo e le immagini del problema che stanno affrontando e vedere la soluzione generata dall'AI.

Vediamo il codice e poi lo spieghiamo.

def create_interface():
    text_input = gr.Textbox(
        label="Describe your issue",
        placeholder="Describe the problem you're experiencing",
        lines=4,
    )
    
    image_input = gr.Image(label="Upload a Screenshot (Optional)", type="pil")
    
    # Output element
    output = gr.Textbox(label="Suggested Solution", lines=5)
    
    # Create the Gradio interface
    interface = gr.Interface(
        fn=process_ticket,  # Function to process inputs
        inputs=[text_input, image_input],  # User inputs (text and image)
        outputs=output,  # AI-generated output
        title="Multimodal Customer Support Assistant",
        description="Submit a description of your issue, along with an optional screenshot, and get AI-powered suggestions.",
    )
    
    # Launch the interface with debug mode
    interface.launch(debug=True)

Nel codice sopra, abbiamo:

  • Definito due input:
    • text_input per il testo
    • image_input per l'immagine
  • Specificato una casella di output per visualizzare la risposta.
  • Creato l'interfaccia, passando parametri come:
    • Input
    • Funzione per elaborare l'input
    • Output generato dal modello
    • Titolo dell'interfaccia
    • Descrizione (se necessaria)
  • Impostato l'interfaccia utente di base.
  • Avviato l'interfaccia con debug = True per eseguire il debug degli errori. Una volta che il codice funziona, riportalo su False.

L'interfaccia finale apparirà così:

Interfaccia finale di Gradio

La nostra applicazione Gradio per l'assistente al supporto clienti multimodale è pronta! Per ottenere la risposta desiderata, prova a modificare il parametro max_new_tokens o a giocare un po' con il prompt.

Casi d'uso per Llama 3.2 e Gradio

Oltre alla demo creata in questo tutorial, ci sono altri casi d'uso che richiedono uno sforzo minimo. Questi includono:

  • Istruzione e tutoraggio: gli studenti possono caricare supporti visivi come grafici o diagrammi insieme alle domande, e il modello può generare risposte complete integrando informazioni visive e testuali.
  • Creazione di contenuti: migliora la creazione di didascalie, post di blog e contenuti social generando testo a partire da immagini.
  • Assistenza immobiliare virtuale: aiuta agenti e clienti elaborando immagini di immobili e rispondendo a domande correlate. Genera descrizioni degli immobili o analizza dettagli visivi dalle foto.

Best practice per lo sviluppo con Llama 3.2 e Gradio

Per ogni caso d'uso, ci sono alcuni suggerimenti utili quando si sviluppa un'app come quella che abbiamo costruito. Ecco alcune best practice che uno sviluppatore può adottare lavorando con modelli come Llama 3.2.

Gestione della latenza

Poiché i task multimodali possono essere onerosi in termini di risorse, ridurre la latenza è fondamentale. Valuta di ottimizzare il modello per risposte più rapide usando caching, pruning del modello o limitando il numero di token generati.

Gestione degli errori

È importante predisporre meccanismi per gestire gli errori. Nei casi in cui il modello non riesca a generare una risposta significativa (ad esempio, per scarsa qualità dell'immagine), possiamo fornire risposte di fallback o messaggi di errore. Possiamo anche ricorrere al feedback umano, che a sua volta aiuta a migliorare il modello.

Monitoraggio delle prestazioni

Tracciare le prestazioni dell'app, come i tempi di risposta e i dati di interazione degli utenti, può aiutare a ottimizzare l'interfaccia e migliorare l'esperienza d'uso. Tenendo nota dei tempi di esecuzione, possiamo provare a ottimizzare la latenza del modello usando librerie come bits and bytes.

Conclusione

In questa guida abbiamo visto come combinare le capacità multimodali di Llama 3.2 con l'interfaccia intuitiva di Gradio. Dal supporto clienti all'istruzione e alla creazione di contenuti, le applicazioni possibili sono molte e varie.

Seguendo best practice come la gestione della latenza, la gestione degli errori e il monitoraggio delle prestazioni, possiamo garantire che le nostre applicazioni con Llama 3.2 e Gradio siano robuste, efficienti e facili da usare.

Per approfondire, ti consiglio questi tutorial:


Aashi Dutt's photo
Author
Aashi Dutt
LinkedIn
Twitter

Sono una Google Developers Expert in ML (Gen AI), una Kaggle 3x Expert e una Women Techmakers Ambassador con oltre 3 anni di esperienza nel tech. Ho co-fondato una startup health-tech nel 2020 e sto conseguendo un master in informatica al Georgia Tech, con specializzazione in machine learning.

Argomenti
Intelligenza artificiale
Large Language Models

Impara l'AI con questi corsi!

Corso

Lavorare con Llama 3

2 ore
15.7K
Scopri le ultime tecniche per usare Llama LLM in locale e integrarlo nel tuo stack.
Vedi i dettagliRight Arrow
Inizia Il Corso
Mostra altroRight Arrow
Correlato

blog

I 15 migliori server MCP remoti che ogni AI builder dovrebbe conoscere nel 2026

Scopri i 15 migliori server MCP remoti che stanno trasformando lo sviluppo AI nel 2026. Scopri come migliorano automazione, ragionamento, sicurezza e velocità dei workflow.
Abid Ali Awan's photo

Abid Ali Awan

15 min

blog

Tokenizzazione nel NLP: come funziona, sfide e casi d'uso

Guida al preprocessing NLP nel machine learning. Copriamo spaCy, i transformer di Hugging Face e come funziona la tokenizzazione in casi d'uso reali.
Abid Ali Awan's photo

Abid Ali Awan

10 min

blog

Che cos'è Snowflake? Guida per principianti alla piattaforma dati cloud

Esplora le basi di Snowflake, la piattaforma dati cloud. Scopri la sua architettura, le sue funzionalità e come integrarla nelle tue pipeline di dati.
Tim Lu's photo

Tim Lu

12 min

Mostra AltroMostra Altro