Utiliser Gemini Code Assist pour explorer et améliorer la solution de démarrage rapide de la synthèse par IA

1. Introduction

Dans cet atelier de programmation, nous allons examiner une solution de démarrage rapide existante, la synthèse par IA, qui utilise des modèles Vertex AI pour résumer des documents PDF importés dans Google Cloud Storage.

Nous utiliserons ensuite Gemini Code Assist pour :

• Comprendre le code Python qui alimente la fonction Cloud Functions, qui extrait le texte du document PDF, le résume et écrit les résultats dans BigQuery.
• Nous allons faire appel à Gemini Code Assist tout au long du processus pour nous aider à écrire de nouvelles fonctionnalités. Nous allons développer une application Web (application Python Flask) et l'exécuter en local pour vérifier notre code.
• Si vous le souhaitez, vous pouvez également déployer cette application sur Cloud Run et améliorer la conception (esthétique) de l'application Web à l'aide de Material Design.

Ce que vous allez effectuer...

• Vous allez déployer la solution de démarrage rapide de synthèse par IA et déclencher le flux de processus pour comprendre son fonctionnement.
• Vous utiliserez ensuite Cloud Shell IDE pour télécharger le code existant de la solution de démarrage rapide et Gemini Code Assist pour le comprendre.
• Vous utiliserez Gemini Code Assist Cloud Shell IDE pour générer du code pour une nouvelle fonctionnalité.

Ce que vous allez apprendre...

• Fonctionnement de la solution de démarrage rapide pour la synthèse par IA.
• Utiliser Gemini Code Assist pour plusieurs tâches de développement (par exemple, générer du code, le résumer et le compléter)

Ce dont vous avez besoin...

• Navigateur Web Chrome
• Un compte Gmail
• Un projet Cloud pour lequel la facturation est activée
• Gemini Code Assist activé pour votre projet cloud

Cet atelier s'adresse aux développeurs de tous niveaux, y compris aux débutants. Bien que l'exemple d'application soit en langage Python, vous n'avez pas besoin de maîtriser la programmation Python pour comprendre le processus. L'objectif est de vous familiariser avec les fonctionnalités de Gemini Code Assist pour les développeurs.

2. Préparation

Cette section décrit tout ce que vous devez faire pour commencer cet atelier.

Activer Gemini pour Cloud dans le projet Google Cloud

Nous allons maintenant activer Gemini pour Cloud dans notre projet Google Cloud. Suivez les étapes ci-dessous :

1. Accédez à https://console.cloud.google.com et veillez à sélectionner le projet Google Cloud que vous comptez utiliser dans cet atelier. Cliquez sur l'icône Ouvrir Gemini en haut à droite.

2. La fenêtre de chat Gemini pour Cloud s'ouvre sur le côté droit de la console. Cliquez sur le bouton "Activer", comme indiqué ci-dessous. Si le bouton Activer n'est pas affiché et que vous voyez à la place une interface de chat, vous avez probablement déjà activé Gemini pour Cloud pour le projet. Vous pouvez alors passer directement à l'étape suivante.

3. Une fois Gemini pour Cloud activé, vous pouvez effectuer un test en lui posant une ou deux questions. Vous en trouverez ci-dessous quelques exemples. Vous pouvez demander What is Cloud Run?.

Gemini pour Cloud répondra à votre question. Pour fermer la fenêtre de chat de Gemini pour Cloud, vous pouvez cliquer sur l'icône  située en haut à droite.

Activer Gemini Code Assist dans Cloud Shell IDE

Pour le reste de l'atelier de programmation, nous allons utiliser Cloud Shell IDE, un environnement de développement entièrement géré basé sur Code OSS. Pour cela, nous devons activer et configurer Code Assist dans Cloud Shell IDE comme suit :

1. Accédez à ide.cloud.google.com. L'IDE peut mettre un certain temps à s'afficher. Veuillez patienter.
2. Cliquez sur le bouton Cloud Code – Se connecter dans la barre d'état inférieure (voir ci-dessous). Autorisez le plug-in comme indiqué. Si Cloud Code – Aucun projet est affiché dans la barre d'état, cliquez dessus. Dans la liste des projets, sélectionnez le projet Google Cloud que vous comptez utiliser.

