Llama 3.2 en Gradio-tutorial: bouw een multimodale webapp

Leer hoe je het Llama 3.2 11B vision-model met Gradio gebruikt om een multimodale webapp te maken die fungeert als een klantenservice-assistent.

Bijgewerkt 2 okt 2026 · 10 min lezen

Verken met AI

ChatGPT Claude Perplexity

De tijd dat we tevreden waren met large language models die alleen tekst kunnen verwerken, is voorbij. We willen nu multimodale LLMs die tekst, afbeeldingen en video's kunnen begrijpen en ermee kunnen omgaan.

Maak kennis met Llama 3.2 11B & 90B vision-modellen, de eerste open-source multimodale modellen van Meta AI, die zowel tekst- als afbeeldingsinvoer kunnen verwerken.

In deze praktische gids neem ik je mee door het proces van het bouwen van een multimodale klantenservice-assistent met behulp van Llama 3.2 en Gradio. Aan het einde van deze tutorial heb je een volledig werkende webapplicatie die tekstuele beschrijvingen en geüploade afbeeldingen kan analyseren om nuttige oplossingen te genereren—precies zoals een supportticket-assistent zou doen!

Heb je een korte introductie tot Llama 3.2 nodig voordat we beginnen? Lees dan deze Llama 3.2-gids.

Initiële setup

In deze hands-on demo gebruiken we het Llama3.2-11B-Vision-model (multimodaal). Voordat we gaan coderen, zorgen we dat we alle benodigde dependencies hebben.

We hebben een paar libraries nodig om alles te laten werken. De belangrijkste zijn:

Transformers: De kernbibliotheek voor het werken met modellen zoals Llama 3.2.
Torch: De deep-learningbibliotheek die ons model aandrijft.
Gradio: Voor het bouwen van onze gebruikersinterface.

Voer de volgende commando's uit om de benodigde dependencies te installeren:

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

Laad het Llama 3.2-model en de processor

Laten we nu het Llama 3.2-model en de processor laden. We gebruiken de transformers-bibliotheek van Hugging Face om het model en de processor te laden, waarbij we ervoor zorgen dat het model op de GPU draait als die beschikbaar is, of anders standaard op de CPU. Met 11B parameters werkt het goed op een A100-GPU in Google Colab.

In het onderstaande codeblok:

We zetten de vereiste imports klaar.
We laden zowel het model als de processor met GPU-ondersteuning, indien beschikbaar. Dit zorgt dat de app efficiënt draait, vooral bij het verwerken van grote hoeveelheden data.
Een belangrijke regel in deze code is tie_weight(), die ervoor zorgt dat de gewichten van de input- en output-embeddinglagen identiek zijn. Dit verlaagt het geheugengebruik en kan de prestaties verbeteren.

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

Waarom Gradio?

Gradio is een lichte Python-bibliotheek waarmee we snel machinelearning-apps met webinterfaces kunnen bouwen. In plaats van complexe HTML of JavaScript te schrijven, kunnen we de componenten van onze app (zoals tekstvakken, knoppen of afbeeldingen) rechtstreeks in Python definiëren.

Zo ziet een basis-UI in Gradio eruit:

Gradio heeft een paar voordelen:

Geen installatiegedoe: Gradio-apps worden gehost en gedeeld met een paar regels Python-code. Met ingebouwde sharing kun je via een publieke link toegang geven.
Samenwerkende interface: Maakt live demo's van modellen mogelijk die je met samenwerkers of het publiek deelt. Meerdere gebruikers kunnen tegelijk interacteren.
Ondersteunt meerdere invoer- en uitvoertypes: Biedt een reeks in-/uitvoercomponenten naast tekst en afbeeldingen.
Minimale configuratie voor cloudhosting: Eenvoudige deployment op platforms zoals Hugging Face Spaces of andere clouddiensten.
Cross-platformintegratie: Interfaces kunnen worden ingesloten in andere webapplicaties, Jupyter Notebooks of blogposts.
Automatische API-generatie: Genereert automatisch een API voor de app.
Ingebouwde beveiliging: Bevat bestandslimieten en andere maatregelen om misbruik te voorkomen.

Voor deze demo maakt Gradio het eenvoudig voor gebruikers om zowel tekst als afbeeldingen in te voeren en de output (analyse van tekst en afbeelding, in dit geval) in realtime te zien. Het is perfect om de kracht van modellen zoals Llama 3.2 te laten zien in een gebruiksvriendelijke omgeving.

De Llama 3.2-multimodale app bouwen

Nu we onze imports hebben ingesteld en het model succesvol hebben klaarzetten, gaan we door met het belangrijkste deel van de app—het verwerken van de invoer (tekst en afbeelding) en het genereren van het antwoord.

