Crea apps web potenciadas por IA con Extensiones de Firebase

1. Antes de comenzar

En este codelab, aprenderás a compilar apps web potenciadas por IA que proporcionen experiencias del usuario atractivas con Extensiones de Firebase.

Requisitos previos

• Conocimientos de Node.js y JavaScript

Qué aprenderás

• Cómo usar extensiones relacionadas con la IA para procesar entradas de lenguaje y video
• Cómo usar Cloud Functions para Firebase para formar una canalización entre extensiones
• Cómo usar JavaScript para acceder a los resultados que producen las extensiones

Requisitos

• El navegador que elijas, como Google Chrome
• Un entorno de desarrollo con un editor de código y una terminal
• Una Cuenta de Google para crear y administrar tu proyecto de Firebase

2. Revisa las aplicaciones web y sus servicios de Firebase

En esta sección, se describen las apps web que compilarás en este codelab y qué Firebase usarás para compilarlas.

App de Reviewly

Una empresa de camisetas está abrumada por las largas opiniones sobre una de sus camisetas y no está segura de su calificación general. La aplicación web de Reviewly completa resume cada opinión, proporciona una calificación por estrellas por cada opinión y usa cada opinión para inferir una calificación general del producto. Los usuarios también pueden expandir cada opinión resumida para ver la opinión original.

App de chatbot

El personal docente de una institución educativa está abrumado por las preguntas repetitivas sobre temas generales, por lo que quiere automatizar las respuestas. La app de Chatbot completa proporciona a los estudiantes un chatbot de conversación potenciado por un modelo de lenguaje grande (LLM) y que puede responder preguntas sobre temas generales. El chatbot tiene contexto histórico, por lo que sus respuestas pueden tener en cuenta las preguntas anteriores que los estudiantes hicieron en la misma conversación.

App de Video Hint

Un departamento gubernamental quiere que sus videos proporcionen audiodescripciones para mejorar la accesibilidad, pero tienen cientos de videos en los que pueden hacer anotaciones y necesitan un enfoque optimizado. La app Video Hint completa es un prototipo que el departamento revisará para evaluar su eficacia.

Estas son las extensiones que se usan en la app de Video Hint:

• Extensión Etiquetar videos con Cloud Video AI: Extrae etiquetas de cada video subido a Storage.
• Extensión Language Tasks con la API de PaLM: Resume las etiquetas en una descripción de texto.
• Para la extensión Convertir texto a voz, crea una versión de audio de la descripción del video.

3. Configura tu entorno de desarrollo

Verifica la versión de Node.js:

1. En la terminal, verifica que tengas instalado Node.js v20.0.0 o una versión posterior:

   node -v
   

2. Si no tienes Node.js v20.0.0 o una versión posterior, descárgalo e instálalo.

Descarga el repositorio

1. Si tienes git instalado, clona el repositorio de GitHub del codelab:

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

2. Si no tienes Git instalado, descarga el repositorio de GitHub como un archivo ZIP.

Revisa la estructura de las carpetas

En tu máquina local, busca el repositorio clonado y revisa la estructura de carpetas. En la siguiente tabla, se incluyen las carpetas y sus descripciones:

Cada carpeta incluye un archivo readme.md que ofrece un inicio rápido para ejecutar la app web correspondiente con instrucciones optimizadas. Sin embargo, si estás aprendiendo por primera vez, deberías completar este codelab, ya que contiene el conjunto de instrucciones más completo.

Si no sabes si aplicaste correctamente el código según las instrucciones de este codelab, puedes encontrar el código de solución de las apps correspondientes en las carpetas reviewly-end, chatbot-end y video-hint-end.

Instala Firebase CLI

Ejecuta el siguiente comando para verificar que tienes Firebase CLI instalado y que es v12.5.4 o una versión posterior:

firebase --version

• Si tienes Firebase CLI instalado, pero no es v12.5.4 o una versión posterior, actualízalo:

  npm update -g firebase-tools
  

• Si no tienes Firebase CLI, instálalo:

  npm install -g firebase-tools
  

Si no puedes instalar Firebase CLI debido a errores de permisos, consulta la documentación de npm o usa otra opción de instalación.

Accede a Firebase.

1. En la terminal, navega a la carpeta ai-extensions-codelab y accede a Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Si en la terminal se indica que ya accediste a Firebase, ve a la sección Configura tu proyecto de Firebase de este codelab.
3. Según si deseas que Firebase recopile datos, ingresa Y o N.
4. En el navegador, selecciona tu Cuenta de Google y, luego, haz clic en Permitir.

4. Configura el proyecto de Firebase

En esta sección, configurarás un proyecto de Firebase y asociarás una app web de Firebase con él. También habilitarás los servicios de Firebase que usan las aplicaciones web de muestra.

Crea un proyecto de Firebase

1. En Firebase console, haz clic en Agregar proyecto.
2. En el cuadro de texto Ingresa el nombre de proyecto, ingresa AI Extensions Codelab (o un nombre de proyecto que prefieras) y haz clic en Continuar.
3. En este codelab, no necesitas Google Analytics, así que desactiva la opción Habilitar Google Analytics para este proyecto.
4. Haz clic en Crear proyecto.
5. Espera a que se aprovisione tu proyecto y, luego, haz clic en Continuar.
6. En tu proyecto de Firebase, ve a Configuración del proyecto. Anota el ID del proyecto porque lo necesitarás más adelante. Este identificador único es la forma en que se identifica tu proyecto (por ejemplo, en Firebase CLI).

Descarga una cuenta de servicio de Firebase

Algunas de las apps web que compilarás en este codelab usan la renderización del servidor con Next.js.

El SDK de Firebase Admin para Node.js se usa para garantizar que las reglas de seguridad funcionen desde el código del servidor. Para usar las APIs en Firebase Admin, debes descargar una cuenta de servicio de Firebase desde Firebase console.

1. En Firebase console, navega a la página Cuentas de servicio en la Configuración del proyecto.
2. Haz clic en Generate new private key > Generate Key.
3. Después de que el archivo se descargue en tu sistema de archivos, obtén la ruta completa a ese archivo.
   Por ejemplo, si descargaste el archivo en tu carpeta Descargas, la ruta completa podría verse de la siguiente manera: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. En la terminal, establece la variable de entorno GOOGLE_APPLICATION_CREDENTIALS en la ruta de acceso de la clave privada que descargaste. En un entorno Unix, el comando podría verse de la siguiente manera:

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

5. Mantén esta terminal abierta y úsala durante el resto de este codelab, ya que es posible que se pierda tu variable de entorno si inicias una nueva sesión de la terminal.
   Si abres una sesión de terminal nueva, debes volver a ejecutar el comando anterior.

Actualiza tu plan de precios de Firebase

Para usar Cloud Functions y las Extensiones de Firebase, tu proyecto de Firebase debe tener el plan de precios Blaze, lo que significa que está asociado a una cuenta de Facturación de Cloud.

• Una cuenta de Facturación de Cloud requiere una forma de pago, como una tarjeta de crédito.
• Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de USD 300 y una cuenta de Facturación de Cloud de prueba gratuita.

Sin embargo, ten en cuenta que completar este codelab no debería generar ningún cargo real.

Para actualizar tu proyecto al plan Blaze, sigue estos pasos:

1. En Firebase console, selecciona la opción para actualizar tu plan.
2. En el diálogo, selecciona el plan Blaze y, luego, sigue las instrucciones en pantalla para asociar tu proyecto con una cuenta de Facturación de Cloud.
   Si necesitas crear una cuenta de Facturación de Cloud, es posible que debas volver a la actualización. en Firebase console para completar la actualización.

Configura los servicios de Firebase en Firebase console

En esta sección, aprovisionarás y configurarás varios servicios de Firebase que usan las apps web de este codelab. Ten en cuenta que no todos estos servicios se usan en cada app web, pero configurar todos estos servicios ahora es conveniente para trabajar en este codelab.

Configura la autenticación

Usarás Authentication con la app de Chatbot y la app de Video Hint. Sin embargo, recuerda que si estás compilando una app real, cada app debe tener su propio proyecto de Firebase.

1. En Firebase console, navega a Autenticación.
2. Haz clic en Comenzar.
3. En la columna Proveedores adicionales, haz clic en Google > Habilitar.

4. En el cuadro de texto Nombre público del proyecto, ingresa un nombre fácil de recordar, como My AI Extensions Codelab.
5. En el menú desplegable Correo electrónico de asistencia para el proyecto, selecciona tu dirección de correo electrónico.
6. Haz clic en Guardar.
   

Configura Cloud Firestore

Usarás Firestore con las tres apps. Sin embargo, recuerda que si estás compilando una app real, cada app debe tener su propio proyecto de Firebase.

1. En Firebase console, navega a Firestore.
2. Haz clic en Crear base de datos > Iniciar en modo de prueba > A continuación.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu base de datos.
3. Usa la ubicación predeterminada o selecciona una que elijas.
   En el caso de una app real, te recomendamos que elijas una ubicación cercana a los usuarios. Ten en cuenta que esta ubicación no se puede cambiar más adelante y que también será automáticamente la ubicación de tu bucket predeterminado de Cloud Storage (próximo paso).
4. Haz clic en Listo.

Configura Cloud Storage para Firebase

Usarás Cloud Storage con la app de Video Hint y probarás la extensión Convertir texto a voz (siguiente paso del codelab).

1. En Firebase console, navega a Storage.
2. Haz clic en Get started > Start in test mode > Next.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu bucket de almacenamiento.
3. La ubicación de tu bucket ya debería estar seleccionada (debido a la configuración de Firestore en el paso anterior).
4. Haz clic en Listo.

En las siguientes secciones de este codelab, instalarás extensiones y modificarás las bases de código de cada app de ejemplo para lograr que funcionen tres apps web diferentes.

5. Configura la extensión “Language Tasks con la API de PaLM” para la app de Reviewly

Instala la extensión Language Tasks con la API de PaLM.

1. Navega hasta la extensión Language Tasks with PaLM API.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. En la sección Revisa las APIs habilitadas y los recursos creados, haz clic en Habilitar junto a cualquier servicio que se te sugiera:

5. Haz clic en Siguiente > Siguiente.
6. En el cuadro de texto Ruta de la colección, ingresa bot.
7. En el cuadro de texto Consigna, ingresa {{ input }}.
8. En el cuadro de texto Campos de variables, ingresa input.
9. En el cuadro de texto Campo de respuesta, ingresa text.
10. En el menú desplegable Ubicación de Cloud Functions, selecciona Iowa (us-central1) o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage.
11. En el menú desplegable Modelo de lenguaje, selecciona text-bison-001.
12. Deje todos los otros valores con sus opciones predeterminadas.
13. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión Language Tasks con la API de PaLM.

Si bien el objetivo de este codelab es interactuar con la extensión Language Tasks con la API de PaLM a través de una app web, es útil entender cómo funciona la extensión si la activas con Firebase console. La extensión se activa cuando se agrega un documento de Cloud Firestore a la colección bot.

Para ver cómo funciona la extensión con Firebase console, sigue estos pasos:

1. En Firebase console, navega a Firestore.
2. En la colección bot, haz clic en Agregar documento.
3. En el cuadro de texto ID de documento, haz clic en ID automático.
4. En el cuadro de texto Campo, ingresa input.
5. En el cuadro de texto Valor, ingresa Tell me about the moon.
6. Haz clic en Guardar y espera unos segundos. Tu documento de la colección bot ahora incluye una respuesta a tu consulta.

6. Cómo configurar la app de Reviewly para usar Firebase

Para ejecutar la app de Reviewly, debes configurar el código de tu app y Firebase CLI para interactuar con el proyecto de Firebase.

Agrega los servicios y la configuración de Firebase al código de tu app

Para usar Firebase, la base de código de tu app necesita los SDK de Firebase para los servicios que quieres usar y la configuración de Firebase que les indica a esos SDKs qué proyecto de Firebase usar.

La app de ejemplo de este codelab ya incluye todo el código de importación y de inicialización necesario para los SDKs (consulta reviewly-start/js/reviews.js), por lo que no es necesario que los agregues. Sin embargo, la app de ejemplo solo tiene valores de marcador de posición para la configuración de Firebase (consulta reviewly-start/js/firebase-config.js), por lo que debes registrarla en tu proyecto de Firebase para obtener los valores de configuración de Firebase únicos de tu app.

1. En Firebase console, en tu proyecto de Firebase, navega a Descripción general del proyecto y, luego, haz clic en Web.
   
2. En el cuadro de texto App nickname, ingresa un sobrenombre fácil de recordar, como My Reviewly app.
3. No selecciones la casilla de verificación Configurar también Firebase Hosting para esta app. Harás estos pasos más adelante en el codelab.
4. Haz clic en Registrar app.
5. La consola muestra un fragmento de código para agregar e inicializar el SDK de Firebase con un objeto de configuración de Firebase específico de la app. Copia todas las propiedades en el objeto de configuración de Firebase.
6. En tu editor de código, abre el archivo reviewly-start/js/firebase-config.js.
7. Reemplaza los valores de marcador de posición por los que acabas de copiar. No hay problema si tienes propiedades y valores para los servicios de Firebase que no usas en la app de Reviewly.
8. Guarda el archivo.
9. Vuelve a Firebase console y haz clic en Ir a la consola.

Configura la terminal para ejecutar comandos de Firebase CLI en tu proyecto de Firebase.

1. En la terminal, navega a la carpeta ai-extensions-codelab que descargaste antes.
2. Navega a la carpeta de la app web reviewly-start:

   cd reviewly-start
   

3. Haz que Firebase CLI ejecute comandos en un proyecto de Firebase específico:

   firebase use YOUR_PROJECT_ID
   

Ejecuta y visualiza la app web de Reviewly.

Para ejecutar y ver la app web, sigue estos pasos:

1. En la terminal, instala las dependencias y, luego, ejecuta la app web:

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

2. En el navegador, navega a la URL que se muestra en la terminal. Por ejemplo: http://localhost:8080.

La página debería cargarse, pero notarás que faltan varias funciones. Agregaremos estos elementos en los próximos pasos de este codelab.

7. Agrega funcionalidad a la app de Reviewly

En el último paso de este codelab, ejecutaste la app de Reviewly de forma local, pero no tenía muchas funciones y aún no usaba la extensión instalada. En este paso del codelab, agregarás esta funcionalidad y usarás la app web para activar la extensión.

Implementa reglas de seguridad

La app de ejemplo de este codelab contiene conjuntos de reglas de seguridad para Firestore y Cloud Storage para Firebase. Después de implementar estas reglas de seguridad en tu proyecto de Firebase, los datos de tu base de datos y tu bucket estarán mejor protegidos contra el uso inadecuado.

Puedes ver estas reglas en los archivos firestore.rules y storage.rules.

1. Para implementar estas reglas de seguridad, ejecuta este comando en la terminal:

   firebase deploy --only firestore:rules,storage
   

2. Si se te pregunta "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", selecciona Sí.

Actualiza el código de la app para activar la extensión

En la app de Reviewly, una opinión nueva que se agrega a Firestore activa la extensión para resumirla.

1. En tu editor de código, abre el archivo functions/add-mock-reviews.js.
2. Reemplaza la variable reviewWithPrompt por el siguiente código, que solicita al modelo de lenguaje una revisión más breve.

   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. Después de la variable reviewWithPrompt, reemplaza la variable reviewDocument por el siguiente código, que crea un documento de revisión para que se pueda agregar a Firestore.

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

4. Guarda el archivo.
5. En el archivo js/reviews.js, después del comentario Insert code below, to import your Firebase Callable Cloud Function, importa tu función de HTTP que admite llamadas de Firebase con el asistente httpsCallable:

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

6. Después del comentario Insert code below, to invoke your Firebase Callable Cloud Function, invoca tu función de HTTP que admite llamadas de Firebase:

   await addMockReviews();
   

7. Guarda el archivo.

Implementa una función para agregar opiniones nuevas

La app web de Reviewly usa una Cloud Function para agregar las opiniones. Sin embargo, actualmente, la Cloud Function no está implementada.

Para implementar tu función con Firebase CLI, sigue estos pasos:

1. En la terminal, mientras aún estás en la carpeta reviewly-start, presiona Control+C para detener el servidor.
2. Sigue estos pasos para implementar la función:

   firebase deploy --only functions
   

3. Si ves un error Permission denied while using the Eventarc Service Agent o similar, espera unos minutos y vuelve a ejecutar el comando.

Acabas de implementar tu primera función personalizada con Cloud Functions. Firebase console ofrece un panel en el que puedes ver todas las funciones que implementas en tu proyecto de Firebase.

Vuelve a ejecutar y ver la app web de Reviewly (ahora con funcionalidad).

Para ejecutar y ver la app web que ahora funciona, sigue estos pasos:

1. En la terminal, vuelve a ejecutar el servidor:

   npm run dev
   

2. En el navegador, navega a la URL que se muestra en la terminal. Por ejemplo: http://localhost:8080.
3. En la app, haz clic en Agregar algunas opiniones de prueba y espera unos segundos para que aparezcan algunas opiniones largas.
   En segundo plano, la extensión Language Tasks con la API de PaLM reacciona al documento nuevo que representa la opinión nueva. La instrucción que agregaste antes solicita un resumen más corto del modelo de lenguaje.
4. Para ver una opinión completa y la instrucción que se usó para ella, haz clic en una de las opiniones y, luego, selecciona Mostrar mensaje PaLM.

8. Configura la extensión “Chatbot con la API de PaLM” para la app de Chatbot

Instala la extensión Chatbot con la API de PaLM.

1. Navega a la extensión Chatbot con la API de PaLM.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. Haz clic en Siguiente > Siguiente > Siguiente hasta llegar a la sección Configurar extensión.
5. En el cuadro de texto Ruta de acceso de la colección, ingresa users/{uid}/discussion/{discussionId}/messages.
6. En el menú desplegable Ubicación de Cloud Functions, selecciona Iowa (us-central1) o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage.
7. En el menú desplegable Modelo de lenguaje, selecciona chat-bison.
8. Deje todos los otros valores con sus opciones predeterminadas.
9. Haz clic en Instalar extensión y espera a que se instale.

Prueba la extensión Chatbot con la API de PaLM.

Si bien el objetivo de este codelab es interactuar con la extensión Chatbot con la API de PaLM a través de una app web, es útil entender cómo funciona la extensión si la activas con Firebase console. La extensión se activa cuando se crea un documento de Cloud Firestore en la colección users/{uid}/discussion/{discussionId}/messages.

1. En Firebase console, navega a Firestore.
2. Haz clic en Iniciar colección.
   1. En el cuadro de texto ID de colección, ingresa users y, luego, haz clic en Siguiente.
   2. En el cuadro de texto ID de documento, haz clic en ID automático y, luego, en Guardar.
3. En la colección users, haz clic en Iniciar colección.
   
   1. En el cuadro de texto ID de la colección, ingresa discussion y, luego, haz clic en Siguiente.
   2. En el cuadro de texto ID del documento, haz clic en ID automático y, luego, en Guardar.
4. En la colección discussion, haz clic en Iniciar colección.
   
   1. En el cuadro de texto ID de la colección, ingresa messages y, luego, haz clic en Siguiente.
   2. En el cuadro de texto ID del documento, haz clic en ID automático.
   3. En el cuadro de texto Campo, ingresa prompt.
   4. En el cuadro de texto Valor, ingresa Tell me 5 random fruits.
   5. Haz clic en Guardar y espera unos segundos. La colección messages ahora incluye un documento que contiene una respuesta a tu consulta.

5. En la colección messages, haz clic en Agregar documento.
   1. En el cuadro de texto ID de documento, haz clic en ID automático.
   2. En el cuadro de texto Campo, ingresa prompt.
   3. En el cuadro de texto Valor, ingresa And now, vegetables.
   4. Haz clic en Guardar y espera unos segundos. La colección messages ahora incluye un documento que contiene una respuesta a tu consulta.

9. Configura la app de chatbot para usar Firebase

Para ejecutar la app de Chatbot, debes configurar el código de tu app y Firebase CLI para interactuar con el proyecto de Firebase.

Agrega los servicios y la configuración de Firebase al código de tu app

Para usar Firebase, la base de código de tu app necesita los SDK de Firebase para los servicios que quieres usar y la configuración de Firebase que les indica a esos SDKs qué proyecto de Firebase usar.

La app de ejemplo de este codelab ya incluye todo el código de importación y de inicialización necesario para los SDKs (consulta chatbot-start/lib/firebase/firebase.js), por lo que no es necesario que los agregues. Sin embargo, la app de ejemplo solo tiene valores de marcador de posición para la configuración de Firebase (consulta chatbot-start/lib/firebase/firebase-config.js), por lo que debes registrar tu app con el proyecto de Firebase para obtener los valores de configuración únicos de Firebase.

1. En Firebase console, en tu proyecto de Firebase, navega a Descripción general del proyecto y, luego, haz clic en Web (o en Agregar app) si ya registraste una app en el proyecto).
2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre fácil de recordar, como My Chatbot app.
3. No selecciones la casilla de verificación Configurar también Firebase Hosting para esta app. Harás estos pasos más adelante en el codelab.
4. Haz clic en Registrar app.
5. La consola muestra un fragmento de código para agregar e inicializar el SDK de Firebase con un objeto de configuración de Firebase específico de la app. Copia todas las propiedades en el objeto de configuración de Firebase.
6. En tu editor de código, abre el archivo chatbot-start/lib/firebase/firebase-config.js.
7. Reemplaza los valores del marcador de posición por los valores que acabas de copiar. No hay problema si tienes propiedades y valores para los servicios de Firebase que no usas en la app de Chatbot.
8. Guarda el archivo.
9. Vuelve a Firebase console y haz clic en Ir a la consola.

Configura la terminal para ejecutar comandos de Firebase CLI en tu proyecto de Firebase.

1. En la terminal, presiona Control+C para evitar que el servidor ejecute la app web anterior.
2. En la terminal, navega a la carpeta de la app web chatbot-start:

   cd ../chatbot-start
   

3. Haz que Firebase CLI ejecute comandos en un proyecto de Firebase específico:

   firebase use YOUR_PROJECT_ID
   

Configura la base de código de tu app para usar Firebase Hosting compatible con frameworks

En este codelab, se usan frameworks web con Hosting (versión preliminar) con la app web de Chatbot.

1. En tu terminal, habilita los frameworks web con Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inicializa Firebase Hosting:

   firebase init hosting
   

3. Cuando se te solicite Detected an existing Next.js codebase in your current directory, should we use this?, presiona Y.
4. Cuando se te solicite In which region would you like to host server-side content, if applicable?, selecciona la región predeterminada o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage y, luego, presiona Enter (o return en macOS).
5. Cuando se te solicite Set up automatic builds and deploys with GitHub?, presiona N.

Ejecuta y visualiza la app web de Chatbot

1. En tu terminal, instala las dependencias y, luego, ejecuta la aplicación web:

   npm install
   firebase emulators:start --only hosting
   

2. En tu navegador, ve a la URL de Hosting alojada de forma local. En la mayoría de los casos, es http://localhost:5000/ o algo similar.

La página debería cargarse, pero notarás que faltan varias funciones. Los agregaremos en los próximos pasos de este codelab.

Soluciona problemas de ejecución de la app web

Si ves el error en la página web que comienza de la siguiente manera: Error: Firebase session cookie has incorrect..., debes borrar todas las cookies de tu entorno de localhost. Para ello, sigue las instrucciones que se indican en Cómo borrar cookies | Documentación de DevTools.

10. Agrega funcionalidad a la app de Chatbot

En el último paso de este codelab, ejecutaste la app Chatbot de forma local, pero no tenía mucha funcionalidad y aún no usaste la extensión instalada. En este paso del codelab, agregarás esta funcionalidad y usarás la app web para activar la extensión.

Implementa reglas de seguridad

La app de ejemplo de este codelab contiene conjuntos de reglas de seguridad para Firestore y Cloud Storage para Firebase. Después de implementar estas reglas de seguridad en tu proyecto de Firebase, los datos de tu base de datos y tu bucket estarán mejor protegidos contra el uso inadecuado.

Puedes ver estas reglas en los archivos firestore.rules y storage.rules.

1. Para implementar estas reglas de seguridad, ejecuta este comando en la terminal:

   firebase deploy --only firestore:rules,storage
   

2. Si se te pregunta: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", selecciona Sí.

Actualiza el código para agregar mensajes a Cloud Firestore

En la app de Chatbot, se agrega un mensaje nuevo de un usuario a Firestore, lo que activa la extensión para que genere una respuesta.

1. En el editor de código, abre el archivo lib/firebase/firestore.js.
2. Cerca del final del archivo, busca la función addNewMessage, que controla la adición de mensajes nuevos.
   La función ya utiliza las siguientes propiedades del objeto:
   

   Parámetro	Descripción
   userId	El ID del usuario que accedió
   discussionId	El ID de la conversación al que se agregó el mensaje
   message	El contenido de texto del mensaje
   db	Una instancia de base de datos de Firestore

   Con estas variables listas, puedes agregar un documento de Cloud Firestore para representar el mensaje nuevo.
3. En el cuerpo de la función addNewMessage, después del comentario // Insert your code below ⬇️, agrega el siguiente código:

   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(),
   });
   

Actualiza el código para construir una consulta que obtenga mensajes

1. En el archivo lib/firebase/firestore.js, busca la función getMessagesQuery, que debe mostrar una consulta de Cloud Firestore que ubica los mensajes almacenados en la ruta de la colección users/{uid}/discussion/{discussionId}/messages.
2. Reemplaza toda la función getMessagesQuery por el siguiente código:

   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"));
   }
   

Actualiza el código para controlar los documentos de mensajes de Cloud Firestore

1. En el archivo lib/firebase/firestore.js, busca la función handleMessageDoc, que recibe un documento de Cloud Firestore que representa un solo mensaje.
   Esta función necesita dar formato a los datos y estructurarlos de una manera que tenga sentido para el IU de la app de Chatbot.
2. Reemplaza toda la función handleMessageDoc por el siguiente código:

   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. Guarda el archivo.

Vuelve a ejecutar y visualizar la app web de Chatbot (ahora con funcionalidad)

Para ejecutar y ver la app web ahora funcional, sigue estos pasos:

1. En tu navegador, regresa a la pestaña con la app web de Chatbot y vuelve a cargar la página.
2. Haz clic en Acceder con Google.
3. Si es necesario, selecciona tu Cuenta de Google.
4. Después de acceder, vuelve a cargar la página.
5. En el cuadro de texto Ingresa tu mensaje, ingresa un mensaje, como Tell me about space.
6. Haz clic en Enviar y espera unos segundos para que la aplicación web de Chatbot responda.

Otro beneficio de la extensión Chatbot con la API de PaLM es su historial de conversaciones.

Para ver un ejemplo de su capacidad de conversar con contexto histórico, sigue estos pasos:

1. En el cuadro de texto Enter your message, haz una pregunta, como What are five random fruits?.
2. En el cuadro de texto Ingresa tu mensaje, haz una pregunta adicional que se relacione con la pregunta anterior, como And what about vegetables?.

La aplicación web Chatbot responde con conocimiento histórico. Aunque tu última pregunta no especificó cinco vegetales aleatorios, la extensión Chatbot con la API de PaLM entiende preguntas adicionales.

11. Configura la extensión “Convertir texto a voz” para la app de Video Hint

Instala la extensión Convertir texto a voz.

1. Navega a la extensión Convertir texto a voz.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. Haz clic en Siguiente.
5. En la sección Revisa las APIs habilitadas y los recursos creados, haz clic en Habilitar junto a cualquier servicio que se te sugiera:

6. Haz clic en Siguiente y, luego, selecciona Otorgar junto a los permisos que se te sugieran.

7. Haz clic en Siguiente.
8. En el cuadro de texto Ruta de la colección, ingresa bot.
9. En el cuadro de texto Ruta de acceso del almacenamiento, ingresa tts.
10. Deja todos los demás valores con sus opciones predeterminadas.
11. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión Convertir texto a voz.

Si bien el objetivo de este codelab es interactuar con la extensión Convertir texto a voz mediante una app web, es útil saber cómo funciona la extensión cuando se activa con Firebase console. La extensión se activa cuando se crea un documento de Cloud Firestore en la colección bot.

Para ver cómo funciona la extensión con Firebase console, sigue estos pasos:

1. En Firebase console, navega a Firestore.
2. Haz clic en INICIAR COLECCIÓN.
3. En el cuadro de texto ID de la colección, ingresa bot.
4. Haz clic en Siguiente.

5. En el cuadro de texto ID del documento, haz clic en ID automático.
6. En el cuadro de texto Campo, ingresa text.
7. En el cuadro de texto Valor, ingresa The quick brown fox jumps over the lazy dog.
8. Haz clic en Guardar.

Para ver y escuchar el archivo MP3 que creaste, sigue estos pasos:

1. En Firebase console, navega a Storage.
2. En el panel en el que puedes subir archivos, anota el nombre de tu bucket después del valor gs://. Este es el nombre de tu bucket predeterminado para este proyecto. Lo necesitarás para varias tareas a lo largo de este codelab.

3. En la consola de Google Cloud, navega a Cloud Storage.
4. Selecciona tu proyecto.
   Si tu proyecto no aparece en la lista reciente de proyectos, haz clic en Seleccionar proyecto para ubicarlo en el selector.

5. Selecciona tu bucket de Storage predeterminado.
6. Navega a la carpeta tts/:
7. Haz clic en el archivo MP3.
8. Al final del archivo MP3, haz clic en y observa que el texto se convertirá a voz.

12. Configura la extensión “Etiquetar videos con Cloud Video AI” para la app de Video Hint

Instala la extensión Etiquetar videos con Cloud Video A

1. Navega a la extensión Etiquetar videos con Cloud Video AI.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. Haz clic en Siguiente > Siguiente > Luego, hasta llegar a la sección Configurar la extensión.
5. En el menú desplegable Ubicación de Cloud Functions, selecciona una ubicación admitida (ya sea la que seleccionaste anteriormente para Firestore y Cloud Storage o la más cercana). Para conocer las ubicaciones compatibles, consulta la sección location_id en AnnotateVideoRequest.
6. En el menú desplegable Modelo, selecciona Más reciente.
7. En el menú desplegable Cámara fija, selecciona No.
8. Deje todos los otros valores con sus opciones predeterminadas.
9. Haz clic en Instalar extensión y espera a que se instale.

Prueba la extensión Label Videos with Cloud Video AI

Si bien el objetivo de este codelab es interactuar con la extensión Etiquetar videos con Cloud Video AI mediante una app web, es útil comprender cómo funciona la extensión si la activas con Firebase console. La extensión se activa cuando se sube un archivo de video al bucket de Storage.

Para ver cómo funciona la extensión con Firebase console, sigue estos pasos:

1. Ve a Storage en el proyecto de Firebase > Crear carpeta.
2. En el cuadro de texto Nombre de la carpeta, ingresa video_annotation_input.

3. Haz clic en Agregar carpeta.
4. En la carpeta video_annotation_input, haz clic en Subir archivo.
5. En la carpeta ai-extensions-codelab/video-hint-start/public/videos que clonaste o descargaste antes, selecciona el primer archivo de video.
6. En el navegador, en la consola de Google Cloud, navega a Cloud Storage.
7. Selecciona tu bucket de Storage predeterminado, que anotaste antes.
8. Haz clic en video_annotation_output.
   Si no ves el video_annotation_output espera unos segundos y actualiza la página, ya que es posible que la API de Video Intelligence aún esté procesando el video.

9. Observa que existe un archivo JSON con un nombre similar al archivo que subiste antes.
10. Haz clic en Descargar FILENAME.
11. Abre el archivo JSON descargado en el editor de código. Contiene el resultado sin procesar de la API de Video Intelligence, que incluye las etiquetas detectadas del video que subiste.

13. Configura la app de Video Hint para usar Firebase

Para ejecutar la app de Video Hint, debes configurar el código de tu app y Firebase CLI para interactuar con tu proyecto de Firebase.

Agrega los servicios y la configuración de Firebase al código de tu app

Para usar Firebase, la base de código de tu app necesita los SDK de Firebase para los servicios que quieres usar y la configuración de Firebase que les indica a esos SDKs qué proyecto de Firebase usar.

La app de ejemplo de este codelab ya incluye todo el código de importación y de inicialización necesario para los SDKs (consulta video-hint-start/lib/firebase/firebase.js), por lo que no es necesario que los agregues. Sin embargo, la app de ejemplo solo tiene valores de marcador de posición para la configuración de Firebase (consulta video-hint-start/lib/firebase/firebase-config.js), por lo que debes registrarla en tu proyecto de Firebase para obtener los valores de configuración de Firebase únicos de tu app.

1. En Firebase console, en tu proyecto de Firebase, navega a Descripción general del proyecto y, luego, haz clic en Web (o en Agregar app) si ya registraste una app en el proyecto).
2. En el cuadro de texto App nickname, ingresa un sobrenombre fácil de recordar, como My Video Hint app.
3. No selecciones la casilla de verificación Configurar también Firebase Hosting para esta app. Harás estos pasos más adelante en el codelab.
4. Haz clic en Registrar app.
5. La consola muestra un fragmento de código para agregar e inicializar el SDK de Firebase con un objeto de configuración de Firebase específico de la app. Copia todas las propiedades en el objeto de configuración de Firebase.
6. En el editor de código, abre el archivo video-hint-start/lib/firebase/firebase-config.js.
7. Reemplaza los valores del marcador de posición por los valores que acabas de copiar. No hay problema si tienes propiedades y valores para los servicios de Firebase que no usas en la app de Video Hint.
8. Guarda el archivo.
9. Vuelve a Firebase console y haz clic en Ir a la consola.

