Présentation

L'IA générative est une technologie qui peut être utilisée pour créer des contenus tels que du texte, des vidéos, des images et du code. Google Cloud propose divers outils et grands modèles de langage (LLM) pour vous aider à vous lancer avec l'IA générative, comme Gemini et Vertex AI. Vous pouvez utiliser des outils optimisés par les LLM pour créer et améliorer le contenu de vos sites Web, et y ajouter des fonctionnalités de recherche conversationnelle. Vous pouvez également faciliter la découverte de vos pages Web et améliorer la navigation sur votre site.

Objectifs

Dans cet atelier, vous allez implémenter une solution de modernisation de sites Web pour :

• simplifier la génération de contenu grâce à l'IA générative, et ainsi améliorer la qualité et l'efficacité du contenu de votre site Web ;
• générer des images qui complètent le texte de votre site Web ;
• traduire facilement le contenu de votre site Web dans la langue de votre choix ;
• améliorer la découverte d'informations en intégrant Vertex AI Search à votre site Web.

Prérequis

Pour chaque atelier, nous vous attribuons un nouveau projet Google Cloud et un nouvel ensemble de ressources pour une durée déterminée, sans frais.

1. Connectez-vous à Qwiklabs dans une fenêtre de navigation privée.

2. Vérifiez le temps imparti pour l'atelier (par exemple : 01:15:00) : vous devez pouvoir le terminer dans ce délai.
   Une fois l'atelier lancé, vous ne pouvez pas le mettre en pause. Si nécessaire, vous pourrez le redémarrer, mais vous devrez tout reprendre depuis le début.

3. Lorsque vous êtes prêt, cliquez sur Démarrer l'atelier.

4. Notez vos identifiants pour l'atelier (Nom d'utilisateur et Mot de passe). Ils vous serviront à vous connecter à Google Cloud Console.

5. Cliquez sur Ouvrir la console Google.

6. Cliquez sur Utiliser un autre compte, puis copiez-collez les identifiants de cet atelier lorsque vous y êtes invité.
   Si vous utilisez d'autres identifiants, des messages d'erreur s'afficheront ou des frais seront appliqués.

7. Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.

Activer Cloud Shell

Cloud Shell est une machine virtuelle qui contient des outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud. Google Cloud Shell vous permet d'accéder via une ligne de commande à vos ressources Google Cloud. gcloud est l'outil de ligne de commande associé à Google Cloud. Il est préinstallé sur Cloud Shell et permet la saisie semi-automatique via la touche Tabulation.

1. Dans Google Cloud Console, dans le volet de navigation, cliquez sur Activer Cloud Shell ().

2. Cliquez sur Continuer.
   Le provisionnement et la connexion à l'environnement prennent quelques instants. Une fois connecté, vous êtes en principe authentifié, et le projet est défini sur votre ID_PROJET. Exemple :

Exemples de commandes

• Afficher le nom du compte actif :

gcloud auth list

(Résultat)

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

(Exemple de résultat)

Credentialed accounts: - google1623327_student@qwiklabs.net

• Afficher l'ID du projet :

gcloud config list project

(Résultat)

[core] project = <ID_Projet>

(Exemple de résultat)

[core] project = qwiklabs-gcp-44776a13dea667a6

Tâche 1 : Activer l'API Vertex AI

Avant de pouvoir utiliser Vertex AI, vous devez activer l'API Vertex AI.

1. Pour ce faire, exécutez la commande suivante dans Cloud Shell :

   gcloud services enable aiplatform.googleapis.com

2. Cliquez sur Autoriser si vous y êtes invité.

   Remarque : Avant de vérifier votre progression, patientez quelques secondes jusqu'à ce l'API soit activée.

Cliquez sur Vérifier ma progression pour valider l'objectif. L'API Vertex AI a bien été activée.

Tâche 2 : Télécharger le code du site Web

Cet atelier utilise une application du site Web prédéfinie qui comprend des API de backend créées à l'aide de FastAPI, et une interface développée à l'aide de HTML, CSS et JavaScript. Dans cette tâche, vous allez télécharger le code du site Web, puis examiner sa structure et celle des fichiers.

Télécharger et afficher le code du site Web

1. Dans Cloud Shell, téléchargez l'archive du code du site Web depuis Cloud Storage :

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. Extrayez le contenu de l'archive :

   tar -zxvf genai-website-mod-app.tar.gz

3. Pour afficher la structure des fichiers et du code du site Web, dans la barre de menu Cloud Shell, cliquez sur Ouvrir l'éditeur.

4. Dans la barre de navigation de l'éditeur Cloud Shell, développez le dossier genai-website-mod-app.

   Ce dossier contient tous les fichiers nécessaires pour créer et déployer l'application du site Web. Voici quels sont ces fichiers et à quoi ils servent :

   Fichier/Dossier	Description
   Dockerfile	Permet de créer le conteneur de l'application du site Web à l'aide de Cloud Run
   config.toml	Permet de configurer l'application avec des variables
   main.py	Constitue le point d'entrée FastAPI principal de l'application du site Web
   models/	Contient les modèles de données utilisés par l'application du site Web
   routers/	Contient les routeurs des API FastAPI pour les différentes fonctionnalités de l'application
   static/	Contient les composants statiques du site Web, tels que les fichiers CSS, les images et les fichiers JS
   templates/	Contient les modèles Jinja pour les pages de l'application du site Web
   utils/	Contient les modules utilitaires pour l'application du site Web
   views/	Contient les implémentations de l'application du site Web

   Remarque : Vous n'avez pas besoin d'afficher ni de modifier le contenu des fichiers, sauf quand cela vous sera demandé dans les prochaines étapes de l'atelier.

Tâche 3 : Implémenter Vertex AI Search

Dans cette tâche, vous allez implémenter une fonctionnalité de recherche sur votre site Web en créant une application de recherche dans Vertex AI qui permettra de rechercher des données non structurées telles que des articles de blog.

Créer une application de recherche

1. Dans la console Google Cloud, cliquez sur le menu de navigation (), puis sélectionnez Agent Builder.

   Remarque : Si Agent Builder n'apparaît pas dans le menu de navigation, cliquez sur Afficher tous les produits. Faites défiler la page Tous les produits jusqu'à la section Intelligence artificielle, puis cliquez sur Agent Builder.

2. Cliquez sur Continuer et activer l'API.

3. Si vous êtes automatiquement redirigé vers la page Créer une application, passez à l'étape suivante. Sinon, cliquez sur Nouvelle application.

4. Sur la page "Créer une application", sous Recherche pour votre site Web, cliquez sur Créer.

5. Sur la page Configuration, configurez une application de recherche générique en utilisant les paramètres suivants et conservez les valeurs par défaut des autres paramètres :

   Propriété	Valeur (saisir ou sélectionner)
   Nom de votre application	my-search-app
   Nom externe de votre entreprise ou organisation	my-company
   Emplacement de votre application	mondial (Mondial)

6. Cliquez sur Continuer.

Créer un datastore pour l'application de recherche

1. Sur la page Datastores, cliquez sur Créer un datastore.

   Sur cette page, vous allez configurer la source de données que votre application de recherche utilisera pour générer les résultats sur votre site Web.

2. Sélectionnez Cloud Storage.

   Remarque : Pour les besoins de cet atelier, quelques documents HTML correspondant à des articles de blog ont été préprovisionnés dans un bucket Cloud Storage de votre projet.

3. Vérifiez que l'option Dossier est bien sélectionnée par défaut, puis cliquez sur Parcourir.

4. Pour afficher le contenu du bucket Cloud Storage , cliquez sur .

5. Sélectionnez le dossier blog_posts, puis cliquez sur Sélectionner.

   L'URI gs:// du dossier est alors renseigné.

   

6. Pour le type de données à importer, conservez l'option par défaut Documents non structurés, puis cliquez sur Continuer.

7. Pour le nom du datastore, saisissez my-data-store.

8. Cliquez sur Créer.

9. Sur la page Datastores, sélectionnez le datastore que vous venez de créer. Cliquez ensuite sur Créer pour créer l'application de recherche.

   

   Agent Builder commence à ingérer les données HTML des articles de blog à partir de votre bucket Cloud Storage pour votre application de recherche.

10. Pour afficher l'état de l'ingestion des données, sur la page Données de my-data-store, cliquez sur l'onglet Activité.

    La colonne État indique l'état actuel. Une fois l'importation terminée, la colonne indique Importation terminée.

    

    Remarque : L'importation des données peut prendre quelques minutes. Attendez qu'elle soit terminée avant de passer à l'étape suivante.

11. Pour vérifier que les documents ont bien été importés, cliquez sur l'onglet Documents.

Tester l'application de recherche

Vous pouvez prévisualiser l'application de recherche et tester ses fonctionnalités dans Agent Builder.

1. Dans le menu de navigation d'Agent Builder, cliquez sur Aperçu.

2. Dans le champ de recherche, saisissez What is dollar cost averaging and how can it help me? (Qu'est-ce que l'investissement programmé et comment peut-il m'aider ?), puis appuyez sur Entrée.

   L'application génère une réponse présentant l'investissement programmé, et fournit des extraits et des liens vers les fichiers pertinents qui ont été importés depuis Cloud Storage.

   Remarque : Par défaut, l'application de recherche utilise le modèle Gemini 1.5 Pro pour générer des réponses. Vous pouvez afficher ou modifier la configuration de l'application de recherche sur la page Agent Builder > Configurations de la console Google Cloud.

Cliquez sur Vérifier ma progression pour valider l'objectif. L'application Vertex AI Search a bien été créée.

Tâche 4 : Intégrer l'application de recherche à votre site Web

Maintenant que vous avez créé l'application de recherche, vous pouvez l'intégrer à votre site Web ou votre application. Cet atelier utilise l'API de recherche pour effectuer des appels et renvoyer les réponses à afficher sur le site. Vous pouvez également intégrer un widget de recherche à votre site Web pour afficher automatiquement une barre de recherche et une interface de recherche pouvant être développée. Pour en savoir plus sur cette option, consultez la documentation en lien à la fin de l'atelier.

Dans cette tâche, vous allez configurer le code du site Web pour qu'il intègre l'application de recherche que vous avez créée à la tâche précédente. Vous allez ensuite déployer l'application du site Web sur Cloud Run pour la tester.

Configurer l'application du site Web

L'application du site Web est créée à l'aide de FastAPI, un framework Web permettant de créer des API en Python. Le dossier genai-website-mod-app/routers contient les implémentations de l'API des routeurs pour différentes fonctionnalités du site Web, comme la recherche.

1. Dans l'éditeur Cloud Shell, accédez au dossier genai-website-mod-app/routers et ouvrez le fichier vertex_search.py.

   Ce fichier contient le code qui implémente les appels d'API de recherche à l'aide du module discoveryengine du SDK client Cloud pour Python. Le code utilise également tomllib, un module Python qui analyse les fichiers de configuration.

2. Examinez le code de la fonction trigger_first_search().

   Cette fonction configure l'appel de l'API Discovery Engine à l'aide du chemin d'accès projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id}, qui contient les paramètres associés.

3. Pour définir les valeurs des paramètres du chemin d'accès, dans le dossier genai-website-mod-app, modifiez le fichier config.toml.

4. Dans la section [global], remplacez les valeurs des propriétés de configuration comme suit :

   Section	Propriété	Valeur
   global	project_id
   global	location
   global	datastore_id	Voir l'étape suivante

5. Remplacez la valeur de la propriété de configuration datastore_id par l'ID du datastore de votre application de recherche :

   a. Pour obtenir la valeur de datastore_id, accédez à Agent Builder dans la console Google Cloud, puis sélectionnez Données.

   b. Copiez et collez l'ID du datastore my-data-store dans le fichier config.toml.

