Gemma 3n: Een gids met demoproject (VLM Android-app)

Wat is Gemma 3n?

Gemma 3n is de nieuwste familie multimodale open-weights-modellen van Google AI, ontworpen om efficiënt te draaien op alledaagse apparaten zoals telefoons, tablets en laptops. Gebouwd op een nieuwe MatFormer-architectuur met ondersteuning voor Per-Layer Embedding (PLE) parametercaching, levert Gemma 3n on-device prestaties met minimale geheugen- en rekencapaciteitskosten.

Hoewel vergelijkbaar met traditionele vision-language-modellen (VLM’s), ondersteunt Gemma 3n tekst-, beeld- en audiomodali­teiten. De "3n"-variant is specifiek geoptimaliseerd voor edge-deployment, met lichte uitvoering op CPU’s, NPU’s of mobiele GPU’s via Google’s AI Edge SDK.

Dit zijn de belangrijkste features van Gemma 3n:

• Multimodale input: accepteert zowel tekst- als beeldinvoer voor gegrond visueel redeneren
• On-device inferentie: geen internet nodig zodra het model is gedownload
• Parameterefficiëntie: gebruikt selectieve activatie, PLE-caching en MatFormer-nesting om geheugenoverhead te beperken
• Geoptimaliseerd voor mobiel: Gemma 3n ondersteunt INT4- en FP16-inferentie op Android via MediaPipe en Google AI Edge-tools
• Open weights: gelicentieerd voor verantwoord commercieel gebruik en fine-tuning

Belangrijk: hoewel Gemma 3n in de volledige architectuur audio-invoer ondersteunt, zijn audiomogelijkheden nog niet beschikbaar in de publieke preview.

Hoe krijg je toegang tot Gemma 3n?

Je kunt Gemma 3n op drie manieren uitproberen:

1. Google AI Studio: de makkelijkste manier om in de browser te starten. Ga naar Google AI Studio en selecteer Gemma 3n in de modellijst. Momenteel is alleen de variant “gemma-3n-e4b-it” beschikbaar.
2. Hugging Face-preview: het .task-bestand van Gemma 3n is gepubliceerd onder Google’s ai-edge-litert-formaat. Je kunt toegang aanvragen tot de Hugging Face-modelpagina en het model lokaal downloaden voor inferentie. Een .task-bestand is een compact, runtime-vriendelijk pakket met een voorgecompileerde versie van het model, de metadata en alle vereiste configuraties, speciaal ontworpen voor snelle en veilige uitvoering op het apparaat met Google’s AI Edge SDK.
3. Op apparaat draaien (aanbevolen): gebruik de officiële Gemma Gallery-app van Google om Gemma 3n direct op je Android-telefoon te draaien. Deze methode ondersteunt volledige interactie met afbeeldingen en prompts via een lokaal model.

Vervolgens laat ik zien hoe je een werkende Android-app bouwt die het Gemma 3n-model gebruikt om beeld- en tekstprompts te verwerken. We gebruiken Google’s officiële Gallery-repository als basis en passen die aan zodat deze zonder afleiding direct opent op het scherm Ask Image.

Stap 1: Clone en stel de app in

Laten we beginnen met het opzetten van een nieuw project en het clonen van de originele repository van Google.

Stap 1.1: Maak een nieuw Android Studio-project

Open op je laptop het project als een nieuw project in Android Studio en kies voor een Empty Activity.

Stap 1.2: Stel een nieuwe lege activity in

Vul daarna de naam van je activity in (bijvoorbeeld “Ask_Image_Demo”) en laat de rest ongewijzigd. Klik vervolgens op Finish.

Stap 1.3: Clone de hoofdrepository

Open nu de terminal in Android Studio (linksonder) en voer de volgende bash-commando’s uit:

git clone https://github.com/google-ai-edge/gallery
cd gallery/android

Dit opent je project. Je kunt alle projectbestanden aan de linkerkant van het tabblad bekijken.

Stap 2: Snoei alle taken behalve Ask Image