Configura la terminal para ejecutar comandos de Firebase CLI en tu proyecto de Firebase.

1. En la terminal, presiona Control+C para evitar que el servidor ejecute la app web anterior.
2. En la terminal, navega a la carpeta de la app web video-hint-start:

   cd ../video-hint-start
   

3. Haz que Firebase CLI ejecute comandos en un proyecto de Firebase específico:

   firebase use YOUR_PROJECT_ID
   

Configura la base de código de tu app para usar Firebase Hosting compatible con frameworks

En este codelab, se usan frameworks web con Hosting (vista previa) con la app web Video Hint.

1. En tu terminal, habilita los frameworks web con Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inicializa Firebase Hosting:

   firebase init hosting
   

3. Cuando se te solicite Detected an existing Next.js codebase in your current directory, should we use this?, presiona Y.
4. Cuando se te solicite In which region would you like to host server-side content, if applicable?, selecciona la región predeterminada o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage y, luego, presiona Enter (o return en macOS).
5. Cuando se te solicite Set up automatic builds and deploys with GitHub?, presiona N.

Ejecuta y visualiza la app web de Video Hint

1. En tu terminal, instala las dependencias en las carpetas video-hint-start y functions y, luego, ejecuta la app:

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

2. En tu navegador, navega a la URL de Hosting alojada de forma local. En la mayoría de los casos, es http://localhost:5000/ o algo similar.

La página debería cargarse, pero notarás que faltan varias funciones. Agregaremos estos elementos en los próximos pasos de este codelab.

Soluciona problemas de ejecución de la app web

Si ves un mensaje de error como Error: The query requires an index. You can create it here: https://console.firebase.google.com en el panel Console de DevTools, sigue estos pasos:

1. Navega a la URL proporcionada.

2. Haz clic en Guardar y espera a que el estado cambie de Compilando a Habilitado.

14. Agrega funcionalidad a la app de Video Hint

En el último paso de este codelab, ejecutaste la app de Video Hint de forma local, pero no tenía muchas funciones y aún no usaba la extensión instalada. En este paso del codelab, agregarás esta funcionalidad y usarás la app web para activar la extensión.

Implementa reglas de seguridad

La app de ejemplo de este codelab contiene conjuntos de reglas de seguridad para Firestore y Cloud Storage para Firebase. Después de implementar estas reglas de seguridad en tu proyecto de Firebase, los datos de tu base de datos y tu bucket estarán mejor protegidos contra el uso inadecuado.

Puedes ver estas reglas en los archivos firestore.rules y storage.rules.

1. Para implementar estas reglas de seguridad, ejecuta este comando en la terminal:

   firebase deploy --only firestore:rules,storage
   

2. Si se te pregunta "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", selecciona Sí.

Actualiza el código para combinar las funciones

1. En tu editor de código, expande la carpeta functions.
   Esta carpeta contiene varias funciones, que se combinan para formar una canalización de extensión. En la siguiente tabla, se enumeran y describen cada función:

   Función	Descripción
   functions/01-handle-video-upload.js	El primer paso en la canalización de extensiones. Procesa el archivo de video que subió el usuario.
   functions/02-handle-video-labels.js	El segundo paso en la canalización de extensiones. Procesa el archivo de etiquetas de video, que generó la extensión storage-label-videos.
   functions/03-handle-audio-file.js	Es el tercer paso en la canalización de extensiones. Controla el archivo de audio transcrito.

   Sin embargo, aún debes agregar un archivo que agrupe estas funciones.
2. En el archivo functions/index.js, agrega el siguiente código:

   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();
   

Este código usa módulos de JavaScript para importar y exportar las funciones del archivo index.js, de modo que haya una ubicación centralizada para todas las funciones.

Actualiza el código para controlar la carga de videos

1. En el editor de código, abre el archivo lib/firebase/storage.js.
2. Ubica la función uploadVideo.
   Esta función recibe los parámetros userId, filePath y file. Estos datos son suficientes para subir un archivo a Cloud Storage.
3. En el cuerpo de la función uploadVideo, agrega el siguiente código:

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

Implementa tus funciones

Para implementar tus funciones con Firebase CLI, sigue estos pasos:

1. En la terminal, mientras aún estás en la carpeta video-hint-start, presiona Control+C para detener el proceso actual.
2. Implementa tus funciones:

   firebase deploy --only functions
   

   Si se te pregunta si quieres borrar alguna Cloud Function anterior, selecciona No.
3. Si ves un mensaje similar a Permission denied while using the Eventarc Service Agent, espera unos minutos y vuelve a ejecutar el comando.
4. Cuando el comando finalice, vuelve a ejecutar la app de manera local:

   firebase emulators:start --only hosting
   

Vuelve a ejecutar y visualizar la app web de Video Hint (ahora con funcionalidad).

Para ejecutar y ver la app web que ahora funciona, sigue estos pasos:

1. En tu navegador, busca la pestaña en la que navegaste a http://localhost:5000.
2. Si es necesario, haz clic en Acceder con Google y selecciona tu Cuenta de Google.
3. Haz clic en Subir video de ejemplo n° 1 y espera unos minutos para ver los resultados del resumen del video.
4. Si no ves ningún resultado después de subir el video, consulta Cómo solucionar errores con Cloud Functions en el apéndice de este codelab.

15. Conclusión

¡Felicitaciones! Lograste mucho en este codelab.

Extensiones de Firebase instaladas y configuradas

