Créez des applications Web basées sur l'IA avec les extensions Firebase

1. Avant de commencer

Dans cet atelier de programmation, vous apprendrez à créer des applications Web basées sur l'IA qui offrent des expériences utilisateur convaincantes avec les extensions Firebase.

Conditions préalables

• Connaissance de Node.js et JavaScript

Ce que vous apprendrez

• Comment utiliser les extensions liées à l'IA pour traiter la langue et l'entrée vidéo.
• Comment utiliser Cloud Functions pour Firebase pour former un pipeline entre les extensions.
• Comment utiliser JavaScript pour accéder à la sortie produite par Extensions.

Ce dont vous aurez besoin

• Un navigateur de votre choix, tel que Google Chrome
• Un environnement de développement avec un éditeur de code et un terminal
• Un compte Google pour la création et la gestion de votre projet Firebase

2. Examinez les applications Web et leurs services Firebase

Cette section décrit les applications Web que vous allez créer dans cet atelier de programmation et le Firebase que vous utiliserez pour les créer.

Application de révision

Une entreprise de T-shirts est submergée par de longues critiques sur l'un de ses T-shirts et n'est pas sûre de sa note globale. L'application Web Reviewly terminée résume chaque avis, fournit une note par étoiles pour chaque avis et utilise chaque avis pour déduire une note globale pour le produit. Les utilisateurs peuvent également développer chaque avis résumé pour voir l’avis original.

Application Chatbot

Le personnel enseignant d'une école est submergé de questions répétitives sur des sujets généraux et souhaite donc automatiser les réponses. L'application Chatbot terminée fournit aux étudiants un chatbot conversationnel alimenté par un grand modèle de langage (LLM) et peut répondre à des questions sur des sujets généraux. Le chatbot a un contexte historique, de sorte que ses réponses peuvent prendre en compte les questions précédentes posées par les étudiants au cours de la même conversation.

Application Astuce vidéo

Un service gouvernemental souhaite que ses vidéos fournissent des descriptions audio pour améliorer l'accessibilité, mais il a des centaines de vidéos à annoter et a besoin d'une approche rationalisée. L'application Video Hint terminée est un prototype que le ministère examinera pour évaluer son efficacité.

Voici les extensions utilisées dans l'application Video Hint :

• Étiquetez les vidéos avec l'extension Cloud Video AI : extrayez les étiquettes de chaque vidéo téléchargée sur le stockage.
• Tâches de langage avec l'extension API PaLM : résumez les étiquettes dans une description textuelle.
• Extension Convertir du texte en parole : créez une version audio de la description de la vidéo.

3. Configurez votre environnement de développement

Vérifiez votre version de Node.js

1. Dans votre terminal, vérifiez que Node.js v20.0.0 ou supérieur est installé :

   node -v
   

2. Si vous n'avez pas Node.js v20.0.0 ou supérieur, téléchargez-le et installez-le .

Téléchargez le référentiel

1. Si git est installé, clonez le référentiel GitHub de l'atelier de programmation :

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Si git n'est pas installé, téléchargez le référentiel GitHub sous forme de fichier zip .

Vérifier la structure des dossiers

Sur votre ordinateur local, recherchez le référentiel cloné et examinez la structure des dossiers. Le tableau suivant contient les dossiers et leurs descriptions :

Chaque dossier comprend un fichier readme.md qui offre un démarrage rapide pour exécuter l'application Web respective, à l'aide d'instructions simplifiées. Toutefois, si vous débutez votre apprentissage, vous devez suivre cet atelier de programmation, car il contient l'ensemble d'instructions le plus complet.

Si vous ne savez pas si vous avez correctement appliqué le code comme indiqué tout au long de cet atelier de programmation, vous pouvez trouver le code de solution pour les applications respectives dans les dossiers reviewly-end , chatbot-end et video-hint-end .

Installer la CLI Firebase

Exécutez la commande suivante pour vérifier que Firebase CLI est installé et qu'il s'agit de la version 12.5.4 ou ultérieure :

firebase --version

• Si la CLI Firebase est installée, mais qu'elle n'est pas v12.5.4 ou supérieure, mettez-la à jour :

  npm update -g firebase-tools
  

• Si la CLI Firebase n'est pas installée, installez-la :

  npm install -g firebase-tools
  

Si vous ne parvenez pas à installer la CLI Firebase en raison d'erreurs d'autorisation, consultez la documentation npm ou utilisez une autre option d'installation .

Connectez-vous à Firebase

1. Dans votre terminal, accédez au dossier ai-extensions-codelab et connectez-vous à Firebase :

   cd ai-extensions-codelab
   firebase login
   

2. Si votre terminal indique que vous êtes déjà connecté à Firebase, passez à la section Configurer votre projet Firebase de cet atelier de programmation.
3. Selon que vous souhaitez que Firebase collecte des données, saisissez Y ou N .
4. Dans votre navigateur, sélectionnez votre compte Google, puis cliquez sur Autoriser .

4. Configurez votre projet Firebase

Dans cette section, vous allez configurer un projet Firebase et lui associer une application Web Firebase. Vous activerez également les services Firebase utilisés par les exemples d'applications Web.

Créer un projet Firebase

1. Dans la console Firebase , cliquez sur Créer un projet .
2. Dans la zone de texte Entrez le nom de votre projet , saisissez AI Extensions Codelab (ou le nom du projet de votre choix), puis cliquez sur Continuer .
3. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Activer Google Analytics pour ce projet .
4. Cliquez sur Créer un projet .
5. Attendez que votre projet soit provisionné, puis cliquez sur Continuer .
6. Dans votre projet Firebase, accédez à Paramètres du projet . Notez votre ID de projet car vous en aurez besoin plus tard. Cet identifiant unique permet d'identifier votre projet (par exemple, dans la CLI Firebase).

Télécharger un compte de service Firebase

Certaines des applications Web que vous allez créer dans cet atelier de programmation utilisent le rendu côté serveur avec Next.js .

Le SDK Firebase Admin pour Node.js est utilisé pour garantir que les règles de sécurité sont fonctionnelles à partir du code côté serveur. Pour utiliser les API dans Firebase Admin, vous devez télécharger un compte de service Firebase depuis la console Firebase.