Tekst-naar-tekstgeneratie

We beginnen met het definiëren van een functie die tekst van de gebruiker en eventueel een afbeelding aanneemt. Deze functie gebruikt vervolgens het Llama 3.2-model om een antwoord te genereren.

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."

Deze functie verwerkt twee soorten invoer binnen de lus:

Alleen tekst: Als er geen afbeelding wordt meegegeven, genereert het model een antwoord op basis van de tekstinvoer.
Tekst + afbeelding: Als er een afbeelding wordt meegegeven, verwerkt het model zowel de tekst als de afbeelding voordat het antwoord wordt gegenereerd.

Zodra het invoertype is vastgesteld, wordt het doorgegeven aan een processor uit de transformers-bibliotheek om de input te verwerken. Vervolgens genereert het model een output binnen de marge van max_new_tokens.

De Gradio-interface maken

De Gradio-interface bindt alles samen en stelt ons in staat om tests in een webformaat uit te voeren. Met deze interface kunnen gebruikers tekst en afbeeldingen indienen van een probleem waar ze tegenaan lopen en de door AI gegenereerde oplossing zien.

Laten we naar de code kijken en die vervolgens toelichten.

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)

In de bovenstaande code doen we het volgende:

We definiëren twee inputs:

text_input voor tekst
image_input voor afbeelding

We specificeren een outputvak om het antwoord weer te geven.
We maken de interface en geven parameters door zoals:

Inputs
Functie om input te verwerken
Gegenereerde output van het model
Titel van de interface
Beschrijving (indien nodig)

We zetten de basisgebruikersinterface op.
We starten de interface met debug = True om fouten te debuggen. Zodra de code goed werkt, zet je dit terug naar False.

De uiteindelijke interface ziet er zo uit:

Onze multimodale klantenservice-assistent in Gradio is klaar! Pas voor het gewenste resultaat de parameter max_new_tokens aan of speel een beetje met de prompt.

Use-cases voor Llama 3.2 en Gradio

Naast de demo die we in deze tutorial hebben gemaakt, zijn er nog een paar andere use-cases die minimale inspanning vergen. Deze omvatten:

Onderwijs en tutoring: Studenten kunnen visuele hulpmiddelen zoals grafieken of diagrammen uploaden bij hun vragen, en het model kan uitgebreide antwoorden genereren die zowel visuele als tekstuele informatie bevatten.
Contentcreatie: Verbeter het maken van bijschriften, blogposts en socialmedia-inhoud door tekst op basis van afbeeldingen te genereren.
Vastgoed–virtuele assistentie: Help makelaars en klanten door vastgoedafbeeldingen te verwerken en gerelateerde vragen te beantwoorden. Genereer woningbeschrijvingen of analyseer visuele details uit foto's.

Best practices voor ontwikkelen met Llama 3.2 en Gradio

Voor elke use-case zijn er een paar tips die elke developer kan toepassen tijdens het bouwen van een app zoals die we al hebben gemaakt. Hier zijn enkele best practices die je kunt hanteren bij het werken met modellen zoals Llama 3.2.

Omgaan met latency

Omdat multimodale taken veel resources kunnen vragen, is het beperken van latency essentieel. Overweeg het model te optimaliseren voor snellere reacties door caching te gebruiken, model pruning toe te passen of het aantal te genereren tokens te beperken.

Foutafhandeling

Het is belangrijk om mechanismen in te bouwen om fouten af te handelen. In gevallen waarin het model geen zinvol antwoord kan genereren (bijv. door slechte beeldkwaliteit), kunnen we fallback-antwoorden of foutmeldingen geven. We kunnen zelfs kiezen voor menselijke feedback, wat op zijn beurt helpt om het model te verbeteren.

Prestatiemonitoring

Het bijhouden van de prestaties van de app, zoals responstijden en gebruikersinteracties, kan helpen de interface te optimaliseren en de gebruikerservaring te verbeteren. Door de verwerkingstijd te meten kunnen we proberen de model-latency te optimaliseren met libraries zoals bits and bytes.

Conclusie

In deze gids hebben we geleerd hoe je de multimodale mogelijkheden van Llama 3.2 combineert met de intuïtieve interface van Gradio. Van klantenservice tot onderwijs en contentcreatie: de toepassingsmogelijkheden zijn groot en divers.

Door best practices te volgen zoals het managen van latency, foutafhandeling en prestatiemonitoring, zorg je ervoor dat je Llama 3.2- en Gradio-applicaties robuust, efficiënt en gebruiksvriendelijk zijn.

Wil je meer leren? Dan raad ik deze tutorials aan: