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 nous intéresser à une solution de démarrage rapide, la synthèse par IA, qui utilise des modèles Vertex AI pour résumer les documents PDF importés dans Google Cloud Storage.

Nous utiliserons ensuite Gemini Code Assist pour:

• Familiarisez-vous avec le code Python sur lequel s'appuie la fonction Cloud qui extrait le texte du document PDF, le résume et l'écriture des résultats dans BigQuery.
• Nous utiliserons l'aide de Gemini Code Assist tout au long du processus pour nous aider à développer de nouvelles fonctionnalités. Nous développerons une application Web (application Python Flask) et l'exécuterons localement pour vérifier notre code.
• Si vous le souhaitez, nous pouvons également envisager de déployer cette application sur Cloud Run et d'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 la synthèse par IA et déclencher le flux de processus pour comprendre son fonctionnement.
• Vous utiliserez ensuite l'IDE Cloud Shell pour télécharger le code existant de la solution de démarrage rapide et vous utiliserez Gemini Code Assist pour comprendre le code.
• Vous utiliserez l'IDE Gemini Code Assist Cloud Shell afin de générer le code d'une nouvelle fonctionnalité.

Ce que vous allez apprendre...

• Fonctionnement de la solution de démarrage rapide de synthèse par IA.
• Comment utiliser Gemini Code Assist pour effectuer plusieurs tâches de développement comme la génération de code, la complétion de code et la synthèse de code.

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. Notre objectif sera de se 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 "Enable" (Activer) comme illustré ci-dessous. Si le bouton Activer ne s'affiche pas, mais qu'une interface Chat s'affiche à la place, cela signifie que vous avez probablement déjà activé Gemini pour Cloud pour le projet et que vous pouvez passer directement à l'étape suivante.

3. Une fois qu'il est activé, vous pouvez tester Gemini pour Cloud en lui posant une ou deux requêtes. Vous en trouverez ci-dessous quelques exemples. Vous pouvez demander What is Cloud Run?.

Gemini pour Cloud vous fournira la réponse à votre question. Vous pouvez cliquer sur l'icône en haut à droite pour fermer la fenêtre de discussion Gemini pour Cloud.

Activer Gemini Code Assist dans l'IDE Cloud Shell

Pour le reste de l'atelier de programmation, nous utiliserons l'IDE Cloud Shell, un environnement de développement entièrement géré basé sur Code OSS. Nous devons activer et configurer Code Assist dans l'IDE Cloud Shell en suivant les étapes ci-dessous:

1. Accédez à ide.cloud.google.com. Veuillez patienter, car l'affichage de l'IDE peut prendre un certain temps.
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 illustré, 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. Après avoir sélectionné votre projet Google Cloud, vérifiez qu'il s'affiche dans le message d'état Cloud Code de la barre d'état et que Code Assist est également activé à droite, dans la barre d'état, comme illustré ci-dessous:

Gemini Code Assist est prêt à l'emploi !

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 l'IDE Cloud Shell afin de permettre à tous les utilisateurs d'utiliser le même environnement. Toutefois, n'hésitez pas à tester votre configuration préférée et à consulter ce lien pour en savoir plus.

Facultatif:Si vous ne voyez pas Gemini 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. Pour ce faire, accédez à Extension Cloud Code → Paramètres, puis saisissez Gemini comme indiqué ci-dessous. Assurez-vous que la case est cochée. Vous devez actualiser votre IDE.Cela active Gemini dans Cloud Code, et l'icône Gemini s'affichera dans la barre d'état.

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

1. Accédez à la solution de synthèse de documents par IA générative.
2. Cliquez sur "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 du déploiement de la solution.

4. Discutez avec Gemini

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

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

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

What is Cloud Run? 

Gemini doit répondre en fournissant des informations sur Cloud Run. Les requêtes sont des questions ou instructions qui décrivent l'aide dont vous avez besoin. Elles 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 la corbeille située en haut. Elle vous permet de réinitialiser le contexte de l'historique des discussions de Code Assist. Notez également que cette interaction de chat dépend du ou des fichiers sur lesquels vous travaillez dans l'IDE.

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

Si vous êtes dans l'éditeur Cloud Shell, procédez comme suit:

• Cliquez sur Cloud Code .
• Remarque: Selon la taille de votre écran, l'opération peut nécessiter une ou deux étapes.

ou

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

6. Examiner le projet existant

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

Examinez le flux de la fonctionnalité Importer un PDF vers Cloud Storage. La fonction Cloud qui est 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 à terme la fonction cloud_event_entrypoint, qui extrait le texte du PDF, puis appelle summarization_entrypoint, qui utilise des modèles Vertex AI pour résumer et écrire les résultats dans GCS et BigQuery, respectivement.

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