1. Dans la console Firebase, accédez à la page Comptes de service dans les paramètres de votre projet .
2. Cliquez sur Générer une nouvelle clé privée > Générer une clé .
3. Une fois le fichier téléchargé sur votre système de fichiers, obtenez le chemin complet de ce fichier.
   Par exemple, si vous avez téléchargé le fichier dans votre dossier Téléchargements , le chemin complet pourrait ressembler à ceci : /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. Dans votre terminal, définissez la variable d'environnement GOOGLE_APPLICATION_CREDENTIALS sur le chemin de votre clé privée téléchargée. Dans un environnement Unix, la commande pourrait ressembler à ceci :

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Gardez ce terminal ouvert et utilisez-le pour le reste de cet atelier de programmation, car votre variable d'environnement risque d'être perdue si vous démarrez une nouvelle session de terminal.
   Si vous ouvrez une nouvelle session de terminal, vous devez réexécuter la commande précédente.

Mettez à niveau votre plan tarifaire Firebase

Pour utiliser Cloud Functions et Firebase Extensions, votre projet Firebase doit être sur le plan tarifaire Blaze , ce qui signifie qu'il est associé à un compte Cloud Billing .

• Un compte Cloud Billing nécessite un mode de paiement, comme une carte de crédit.
• Si vous êtes nouveau sur Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300 $ et à un compte de facturation Cloud d'essai gratuit .

Notez toutefois que la réalisation de cet atelier de programmation ne devrait pas entraîner de frais réels.

Pour mettre à niveau votre projet vers le plan Blaze, procédez comme suit :

1. Dans la console Firebase, sélectionnez la mise à niveau de votre forfait .
2. Dans la boîte de dialogue, sélectionnez le forfait Blaze, puis suivez les instructions à l'écran pour associer votre projet à un compte Cloud Billing.
   Si vous deviez créer un compte Cloud Billing, vous devrez peut-être revenir au flux de mise à niveau dans la console Firebase pour terminer la mise à niveau.

Configurer les services Firebase dans la console Firebase

Dans cette section, vous allez provisionner et configurer plusieurs services Firebase utilisés par les applications Web de cet atelier de programmation. Notez que tous ces services ne sont pas utilisés dans chaque application Web, mais la configuration immédiate de tous ces services est pratique pour travailler dans cet atelier de programmation.

Configurer l'authentification

Vous utiliserez l'authentification avec l'application Chatbot et l'application Video Hint . N'oubliez pas, cependant, que si vous créez une véritable application, chaque application doit avoir son propre projet Firebase .

1. Dans la console Firebase, accédez à Authentification .
2. Cliquez sur Commencer .
3. Dans la colonne Fournisseurs supplémentaires , cliquez sur Google > Activer .

4. Dans la zone de texte Nom public du projet , saisissez un nom mémorable, tel que My AI Extensions Codelab .
5. Dans la liste déroulante E-mail d'assistance pour le projet , sélectionnez votre adresse e-mail.
6. Cliquez sur Enregistrer .
   

Configurer Cloud Firestore

Vous utiliserez Firestore avec les trois applications. N'oubliez pas, cependant, que si vous créez une véritable application, chaque application doit avoir son propre projet Firebase .

1. Dans la console Firebase, accédez à Firestore .
2. Cliquez sur Créer une base de données > Démarrer en mode test > Suivant .
   Plus loin dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ou n'exposez pas une application publiquement sans ajouter de règles de sécurité pour votre base de données.
3. Utilisez l'emplacement par défaut ou sélectionnez un emplacement de votre choix.
   Pour une vraie application, vous souhaitez choisir un emplacement proche de vos utilisateurs. Notez que cet emplacement ne peut pas être modifié ultérieurement et qu'il sera également automatiquement l'emplacement de votre bucket Cloud Storage par défaut (étape suivante).
4. Cliquez sur Terminé .

Configurer le stockage cloud pour Firebase

Vous utiliserez Cloud Storage avec l'application Video Hint et testerez l'extension Convert Text to Speech (prochaine étape de l'atelier de programmation).

1. Dans la console Firebase, accédez à Storage .
2. Cliquez sur Commencer > Démarrer en mode test > Suivant .
   Plus loin dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ou n'exposez pas une application publiquement sans ajouter de règles de sécurité pour votre bucket de stockage.
3. L'emplacement de votre bucket doit déjà être sélectionné (en raison de la configuration de Firestore à l'étape précédente).
4. Cliquez sur Terminé .

Dans les sections suivantes de cet atelier de programmation, vous allez installer des extensions et modifier les bases de code de chaque exemple d'application de cet atelier de programmation pour faire fonctionner trois applications Web différentes.

5. Configurez l'extension « Tâches linguistiques avec l'API PaLM » pour l'application Reviewly

Installer les tâches de langage avec l'extension API PaLM

1. Accédez aux tâches de langage avec l'extension API PaLM .
2. Cliquez sur Installer dans la console Firebase .
3. Sélectionnez votre projet Firebase.
4. Dans la section Examiner les API activées et les ressources créées , cliquez sur Activer en regard des services qui vous sont suggérés :

5. Cliquez sur Suivant > Suivant.
6. Dans la zone de texte Chemin de collection , saisissez bot .
7. Dans la zone de texte Invite , saisissez .
8. Dans la zone de texte Champs variables , saisissez input .
9. Dans la zone de texte Champ de réponse , saisissez text .
10. Dans la liste déroulante Emplacement de Cloud Functions , sélectionnez Iowa (us-central1) ou l'emplacement que vous avez précédemment sélectionné pour Firestore et Cloud Storage.
11. Dans la liste déroulante Modèle de langage , sélectionnez text-bison-001 .
12. Laissez toutes les autres valeurs par défaut.
13. Cliquez sur Installer l'extension et attendez que l'extension soit installée.

Essayez les tâches de langage avec l'extension API PaLM

Bien que l'objectif de cet atelier de programmation soit d'interagir avec l'extension de l'API Language Tasks with PaLM via une application Web, il est utile de comprendre comment l'extension fonctionne en déclenchant l'extension à l'aide de la console Firebase. L'extension se déclenche lorsqu'un document Cloud Firestore est ajouté à la collection bot .

Pour voir comment l'extension fonctionne à l'aide de la console Firebase, procédez comme suit :

1. Dans la console Firebase, accédez à Firestore .
2. Dans la collection bot , cliquez sur Ajouter un document .
3. Dans la zone de texte ID du document , cliquez sur ID automatique .
4. Dans la zone de texte Champ , saisissez input .
5. Dans la zone de texte Valeur , saisissez Tell me about the moon .
6. Cliquez sur Enregistrer et attendez quelques secondes. Votre document au sein de la collection bot inclut désormais une réponse à votre requête.