3. Cliquez sur le bouton Gemini en bas à droite, comme indiqué, puis sélectionnez une dernière fois le bon projet Google Cloud. Si vous êtes invité à activer l'API Cloud AI Companion, veuillez le faire et continuer.
4. Une fois que vous avez sélectionné votre projet Google Cloud, vérifiez que le message d'état Cloud Code s'affiche dans la barre d'état et que l'assistance au codage est également activée à droite, dans la barre d'état, comme illustré ci-dessous :

Gemini Code Assist est prêt à être utilisé.

Gemini Code Assist est également disponible dans les IDE locaux tels que Visual Studio Code ou JetBrains IntelliJ. Il est également disponible dans Google Cloud Workstations. Cet atelier de programmation se concentre sur Cloud Shell IDE afin que tout le monde utilise le même environnement. N'hésitez pas à essayer votre configuration préférée et à consulter ce lien pour en savoir plus.

Facultatif : Si Gemini n'est pas affiché dans la barre d'état en bas à droite, vous devez activer Gemini dans Cloud Code. Avant cela, assurez-vous que Gemini est activé dans l'IDE en accédant à l'extension Cloud Code → Paramètres, puis en saisissant le texte Gemini, comme illustré ci-dessous. Assurez-vous que la case est cochée. Actualisez ensuite l'IDE.Gemini est alors activé dans Cloud Code et l'icône Gemini apparaît dans la barre d'état de l'IDE.

3. Déployer la solution de démarrage rapide de synthèse par IA

1. Accéder à la solution de synthèse de documents par IA générative
2. Cliquez sur "Deploy" (Déployer).

• Si la facturation n'est pas activée pour votre projet, activez-la.
• Sélectionnez la région us-central1.
• Cliquez sur "Déployer".
• Cette opération peut prendre jusqu'à 15 minutes.
• Vous n'avez pas besoin d'apporter de modifications, mais n'hésitez pas à explorer le déploiement de la solution de démarrage rapide en cliquant sur le bouton EXPLORER CETTE SOLUTION sur la page d'informations détaillées sur le déploiement de la solution.

4. Discuter avec Gemini

Nous allons commencer par apprendre à discuter avec Gemini. Gemini est disponible en tant qu'assistant par chat dans Cloud Shell IDE dans le cadre de l'extension Cloud Code de VS Code. Vous pouvez l'afficher en cliquant sur le bouton Gemini situé dans la barre de navigation de gauche. Repérez l'icône Gemini  dans la barre de navigation de gauche, puis cliquez dessus.

Le volet "Chat : Gemini" s'affiche dans Cloud Shell IDE. Vous pouvez discuter avec Gemini pour obtenir de l'aide sur Google Cloud.

Utilisons le volet de chat Gemini pour saisir une requête et voir la réponse de Gemini. Saisissez le prompt suivant :

What is Cloud Run? 

Gemini devrait vous fournir une réponse détaillée concernant Cloud Run. Les prompts sont des questions ou instructions qui décrivent l'aide dont vous avez besoin. Ils peuvent inclure du contexte issu d'un code existant que Google Cloud analyse pour fournir des réponses plus pertinentes ou complètes. Pour savoir comment rédiger des requêtes permettant de générer de bonnes réponses, consultez Rédiger de meilleures requêtes pour Gemini dans Google Cloud.

Essayez les exemples de requêtes suivants ou les vôtres pour poser des questions concernant Google Cloud :

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

Notez l'icône de corbeille en haut de l'écran. Elle vous permet de réinitialiser le contexte de l'historique du chat Code Assist. Notez également que cette discussion est contextuelle aux fichiers sur lesquels vous travaillez dans l'IDE.

5. Télécharger la fonction Cloud de la solution de démarrage dans Cloud Code

En partant du principe que vous êtes dans l'éditeur Cloud Shell, procédez comme suit :