6. Remplacez les autres propriétés de configuration dans les sections de configuration correspondantes, comme suit :

   Section	Propriété	Valeur
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. Enregistrez les modifications apportées au fichier.

Tâche 5 : Créer, déployer et tester le site Web sur Cloud Run

Cloud Run est une plate-forme de calcul gérée qui vous permet d'exécuter des applications conteneurisées sur l'infrastructure évolutive de Google.

Dans cette tâche, vous allez créer l'application du site Web et la déployer sur Cloud Run. Vous allez également tester la fonctionnalité de recherche que vous avez intégrée au site Web.

Configurer l'environnement

1. Vérifiez que vous êtes bien dans le répertoire de l'application du site Web :

   cd ~/genai-website-mod-app

2. Définissez des variables d'environnement pour l'ID du projet, la région et le service de l'application du site Web :

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # Name of your Cloud Run service. echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

Créer et déployer votre application sur Cloud Run

1. Pour créer et déployer votre application sur Cloud Run, exécutez la commande suivante :

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. Pour créer le dépôt Docker Artifact Registry, saisissez Y.

   Une fois le service déployé, son URL est générée et renvoyée dans le résultat de la commande.

Tester la fonctionnalité de recherche du site Web

1. Pour tester votre application sur Cloud Run, accédez à l'URL du service Cloud Run de l'application du site Web dans une fenêtre ou un onglet de navigateur distinct.

2. Dans le champ de recherche, saisissez What is dollar cost averaging and how can it help me? (Qu'est-ce que l'investissement programmé et comment peut-il m'aider ?), puis appuyez sur Entrée.

3. Vérifiez que les résultats de recherche sont bien renvoyés et affichés sur le site Web.

   Remarque : Les résultats de recherche comprennent des réponses générées par l'IA. Elles sont basées sur le contenu des fichiers HTML dans le datastore que vous avez provisionné depuis Cloud Storage pour l'application de recherche. Il arrive que les liens des résultats de recherche n'affichent pas d'extrait, même s'ils renvoient vers l'article de blog correspondant. Remarque : Les fichiers des articles de blog utilisés par le site Web sont stockés sous forme de fichiers JSON dans un dossier de production distinct de votre bucket Cloud Storage. L'application du site Web utilise EditorJS pour convertir ces fichiers au format HTML et les afficher sur le site Web.

4. Posez une question complémentaire en saisissant Can you use dollar cost averaging with ETFs? (Est-il possible d'utiliser l'investissement programmé avec des ETF ?) dans le champ de recherche, puis appuyez sur Entrée.

5. Vérifiez que les résultats de recherche répondent à la question complémentaire et incluent des liens vers les articles de blog pertinents.

Cliquez sur Vérifier ma progression pour valider l'objectif. L'application du site Web a bien été déployée sur Cloud Run.

Tâche 6 : Utiliser l'IA générative pour modifier le contenu du site Web

Les outils d'IA générative de Google peuvent être utilisés pour créer et modifier le texte ou le contenu d'un site Web. Dans cette tâche, vous allez utiliser ces outils pour modifier le texte et les images du site Web utilisé dans cet atelier.

Examiner le code de génération d'images

L'application du site Web utilise l'API Imagen de Vertex AI pour générer et mettre à jour des images.

1. Dans l'éditeur Cloud Shell, ouvrez le fichier de configuration config.toml.

2. Examinez les propriétés de configuration dans la section [imagen]. Cette section définit les propriétés du modèle à utiliser pour la génération d'images et de légendes, ainsi que d'autres propriétés.

3. Dans l'éditeur Cloud Shell, ouvrez le fichier routers/vertex_imagen.py.

   Les différentes fonctions de création de légendes et de modification d'images, ainsi que leurs routes d'API, sont définies dans ce fichier.

4. Les fonctions sont implémentées dans le fichier utils/imagen.py. Ouvrez ce fichier dans l'éditeur Cloud Shell.

5. Examinez la fonction generate_image() :

   Cette fonction utilise la classe vertexai.preview.vision_models.ImageGenerationModel du package Vertex AI dans le SDK Python.

   Elle commence par charger le modèle de génération d'images, puis génère une image en appelant la fonction generate_images() sur le modèle et en lui transmettant votre requête textuelle et d'autres paramètres.

Modifier les images

Vous allez maintenant modifier une image dans l'un des articles de blog du site Web.

1. En haut à droite de votre site Web Cymbal Investments, cliquez sur All Blogs (Tous les articles de blog).

   Une page contenant six articles de blog s'affiche sur le site Web.

   Remarque : Si les articles de blog initiaux sont sélectionnés par défaut, cliquez n'importe où sur la page pour les désélectionner.

2. Cliquez sur le lien pour afficher le premier article de blog : Unleashing the Techie Within: A Journey to FIRE.

   La page de l'article de blog contient un en-tête, une image et des paragraphes de texte.

3. Pour modifier le contenu de la page, cliquez sur Edit  (Modifier) en bas à droite.

4. Pointez sur l'image, puis cliquez sur Click to tune  (Cliquer pour modifier) à gauche.

5. Dans le menu Click to tune (Cliquer pour modifier), sélectionnez Generate (Générer).

   

6. Sous la légende de l'image, dans Prompt (Requête), saisissez An image of a retired man and woman sitting on a beach enjoying the sunset (Une image d'un couple de retraités assis sur une plage et admirant le coucher de soleil). Cliquez sur Generate (Générer).