6. Configurez l'application Reviewly pour utiliser Firebase

Pour exécuter l'application Reviewly , vous devez configurer le code de votre application et la CLI Firebase pour interagir avec votre projet Firebase.

Ajoutez les services et la configuration Firebase au code de votre application

Pour utiliser Firebase, la base de code de votre application a besoin des SDK Firebase pour les services que vous souhaitez utiliser et de la configuration Firebase qui indique à ces SDK quel projet Firebase utiliser.

L'exemple d'application de cet atelier de programmation inclut déjà tout le code d'importation et d'initialisation nécessaire pour les SDK (voir reviewly-start/js/reviews.js ), vous n'avez donc pas besoin de les ajouter. Cependant, l'exemple d'application n'a que des valeurs d'espace réservé pour la configuration Firebase (voir reviewly-start/js/firebase-config.js ), vous devez donc enregistrer votre application avec votre projet Firebase pour obtenir les valeurs de configuration Firebase uniques pour votre application.

1. Dans la console Firebase, dans votre projet Firebase, accédez à la vue d'ensemble du projet , puis cliquez sur La toile .
   
2. Dans la zone de texte Surnom de l'application , saisissez un surnom d'application mémorable, tel que My Reviewly app .
3. Ne cochez pas la case Configurer également Firebase Hosting pour cette application . Vous effectuerez ces étapes plus tard dans l'atelier de programmation.
4. Cliquez sur Enregistrer l'application .
5. La console affiche un extrait de code pour ajouter et initialiser le SDK Firebase avec un objet de configuration Firebase spécifique à l'application. Copiez toutes les propriétés dans l'objet de configuration Firebase.
6. Dans votre éditeur de code, ouvrez le fichier reviewly-start/js/firebase-config.js .
7. Remplacez les valeurs d'espace réservé par les valeurs que vous venez de copier. Ce n'est pas grave si vous avez des propriétés et des valeurs pour les services Firebase que vous n'utilisez pas dans l'application Reviewly .
8. Enregistrez le fichier.
9. De retour dans la console Firebase, cliquez sur Continuer vers la console .

Configurez votre terminal pour exécuter les commandes Firebase CLI sur votre projet Firebase

1. Dans votre terminal, accédez au dossier ai-extensions-codelab que vous avez téléchargé précédemment.
2. Accédez au dossier de l'application Web reviewly-start :

   cd reviewly-start
   

3. Faites en sorte que la CLI Firebase exécute des commandes sur un projet Firebase spécifique :

   firebase use YOUR_PROJECT_ID
   

Exécuter et afficher l'application Web Reviewly

Pour exécuter et afficher l'application Web, procédez comme suit :

1. Dans votre terminal, installez les dépendances puis exécutez la web app :

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. Dans votre navigateur, accédez à l'URL affichée dans votre terminal. Par exemple : http://localhost:8080 .

La page devrait se charger, mais vous remarquerez que diverses fonctionnalités sont manquantes. Nous les ajouterons dans les prochaines étapes de cet atelier de programmation.

7. Ajouter des fonctionnalités à l'application Reviewly

Lors de la dernière étape de cet atelier de programmation, vous avez exécuté l'application Reviewly localement, mais elle ne disposait pas de beaucoup de fonctionnalités et n'utilisait pas encore l'extension installée. Dans cette étape de l'atelier de programmation, vous allez ajouter cette fonctionnalité et utiliser l'application Web pour déclencher l'extension.

Déployer des règles de sécurité

L'exemple d'application de cet atelier de programmation contient des ensembles de règles de sécurité pour Firestore et pour Cloud Storage pour Firebase. Une fois que vous avez déployé ces règles de sécurité sur votre projet Firebase, les données de votre base de données et de votre bucket sont mieux protégées contre toute utilisation abusive.

Vous pouvez afficher ces règles dans les fichiers firestore.rules et storage.rules .

1. Pour déployer ces règles de sécurité, exécutez cette commande dans votre terminal :

   firebase deploy --only firestore:rules,storage
   

2. Si la question vous est posée : "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , sélectionnez Oui .

Mettez à jour le code de l'application pour déclencher l'extension

Dans l'application Reviewly , un nouvel avis ajouté à Firestore déclenche l'extension pour résumer l'avis.

1. Dans votre éditeur de code, ouvrez le fichier functions/add-mock-reviews.js .
2. Remplacez la variable reviewWithPrompt par le code suivant, qui invite le modèle de langage à effectuer une révision plus courte.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Après la variable reviewWithPrompt , remplacez la variable reviewDocument par le code suivant, qui crée un document de révision afin qu'il puisse être ajouté à Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Enregistrez le fichier.
5. Dans le fichier js/reviews.js , après le Insert code below, to import your Firebase Callable Cloud Function , importez votre fonction Firebase HTTP callable avec l' assistant httpsCallable :

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Après le Insert code below, to invoke your Firebase Callable Cloud Function , appelez votre fonction appelable HTTP Firebase :

   await addMockReviews();
   

7. Enregistrez le fichier.

Déployer une fonction pour ajouter de nouveaux avis

L'application Web Reviewly utilise une fonction Cloud pour ajouter les avis. Mais actuellement, la Fonction Cloud n’est pas déployée.

Pour déployer votre fonction avec la CLI Firebase, procédez comme suit :

1. Dans votre terminal, alors que vous êtes toujours dans le dossier reviewly-start , appuyez sur Control+C pour arrêter le serveur.
2. Déployez votre fonction :

   firebase deploy --only functions
   

3. Si vous voyez une Permission denied while using the Eventarc Service Agent ou une erreur similaire, attendez quelques minutes , puis réessayez la commande.

Vous venez de déployer votre première fonction personnalisée avec Cloud Functions. La console Firebase propose un tableau de bord où vous pouvez voir toutes les fonctions que vous déployez sur votre projet Firebase.

Exécutez et affichez à nouveau l'application Web Reviewly (maintenant avec des fonctionnalités)

Pour exécuter et afficher l'application Web désormais fonctionnelle, procédez comme suit :

1. Dans votre terminal, exécutez à nouveau le serveur :

   npm run dev
   

