Fiche pratique Gemini Nano Banana pour les développeurs JavaScript

Tous les Gemini, toutes les bananes. La génération d’images entre dans une nouvelle ère avec le nouveau modèle Nano Banana de Google. L’essor des grands modèles de langage (LLM) sophistiqués ouvre de nouvelles perspectives pour le développement d’applications, en particulier dans le domaine de l’IA multimodale.

La capacité à traiter et à générer du contenu dans différents types de données, comme le texte et les images. Le modèle Gemini Nano Banana (officiellement nommé gemini-2.5-flash-image) est à la pointe de cette innovation. Cet outil puissant est optimisé pour manipuler, générer et traiter rapidement des images de haute qualité. Pour les développeurs JavaScript et TypeScript, exploiter cette puissance nécessite des bonnes pratiques ciblées qui garantissent efficacité, maintenabilité et sécurité. Oui, la sécurité aussi !

Cet article vous propose des techniques réfléchies, rapides et simples pour intégrer Gemini Nano Banana à vos applications web modernes. Nous utilisons des outils éprouvés, comme l’AI SDK, qui fournit une couche d’abstraction sécurisée en matière de types pour masquer la complexité de l’API sous-jacente et vous permettre de vous concentrer exclusivement sur la logique de votre application. Cette abstraction est essentielle pour améliorer la qualité du code et pérenniser vos fonctionnalités d’IA.

Dans un contexte JavaScript, Gemini Nano Banana sert principalement à générer et à modifier des images de façon dynamique, par exemple pour créer des compositions photoréalistes ou des images stylisées à partir de contenus importés par les utilisateurs. Pour y parvenir, nous abordons des pratiques opérationnelles essentielles : récupérer efficacement des images externes sur le web et les convertir au format Uint8Array compatible avec le modèle, puis convertir la sortie binaire brute du modèle en Data URL, par exemple pour un affichage côté client.

Nous explorons également des stratégies avancées de prompt engineering, notamment l’alternance de texte descriptif et d’images dans le tableau du prompt. Cette méthode fournit au modèle le contexte détaillé nécessaire à l’exécution de tâches de composition complexes et transforme des demandes vagues en résultats prévisibles et de haute qualité.

Enfin, conscients du rôle de l’IA dans les workflows de développement, nous soulignons l’importance d’ancrer les plateformes de codage agentique dans une documentation pertinente et d’intégrer des contrôles de sécurité avec des outils comme Snyk Studio, afin que la vitesse de développement ne compromette pas la sécurité des applications.

Commençons avec cette fiche pratique pour vous aider à vous lancer et à adopter des pratiques de développement avec Nano Banana qui amélioreront les performances.

1. Utiliser l’AI SDK 

L’AI SDK offre un framework puissant, flexible et sécurisé en matière de types aux développeurs JavaScript et TypeScript qui souhaitent créer des applications d’IA sophistiquées.

Vous pouvez utiliser les bibliothèques fournies par OpenAI, Google et d’autres, mais une couche d’abstraction au-dessus des API de modèles présente aussi des avantages.

Grâce à une API unifiée et déclarative, le SDK masque la complexité des interactions directes avec des modèles comme Gemini Nano Banana (désigné ici par gemini-2.5-flash-image) et permet aux développeurs de se concentrer sur la logique de leur application plutôt que sur la gestion de bas niveau des API.

Cette approche simplifie le développement tout en améliorant la qualité et la maintenabilité du code, notamment dans un environnement TypeScript où le typage strict réduit considérablement les erreurs à l’exécution et améliore l’expérience des développeurs.

Voici un exemple d’utilisation de l’AI SDK avec le modèle Gemini 2.5 Flash Image de Google, connu sous le nom de Nano Banana :

import { generateText } from 'ai'
import { createGoogleGenerativeAI } from '@ai-sdk/google'

const yodaImagePath = join(process.cwd(), 'data', 'yoda.jpg')
const yodaImageBuffer = await readFile(yodaImagePath)
const yodaImageUint8Array = new Uint8Array(yodaImageBuffer)

// Use AI SDK with generateText for Gemini 2.5 Flash Image (Nano Banana)
// This model supports image editing/generation with input images
const googleProvider = createGoogleGenerativeAI({ apiKey: apiKey })

const result = await generateText({
      model: googleProvider('gemini-2.5-flash-image'),
      prompt: [
        {
          role: 'user',
          content: [
            {
              type: 'text',
              text: 'Generate a realistic selfie photo of the person in the first image together with Yoda from Star Wars (shown in the second image). The person joins Yoda in the scene where he is at and hugs him in selfie style while they are both smiling and looking at the camera. The image should look natural and photorealistic, as if taken with a smartphone camera.'
            },
     {
              type: 'image',
              image: userImageUint8Array,
              mediaType: imageFile.type || 'image/jpeg'
            },
            {
              type: 'image',
              image: yodaImageUint8Array,
              mediaType: 'image/jpeg'
            }
         ]
        }
      ]
    })  