7. Revenez en haut de la page et attendez que l'image soit générée.

   Une fois la nouvelle image générée, elle est importée dans votre bucket d'images Cloud Storage. La page de l'article de blog est mise à jour avec cette nouvelle image.

Traduire le contenu

Vous pouvez traduire des pages Web entières ou seulement des parties de texte en utilisant des modèles de génération de texte. Dans cette tâche secondaire, vous allez traduire du texte sur la page de blog du site Web.

1. Dans l'éditeur Cloud Shell, ouvrez le fichier routers/vertex_llm.py.

   Les différentes fonctions de modification et de traduction de pages Web, ainsi que leurs routes d'API, sont définies dans ce fichier.

2. Faites défiler le fichier source jusqu'en bas et examinez le code de la fonction ai_translate_inline().

   Cette fonction crée une requête à l'aide de la propriété de configuration ai_translate_inline_prompt, du texte sélectionné par l'utilisateur et de la langue cible qu'il a spécifiée. Elle appelle ensuite la fonction llm_generate_gemini() pour générer une réponse à partir du modèle.

   Voici la valeur de la propriété de configuration ai_translate_inline_prompt dans le fichier config.toml :

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a target language as TARGET_LANGUAGE. 3. You should translate the INPUT_TEXT into the TARGET_LANGUAGE. 4. Strictly output only the translated text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT_TEXT:

3. Pour examiner la fonction llm_generate_gemini(), ouvrez le fichier utils/vertex_llm_utils.py.

   Cette fonction utilise la classe vertexai.generative_models.GenerativeModel du package Vertex AI dans le SDK Python.

   Elle commence par charger le modèle gemini-1.5-pro, puis génère une réponse en appelant la fonction generate_content() sur le modèle et en lui transmettant votre requête textuelle et d'autres paramètres.

4. Vérifiez que vous êtes bien en mode édition sur la page de l'article de blog de votre site Web. Si ce n'est pas le cas, cliquez sur Edit  (Modifier) en bas à droite.

5. Sélectionnez un paragraphe de texte, puis cliquez sur l'outil Translate (Traduction) :

   

6. Dans le champ de requête de la langue, saisissez French (Français), puis cliquez sur Send (Envoyer).

   Au bout de quelques secondes, le texte du paragraphe est traduit dans la langue spécifiée et remplacé directement sur la page.

Modifier le texte du site Web

Vous pouvez également utiliser un modèle génératif pour affiner le texte de votre site Web.