• Cliquez sur Cloud Code 
• Remarque : Selon la taille de votre écran, il est possible qu'une ou deux étapes soient nécessaires.

ou

• Cliquez sur "Cloud Functions".
• Si vous y êtes invité, connectez-vous à votre compte ou autorisez-le.
• Cliquez sur la fonction de webhook.
• Cliquez sur l'icône Télécharger dans un nouvel espace de travail .
• 
• Utilisez webhook-1 comme nom d'espace de travail (il devrait être défini par défaut) ou tout autre nom, puis cliquez sur OK.
• Le code s'ouvre alors dans l'IDE Cloud Shell.

6. Examiner le projet existant

Cette solution de démarrage rapide est présentée ci-dessous :

Examinez le flux de la fonctionnalité d'importation de PDF vers Cloud Storage. La fonction Cloud qui sera appelée si le fichier PDF est importé est indiquée dans le fichier main.py.

Cliquons sur ce fichier. Le point d'entrée de la fonction Cloud est la fonction entrypoint, qui appelle finalement la fonction cloud_event_entrypoint qui extrait le texte du PDF, puis appelle la fonction summarization_entrypoint, qui utilise les modèles Vertex AI pour résumer et écrire les résultats dans GCS et BigQuery, respectivement.

Mettez en surbrillance tout le code du fichier main.py ou un extrait de code spécifique. Cliquez sur Gemini Chat et saisissez la requête suivante : Explain this.

Vous devriez obtenir une explication du code.

7. Exécuter un exemple d'exécution

Conformément au schéma de l'architecture, nous allons importer un fichier dans le bucket <PROJECT_ID>_uploads pour que la fonction Cloud soit appelée.

Assurez-vous d'avoir un exemple de PDF prêt à être importé et pour lequel vous souhaitez obtenir un résumé.

• Accédez à Google Cloud Storage dans la console Cloud.
• Accédez au bucket <PROJECT_ID>_uploads. Cliquez sur le lien IMPORTER DES FICHIERS, puis importez un exemple de PDF.

Si vous n'avez pas d'exemple de fichier PDF, vous pouvez utiliser l'un de ceux que nous avons créés. Dans Cloud Shell, exécutez la commande suivante :

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

Une fois le fichier importé, la fonction Cloud webhook est appelée et résume le texte trouvé dans le document. La sortie sera écrite dans un ensemble de données BigQuery nommé summary_dataset et dans la table summary_table.

Interrogez le tableau pour afficher les résultats du récapitulatif.

8. Créer une application Web cliente pour l'application

La procédure ci-dessus est une procédure manuelle étape par étape pour importer le fichier PDF que nous souhaitons résumer. Et si vous créiez une interface Web pour l'application ?

Les exigences pour l'interface Web sont simples :

1. Un formulaire HTML de base qui nous permet de sélectionner et d'importer le fichier à résumer.
2. Une fois le fichier importé, il doit être écrit dans le bucket <PROJECT_ID>_uploads pour que le reste des fonctionnalités fonctionne tel quel.

Nous allons utiliser Python et le framework Flask pour les applications Web afin de créer cette application avec l'aide de Duet AI.

C'est parti ! Nous partons du principe que vous avez toujours le même espace de travail ouvert dans l'IDE Cloud Shell.

Fermez tous les fichiers et saisissez le prompt suivant dans la fenêtre de chat Gemini :

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

Idéalement, le code généré devrait se présenter comme suit :

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Enregistrez le code ci-dessus sous le nom app.py à la racine de l'espace de travail de l'IDE.

Nous souhaitons que l'application s'exécute sur le port 8080 et utilise l'adresse hôte 0.0.0.0. Nous allons donc demander à Gemini de modifier l'instruction app.run.

Fournissez le prompt suivant :

Modify the app.py to run on port 8080 and host address 0.0.0.0

Votre code devrait maintenant se présenter comme suit :

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Nous souhaitons également que le fichier index.html soit généré. Saisissez le prompt suivant dans la fenêtre de discussion Gemini :

Provide the index.html file