2. Dans votre navigateur, accédez à l'URL affichée dans votre terminal. Par exemple : http://localhost:8080 .
3. Dans l'application, cliquez sur Ajouter des avis simulés et attendez quelques secondes que quelques longs avis apparaissent.
   En arrière-plan, l'extension Language Tasks with PaLM API réagit au nouveau document qui représente la nouvelle révision. L'invite que vous avez ajoutée précédemment demande un résumé plus court du modèle de langage.
4. Pour afficher l'intégralité d'une révision et l'invite utilisée pour la révision, cliquez sur l'une des révisions, puis sélectionnez Afficher l'invite PaLM .

8. Configurez l'extension "Chatbot with PaLM API" pour l'application Chatbot

Installez le Chatbot avec l'extension API PaLM

1. Accédez au Chatbot avec l'extension API PaLM .
2. Cliquez sur Installer dans la console Firebase .
3. Sélectionnez votre projet Firebase.
4. Cliquez sur Suivant > Suivant > Suivant jusqu'à ce que vous atteigniez la section Configurer l'extension .
5. Dans la zone de texte Chemin de la collection , saisissez users/{uid}/discussion/{discussionId}/messages .
6. Dans la liste déroulante Emplacement de Cloud Functions , sélectionnez Iowa (us-central1) ou l'emplacement que vous avez précédemment sélectionné pour Firestore et Cloud Storage.
7. Dans la liste déroulante Modèle linguistique , sélectionnez chat-bison .
8. Laissez toutes les autres valeurs par défaut.
9. Cliquez sur Installer l'extension et attendez que l'extension soit installée.

Essayez le Chatbot avec l'extension API PaLM

Bien que l'objectif de cet atelier de programmation soit d'interagir avec l'extension API Chatbot with PaLM via une application Web, il est utile de comprendre comment l'extension fonctionne en déclenchant l'extension à l'aide de la console Firebase. L'extension se déclenche lorsqu'un document Cloud Firestore est créé dans la collection users/{uid}/discussion/{discussionId}/messages .

1. Dans la console Firebase, accédez à Firestore .
2. Cliquez sur Commencer la collecte .
   1. Dans la zone de texte ID de collection , entrez users , puis cliquez sur Suivant .
   2. Dans la zone de texte ID du document , cliquez sur ID automatique , puis cliquez sur Enregistrer .
3. Dans la collection users , cliquez sur Commencer la collecte .
   
   1. Dans la zone de texte ID de collection , saisissez discussion , puis cliquez sur Suivant .
   2. Dans la zone de texte ID du document , cliquez sur ID automatique , puis cliquez sur Enregistrer .
4. Dans la collection discussion , cliquez sur Commencer la collecte .
   
   1. Dans la zone de texte ID de collection , saisissez messages , puis cliquez sur Suivant .
   2. Dans la zone de texte ID du document , cliquez sur ID automatique .
   3. Dans la zone de texte Champ , saisissez prompt .
   4. Dans la zone de texte Valeur , saisissez Tell me 5 random fruits .
   5. Cliquez sur Enregistrer et attendez quelques secondes. La collection messages comprend désormais un document contenant une réponse à votre requête.

5. Dans la collection messages , cliquez sur Ajouter un document .
   1. Dans la zone de texte ID du document , cliquez sur ID automatique .
   2. Dans la zone de texte Champ , saisissez prompt .
   3. Dans la zone de texte Valeur , saisissez And now, vegetables .
   4. Cliquez sur Enregistrer et attendez quelques secondes. La collection messages comprend désormais un document contenant une réponse à votre requête.

9. Configurez l'application Chatbot pour utiliser Firebase

Pour exécuter l'application Chatbot , vous devez configurer le code de votre application et la CLI Firebase pour interagir avec votre projet Firebase.

Ajoutez les services et la configuration Firebase au code de votre application

Pour utiliser Firebase, la base de code de votre application a besoin des SDK Firebase pour les services que vous souhaitez utiliser et de la configuration Firebase qui indique à ces SDK quel projet Firebase utiliser.

L'exemple d'application de cet atelier de programmation inclut déjà tout le code d'importation et d'initialisation nécessaire pour les SDK (voir chatbot-start/lib/firebase/firebase.js ), vous n'avez donc pas besoin de les ajouter. Cependant, l'exemple d'application n'a que des valeurs d'espace réservé pour la configuration Firebase (voir chatbot-start/lib/firebase/firebase-config.js ), vous devez donc enregistrer votre application avec votre projet Firebase pour obtenir les valeurs de configuration Firebase uniques pour votre application.

1. Dans la console Firebase, dans votre projet Firebase, accédez à la vue d'ensemble du projet , puis cliquez sur Web (ou cliquez sur Ajouter une application si vous avez déjà enregistré une application auprès du projet).
2. Dans la zone de texte Surnom d'application , saisissez un surnom d'application mémorable, tel que My Chatbot app .
3. Ne cochez pas la case Configurer également Firebase Hosting pour cette application . Vous effectuerez ces étapes plus tard dans l'atelier de programmation.
4. Cliquez sur Enregistrer l'application .
5. La console affiche un extrait de code pour ajouter et initialiser le SDK Firebase avec un objet de configuration Firebase spécifique à l'application. Copiez toutes les propriétés dans l'objet de configuration Firebase.
6. Dans votre éditeur de code, ouvrez le fichier chatbot-start/lib/firebase/firebase-config.js .
7. Remplacez les valeurs d'espace réservé par les valeurs que vous venez de copier. Ce n'est pas grave si vous disposez de propriétés et de valeurs pour les services Firebase que vous n'utilisez pas dans l'application Chatbot .
8. Enregistrez le fichier.
9. De retour dans la console Firebase, cliquez sur Continuer vers la console .

Configurez votre terminal pour exécuter les commandes Firebase CLI sur votre projet Firebase

1. Dans votre terminal, appuyez sur Control+C pour empêcher le serveur d'exécuter l'application Web précédente.
2. Dans votre terminal, accédez au dossier de l'application Web chatbot-start :

   cd ../chatbot-start
   

3. Faites en sorte que la CLI Firebase exécute des commandes sur un projet Firebase spécifique :

   firebase use YOUR_PROJECT_ID
   

Configurez la base de code de votre application pour utiliser l'hébergement Firebase compatible avec le framework

Cet atelier de programmation utilise des frameworks Web avec hébergement (préversion) avec l'application Web Chatbot .

1. Dans votre terminal, activez les frameworks Web avec Firebase Hosting :

   firebase experiments:enable webframeworks
   

2. Initialiser l'hébergement Firebase :

   firebase init hosting
   

3. Lorsque vous êtes invité à demander Détecté une base de code Next.js Detected an existing codebase in your current directory, should we use this? , appuyez sur Y.
4. Lorsque vous êtes invité à indiquer In which region would you like to host server-side content, if applicable? , sélectionnez la région par défaut ou l'emplacement que vous avez précédemment sélectionné pour Firestore et Cloud Storage, puis appuyez sur Enter (ou return sur macOS).
5. Lorsque vous êtes invité à Set up automatic builds and deploys with GitHub? , appuyez sur N .

Exécutez et affichez l'application Web Chatbot

1. Dans votre terminal, installez les dépendances puis exécutez la web app :

   npm install
   firebase emulators:start --only hosting
   

2. Dans votre navigateur, accédez à l'URL d'hébergement hébergée localement. Dans la plupart des cas, il s'agit de http://localhost:5000/ ou quelque chose de similaire.

La page devrait se charger, mais vous remarquerez que diverses fonctionnalités sont manquantes. Nous les ajouterons dans les prochaines étapes de cet atelier de programmation.

Dépanner l'exécution de l'application Web

Si vous voyez l'erreur dans la page Web qui commence comme ceci : Error: Firebase session cookie has incorrect... , vous devez supprimer tous vos cookies dans votre environnement localhost. Pour ce faire, suivez les instructions sur supprimer les cookies | Documentation des outils de développement. .

10. Ajouter des fonctionnalités à l'application Chatbot

Lors de la dernière étape de cet atelier de programmation, vous avez exécuté l'application Chatbot localement, mais elle ne disposait pas de beaucoup de fonctionnalités et n'utilisait pas encore l'extension installée. Dans cette étape de l'atelier de programmation, vous allez ajouter cette fonctionnalité et utiliser l'application Web pour déclencher l'extension.

Déployer des règles de sécurité

L'exemple d'application de cet atelier de programmation contient des ensembles de règles de sécurité pour Firestore et pour Cloud Storage pour Firebase. Une fois que vous avez déployé ces règles de sécurité sur votre projet Firebase, les données de votre base de données et de votre bucket sont mieux protégées contre toute utilisation abusive.

Vous pouvez afficher ces règles dans les fichiers firestore.rules et storage.rules .

1. Pour déployer ces règles de sécurité, exécutez cette commande dans votre terminal :

   firebase deploy --only firestore:rules,storage
   

2. Si la question vous est posée : "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , sélectionnez Oui .

Mettre à jour le code pour ajouter des messages à Cloud Firestore

Dans l'application Chatbot , un nouveau message d'un utilisateur est ajouté à Firestore et cela déclenche l'extension pour générer une réponse.

1. Dans votre éditeur de code, ouvrez le fichier lib/firebase/firestore.js .
2. Vers la fin du fichier, recherchez la fonction addNewMessage , qui gère l'ajout de nouveaux messages.
   La fonction prend déjà en compte les propriétés d'objet suivantes :
   

   Paramètre	Description
   userId	L'ID de l'utilisateur connecté
   discussionId	L'ID de discussion à laquelle le message a été ajouté
   message	Le contenu du texte du message
   db	Une instance de base de données Firestore

   Une fois ces variables prêtes, vous pouvez ajouter un document Cloud Firestore pour représenter le nouveau message.
3. Dans le corps de la fonction addNewMessage après le commentaire // Insert your code below ⬇️ , ajoutez le code suivant :

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Mettre à jour le code pour construire une requête pour obtenir des messages

1. Toujours dans le fichier lib/firebase/firestore.js , localisez la fonction getMessagesQuery , qui doit renvoyer une requête Cloud Firestore qui localise les messages stockés dans le chemin de collecte users/{uid}/discussion/{discussionId}/messages .
2. Remplacez l'intégralité de la fonction getMessagesQuery par le code suivant :

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Mettre à jour le code pour gérer les documents de message Cloud Firestore

1. Toujours dans le fichier lib/firebase/firestore.js , localisez la fonction handleMessageDoc , qui reçoit un document Cloud Firestore qui représente un seul message.
   Cette fonction doit formater et structurer les données d'une manière logique pour l'interface utilisateur de l'application Chatbot .
2. Remplacez l'intégralité de la fonction handleMessageDoc par le code suivant :

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Enregistrez le fichier.

Exécutez et affichez à nouveau l'application Web Chatbot (maintenant avec des fonctionnalités)

Pour exécuter et afficher l'application Web désormais fonctionnelle, procédez comme suit :

1. Dans votre navigateur, revenez à l'onglet avec l'application Web Chatbot et rechargez la page.
2. Cliquez sur Se connecter avec Google .
3. Si nécessaire, sélectionnez votre compte Google.
4. Après vous être connecté, rechargez la page.
5. Dans la zone de texte Saisissez votre message , saisissez un message, tel que Tell me about space .
6. Cliquez sur Envoyer et attendez quelques secondes que l'application Web Chatbot réponde.

Un autre avantage du Chatbot avec l’extension API PaLM est son historique des conversations.

Pour voir un exemple de sa capacité à converser avec le contexte historique, suivez ces étapes :

1. Dans la zone de texte Saisissez votre message , posez une question telle que What are five random fruits? .
2. Dans la zone de texte Saisissez votre message , posez une question complémentaire liée à la question précédente, par exemple And what about vegetables? .

L'application Web Chatbot répond avec des connaissances historiques. Même si votre dernière question n'a pas spécifié cinq légumes aléatoires, l'extension API Chatbot avec PaLM comprend les questions de suivi.

11. Configurez l'extension "Convertir le texte en parole" pour l'application Video Hint

Installez l'extension Convertir du texte en parole

1. Accédez au texte converti en extension de la parole .
2. Cliquez sur Installer dans la console Firebase .
3. Sélectionnez votre projet Firebase.
4. Cliquez sur Suivant .
5. Dans la section API API et Ressources créées , cliquez sur Activer à côté de tous les services qui vous sont suggérés:

6. Cliquez sur Suivant, puis sélectionnez Grant à côté de toutes les autorisations qui vous sont suggérées.

7. Cliquez sur Suivant .
8. Dans la zone de texte du chemin de collection , entrez bot .
9. Dans la zone de texte du chemin de stockage , entrez tts .
10. Laissez toutes les autres valeurs comme leurs options par défaut.
11. Cliquez sur Installer l'extension et attendez l'installation de l'extension.