We bewerken nu een paar bestanden zodat het openen van onze app direct naar de Ask Image-pagina leidt. Navigeer vervolgens naar het bestand Tasks.kt op de volgende locatie:   app/src/main/java/com/google/ai/edge/gallery/data/Tasks.kt. Om de functionaliteit van de app te beperken tot alleen de ‘Ask Image’-feature, voeren we de volgende wijzigingen door:

Voor:

/** All tasks. */
val TASKS: List<Task> = listOf(
  TASK_LLM_ASK_IMAGE,
  TASK_LLM_PROMPT_LAB,
  TASK_LLM_CHAT,
)

Na:

/** All tasks. */
val TASKS: List<Task> = listOf(
  TASK_LLM_ASK_IMAGE
)

Dit schakelt de andere demo’s zoals Prompt Lab en Chat uit, zodat alleen Ask Image zichtbaar is.

Stap 3: Automatisch navigeren naar het Ask Image-scherm

Werk in GalleryApp.kt (te vinden op // app/src/main/java/com/google/ai/edge/gallery/GalleryApp.kt) de LaunchedEffect bij om automatisch naar de afbeeldingspagina te navigeren.  Deze wijziging zorgt ervoor dat de app direct de Ask Image-interface opent en het standaard taakselectiescherm overslaat.

Voor:

@Composable
fun GalleryApp(navController: NavHostController = rememberNavController()) {
  GalleryNavHost(navController = navController)
}

Na:

package com.google.ai.edge.gallery
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.google.ai.edge.gallery.data.TASK_LLM_ASK_IMAGE
import com.google.ai.edge.gallery.ui.llmchat.LlmAskImageDestination
import com.google.ai.edge.gallery.ui.navigation.GalleryNavHost
@Composable
fun GalleryApp(
  navController: NavHostController = rememberNavController()
) {
  // as soon as GalleryApp comes up, navigate to Ask-Image 
  // and drop “home” off the back-stack:
  LaunchedEffect(Unit) {
    TASK_LLM_ASK_IMAGE.models
      .firstOrNull()    // safety: don’t crash if the models list is empty
      ?.name
      ?.let { modelName ->
        navController.navigate("${LlmAskImageDestination.route}/$modelName") {
          popUpTo("home") { inclusive = true }
        }
      }
  }
  GalleryNavHost(navController = navController)
}

Hier is een korte uitleg van wat de bijgewerkte GalleryApp-functie in de nieuwe code doet:

• LaunchedEffect: een Jetpack Compose-side-effect dat één keer triggert bij compositie. Hier gebruiken we het om direct navigatielogica uit te voeren zodra GalleryApp is gerenderd.
• Het eerste beschikbare model ophalen: TASK_LLM_ASK_IMAGE.models.firstOrNull() haalt veilig de naam op van het eerste beschikbare beeld-tekstmodel (bijv. Gemma 3n) voor gebruik in navigatie. Dit voorkomt crashes als de modellijst leeg is.
• navController.navigate(): routeert de app dynamisch naar het Ask Image-scherm met de naam van het geselecteerde model. Dit vervangt het gebruikelijke Home-scherm als instappunt.
• Het Home-scherm uit de terugnavigatie verwijderen: de methode popUpTo("home") ruimt de navigatiestack op door het Home-scherm uit de geschiedenis te verwijderen. Zo kan de gebruiker er niet via de systeem-terugknop naartoe terugkeren.

Laat de rest van de code ongewijzigd. Samen zorgen deze wijzigingen ervoor dat de app direct start in de Ask Image-interface met een geldig model geladen, wat de gebruikersflow voor je demo verbetert.

Stap 4: Installeer en draai de app op je apparaat

Zodra je alle nodige wijzigingen hebt doorgevoerd, gaan we de app draaien. Om je app op je lokale Android-apparaat te draaien, koppel je je Android-apparaat aan Android Studio via draadloos debuggen met de volgende stappen.

Stap 4.1: Stel het Android-apparaat in

Ga op je Android-apparaat naar de app Instellingen en schakel Ontwikkelaarsopties in. Zet vervolgens Draadloos debuggen aan. Je ziet een scherm met twee koppelingsopties.

Stap 4.2: Beheer apparaten in Android Studio

Open in Android Studio de Device Manager (het pictogram lijkt op een telefoon met een Android-logo) en klik op Pair using QR code.

Scan de QR-code met je apparaat en rond de koppelingsinstellingen af. Zodra je apparaat is verbonden, zie je de apparaatnaam in Device Manager. Zorg dat je systeem en Android-apparaat met hetzelfde wifinetwerk verbonden zijn.

Stap 4.3: Draai de app

Begin met het spiegelen van je Android-apparaat door op het pictogram Device Mirroring te klikken (dat een desktopscherm en telefoonscherm toont). Zodra je het scherm van je apparaat gespiegeld ziet, klik je op het groene pictogram Run om de app op je apparaat te deployen.

Stap 4.4: Download de modellen op het apparaat

De app start en er opent een browservenster dat je vraagt in te loggen bij Hugging Face om het modelbestand veilig te downloaden.

Zodra je bent ingelogd bij Hugging Face, klik je op ‘start download’ bij het model van je keuze, en het model wordt gedownload. Voor dit voorbeeld gebruik ik standaard het model Gemma-3n-E2B-it-int4.

Stap 4.5: Ga experimenteren

Zodra de download is voltooid, ga je direct naar de pagina “Ask Image”. Kies vervolgens een bestaande afbeelding uit je galerij of maak een nieuwe foto met de camera van je apparaat. Geef daarna een prompt mee met de afbeelding en stuur die naar het model.

Hier is een voorbeeld dat ik heb getest.

Het model draait aanvankelijk op de CPU. Je kunt overschakelen naar GPU voor mogelijk betere prestaties via het ‘Tune’-pictogram (drie horizontale schuifregelaars).

Overschakelen naar een GPU kan de algehele latentie aanzienlijk verlagen, vooral bij het verwerken van grotere afbeeldingen en complexere vragen. Hoewel GPU-verwerking doorgaans snellere decode-snelheden biedt, wat tot snellere reacties leidt, is het goed om te weten dat de prefill-snelheid soms marginaal hoger kan zijn op de CPU.

Dit komt doordat het initiële laden en voorbereiden van data (prefill) CPU-gebonden kan zijn. Toch weegt het voordeel van sneller decoderen en een lagere totale latentie op de GPU meestal zwaarder, wat zorgt voor een soepelere en meer responsieve ervaring.

Ik heb deze GitHub-repository opgezet als je de volledige projectcode wilt verkennen.

Conclusie

We hebben bekeken hoe Gemma 3n vraag-antwoord over afbeeldingen mogelijk maakt op edge-devices, zonder cloudinference. Je hebt geleerd hoe je een .task-bestand integreert in een lichte Android-app, het model voorziet van prompts in natuurlijke taal, en accurate antwoorden krijgt over elke afbeelding, rechtstreeks vanaf je telefoon.

Deze hands-on walkthrough laat zien hoe Gemma 3n multimodale AI democratiseert, waardoor het voor ontwikkelaars en onderzoekers makkelijker wordt om sterke modellen on-device te deployen. Of je nu offline assistenten, educatieve tools, zorgapps of iets anders bouwt: Gemma 3n kan veel use cases ondersteunen.

Naarmate Google de Matformer-architectuur verder verfijnt, verwacht ik nog compactere, multimodale modellen met hogere nauwkeurigheid en lagere latentie te zien. Wil je meer weten over Gemma 3n, bekijk dan de officiële AI Edge-release-blog of duik in de open-sourcerepository op GitHub.

Als je meer nieuwe AI-tools wilt verkennen, raad ik deze blogs aan:

• Google’s Veo 3: een gids met praktische voorbeelden
• Devstral Quickstart Guide: draai Mistral AI’s LLM lokaal
• Claude Opus 4 met Claude Code: een gids met demoproject