Usaste Firebase console para instalar y configurar varias extensiones de IA. Usar extensiones es conveniente porque no necesitas escribir mucho código estándar relacionado con la autenticación con los servicios de Google Cloud, la lectura y escritura desde Firestore y la interacción con los servicios de Google Cloud, además de los diversos matices relacionados con esas tareas.

Trabajo con extensiones en Firebase console.

En lugar de pasar directamente al código, te tomaste el tiempo para comprender cómo funcionan las extensiones de IA, según una entrada que proporcionaste a través de la consola a Firestore o Cloud Storage. Este tipo de interacción puede ser especialmente útil si necesitas depurar el resultado de la extensión.

Compila tres apps web potenciadas por IA que usan Extensiones de Firebase

Reviewly

En la app web de Reviewly, usaste la extensión Language Tasks with PaLM API para resumir las opiniones largas que dejaron los usuarios sobre una camiseta. También solicitaste que el modelo de lenguaje proporcionara una respuesta JSON a tu consulta, en la que el JSON proporcionó una calificación con estrellas y una opinión resumida de la opinión original de formato largo.

Ejercicio opcional: La empresa de camisetas está satisfecha con el resumen de opiniones, pero pidió un resumen adicional de la naturaleza del defecto. ¿Puedes ajustar el mensaje para que muestre un resumen del defecto y, luego, incluir ese resumen en la interfaz de usuario de la aplicación web?

Chatbot

En la app web de Chatbot, usaste la extensión Chatbot con la API de PaLM para proporcionarle al usuario una interfaz de chat interactiva, que incluye contexto histórico en las conversaciones, en la que se almacena cada mensaje en un documento de Firestore que tenga alcance para un usuario en particular.

Ejercicio opcional: Los alumnos están satisfechos con el chatbot, pero al personal le gustaría que se hicieran algunas mejoras. Los alumnos deben recibir preguntas que inviten a la reflexión después de haber respondido. Por ejemplo:

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?

Sugerencia: Puedes usar una opción de contexto configurable para lograrlo.

Video Hint

En la app web Video Hint, utilizaste las extensiones Convertir texto a voz, Tareas de lenguaje con la API de PaLM y Etiquetar videos con Cloud Video para formar una canalización de extensión que da como resultado un texto y audiodescripción de un video.

Ejercicio opcional: Al departamento gubernamental le pareció interesante el prototipo y ahora también desea que un usuario pueda hacer clic en una etiqueta de texto para saltar al punto del video en el que se detecta la etiqueta.

16. Apéndice: Soluciona errores con Cloud Functions

Si tu aplicación web no funciona como se espera y crees que puede deberse a funciones, sigue los pasos que se indican en esta página de solución de problemas.

Permite el acceso público sin autenticar

Si ves errores relacionados con permisos en el panel de la consola de las Herramientas para desarrolladores de Chrome, sigue estos pasos:

1. Lee la página Descripción general de la autenticación | Cloud Run
2. Haz clic en el vínculo para ver y completar las tareas requeridas para Permitir el acceso público sin autenticar a la función.

3. Regresa a la app de Reviewly. Por ejemplo: http://localhost:8080.
4. Haz clic en Agregar algunas opiniones simuladas y espera unos segundos.
   • Si aparecen opiniones, no es necesario que continúes con estos pasos para solucionar problemas. Puedes ir directamente a la sección Cómo configurar la aplicación web de chatbot en este codelab.
   • Si no aparecen las opiniones, continúa con esta sección para solucionar problemas.

Controla errores de permisos insuficientes

1. En Firebase console, navega a Funciones.
2. Coloca el cursor sobre la función addMockReviews y, luego, haz clic en > Ver registros.

3. Desplázate por los registros hasta que encuentres un error similar a uno de los siguientes:

   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. En la consola de Google Cloud, navega a la página Permisos de IAM y, luego, selecciona tu proyecto.
5. En la tabla, busca la columna Nombre.
   En la página IAM y administración, hay una tabla de usuarios y roles. En la columna de nombre de la tabla, se describe para qué sirve el usuario o la principal. Es posible que tengas un principal con el nombre Cuenta de servicio de procesamiento predeterminada.

Si ves la Cuenta de servicio de procesamiento predeterminada, sigue estos pasos:

1. Haz clic en Editar principal.

2. Continúa con la sección Agrega roles a la cuenta de servicio predeterminada de Compute en este codelab.

Si no ves la cuenta de servicio predeterminada de Compute, sigue estos pasos:

1. Haz clic en Otorgar acceso.
2. En el cuadro de texto Principales nuevas, ingresa compute.
3. En el menú de sugerencias automáticas que aparece, selecciona Cuenta de servicio de procesamiento predeterminada.

Agrega roles a la cuenta de servicio de Compute predeterminada

En la sección Asignar roles de la cuenta de servicio de Compute predeterminada, sigue estos pasos:

1. Expande el menú Selecciona un rol.
2. En el cuadro de texto Filtro, ingresa Cloud Datastore User.
3. En el menú de sugerencias automáticas que aparece, selecciona Usuario de Cloud Datastore.
4. Haz clic en Agregar otro rol.
   1. Expande el menú Seleccionar un rol.
   2. En el cuadro de texto Filtro, ingresa Cloud Storage for Firebase Admin.
   3. En el menú de sugerencias automáticas que aparece, selecciona Administrador de Cloud Storage para Firebase.
5. Haz clic en Agregar otro rol.
   1. Expande el menú Seleccionar un rol.
   2. En el cuadro de texto Filtro, ingresa Cloud Storage for Firebase Service Agent.
   3. En el menú de sugerencias automáticas que aparece, selecciona Agente de servicio de Cloud Storage para Firebase.
6. Haz clic en Guardar.