Essayez le texte converti en extension de la parole

Bien que l'objectif de ce codelab soit d'interagir avec le texte converti en extension de la parole via une application Web, il est utile de comprendre comment l'extension fonctionne en déclenchant l'extension à l'aide de la console Firebase. L'extension se déclenche lorsqu'un document Cloud Firestore est créé dans la collection bot .

Pour voir comment l'extension fonctionne en utilisant la console Firebase, suivez ces étapes:

1. Dans la console Firebase, accédez à Firestore
2. Cliquez sur Démarrer la collection .
3. Dans la zone de texte de la collection ID , entrez bot .
4. Cliquez sur Suivant .

5. Dans la zone de texte Document ID , cliquez sur Auto-ID .
6. Dans la zone de texte du champ , entrez text .
7. Dans la zone de texte de valeur , entrez The quick brown fox jumps over the lazy dog .
8. Cliquez sur Enregistrer .

Pour voir et entendre le fichier MP3 que vous avez créé, suivez ces étapes:

1. Dans la console Firebase, accédez au stockage .
2. Dans le volet où vous pouvez télécharger des fichiers, notez votre nom de seau après la valeur gs:// . C'est le nom de votre seau par défaut pour ce projet. Vous en avez besoin à diverses tâches tout au long de ce codelab.

3. Dans la console Google Cloud, accédez au stockage cloud .
4. Sélectionnez votre projet.
   Si vous ne voyez pas votre projet dans la liste récente des projets, cliquez sur Sélectionner le projet pour localiser votre projet dans le Picker Project.

5. Sélectionnez votre seau de stockage par défaut.
6. Accédez au dossier tts/ .
7. Cliquez sur le fichier MP3.
8. À la fin du fichier MP3, cliquez Et remarquez que votre texte est converti en parole.

12. Configurez les vidéos "Labels avec une extension Cloud Video Ai" pour l'application vidéo

Installez les vidéos d'étiquette avec une extension Cloud Video AI

1. Accédez aux vidéos d'étiquette avec une extension Cloud Video AI .
2. Cliquez sur Installer dans Firebase Console .
3. Sélectionnez votre projet Firebase.
4. Cliquez sur Suivant> Suivant> Suivant, jusqu'à ce que vous atteigniez la section Extension de configuration .
5. Dans l' emplacement des fonctions Cloud Location , sélectionnez un emplacement pris en charge (soit l'emplacement que vous avez précédemment sélectionné pour Firestore et Cloud Storage, soit le plus proche). Pour les emplacements pris en charge, consultez la section location_id dans AnnotateVideoRequest .
6. À partir du modèle déroulant, sélectionnez le dernier .
7. Dans la liste déroulante de la caméra stationnaire , sélectionnez non .
8. Laissez toutes les autres valeurs par défaut.
9. Cliquez sur Installer l'extension et attendez l'installation de l'extension.

Essayez les vidéos d'étiquette avec une extension Cloud Video AI

Bien que l'objectif de ce codelab soit d'interagir avec les vidéos d'étiquette avec l'extension Cloud Video AI via une application Web, il est utile de comprendre comment l'extension fonctionne en déclenchant l'extension à l'aide de la console Firebase. L'extension se déclenche lorsqu'un fichier vidéo est téléchargé sur votre seau de stockage.

Pour voir comment l'extension fonctionne en utilisant la console Firebase, suivez ces étapes:

1. Accédez au stockage dans votre projet Firebase > Créer le dossier .
2. Dans la zone de texte du nom du dossier , entrez video_annotation_input .

3. Cliquez sur Ajouter un dossier .
4. Dans le dossier video_annotation_input , cliquez sur le fichier de téléchargement .
5. Dans le ai-extensions-codelab/video-hint-start/public/videos que vous avez cloné ou téléchargé plus tôt, sélectionnez le premier fichier vidéo.
6. De retour dans votre navigateur, dans la console Google Cloud, accédez au stockage cloud .
7. Sélectionnez votre seau de stockage par défaut, que vous avez noté plus tôt.
8. Cliquez sur le dossier video_annotation_output .
   Si vous ne voyez pas le dossier video_annotation_output , attendez quelques secondes et actualisez la page car l'API de l'intelligence vidéo pourrait toujours traiter la vidéo.

9. Remarquez qu'un fichier JSON existe qui suit un nom similaire au fichier que vous avez téléchargé plus tôt.
10. Cliquez sur Téléchargez le nom de fichier .
11. Ouvrez le fichier JSON téléchargé dans votre éditeur de code. Il contient la sortie brute de l'API de l'intelligence vidéo, qui comprend des étiquettes détectées de la vidéo que vous avez téléchargées.

13. Configurez l'application vidéo pour utiliser Firebase

Pour exécuter l'application vidéo sur le coup , vous devez configurer le code de votre application et la CLI Firebase pour interagir avec votre projet Firebase.

Ajouter les services et la configuration de Firebase au code de votre application

Pour utiliser Firebase, la base de code de votre application a besoin des SDK de Firebase pour les services que vous souhaitez utiliser et la configuration Firebase qui indique aux SDK quel projet Firebase à utiliser.

Cet exemple d'application de CodeLab comprend déjà tout le code d'importation et d'initialisation nécessaire pour les SDK (voir video-hint-start/lib/firebase/firebase.js ), vous n'avez donc pas besoin de les ajouter. Cependant, l'exemple d'application n'a que des valeurs d'espace réservé pour la configuration de la base de feu (voir video-hint-start/lib/firebase/firebase-config.js ), vous devez donc enregistrer votre application auprès de votre projet Firebase pour obtenir les valeurs de configuration de base de feu uniques pour votre application.

1. Dans la console Firebase, dans votre projet Firebase, accédez à l' aperçu du projet , puis cliquez Web (ou cliquez sur Ajouter une application si vous avez déjà enregistré une application avec le projet).
2. Dans la zone de texte surnom de l'application , entrez un surnom d'application mémorable, tel que My Video Hint app .
3. Ne sélectionnez pas l' hébergement Firebase également pour cette case d'application . Vous ferez ces étapes plus tard dans le CodeLab.
4. Cliquez sur l'application d'enregistrement .
5. La console affiche un extrait de code pour ajouter et initialiser le SDK Firebase avec un objet de configuration Firebase spécifique à l'application. Copiez toutes les propriétés de l'objet de configuration Firebase.
6. Dans votre éditeur de code, ouvrez le fichier video-hint-start/lib/firebase/firebase-config.js .
7. Remplacez les valeurs d'espace réservé par les valeurs que vous venez de copier. C'est OK si vous avez des propriétés et des valeurs pour les services Firebase que vous n'utilisez pas dans l'application vidéo .
8. Enregistrez le fichier.
9. De retour dans la console Firebase, cliquez sur Continuez vers la console .