Cela devrait vous donner une explication pour le 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 à disposition un exemple de PDF que vous pouvez importer et pour lequel vous souhaitez obtenir la synthèse.

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

Si vous ne disposez pas d'un 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. Le résultat sera écrit dans un ensemble de données BigQuery nommé summary_dataset et dans la table summary_table.

Interrogez la table pour afficher les résultats du résumé.

8. Créer un client d'application Web pour l'application

La procédure ci-dessus consiste à importer manuellement le PDF que nous voulons résumer, étape par étape. Que diriez-vous de créer une interface Web pour l'application ?

Les conditions requises pour l'interface Web sont simples:

1. Formulaire HTML de base qui nous permet de sélectionner et d'importer le fichier, qui doit être résumé.
2. Une fois l'importation effectuée, le fichier doit être écrit dans le bucket <PROJECT_ID>_uploads pour que le reste des fonctionnalités fonctionne tel quel.

Nous allons développer ce système à l'aide de Python et du framework Flask pour les applications Web en lien avec Duet AI.

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

Fermez tous les fichiers et exécutez la requête suivante dans la fenêtre Gemini Chat:

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, cela devrait produire le code suivant:

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 aimerions que l'application s'exécute sur le port 8080 et utilise l'adresse de l'hôte 0.0.0.0. Demandons donc à Gemini de modifier l'instruction app.run.

Saisissez la requête suivante:

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

Le code doit 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)

L'étape suivante consiste à générer également le fichier index.html. Saisissez la requête suivante dans la fenêtre Gemini Chat:

Provide the index.html file

Vous devriez obtenir 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. Saisissez la requête suivante:

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

La réponse doit être semblable à celle-ci:

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

Nous souhaitons que les exceptions soient traitées dans le fichier app.py au cas où celui-ci ne serait pas enregistré dans le bucket Google Cloud Storage. Laissez le fichier app.py ouvert et exécutez la requête suivante 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.

Les exceptions doivent maintenant être traitées, 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 le fichier index.html, nous devons également le modifier. Demandez à Gemini de le faire via la requête ci-dessous:

update the index.html to display the error message

Vous devriez obtenir un fichier index.html à 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 qu'à chacune des étapes ci-dessus, vous enregistrez les modifications dans les fichiers app.py et index.html, respectivement.

app.py n'a pas le bon nom de bucket. Nous pouvons donc fournir ces informations à Gemini et lui demander d'effectuer les modifications. Nous devons également fournir l'ID de projet pour l'instance storage.Client(). Envoyez les requêtes suivantes (remplacez <PROJECT_ID> par l'ID de votre projet Google Cloud) dans la fenêtre Gemini Chat et intégrez 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 se présente comme suit (mon ID de projet est illustré ci-dessous, mais il devrait idéalement être celui avec lequel vous travaillez et celui que vous avez indiqué dans l'invite 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 permettant de créer un environnement virtuel à l'aide de (venv), de l'interpréteur Python 3.x et du fichier requirements.txt. L'environnement requis sera 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 un résultat semblable à celui-ci doit s'afficher:

(.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 à partir de votre ordinateur local. Il devrait être traité correctement.

Vous pouvez vérifier la synthèse en accédant à l'ensemble de données et à la table BigQuery que nous avons vus plus tôt dans l'atelier. Vous pouvez également extraire le bucket Cloud Storage (&lt;PROJECT_ID&gt;_output).

10. (Facultatif) Ouvrir l'outil Exploration – Déployer dans Cloud Run

• Vous pouvez déployer l'application sur Cloud Run.
• Demandez à Gemini Code Assist la requête suivante (vous devrez peut-être essayer plusieurs variantes de la requête 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) Ouvrir Exploration - Ajouter des styles CSS

• Utilisez Gemini Code Assist et l'assistant intégré à l'éditeur pour ajouter des styles CSS à votre application, puis la déployer à nouveau lorsque vous avez 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?
• Vérifiez le code et voyez s'il fonctionne.

12. Félicitations !

Félicitations ! Vous avez travaillé avec Gemini Code Assist sur un exemple de projet pour comprendre comment cet outil peut faciliter la génération de code, la saisie automatique de code et la synthèse de code, et vous aider à obtenir des réponses à vos questions sur Google Cloud.

13. Documents de référence

• Page d'accueil de Gemini Code Asssit
• Utiliser Gemini pour l'assistance et le développement d'IA – Documentation
• Cas d'utilisation de Gemini