1. Dans le fichier routers/vertex_llm.py, examinez la fonction ai_refine_text().

   Cette fonction génère une requête à l'aide de la propriété de configuration ai_refine_prompt, du texte sélectionné par l'utilisateur dans le contenu du site Web et des instructions qu'il a fournies.

   Voici la valeur de la propriété de configuration ai_refine_prompt dans le fichier config.toml :

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a style or tone or instructions as REFINE_PROMPT. 3. You should modify or refine INPUT_TEXT in the tone or style of REFINE_PROMPT. 4. Strictly output only the refined text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT TEXT:

2. Vérifiez que vous êtes bien en mode édition sur la page de l'article de blog de votre site Web. Si ce n'est pas le cas, cliquez sur Edit  (Modifier) en bas à droite.

3. Sélectionnez un paragraphe de texte, puis cliquez sur l'outil Refine Text (Améliorer le texte) :

   

4. Pour rendre le ton du texte sélectionné plus formel et plus percutant, saisissez formal impactful dans la zone du style. Cette valeur est ajoutée à la requête sous forme de chaîne REFINE_PROMPT avant d'appeler le modèle.

5. Cliquez sur Send (Envoyer).

   Au bout de quelques secondes, le modèle génère une réponse qui s'affiche sur la page dans un encadré sous le texte d'origine.

6. Consultez le texte du paragraphe modifié, puis cliquez sur Replace (Remplacer).

7. Pour enregistrer les modifications apportées à la page de l'article de blog, cliquez sur Save (Enregistrer) en haut.

8. Pour afficher la valeur finale de la requête, dans le menu de navigation () de la console Google Cloud, sélectionnez Journalisation > Explorateur de journaux.

   Remarque : Si Journalisation ne figure pas dans le menu de navigation, cliquez sur Afficher tous les produits. Faites défiler la page Tous les produits jusqu'à la section Observabilité, puis cliquez sur Journalisation.

9. Pour mettre en avant les entrées de journal correspondantes, dans la barre de menu des résultats, cliquez sur Actions > Mettre en avant dans les résultats.

10. Dans Mettre en avant dans les résultats, saisissez REFINE_PROMPT.

    

Cliquez sur Vérifier ma progression pour valider l'objectif. Les modifications ont bien été apportées au contenu du site Web.

Terminer l'atelier

Une fois l'atelier terminé, cliquez sur End Lab (Terminer l'atelier). Qwiklabs supprime les ressources que vous avez utilisées, puis efface le compte.

Si vous le souhaitez, vous pouvez noter l'atelier. Sélectionnez le nombre d'étoiles correspondant à votre note, saisissez un commentaire, puis cliquez sur Submit (Envoyer).

Le nombre d'étoiles que vous pouvez attribuer à un atelier correspond à votre degré de satisfaction :

• 1 étoile = très mécontent(e)
• 2 étoiles = insatisfait(e)
• 3 étoiles = ni insatisfait(e), ni satisfait(e)
• 4 étoiles = satisfait(e)
• 5 étoiles = très satisfait(e)

Si vous ne souhaitez pas donner votre avis, vous pouvez fermer la boîte de dialogue.

Pour soumettre des commentaires, suggestions ou corrections, veuillez utiliser l'onglet Support (Assistance).

Félicitations !

Au cours de cet atelier, vous avez :

• créé et testé une application de recherche générique Vertex AI ;
• intégré l'application Vertex AI Search à un site Web ;
• utilisé l'API Imagen pour générer et modifier une image sur le site Web ;
• traduit et amélioré le texte d'une page en utilisant le modèle TextGenerationModel de Vertex AI ;
• déployé et testé l'application du site Web sur Cloud Run.

Grâce à ces fonctionnalités, vous pouvez mettre à jour le contenu de votre site Web et enregistrer vos modifications dans un stockage externe, tel que Cloud Storage, afin de les examiner et de les publier.

Étapes suivantes et informations supplémentaires

• Vertex AI
• Gemini
• Ajouter le widget de recherche à une page Web
• Artifact Registry
• Cloud Run

Copyright 2024 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms de société et de produit peuvent être des marques des sociétés auxquelles ils sont associés.