2. Extraire les résultats de Nano Banana dans une Data URL

Après avoir généré une image avec succès à l’aide d’un modèle multimodal comme Gemini Nano Banana (gemini-2.5-flash-image), vous obtenez généralement un fichier image brut, souvent sous la forme d’un tampon Uint8Array.

Pour afficher immédiatement cette image dans une application frontend côté client (par exemple, un site web créé avec React, Vue ou JavaScript natif), vous devez convertir les données binaires brutes dans un format que le navigateur peut interpréter nativement.

Le format Data URL est la méthode la plus directe et la plus efficace : il intègre les données de l’image encodées en base64 directement dans l’attribut src d’une balise <img>. Le résultat généré peut ainsi être affiché instantanément à l’utilisateur final, sans point de terminaison serveur distinct ni enregistrement du fichier sur le disque.

try {
   // Call the model with await generateText({})
   // ...

   // Extract the generated image from result.files
    const generatedImageFile = result.files?.find(file => file.mediaType?.startsWith('image/'))

    if (!generatedImageFile) {
      console.error('=== Error: No image file found ===')
      console.error('Available files:', result.files)
      console.error('Result text content:', result.text)
      throw new Error('No image was generated in the response')
    }

    // Convert Uint8Array to base64 data URL for the frontend
    const base64String = Buffer.from(generatedImageFile.uint8Array).toString('base64')
    const dataUrl = `data:${generatedImageFile.mediaType};base64,${base64String}`

    return {
      success: true,
      image: dataUrl
    }
  } catch (error: any) {
    console.error('Error generating selfie:', error)
    throw createError({
      statusCode: error.statusCode || 500,
      message: error.message || 'Failed to generate selfie'
    })
  }

3. Récupérer des données d’image sur le web

Au lieu de charger le fichier image depuis le système de fichiers local, vous pouvez aussi le récupérer à la volée depuis une URL distante et convertir la réponse au format Uint8Array compatible avec l’API du modèle.

Les applications JavaScript modernes, en particulier celles qui s’exécutent dans un navigateur, doivent souvent gérer des ressources distantes. Au lieu de vous limiter au chargement du fichier image depuis le système de fichiers local, parfois empêché par des règles de sécurité ou tout simplement impossible pour du contenu web dynamique, vous pouvez aussi récupérer l’image à la volée depuis une URL distante. Vous gagnez ainsi en flexibilité : le modèle peut traiter des images hébergées sur des réseaux de diffusion de contenu (CDN) ou des serveurs externes.

Pour rendre ces données distantes compatibles avec l’API de modèle exécutée sur l’appareil, qui attend généralement une structure de données précise, comme un Uint8Array, vous devez les convertir. La procédure standard consiste à utiliser l’API fetch pour récupérer la ressource, à obtenir la réponse brute, puis à la convertir au format Uint8Array requis.

    // Fetch Yoda image
    const yodaResponse = await fetch('https://example.com/image.jpg')
    if (!yodaResponse.ok) {
      throw new Error('Failed to fetch Yoda image')
    }
    const yodaArrayBuffer = await yodaResponse.arrayBuffer()
    const yodaImageUint8Array = new Uint8Array(yodaArrayBuffer)

Ce processus garantit que les données binaires de l’image, qu’il s’agisse d’un JPEG, d’un PNG ou d’un autre format pris en charge, sont correctement représentées sous forme de tableau d’entiers non signés de 8 bits, le format d’entrée attendu par les fonctions de traitement du modèle. Cette intégration fluide de la récupération de données à distance et de la conversion de format est essentielle pour créer des applications JavaScript robustes et dynamiques, optimisées par l’intelligence embarquée.

4. Alterner texte descriptif et images pour des prompts détaillés

L’API du modèle et l’API generateText({}) ne permettent pas d’ajouter une annotation à chaque image pour la décrire. Si vous indiquez plusieurs fichiers, leur ordre reste donc implicite et peut dérouter le modèle, surtout si le prompt est ambigu.

Pour résoudre ce problème et améliorer les résultats du prompt, vous pouvez structurer celui-ci comme une suite de messages de discussion, en alternant les descriptions textuelles avant et après les images. Le modèle dispose ainsi d’un meilleur contexte pour interpréter votre demande.

Voici une méthode pour intégrer du texte dans le prompt du modèle :

