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

1. Introduction

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

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 un niveau de détail étonnant. Les développeurs ont ainsi plus de contrôle lorsqu'ils créent des produits d'IA 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 guidera dans l'utilisation de la puissance d'Imagen à l'aide du SDK Gen AI de Google. Vous découvrirez non seulement comment générer des images époustouflantes à partir de requêtes textuelles, mais aussi comment intégrer cette fonctionnalité dans une application Web à l'aide de Mesop, un framework d'interface utilisateur Python.

Prérequis

Points abordés

  • Comment utiliser le SDK Gen AI de Google pour Python afin d'interagir avec Imagen 3
  • Comment générer des images à partir de requêtes textuelles
  • Comment créer une application Mesop et l'exécuter à partir de Cloud Shell

Ce dont vous avez besoin

  • Connaissances de base sur Python
  • Expérience d'exécution de commandes dans un terminal Cloud Shell
  • Un ordinateur ayant 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
  1. Accédez à votre nouveau dossier :
cd my-imagen-app
  1. Créez un environnement virtuel dans Python 3 :
python3 -m venv myenv
  1. Activez l'environnement virtuel :
source myenv/bin/activate
  1. Installez Mesop :
pip3 install mesop
  1. Installez le SDK Gen AI de Google pour Python :
pip install google-genai
  1. Créez un fichier Python :
touch main.py

3. Configuration des applications

Tout le code nécessaire à l'exécution de l'application Mesop se trouvera dans main.py. À chacune des étapes suivantes, copiez-le et collez-le séquentiellement dans ce fichier de 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.

  1. Créez le 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 fournie. Une nouvelle requête détaillée sera créée à partir de la requête d'origine pour générer des images de meilleure qualité et 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é lors du chargement de l'application. 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 flou

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 requête textuelle afin de générer une image.

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 à une seule page 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 l'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 ensuite sur le bouton "Aperçu sur le Web" en haut à droite, puis sur "Modifier le port". Saisissez 32123 dans la zone "Numéro de port", puis cliquez sur "Modifier et prévisualiser". Une nouvelle fenêtre doit s'ouvrir pour vous permettre d'afficher l'application chargée. Elle doit ressembler à ceci : Capture d'écran de l'application

8. Tester Imagen 3

Vous pouvez maintenant essayer Imagen avec vos propres requêtes textuelles. Vous pouvez générer des images dans différents styles, allant du photoréalisme à l'animation, en passant par différents styles artistiques. Vous pouvez également spécifier des angles de caméra, des objectifs, etc. Votre requête textuelle d'origine sera également réécrite à l'aide d'une fonctionnalité basée sur un LLM, conçue pour 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, vous recevrez une erreur 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. Une casquette de baseball beige avec l'inscription "good vibes" en blanc, en lettres cousues et arrondies, soulignées en vert néon.
  2. Une confiserie fantaisiste.
  3. Une carte postale de Las Vegas avec le nom de la ville écrit et un timbre-poste dans le coin droit.
  4. Un chiot et un chaton qui jouent avec une pelote de laine.

9. Nettoyage

Arrêter l'application

Revenez au terminal où vous avez lancé l'application et quittez-la en appuyant sur 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

Faites-nous part de ce que vous avez pensé de cet atelier de programmation en répondant à cette courte enquête.

Étapes suivantes