Configurez votre terminal pour exécuter des commandes CLI Firebase contre votre projet Firebase

1. Dans votre terminal, appuyez sur Control+C pour empêcher le serveur d'exécuter l'application Web précédente.
2. Dans votre terminal, accédez au dossier d'application Web video-hint-start :

   cd ../video-hint-start
   

3. Faire les commandes de l'exécution de Firebase CLI contre un projet de base de base spécifique:

   firebase use YOUR_PROJECT_ID
   

Configurez la base de code de votre application pour utiliser l'hébergement de Firebase sensible au cadre

Ce CodeLab utilise des frameworks Web avec l'hébergement (prévisualisation) avec l'application Web d'inscription vidéo .

1. Dans votre terminal, activez les cadres Web avec hébergement de la base de feu:

   firebase experiments:enable webframeworks
   

2. Initialiser l'hébergement de la base de feu:

   firebase init hosting
   

3. Lorsqu'il est invité à Detected an existing base de code Next.js existante codebase in your current directory, should we use this? , Appuyez sur Y.
4. Lorsqu'il est invité In which region would you like to host server-side content, if applicable? , sélectionnez la région par défaut ou l'emplacement que vous avez précédemment sélectionné pour FireStore et Cloud Storage, puis appuyez sur Enter (ou return sur macOS).
5. Lorsqu'il a été invité à Set up automatic builds and deploys with GitHub? , appuyez sur N .

Exécutez et affichez l'application Web sur le clin d'œil vidéo

1. Dans votre terminal, installez les dépendances dans les dossiers video-hint-start et functions vidéo, puis exécutez l'application:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. Dans votre navigateur, accédez à l'URL d'hébergement hébergé localement. Dans la plupart des cas, c'est http: // localhost: 5000 / ou quelque chose de similaire.

La page doit se charger, mais vous remarquerez que diverses fonctionnalités sont manquantes. Nous les ajouterons dans les prochaines étapes de ce codelab.

Dépanner l'exécution de l'application Web

Si vous voyez un message d'erreur comme Error: The query requires an index. You can create it here: https://console.firebase.google.com Dans le volet console de Devtools, suivez ces étapes:

1. Accédez à l'URL fournie.

2. Cliquez sur Enregistrer et attendez que l'état passe de la construction à l'activation .

14. Ajouter des fonctionnalités à l'application vidéo

Dans la dernière étape de ce CodeLab, vous avez exécuté l'application sur le discours vidéo localement, mais il n'avait pas beaucoup de fonctionnalités et n'a pas encore utilisé l'extension installée. Dans cette étape du CodeLab, vous ajouterez cette fonctionnalité et utiliserez l'application Web pour déclencher l'extension.

Déployer les règles de sécurité

Cet exemple d'application de CodeLab contient des ensembles de règles de sécurité pour Firestore et pour le stockage cloud pour Firebase. Après avoir déployé ces règles de sécurité dans votre projet Firebase, les données de votre base de données et de votre seau sont mieux protégées contre les abus.

Vous pouvez afficher ces règles dans les fichiers firestore.rules et storage.rules .

1. Pour déployer ces règles de sécurité, exécutez cette commande dans votre terminal:

   firebase deploy --only firestore:rules,storage
   

2. Si on vous demande: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , sélectionnez oui .

Mettez à jour le code pour combiner les fonctions

1. Dans votre éditeur de code, développez le dossier functions .
   Ce dossier contient plusieurs fonctions, qui se combinent pour former un pipeline d'extension. Le tableau suivant répertorie et décrit chaque fonction:

   Fonction	Description
   functions/01-handle-video-upload.js	La première étape du pipeline d'extension. Il traite le fichier vidéo téléchargé de l'utilisateur.
   functions/02-handle-video-labels.js	La deuxième étape du pipeline d'extension. Il traite le fichier vidéo-labels, qui a été généré par l'extension storage-label-videos .
   functions/03-handle-audio-file.js	La troisième étape du pipeline d'extension. Il gère le fichier audio transcrit.

   Cependant, vous devez toujours ajouter un fichier qui regroupe ces fonctions ensemble.
2. Dans le fichier functions/index.js , ajoutez le code suivant:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Ce code utilise des modules JavaScript pour importer et exporter les fonctions du fichier index.js afin qu'il y ait un emplacement centralisé pour toutes les fonctions.

Mettez à jour le code pour gérer le téléchargement vidéo

1. Dans votre éditeur de code, ouvrez le fichier lib/firebase/storage.js .
2. Localisez la fonction uploadVideo .
   Cette fonction reçoit des paramètres userId , filePath et file . Ces données sont suffisantes pour télécharger un fichier sur un stockage cloud.
3. Dans le corps de la fonction uploadVideo , ajoutez le code suivant:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Déployez vos fonctions

Pour déployer vos fonctions avec la CLI Firebase, suivez ces étapes:

1. Dans votre terminal tout en étant dans le dossier video-hint-start , appuyez sur Control+C pour arrêter le processus actuel.
2. Déployez vos fonctions:

   firebase deploy --only functions
   

   Si l'on vous demande de supprimer les fonctions cloud précédentes, sélectionnez No .
3. Si vous voyez un message similaire à Permission denied while using the Eventarc Service Agent , attendez quelques minutes , puis réessayez la commande.
4. Une fois la commande terminée, exécutez l'application localement:

   firebase emulators:start --only hosting
   

Exécutez et affichez à nouveau l'application Web sur l'indice vidéo (maintenant avec les fonctionnalités)

Pour exécuter et afficher l'application Web maintenant fonctionnelle, suivez ces étapes:

1. Dans votre navigateur, trouvez l'onglet où vous avez navigué vers http: // localhost: 5000.
2. Si nécessaire, cliquez sur Connectez-vous avec Google et sélectionnez votre compte Google.
3. Cliquez sur Télécharger l'exemple de la vidéo n ° 1 et attendez quelques minutes pour voir les résultats du résumé vidéo.
4. Si vous ne voyez aucun résultat après avoir téléchargé la vidéo, consultez les erreurs de dépannage avec les fonctions cloud dans l'annexe de ce codelab.

