Créer une application de génération d'images avec Imagen et Mesop dans Cloud Shell

Créer une application de génération d'images avec Imagen et Mesop dans Cloud Shell

À propos de cet atelier de programmation

Dernière mise à jour : avr. 4, 2025

Rédigé par Katie Nguyen

1. Introduction

Imaginez transformer une simple description textuelle en image éclatante et détaillée en quelques secondes. C'est la puissance des médias génératifs, un domaine qui évolue rapidement et qui redéfinit la façon dont vous créez et interagissez avec les contenus visuels. Des modèles comme Imagen 3 de Google sur Vertex AI offrent aux développeurs d'applications des fonctionnalités d'IA générative de pointe.

Imagen 3 est le modèle texte-vers-image de Google le plus performant à ce jour. Il est capable de créer des images avec des détails étonnants. Les développeurs ont ainsi plus de contrôle lorsqu'ils créent des produits d'IA de nouvelle génération qui transforment leur imagination en éléments visuels de haute qualité. En savoir plus sur Imagen sur Vertex AI

Cet atelier de programmation vous explique comment exploiter la puissance d'Imagen à l'aide du SDK Google Gen AI. Vous découvrirez comment générer des images époustouflantes à partir d'invites textuelles, mais aussi comment intégrer cette fonctionnalité à une application Web à l'aide de Mesop, un framework d'UI Python.

Prérequis

• Un projet Google Cloud avec la facturation et l'API Vertex AI activées. Découvrez comment configurer un projet et un environnement de développement.

Points abordés

• Utiliser le SDK Google Gen AI pour Python pour interagir avec Imagen 3
• Générer des images à partir de requêtes textuelles
• Créer une application Mesop et l'exécuter à partir de Cloud Shell

Prérequis

• Connaissances de base sur Python
• Exécuter des commandes dans un terminal Cloud Shell
• Un ordinateur avec accès à Cloud Shell

2. Configurer l'environnement et installer les dépendances

1. Ouvrez l'éditeur Cloud Shell.
2. Cliquez sur le bouton "Ouvrir le terminal" en haut à droite.
3. Créez un dossier en saisissant la commande suivante dans le terminal:

mkdir my-imagen-app

4. Remplacez les répertoires par votre nouveau dossier:

cd my-imagen-app

5. Créez un environnement virtuel en Python 3:

python3 -m venv myenv

6. Activez l'environnement virtuel :

source myenv/bin/activate

7. Installez Mesop:

pip3 install mesop

8. Installez le SDK Google Gen AI pour Python:

pip install google-genai

9. Créez un fichier Python:

touch main.py

3. Configuration des applications

Tout le code nécessaire pour exécuter l'application Mesop existera dans main.py. À chacune des étapes suivantes, copiez et collez-le de manière séquentielle dans ce fichier dans l'éditeur Cloud Shell.

Importer des bibliothèques

import base64
import mesop as me
from google import genai
from google.genai import types

Définir les informations du projet Google Cloud et créer un client

1. Définissez votre ID de projet:

PROJECT_ID = "[your-project-id]"

Remplacez [your-project-id] par le nom de votre projet Google Cloud lorsque vous copiez cette ligne de code.

2. Créez un client:

client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

Charger le modèle de génération d'images

imagen_model = "imagen-3.0-generate-002"

Gestion de l'état

La définition de la gestion de l'état vous permet de stocker des informations tout au long du parcours utilisateur.

@me.stateclass
class State:
   input: str = ""
   enhanced_prompt: str = ""
   img_data: str = "https://storage.googleapis.com/cloud-samples-data/generative-ai/image/flowers.png"

• input: entrée fournie par l'utilisateur qui sera utilisée pour la génération d'images.
• enhanced_prompt: le modèle imagen-3.0-generate-002 offre la possibilité d'améliorer la requête que vous avez fournie. Une nouvelle requête détaillée sera créée à partir de la vôtre d'origine pour vous aider à générer des images de meilleure qualité. Elle sera renvoyée dans cette variable.
• img_data: emplacement Cloud Storage ou octets d'image d'une image générée avec Imagen 3.

4. Définir des fonctions d'assistance

Fonction de chargement

Ce code sera exécuté lorsque l'application se chargera. Il définit le mode de l'application sur les couleurs du système.

def load(e: me.LoadEvent):
  me.set_theme_mode("system")

Fonction de floutage

Cette fonction enregistre l'entrée utilisateur dans votre variable d'état.

def on_blur(e: me.InputBlurEvent):
    state = me.state(State)
    state.input = e.value

5. Générer une image avec Imagen

Cette fonction est appelée lorsqu'un utilisateur clique sur un bouton pour envoyer une invite de texte pour la génération d'images.

def generate_image(e: me.ClickEvent):
    state = me.state(State)
    image = client.models.generate_images(
        model=imagen_model,
        prompt=state.input,
        config=types.GenerateImagesConfig(
            number_of_images=1,
            aspect_ratio="1:1",
            enhance_prompt=True,
            safety_filter_level="BLOCK_MEDIUM_AND_ABOVE",
            person_generation="DONT_ALLOW",
        )
    )
    img = image.generated_images[0].image.image_bytes
    # Encode image in Base64 to display in web app
    img64 = base64.b64encode(img).decode('utf-8')
    state.enhanced_prompt = image.generated_images[0].enhanced_prompt
    state.img_data = f"data:image/png;base64,{img64}"

