Utiliser Duet AI pour explorer et améliorer une application existante

1. Présentation

Cet atelier de programmation vous explique comment utiliser Duet AI pour concevoir une application cliente sur un backend d'API existant.

Objectifs de l'atelier

Cet atelier vous montre comment utiliser Duet AI avec une application existante. Dans cet atelier, vous allez apprendre à effectuer les tâches suivantes :

• Déployer la solution de démarrage rapide pour le traitement d'images par IA/ML
• Utiliser Duet AI pour explorer l'application d'API
• Utiliser Duet AI afin de créer un client pour l'application d'API

Configuration – Créer un projet

Selon vos règles d'administration, il est possible que vous ne puissiez pas déployer correctement cette solution.

Recommandation : Utilisez un compte disposant de toutes les autorisations (un compte personnel, par exemple), plutôt qu'un compte d'entreprise ou scolaire.

Remarque : Si vous avez récemment créé un projet pour lequel vous disposez de toutes les autorisations et que l'API Duet AI est déjà activée sur ce projet, vous pouvez continuer à l'utiliser et ignorer cette étape. Par exemple, si vous avez récemment suivi un autre atelier de programmation Duet AI, vous pouvez ignorer cette étape.

1. Accédez à la console Google Cloud.
2. Cliquez sur le menu déroulant du projet actuel.
3. Cliquez sur Nouveau projet .
4. Saisissez le nom du projet et cliquez sur CRÉER.
   • Recommandation : Utilisez un nom de projet unique de sorte que Project name et Project ID soient identiques.

2. Déployer la solution de démarrage rapide

Les solutions de démarrage rapide sont des modèles de solutions prédéfinis à partir de Google Cloud. Cet atelier utilise une solution de démarrage rapide pour vous montrer comment Duet AI peut vous aider à améliorer une application préexistante.

1. Accédez à la page d'informations sur la solution de démarrage rapide pour le traitement d'images par IA/ML.
   • Cliquez sur le menu hamburger.
   • Dans le sous-menu Produits et solutions, cliquez sur Solutions de démarrage rapide .
   • Cliquez sur Traitement des images par IA/ML sur Cloud Functions .
2. Cliquez sur DÉPLOYER.
   • Si la facturation n'est pas activée pour votre projet, activez la facturation.
   • Vérifiez le nom de votre projet, puis cliquez sur CONTINUER.
   • Sélectionnez us-central1 (Iowa) comme région.
   • Si vous êtes invité à saisir une autre entrée, acceptez les valeurs par défaut.
   • 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.

Dépannage

1. Problème : l'erreur Partial deployment. s'affiche-t-elle ?
   • Solution : Vous devrez malheureusement supprimer votre déploiement et tout recommencer. Un bouton SUPPRIMER LE DÉPLOIEMENT devrait s'afficher. Cliquez sur ce bouton, puis redéployez la solution de démarrage rapide.

3. Activer Duet AI

Configurez votre environnement d'édition de code et activez Duet AI

1. Accédez à l'éditeur Cloud Shell
   • Revenez sur la console Google Cloud
   • Saisissez Cloud Shell Editor dans la barre de recherche, puis cliquez sur Éditeur Cloud Shell dans le menu déroulant.
   • Cliquez sur Essayer le nouvel éditeur si vous utilisez encore l'ancien.
     • Remarque : Si le bouton Essayer le nouvel éditeur ne s'affiche pas, cela signifie que vous utilisez probablement déjà le nouvel éditeur. L'ancien éditeur fonctionnera toujours, mais les vues seront légèrement différentes.
   • Cliquez sur l'icône Ouvrir dans une nouvelle fenêtre
2. Si vous y êtes invité, connectez-vous à votre compte ou autorisez-le.
   • Selon vos paramètres, il est possible que vous soyez invité à autoriser votre compte plusieurs fois au cours de cet atelier. Lorsque vous y serez invité, sélectionnez "Autoriser à chaque fois".