15.Conclusion

Toutes nos félicitations! Vous avez réalisé beaucoup dans ce codelab!

Extensions de base d'incendie installées et configurées

Vous avez utilisé la console Firebase pour configurer et installer diverses extensions d'IA . L'utilisation d'extensions est pratique car vous n'avez pas besoin d'écrire beaucoup de code BULERPLAY qui traite de l'authentification avec Google Cloud Services, de la lecture et de l'écriture de Firestore et de l'interaction avec Google Cloud Services - et les différentes nuances impliquées dans ces tâches.

Travaillé avec des extensions en utilisant la console Firebase

Au lieu de sauter directement dans le code, vous avez pris le temps de comprendre comment fonctionnent les extensions de l'IA, sur la base d'une entrée que vous avez fournie via la console à Firestore ou un stockage cloud. Ce type d'interaction peut être particulièrement utile si vous avez besoin de déboguer la sortie d'extension.

Construit trois applications Web alimentées par AI qui utilisent des extensions de base de feu

Réviser

Dans l'application Web Reviewly , vous avez utilisé les tâches linguistiques avec une extension de Palm API pour résumer les longues avis que les utilisateurs ont laissés pour un produit de t-shirt. Vous avez également demandé que le modèle de langue fournisse une réponse JSON à votre requête, où le JSON a fourni une note d'étoile et un examen résumé de l'examen de la forme longue originale.

Exercice facultatif : La société de t-shirts est satisfaite des critiques résumées, mais ils ont demandé un résumé supplémentaire de la nature du défaut. Pouvez-vous ajuster l' invite pour renvoyer un résumé du défaut, puis inclure ce résumé dans l'interface utilisateur de l'application Web?

Chatbot

Dans l'application Web Chatbot , vous avez utilisé l'extension CHATBOT avec PALM API pour fournir à l'utilisateur une interface de chat interactive, qui inclut le contexte historique dans les conversations - où chaque message est stocké dans un document Firestore qui est portée à un utilisateur particulier.

Exercice facultatif : les étudiants ont été satisfaits du chatbot, mais le personnel aimerait quelques améliorations. Les étudiants devraient recevoir des questions stimulantes après leur réponse. Par exemple:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Astuce: vous pouvez utiliser une option de contexte configurable pour y parvenir.

Indice vidéo

Dans l'application Web sur la vidéo , vous avez utilisé le texte converti en discours , les tâches linguistiques avec API Palm et les vidéos d'étiquette avec des extensions vidéo cloud pour former un pipeline d'extension qui se traduit par une description de texte et audio d'une vidéo.

Exercice facultatif : le département du gouvernement a trouvé le prototype intéressant, et il aimerait maintenant également qu'un utilisateur puisse cliquer sur une étiquette textuelle pour sauter au point de la vidéo où l'étiquette est détectée.

16. Annexe: Dépannage des erreurs avec les fonctions cloud

Si votre application Web ne fonctionne pas comme prévu et que vous pensez que cela pourrait être dû aux fonctions, suivez les étapes de cette page de dépannage.

Autoriser l'accès public non authentifié

Si vous obtenez des erreurs liées à l'autorisation dans le panneau de console de Chrome Devtools, suivez ces étapes:

1. Lisez la vue d'ensemble de l'authentification | Page de course de cloud
2. Cliquez sur le lien pour afficher et terminer les tâches requises pour permettre un accès public non authentifié à la fonction.

3. Revenez à l'application révisée . Par exemple: http: // localhost: 8080.
4. Cliquez sur Ajouter des avis simulés et attendez quelques secondes.
   • Si les avis apparaissent: vous n'avez pas besoin de continuer avec ces étapes de dépannage et pouvez sauter directement pour configurer la section d'application Web Chatbot dans ce CodeLab.
   • Si les avis n'apparaissent pas: continuez avec cette section de dépannage.

Gérer les erreurs d'autorisation insuffisantes

1. Dans la console Firebase, accédez aux fonctions .
2. Survolez la fonction addMockReviews , puis cliquez > Afficher les journaux .

3. Faites défiler les journaux jusqu'à ce que vous trouviez une erreur similaire à l'un des éléments suivants:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. Dans la console Google Cloud, accédez à la page des autorisations IAM , puis sélectionnez votre projet.
5. Dans le tableau, trouvez la colonne du nom .
   Dans la page IAM & Admin , il y a un tableau d'utilisateurs et de rôles. La colonne du nom du tableau décrit à quoi sert l'utilisateur, ou principal. Vous pouvez avoir un principal avec le nom du compte de service de calcul par défaut .

Si vous voyez le compte de service de calcul par défaut , suivez ces étapes:

1. Cliquez sur Modifier le directeur .

2. Continuez avec les rôles Ajouter à la section de compte de service de calcul par défaut dans ce colélab.

Si vous ne voyez pas le compte de service de calcul par défaut , suivez ces étapes:

1. Cliquez sur l'accès aux subventions .
2. Dans la zone de texte des nouveaux principaux , entrez compute .
3. Dans le menu d'autosugges qui apparaît, sélectionnez le compte de service de calcul par défaut .

Ajouter des rôles au compte de service de calcul par défaut

Dans la section Assign Rôles du compte de service de calcul par défaut :

1. Développez le menu Sélectionner un rôle .
2. Dans la zone de texte Filtre , entrez Cloud Datastore User .
3. Dans le menu d'autosuggestations qui apparaît, sélectionnez l'utilisateur de carreaux de données cloud .
4. Cliquez sur Ajouter un autre rôle .
   1. Développez le menu Sélectionner un rôle .
   2. Dans la zone de texte Filtre , entrez Cloud Storage for Firebase Admin .
   3. Dans le menu des autosugges qui apparaissent, sélectionnez le stockage cloud pour l'administrateur Firebase .
5. Cliquez sur Ajouter un autre rôle .
   1. Développez le menu Sélectionner un rôle .
   2. Dans la zone de texte du filtre , entrez Cloud Storage for Firebase Service Agent .
   3. Dans le menu des autosugges qui apparaissent, sélectionnez le stockage cloud pour l'agent de service Firebase .
6. Cliquez sur Enregistrer .