Vous pouvez configurer les paramètres situés dans GenerateImagesConfig:

• number_of_images: 1, 2, 3, 4
• aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3
• safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONE
• person_generation: DONT_ALLOW, ALLOW_ADULT, ALLOW_ALL

Remarque:La seule option qui fonctionne sans liste d'autorisation supplémentaire est DONT_ALLOW.

6. Structurer la mise en page de l'application

@me.page(
  on_load=load,
  path="/",
  title="Imagen 3",
)
def app():
   s = me.state(State)
   with me.box(
        style=me.Style(
            display="grid",
            width="100%",
            place_items="center",
            margin=me.Margin(top=100),
         )
    ):
        me.text(text="Imagen 3: Image Generation", type="headline-3", style=me.Style(font_family="Google Sans"))
        with me.box(
           style=me.Style(
              border_radius=16,
              padding=me.Padding.all(8),
              display="flex",
           )
        ):
            with me.box(
               style=me.Style(flex_grow=1)
            ):
                me.native_textarea(
                autosize=True,
                on_blur=on_blur,
                min_rows=8,
                placeholder="Enter your image prompt",
                style=me.Style(
                    padding=me.Padding(top=16, left=16),
                    width="700px",
                    border_radius=16,
                    outline="none",
                    overflow_y="auto",
                    border=me.Border.all(
                        me.BorderSide(style="none"),
                    ),
                    font_family="Google Sans",
                  ),
                )
            with me.content_button(
                type="icon",
                on_click=generate_image,
            ):
                me.icon("send")
        with me.box(style=me.Style(margin=me.Margin.all(8),
            width="700px",
            display="flex",
            align_items="center")
        ):
            me.image(
              src=s.img_data,
              style=me.Style(width="350px", padding=me.Padding.all(16), border_radius=36)
            )
            with me.box(
               style=me.Style(
                  padding=me.Padding.all(8),
                  background="white",
                  height="400px",
                  width="400px",
                  border_radius=16,
               )
            ):
                me.text(text="Enhanced Prompt:", style=me.Style(font_family="Google Sans", font_weight="bold"))
                me.text(text=s.enhanced_prompt, style=me.Style(padding=me.Padding.all(10), font_family="Google Sans"),
            )

Ce code crée une application monopage qui comprend les composants suivants:

• Titre
• Zone de texte pour saisir une requête d'image
• Bouton "Envoyer" qui appelle la fonction generate_image
• Image générée par Imagen
• Requête améliorée renvoyée avec l'image

7. Exécuter une application dans Cloud Shell

1. Une fois que vous avez copié tous les extraits de code dans main.py, vous pouvez exécuter l'application Mesop à partir de votre terminal Cloud Shell.

   mesop main.py
   

2. Cliquez maintenant sur le bouton "Web Preview" (Aperçu sur le Web) en haut à droite, puis sur "Change port" (Modifier le port). Saisissez 32123 dans le champ "Numéro de port", puis cliquez sur "Modifier et prévisualiser". Une nouvelle fenêtre s'ouvre et vous permet d'afficher l'application chargée. Elle devrait se présenter comme suit:

8. Test Imagen 3

C'est ici que vous pouvez essayer Imagen avec vos propres requêtes textuelles. Vous pouvez générer des images dans différents styles, du photoréalisme à l'animation, en passant par différents styles artistiques. Vous pouvez également spécifier des angles de vue, des objectifs et d'autres éléments spécifiques. Votre requête textuelle d'origine sera également réécrite à l'aide d'une fonctionnalité basée sur un LLM, qui vise à produire des images de meilleure qualité qui reflètent mieux l'intention de la requête d'origine.

Remarque:La génération d'images de personnes nécessite un accès supplémentaire. En attendant, une erreur s'affichera si votre requête inclut la génération de personnes ou de visages.

Voici quelques exemples de requêtes que vous pouvez essayer:

1. Casquette de baseball beige avec le message "good vibes" écrit en lettres blanches brodées en relief et soulignées en vert fluo.
2. Une confiserie originale.
3. Carte postale de Las Vegas avec le nom de la ville écrit en lettres majuscules et un timbre-poste dans le coin droit.
4. Un chiot et un chaton jouent avec une pelote de laine.

9. Nettoyage

Arrêter l'application

Revenez au terminal dans lequel vous avez lancé l'application, puis quittez-le avec Ctrl C.

Désactiver l'environnement virtuel

Dans le même terminal, saisissez la commande suivante:

deactivate

10. Conclusion

Félicitations ! Vous avez terminé cet atelier de programmation en créant une application avec Imagen et en générant des images.

Enquête

Donnez-nous votre avis sur cet atelier de programmation en répondant à cette courte enquête.

Étapes suivantes

• Documentation produit Imagen
• Notebook de génération d'images Imagen 3
• Guide du développeur pour Imagen 3 sur Vertex AI