3. Cliquez sur le bouton Cloud Code – Se connecter dans la barre d'état inférieure, comme indiqué. Autorisez le plug-in comme indiqué.
4. Si vous y êtes invité, cliquez sur Sélectionner un projet Google Cloud, puis sélectionnez le projet que vous utilisez .
5. Activez Duet AI
   • Cliquez sur Cloud Code
     • Remarque : Selon la taille de votre écran, il est possible qu'une ou deux étapes soient nécessaires.
   • Cliquez sur Modifier les paramètres dans la section AIDE ET COMMENTAIRES.
   • Type Duet AI: Enable
   • Cochez la case (si ce n'est pas déjà fait)
   • Actualisez votre IDE.
   • Duet AI est alors activé dans Cloud Code, et la barre d'état de Duet AI s'affiche dans votre IDE.
6. Cliquez sur le bouton Duet AI en bas à droite, comme indiqué, puis sélectionnez le bon projet Google Cloud.
   • Si l'erreur Duet AI has not been enabled for your selected project s'affiche, cliquez sur Activer l'API Duet AI
7. Vérifiez que le bon projet Google Cloud s'affiche à gauche (son nom apparaît) et que Duet AI est activé à droite dans la barre d'état, comme illustré ci-dessous :

4. Télécharger le code de la fonction Cloud

Téléchargez le code et utilisez Duet AI pour en savoir plus sur les solutions de démarrage rapide et le code que vous avez déployé.

1. Si vous avez quitté la page, cliquez sur Cloud Code
2. Cliquez sur Cloud Functions
   • Si le bouton Sélectionner un projet s'affiche, cliquez dessus, puis sélectionnez le projet sur lequel vous travaillez.
   • Cliquez sur la fonction annotate-http
   • Cliquez sur l'icône Télécharger dans un nouvel espace de travail
3. Utilisez annotate-http-1 comme nom d'espace de travail (il devrait être défini par défaut), puis cliquez sur OK
4. Ouvrez le fichier main.py
   • Cliquez sur l'icône Explorateur .
   • Cliquez sur le fichier main.py pour l'ouvrir
5. Cliquez sur l'icône du chat Duet AI
   • Remarque : Selon la taille de votre écran, il est possible qu'une ou deux étapes soient nécessaires.
6. Essayez de poser une question à Duet AI. Saisissez une requête, telle que :
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

Réinitialiser le chat Duet AI

Les requêtes ont un impact sur les requêtes futures. Par exemple, si vous faites une faute de frappe dans l'ID du projet ou de la région, celle-ci sera reportée dans les futures requêtes et réponses, ce qui peut avoir un impact négatif sur votre expérience. Si vous avez fait une faute de frappe ou si vous souhaitez effacer l'historique pour une autre raison, vous pouvez utiliser l'icône de la corbeille pour réinitialiser le chat.

5. Appeler le point de terminaison actuel de la fonction Cloud

Explorez le code et appelez le point de terminaison que vous avez déployé dans la solution de démarrage rapide.

1. Saisissez cette requête :
   • IMPORTANT : remplacez my-project-with-duet par l'ID du projet dans la requête suivante.
   • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
   • Vous devriez recevoir une réponse contenant une commande curl comme celle-ci :

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • Copiez cette commande curl pour l'utiliser à l'étape suivante.
2. Testez la commande dans un nouveau terminal
   • Cliquez sur le menu hamburger.
   • Cliquez sur Terminal
   • Cliquez sur Nouveau terminal
   • Collez la commande curl de l'étape précédente dans le terminal et appuyez sur Enter pour exécuter la commande
   • Vous devriez recevoir une réponse débutant comme ceci :

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

3. (Facultatif) Effectuez cette opération avec une autre image provenant de l'Internet public en envoyant à Duet une requête semblable à celle-ci :
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Dépannage

Remarque sur le non déterminisme : Duet AI ainsi que d'autres produits optimisés par des grands modèles de langage (LLM) ne sont pas déterministes. Autrement dit, une même entrée peut générer des sorties différentes. Même si vous respectez parfaitement la procédure, il est possible que vos commandes ne soient pas fonctionnelles. Ces étapes de dépannage devraient vous aider.

La commande curl générée devrait se présenter comme suit :

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Duet AI utilise TEST_IMAGE dans le fichier main.py, qui est une image représentant la tour Eiffel.

Si la commande curl ne fonctionne pas, vérifiez les points suivants :

1. Problème : Le point de terminaison de l'URL inclut-il .a.run.app ?
   • Solution : Duet peut penser que vous effectuez un déploiement sur Cloud Run. Remplacez my-project-with-duet par l'ID de votre projet dans https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate pour obtenir le bon point de terminaison Cloud Functions et utilisez-le pour la commande curl.
2. Problème : Le point de terminaison de l'URL inclut-il my-project-with-duet ?
   • Solution : Remplacez my-project-with-duet par l'ID de votre projet.
3. Problème : us-central1 ne figure pas dans le point de terminaison de l'URL ?
   • Solution : Assurez-vous que l'URL commence par us-central1 (par exemple, https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate) avec l'ID de votre projet.
4. Problème : Selon la requête utilisée, le point de terminaison généré peut parfois ressembler à cloudfunctions.net/annotate-http ou cloudfunctions.net/annotate. /annotate-http/annotate ne figure pas dans le point de terminaison de l'URL ?
   • Solution : Assurez-vous que le point de terminaison de l'URL se termine par le chemin d'accès complet de l'application d'API cloudfunctions.net/annotate-http/annotate
5. Problème : La requête cURL fonctionne, mais ne reçoit pas beaucoup d'informations en retour. La requête inclut-elle des fonctionnalités ?
   • Solution : Il ne s'agit pas d'un problème majeur. Si vous continuez sans rien modifier, le reste de l'atelier fonctionnera toujours. Si vous souhaitez recevoir plus d'informations en retour, vous pouvez demander à Duet d'ajouter des fonctionnalités à la requête cURL.
6. Problème : Les réponses semblent incorrectes ou manquent de contexte propre au code. Utilisez-vous le chat Duet AI dans l'éditeur Cloud Shell ?
   • Solution : Essayez d'ouvrir le fichier main.py et de mettre en surbrillance le code associé à votre requête lorsque vous utilisez le chat Duet AI dans l'éditeur Cloud Shell. L'assistant Duet AI utilisé dans Google Cloud présente un contexte différent, donnant lieu à des réponses différentes.
7. Problème : La réponse à votre requête n'est pas totalement satisfaisante.
   • Solution : Essayez une autre requête dans laquelle vous donnez à Duet AI davantage d'indications sur ce que vous souhaitez voir se produire. Veillez à remplacer my-project-with-duet par l'ID de votre projet. Par exemple :

     Give me the curl command for:
     
     1- Cloud Function running in us-central1 and project my-project-with-duet
     2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
     3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
     

8. Problème : Toutes les étapes de dépannage ont été suivies, mais cela ne fonctionne toujours pas.
   • Solution : En raison de la nature non déterministe des LLM, il est possible que Duet ait généré une réponse qui ne fonctionne pas. Dans ce cas, copiez l'exemple de commande curl ci-dessus et essayez de l'exécuter dans le terminal. Veillez à remplacer my-project-with-duet par l'ID de votre projet.

6. Créer une application Web cliente pour l'API

Utilisez Duet AI pour générer un fichier index.html chargé d'appeler le point de terminaison de la fonction Cloud de la solution de démarrage rapide. Déployez ensuite le fichier index.html sur Firebase Hosting pour voir le code en action.

1. Générez le code côté client
   • De retour dans la fenêtre de chat Duet AI, saisissez la requête suivante :
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
   • Copiez le fichier index.html généré dans la réponse.
     • REMARQUE : Vous aurez besoin de ce code plus tard. Enregistrez-le quelque part si vous craignez de le perdre.
   • Fermez main.py.
2. Créez un répertoire frontend
   • Vous pourriez par exemple demander à Duet AI :
     • What are the console commands to create and navigate to a new frontend directory?
   • Vous devriez obtenir des résultats semblables à mkdir frontend et cd frontend.
   • Utilisez le terminal Cloud Shell pour vous assurer que vous êtes toujours dans le répertoire annotate-http-1, puis exécutez les commandes suivantes :
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. Vérifiez que vous êtes connecté au bon projet dans le terminal Cloud Shell
   • Vous pourriez par exemple demander à Duet AI :
     • What is the gcloud command to set my project?
   • Vous devriez obtenir un résultat semblable à gcloud config set project my-project-with-duet.
     • Vérifiez que l'ID du projet est correct, puis exécutez la commande dans le terminal Cloud Shell.
4. Activer Firebase
   • Dans un nouvel onglet (laissez votre éditeur Cloud Shell actuel ouvert), accédez à https://console.firebase.google.com/.
   • Cliquez sur Ajouter un projet
   • Saisissez l'ID de votre projet et attendez qu'il apparaisse dans le menu déroulant
   • Cliquez sur l'ID de votre projet
   • Cliquez sur Continuer.
   • Cliquez sur Confirmer le mode de facturation
   • Cliquez sur Continuer.
   • Désélectionnez Activer Google Analytics pour ce projet
     • Firebase recommande d'utiliser Google Analytics, mais celui-ci ne sera pas utilisé dans cette application.
   • Cliquez sur Continuer.
   • Fermez cet onglet et revenez à l'éditeur Cloud Shell
   • Remarque : Ces étapes ne sont nécessaires que pour les utilisateurs n'ayant jamais utilisé Firebase, mais elles permettent à tous de suivre le même chemin. Si vous recommencez cette opération à l'avenir, vous pourrez ignorer cette étape.
5. Connectez-vous à Firebase dans Cloud Shell
   • Dans le terminal de l'éditeur Cloud Shell, exécutez la commande firebase login --no-localhost
   • Accédez à l'URL fournie
     • Cliquez sur Oui, je viens d'exécuter cette commande
     • Cliquez sur Oui, il s'agit de mon ID de session
     • Cliquez sur Copier
   • Revenez au terminal de l'éditeur Cloud Shell
   • Collez la valeur copiée dans le terminal, à l'emplacement indiquant : Enter authorization code:
   • Appuyez sur Enter
6. Déployez un nouveau site Web sur Firebase Hosting
   • Initialisez un nouveau projet Firebase
     • Vous pourriez par exemple demander à Duet AI :
       • What are the commands to initialize and deploy a new firebase application?
     • Vous devriez obtenir des résultats semblables à firebase init et firebase deploy, ainsi que des instructions.
     • Duet AI peut vous recommander plusieurs méthodes possibles selon vos préférences. Toutefois, voici une recommandation spécifique à suivre :
       • firebase init
         • Appuyez sur la flèche vers le bas pour accéder à Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
           • Appuyez sur la barre Space
           • Appuyez sur Enter
         • Appuyez sur la flèche vers le bas pour accéder à Use an existing project
           • Appuyez sur Enter
         • Si une liste de projets s'affiche, appuyez sur la flèche vers le bas jusqu'au projet que vous utilisez actuellement
           • Appuyez sur Enter
         • Si vous recevez l'invitation suivante : Please input the ID of the Google Cloud Project you would like to add Firebase:
           • Saisissez l'ID de votre projet.
           • Appuyez sur Enter
         • Pour toutes les requêtes restantes, appuyez sur Enter
       • firebase deploy
7. Redéployez votre application via un appel au point de terminaison de l'API Cloud Functions
   • Les commandes précédentes doivent créer un répertoire public avec un fichier index.html dans le répertoire frontend que vous avez créé précédemment. Vos prochaines modifications devront être effectuées dans le fichier ~/annotate-http-1/frontend/public/index.html.
   • Ouvrez le fichier index.html.
     • Cliquez sur l'icône Explorateur .
     • Cliquez sur le dossier frontend
     • Cliquez sur le dossier public
     • Cliquez sur le fichier index.html
   • Videz le fichier index.html existant.
   • Collez le code que vous avez copié précédemment dans le fichier index.html
   • Exécutez firebase deploy pour déployer la nouvelle application
   • Accédez à l'URL Firebase Hosting pour vérifier si tout fonctionne.
     • Remarque : Vous devrez probablement effectuer une actualisation forcée du site Web pour voir vos mises à jour.

Dépannage

Votre fichier index.html devrait se présenter comme suit :

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Si le site Web ne fonctionne pas, vérifiez les points suivants :

1. Problème : 404 Not Found L'URL utilisée dans la méthode fetch inclut-elle my-project-with-duet ?
   • Solution : Remplacez my-project-with-duet par l'ID de votre projet.
2. Problème : 404 (Not Found) L'URL utilisée dans la méthode fetch est-elle incomplète ?
   • Solution : Assurez-vous d'inclure l'URL complète dans la méthode fetch. Elle devrait ressembler à ceci : https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
3. Problème : La réponse à votre requête n'est pas totalement satisfaisante.
   • Solution : Essayez une autre requête dans laquelle vous donnez à Duet AI davantage d'indications sur ce que vous souhaitez voir se produire. Veillez à remplacer my-project-with-duet par l'ID de votre projet. Voici un exemple :
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
4. Problème : Votre site est-il déployé, mais ne fonctionne pas ?
   • Solution : En raison de la nature non déterministe des LLM, il est possible que Duet ait généré une réponse qui ne fonctionne pas. Dans ce cas, copiez l'exemple index.html ci-dessus et essayez de le redéployer avec firebase deploy. Veillez à remplacer my-project-with-duet par l'ID de votre projet.

7. (Facultatif) Explorer

1. Utilisez Duet AI et l'assistant intégré pour ajouter des styles CSS à votre application, puis la déployer à nouveau lorsque vous aurez terminé. Si vous cherchez l'inspiration, voici un exemple de requête que vous pourriez essayer :
   • Make this index.html file use material design.
2. Autres suggestions :
   • Le site Web généré doit fonctionner avec n'importe quelle image http publique. Utilisez Duet pour afficher l'image sur la page.

8. (Facultatif) Supprimer le projet

Si vous ne souhaitez pas être facturé pour les ressources que vous avez créées aujourd'hui, vous pouvez demander à Duet comment procéder.

1. Saisissez cette requête :
   • How can I delete my project?
   • Vous devriez obtenir un résultat semblable à gcloud projects delete my-project-with-duet.
   • IMPORTANT : Remplacez my-project-with-duet par l'ID de votre projet dans la commande précédente.
2. Exécutez la commande gcloud projects delete pour supprimer toutes les ressources que vous avez créées aujourd'hui.