Il doit vous fournir le code ci-dessous pour index.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Nous pouvons demander à Gemini de nous indiquer où enregistrer le fichier index.html. Fournissez le prompt suivant :

Since this is using the render_template framework, where should this file be saved?

Vous devriez obtenir une réponse semblable à celle-ci :

Créez un dossier nommé "templates" dans le dossier racine et enregistrez-y le fichier index.html.

Nous aimerions que la gestion des exceptions soit intégrée au fichier app.py au cas où le fichier ne pourrait pas être enregistré dans le bucket Google Cloud Storage. Laissez le fichier app.py ouvert et saisissez le prompt suivant dans la fenêtre Gemini Chat.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

Cela devrait maintenant ajouter une gestion des exceptions, comme indiqué ci-dessous :

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Comme nous devons afficher le message d'erreur dans index.html, nous devons également le modifier. Demandons à Gemini de le faire avec le prompt ci-dessous :

update the index.html to display the error message

Vous devriez obtenir un fichier index.html mis à jour, comme indiqué ci-dessous :

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Assurez-vous d'enregistrer les modifications apportées aux fichiers app.py et index.html à chaque étape ci-dessus.

Le app.py ne comporte pas le nom de bucket correct. Nous pouvons donc fournir cette information à Gemini et lui demander d'effectuer les modifications. De plus, nous devons fournir l'ID du projet pour l'instance storage.Client(). Par conséquent, saisissez les deux requêtes suivantes (remplacez <PROJECT_ID> par l'ID de votre projet Google Cloud) dans la fenêtre de chat Gemini et apportez les modifications :

Requête 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

Requête 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

Le fichier app.py final ressemble à ceci (mon ID de projet est indiqué ci-dessous, mais il devrait idéalement s'agir de celui avec lequel vous travaillez et que vous avez indiqué dans la requête ci-dessus) :

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. Exécuter l'application Web en local

Créez un environnement Python avec les dépendances définies dans le fichier requirements.txt. Accédez à la palette de commandes dans l'IDE Cloud Shell, comme indiqué ci-dessous :

Saisissez Python: Create Environment, puis suivez les étapes pour créer un environnement virtuel à l'aide de (venv), puis l'interpréteur Python 3.x et le fichier requirements.txt. L'environnement requis sera alors créé.

Lancez le terminal maintenant, comme indiqué ci-dessous :

Exécutez la commande suivante dans le terminal :

python app.py

L'application Flask devrait se lancer et vous devriez voir quelque chose comme ceci :

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

Accédez à l'URL http://127.0.0.1:8080. La page index.html devrait s'afficher.

Importez un fichier depuis votre ordinateur local. Il devrait être traité sans problème.

Pour vérifier la synthèse, accédez à l'ensemble de données et à la table BigQuery que nous avons vus précédemment dans l'atelier. Vous pouvez également consulter le bucket Cloud Storage (<PROJECT_ID>_output).

10. (Facultatif) Exploration ouverte : déployer sur Cloud Run

• Vous pouvez déployer l'application sur Cloud Run.
• Posez la question suivante à Gemini Code Assist (vous devrez peut-être essayer plusieurs variantes du prompt ci-dessus) :

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (Facultatif) Explorer : ajouter des styles CSS

• Utilisez Gemini Code Assist et l'assistant intégré pour ajouter des styles CSS à votre application, puis la déployer à nouveau lorsque vous aurez terminé.
• Ouvrez le fichier index.html et saisissez la requête suivante dans Gemini Chat : Can you apply material design styles to this index.html?
• Examinez le code et vérifiez s'il fonctionne.

12. Félicitations !

Bravo ! Vous avez travaillé sur un exemple de projet avec Gemini Code Assist pour voir comment celui-ci pouvait vous aider à générer du code, à le résumer et à le compléter, en plus de répondre à vos questions concernant Google Cloud.

13. Documents de référence

• Page d'accueil de Gemini Code Assist
• Utiliser Gemini pour l'assistance et le développement optimisés par l'IA : documentation
• Cas d'utilisation de Gemini