const result = await generateText({
      model: googleProvider('gemini-2.5-flash-image'),
      prompt: [
        {
          role: 'user',
          content: [
            {
              type: 'text',
              text: 'COMPOSITION INSTRUCTIONS: Generate a single, hyper-realistic, high-detail selfie photograph. The foundational scene and background must be derived exclusively from the Yoda background image (shown below); this setting serves as the environment for the final image.'
            },
            {
              type: 'text',
              text: '[Yoda Background Image]'
            },
            {
              type: 'image',
              image: yodaImageUint8Array,
              mediaType: 'image/jpeg'
            },
            {
              type: 'text',
              text: 'Integrate the person from the user selfie image (shown below) into the Yoda background, placing them standing close to Yoda. The final image should have a selfie-style perspective (close-up, intimate framing) as if taken from a first-person viewpoint, but DO NOT include any visible hands, smartphones, or camera equipment in the frame. The image should appear as if the camera is invisible, capturing a natural moment without showing the device or hand holding it.'
            },
            {
              type: 'text',
              text: '[User Selfie Image]'
            },
            {
              type: 'image',
              image: userImageUint8Array,
              mediaType: imageFile.type || 'image/jpeg'
            },
            {
              type: 'text',
              text: 'Both individuals must be smiling, looking directly into the lens, and their precise facial likenesses, clothing, and details from tyouheir respective input images must be accurately and seamlessly preserved. Maintain consistent, warm, soft, natural daylight and ensure the overall vibe is joyful and spontaneous. The final image must appear as a spontaneous, single-shot photograph taken in the original environment of the Yoda background image. IMPORTANT: Do not include any visible hands, smartphones, phones, or camera equipment in the final image - only show the people and background.'
            }
          ]
        }
      ]
    })

Cette technique, qui consiste à alterner texte et médias dans le tableau content du prompt, permet de contrôler finement des modèles multimodaux comme Gemini Nano Banana.

En traitant le prompt comme une conversation ou un récit structuré, les développeurs dépassent les simples entrées texte-image et peuvent réaliser des tâches complexes, comme l’inpainting de précision, la retouche de composition et l’ancrage de la génération sur des éléments visuels spécifiques. L’API de génération d’images produit ainsi des résultats plus prévisibles et de meilleure qualité.

5. Exploiter les règles des modèles pour le développement assisté par l’IA

Si vous utilisez Gemini CLI, Claude Code, Cursor ou une autre plateforme de codage agentique, vous souhaiterez probablement lui fournir le contexte et la documentation de l’API nécessaires pour améliorer ses performances et éviter qu’elle n’invente des appels de méthodes inexistants. Une documentation à jour aide également l’assistant de codage basé sur un LLM à utiliser les versions récentes de l’API que vous avez choisies.

Dans cet exemple, nous allons utiliser les règles de Cursor et nommer le fichier comme suit : .cursor/rules/ai-sdk-google-provider-docs.mdc. Créez ensuite son contenu comme indiqué ci-dessous :

---
alwaysApply: false
description: AI SDK API documentation for the Google Gemini LLM provider
globs: server/api/generate-selfie.post.ts
---

# Google Generative AI Provider

The [Google Generative AI](https://ai.google.dev) provider contains language and embedding model support for
the [Google Generative AI](https://ai.google.dev/api/rest) APIs.

// ...
// REST OF THE CONTENT
// ...

Il vous suffit de copier le contenu de la documentation officielle, par exemple des docs de l’AI SDK https://v6.ai-sdk.dev/providers/ai-sdk-providers/google-generative-ai#gemini-25-models, ou de toute autre documentation d’API, afin de fournir au modèle un contexte à jour.

6. Adopter le vibe coding en toute sécurité avec Snyk Studio

Malheureusement, de nombreux développeurs qui pratiquent le vibe coding et utilisent le codage agentique pour générer du code avec l’IA découvrent trop tard qu’ils ont sacrifié les bonnes pratiques de codage sécurisé et d’autres responsabilités liées à la sécurité des applications au profit de la vitesse de développement.

Parmi les exemples concrets, citons les secrets exposés et les vulnérabilités SSRF, qui peuvent être évités en dotant l’agent de codage d’une expertise en sécurité.

Snyk Studio s’intègre parfaitement au cycle de codage agentique : il dote l’agent de codage de contrôles de sécurité des applications, directement intégrés à son workflow natif d’exécution grâce aux serveurs MCP (Model Context Protocol), aux hooks et aux règles d’agent, entre autres mécanismes.

Snyk Studio est gratuit et s’installe en un clic dans Cursor, GitHub Copilot et Windsurf. Il s’intègre également à de nombreux autres agents de codage, notamment via les marketplaces Cline et Factory AI.

Vous souhaitez en savoir plus sur le vibe coding ? Découvrez notre atelier à la demande : « Sécuriser le vibe coding :
relever les défis de sécurité du code généré par l’IA. »