Compila funciones de IA generativa con la tecnología de tus datos con Firebase Genkit

1. Antes de comenzar

En este codelab, aprenderás a usar Firebase Genkit para integrar la IA generativa en tu app. Firebase Genkit es un framework de código abierto que te ayuda a compilar, implementar y supervisar apps impulsadas por IA listas para la producción.

Genkit se diseñó para desarrolladores de apps para ayudarte a integrar fácilmente potentes capacidades de IA en tus apps con patrones y paradigmas conocidos. Lo creó el equipo de Firebase y aprovecha nuestra experiencia en la creación de herramientas que usan millones de desarrolladores en todo el mundo.

Requisitos previos

  • Estar familiarizado con Firestore, Node.js y TypeScript

Qué aprenderás

  • Cómo compilar apps más inteligentes con las funciones avanzadas de búsqueda de similitud vectorial de Firestore
  • Cómo implementar de forma práctica la IA generativa en tus apps con Firebase Genkit
  • Prepara tu solución para la implementación y la integración.

Requisitos

  • Un navegador de tu elección, 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 la app web y los servicios en la nube que se usan

En esta sección, revisarás la app web que compilarás con este codelab y aprenderás sobre los servicios en la nube que usarás.

App web

En este codelab, trabajarás en la base de código de una app llamada Compass, una app de planificación de vacaciones. Los usuarios pueden elegir un destino, explorar las actividades en el destino y crear un itinerario para su viaje.

En este codelab, implementarás dos funciones nuevas que tienen como objetivo mejorar la participación de los usuarios con la página principal de la app. Ambas funciones cuentan con la tecnología de IA generativa:

  • Actualmente, la app muestra una lista estática de destinos. La cambiarás para que sea dinámica.
  • Implementarás un itinerario propagado automáticamente para aumentar la tasa de interés.

d54f2043af908fb.png

Servicios utilizados

En este codelab, usarás muchos servicios y funciones de Firebase y Cloud, y se te proporcionará la mayor parte del código de partida para ellos. La siguiente tabla contiene los servicios que usarás y los motivos para usarlos.

Servicio

Motivo de uso

Firebase Genkit

Puedes usar Genkit para incorporar la IA generativa en una aplicación de Node.js o Next.js.

Cloud Firestore

Almacenas datos en Cloud Firestore, que luego se usan para la búsqueda de similitud de vectores.

Vertex AI de Google Cloud

Usas modelos básicos de Vertex AI (como Gemini) para potenciar tus funciones de IA.

Firebase App Hosting

De manera opcional, puedes usar el nuevo Firebase App Hosting optimizado para entregar tu app web dinámica de Next.js (conectada a un repositorio de GitHub).

3. Configura tu entorno de desarrollo

Verifica la versión de Node.js:

  1. En la terminal, verifica que tengas instalada la versión 20.0.0 de Node.js o una posterior:
    node -v
  2. Si no tienes Node.js 20.0.0 o una versión posterior, descarga la última versión de LTS e instálala.

Obtén el código fuente del codelab

Si tienes una cuenta de GitHub, haz lo siguiente:

  1. Crea un repositorio nuevo con nuestra plantilla de github.com/FirebaseExtended/codelab-ai-genkit-rag65ef006167d600ab.png
  2. Crea una clonación local del repositorio de GitHub del codelab que acabas de crear:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag

Si no tienes instalado git o prefieres no crear un repo nuevo, haz lo siguiente:

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:

Carpeta

Descripción

genkit-functions

Código de Genkit de backend

load-firestore-data

Herramienta de línea de comandos de ayuda para propagar rápidamente tu colección de Firestore

* Todo lo demás

Código de app web de Next.js

La carpeta raíz incluye un archivo README.md que ofrece un inicio rápido para ejecutar la aplicación web con instrucciones optimizadas. Sin embargo, si es la primera vez que aprendes a programar, debes completar este codelab (en lugar de la guía de inicio rápido) porque contiene el conjunto de instrucciones más completo.

Si no estás seguro de si aplicaste correctamente el código según se indica en este codelab, puedes encontrar el código de la solución en la rama git end.

Instala Firebase CLI

  1. Verifica que tengas instalado Firebase CLI y que su versión 13.6 o una posterior:
    firebase --version
  2. Si tienes Firebase CLI instalado, pero no es la versión 13.6 o una posterior, actualízalo:
    npm update -g firebase-tools
  3. Si no tienes Firebase CLI, instálalo:
    npm install -g firebase-tools

Si no puedes actualizar o 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, accede a Firebase:
    firebase login
    Si la terminal indica que ya accediste a Firebase, puedes ir a la sección Configura tu proyecto de Firebase de este codelab.
  2. En la terminal, según si deseas que Firebase recopile datos, ingresa Y o N. (cualquiera de las opciones funciona para este codelab)
  3. En el navegador, selecciona tu Cuenta de Google y haz clic en Permitir.

Instala gcloud CLI de Google Cloud

  1. Instala la CLI de gcloud.
  2. En la terminal, accede a Google Cloud:
    gcloud auth login

4. Configura el proyecto de Firebase

En esta sección, configurarás un proyecto de Firebase y registrarás una aplicación web de Firebase en él. También habilitarás algunos servicios que la aplicación web de muestra usa más adelante en este codelab.

Todos los pasos de esta sección se realizan en Firebase console.

Crea un proyecto de Firebase

  1. Accede a Firebase console con la misma Cuenta de Google que usaste en el paso anterior.
  2. Haz clic en Crear un proyecto y, luego, ingresa un nombre para el proyecto (por ejemplo, Compass Codelab).
    Recuerda el ID del proyecto que se te asignó automáticamente para tu proyecto de Firebase (o haz clic en el ícono Editar para establecer el ID que prefieras). Necesitarás este ID más adelante para identificar el proyecto de Firebase en Firebase CLI. Si olvidas tu ID, puedes encontrarlo más adelante en la Configuración del proyecto.
  3. Haz clic en Continuar.
  4. Si se te solicita, revisa y acepta las condiciones de Firebase y, luego, haz clic en Continuar.
  5. En este codelab, no necesitas usar Google Analytics, por lo que debes desactivar la opción correspondiente.
  6. Haz clic en Crear proyecto, espera a que se aprovisione y, luego, haz clic en Continuar.

Agregar una app web a tu proyecto de Firebase

  1. Navega a la pantalla Descripción general del proyecto en tu proyecto de Firebase y, luego, haz clic en Un ícono con corchetes angulares de apertura, una barra y corchetes angulares de cierre, que representa una app web Web.El botón Web en la parte superior de Descripción general del proyecto en Firebase console
  2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre fácil de recordar, como My Compass Codelab App. Puedes dejar desmarcada la casilla de verificación para configurar Firebase Hosting, ya que tendrás la opción de configurar un servicio de hosting en el último paso de este codelab.
    Registra la app web
  3. Haz clic en Registrar app > Ir a la consola.

Perfecto. Ahora registraste una app web en tu nuevo proyecto de Firebase.

Actualiza tu plan de precios de Firebase

Para usar Firebase Genkit y Vertex AI (y sus servicios en la nube subyacentes), tu proyecto de Firebase debe tener el plan de precios de pago por uso (Blaze), lo que significa que está vinculado 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.
  • Si realizas este codelab como parte de un evento, pregúntale al organizador si hay créditos de Cloud disponibles.

Obtén más información sobre los precios de Vertex AI.

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

  1. En Firebase console, selecciona la opción para actualizar tu plan.
  2. Selecciona el plan Blaze. Sigue las instrucciones en pantalla para vincular una cuenta de Facturación de Cloud a tu proyecto.
    Si necesitabas crear una cuenta de Facturación de Cloud como parte de esta actualización, es posible que debas volver al flujo de actualización en Firebase console para completarla.

Configura Cloud Firestore

  1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
  2. Haz clic en Crear base de datos.
  3. Deja el ID de base de datos establecido en (default).
  4. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
    Para una app real, quieres elegir una ubicación cercana a los usuarios.
  5. Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
    No distribuyas ni expongas una app de forma pública sin agregar reglas de seguridad para tu base de datos.
  6. Haz clic en Crear.

Habilita Vertex AI

Usa la CLI de gcloud para configurar Vertex AI. En todos los comandos de esta página, asegúrate de reemplazar YOUR_PROJECT_ID por el ID de tu proyecto de Firebase.

  1. En la terminal, establece el proyecto predeterminado para el SDK de Google Cloud:
    gcloud config set project YOUR_PROJECT_ID
  2. Si ves un mensaje de advertencia que dice &quot;ADVERTENCIA: Tu proyecto activo no coincide con el proyecto de cuota en tu archivo local de credenciales predeterminadas de la aplicación. Esto podría generar problemas de cuota inesperados&quot; y, luego, ejecuta el siguiente comando para configurar el proyecto de cuota:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
  3. Habilita el servicio de Vertex AI en tu proyecto:
    gcloud services enable aiplatform.googleapis.com

5. Configura la app web

Para ejecutar la app web, deberás ejecutar comandos en la terminal y agregar código en el editor de código. En todos los comandos que aparecen en esta página, asegúrate de reemplazar YOUR_PROJECT_ID por el ID de tu proyecto de Firebase.

Configura Firebase CLI para segmentar tu proyecto

  1. En tu terminal, navega al directorio raíz de tu proyecto del codelab.
  2. Para que Firebase CLI ejecute todos los comandos en tu proyecto de Firebase, ejecuta el siguiente comando:
    firebase use YOUR_PROJECT_ID

Importa datos de muestra a Firestore

Para que puedas comenzar rápidamente, este codelab te proporciona datos de muestra pregenerados para Firestore.

  1. Para permitir que la base de código local ejecute código que normalmente usaría una cuenta de servicio, ejecuta el siguiente comando en la terminal:
    gcloud auth application-default login
    Se abrirá una pestaña nueva en el navegador. Accede con la misma Cuenta de Google que usaste en los pasos anteriores.
  2. Para importar los datos de Firestore de muestra, ejecuta los siguientes comandos:
    cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
  3. Verifica que los datos se hayan agregado correctamente a la base de datos. Para ello, ve a la sección Firestore del proyecto de Firebase en Firebase console. Deberías ver el esquema de datos importado y su contenido.Datos de muestra de Compass en Firebase console

Conecta la app web a tu proyecto de Firebase

La base de código de tu app web debe estar asociada con el proyecto de Firebase correcto para usar sus servicios, como la base de datos. Para ello, debes agregar tu configuración de Firebase a la base de código de tu app. Esta configuración incluye valores esenciales, como el ID de tu proyecto, la clave de API y el ID de tu app, así como otros valores que permiten que tu app interactúe con Firebase.

  1. Obtén la configuración de Firebase de tu app:
    1. En Firebase console, navega a tu proyecto de Firebase.
    2. En el panel lateral izquierdo, haz clic en el ícono de ajustes junto a Descripción general del proyecto y selecciona Configuración del proyecto.
    3. En la tarjeta &quot;Tus apps&quot;, selecciona tu aplicación web.
    4. En la sección "Configuración y configuración del SDK", selecciona la opción Configuración.
    5. Copia el fragmento. Comienza con const firebaseConfig ....
  2. Agrega la configuración de Firebase a la base de código de tu aplicación web:
    1. En el editor de código, abre el archivo src/lib/genkit/genkit.config.ts.
    2. Reemplaza la sección relevante por el código que copiaste.
    3. Guarda el archivo.

Obtén una vista previa de la app web en tu navegador

  1. En tu terminal, instala las dependencias y, luego, ejecuta la aplicación web:
    npm install
npm run dev
  2. En tu navegador, navega a la URL de hosting alojada de forma local para ver la app web. Por ejemplo, en la mayoría de los casos, la URL es http://localhost:3000/ o algo similar.

Pantalla principal de la app de brújula

Compass es una app de Next.js que usa componentes de React Server, y esta es la página principal.

Haz clic en Encontrar mi viaje de ensueño. Puedes ver que actualmente muestra algunos datos codificados para algunos destinos fijos:

Pantalla de Encuentra mi viaje soñado

No dudes en explorar. Cuando tengas todo listo para continuar, haz clic en el botón de inicio Página principal (en la esquina superior derecha).

6. Sumérgete en la IA generativa con Genkit

Ya está todo listo para aprovechar el poder de la IA generativa en tu aplicación. En esta sección del codelab, se te guiará para que implementes una función que sugiera destinos en función de la inspiración proporcionada por el usuario. Usarás Firebase Genkit y Vertex AI de Google Cloud como proveedor para el modelo generativo (usarás Gemini).

Genkit puede almacenar el estado de seguimiento y flujo (lo que te permite inspeccionar el resultado de la ejecución de flujos de Genkit). En este codelab, usarás Firestore para almacenar esos seguimientos.

Como último paso de este codelab, implementarás tu app de Genkit en Firebase App Hosting.

Conecta la app de Genkit a tu proyecto de Firebase

Antes de que puedas iniciar Genkit, tu base de código debe estar asociada con el proyecto de Firebase correcto para usar sus servicios, como la base de datos. Para ello, debes agregar tu configuración de Firebase a la base de código de tu app de Genkit. Esta configuración incluye valores esenciales, como el ID de tu proyecto, la clave de API y el ID de tu app, así como otros valores que permiten que tu app interactúe con Firebase.

  1. Obtén la configuración de Firebase de tu app:
    1. En Firebase console, navega a tu proyecto de Firebase.
    2. En el panel lateral izquierdo, haz clic en el ícono de ajustes junto a Descripción general del proyecto y selecciona Configuración del proyecto.
    3. En la tarjeta "Tus apps", selecciona tu app web.
    4. En la sección "Configuración y configuración del SDK", selecciona la opción Configuración.
    5. Copia el fragmento. Comienza con const firebaseConfig ....
  2. Agrega la configuración de Firebase de tu app a la base de código de tu app de Genkit:
    1. En el editor de código, abre el archivo genkit-functions/src/lib/genkit.config.ts.
    2. Reemplaza la sección relevante por el código que copiaste.
    3. Guarda el archivo.

Inicia la IU para desarrolladores de Genkit

Genkit incluye una IU basada en la Web que te permite interactuar con LLM, flujos de Genkit, recuperadores y otros componentes de IA.

  1. Inicia la IU para desarrolladores de Genkit:
    1. Abre una nueva ventana de la terminal.
    2. Navega hasta la raíz del directorio genkit-functions.
    3. Ejecuta el siguiente comando para iniciar la IU para desarrolladores de Genkit:
      cd genkit-functions
npx genkit start
  2. En el navegador, navega a la URL de Genkit alojada de forma local. En la mayoría de los casos, es http://localhost:4000/.

Interactúa con Gemini

Ahora puedes usar la IU para desarrolladores de Genkit para interactuar con cualquiera de los modelos compatibles o con cualquiera de los otros componentes de IA, como las instrucciones, los recuperadores y los flujos de Genkit.

Por ejemplo, pídele a Gemini que te sugiera unas vacaciones. Ten en cuenta que puedes usar las instrucciones del sistema para controlar el comportamiento del modelo según tus necesidades específicas. Esto también funciona para modelos que no admiten instrucciones del sistema de forma nativa.

Interactuar con el modelo de Gemini en la IU para desarrolladores de Genkit

Cómo administrar mensajes

Firebase Genkit presenta Dotprompt, un complemento y formato de texto diseñado para optimizar la creación y administración de tus instrucciones de IA generativa. La idea principal detrás de Dotprompt es tratar las instrucciones como código, lo que te permite escribirlas, mantenerlas y controlar su versión junto con el código de tu aplicación.

Para usar Dotprompt, comienza con hello-world:

  1. En el editor de código, abre el archivo genkit-functions/prompts/1-hello-world.prompt.
  2. En la IU para desarrolladores de Genkit, abre dotprompt/1-hello-world.
  3. Usa cualquier nombre o código de idioma que conozcas, o déjalo como una cadena vacía.
  4. Haz clic en Run.Usa Dotprompt para generar un saludo en sueco
  5. Prueba algunos valores diferentes. Los modelos grandes de lenguaje son buenos para comprender instrucciones abreviadas, con errores ortográficos o incompletas en consultas simples como esta.

Enriquece tus resultados con datos estructurados

Además de generar texto sin formato, Genkit te permite estructurar tu salida para mejorar la presentación y la integración en la IU de tu app. Cuando defines un esquema, puedes indicarle al LLM que produzca datos estructurados que se alineen con el formato que desees.

Explora esquemas de salida

También puedes especificar el esquema de salida de una llamada a LLM.

  1. En el editor de código, examina el archivo de instrucciones:
    1. Abre el archivo dotprompt/2-simple-itinerary.
    2. Examina los esquemas de entrada y salida definidos.
  2. Interactúa con la IU:
    1. En la IU para desarrolladores de Genkit, navega a la sección dotprompt/2-simple-itinerary.
    2. Completa los campos place y interests con datos de muestra para proporcionar una entrada:
      {
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
    3. Haz clic en Ejecutar.

Usa Dotprompt para especificar el esquema de salida

Comprende el resultado basado en esquemas

Observa cómo la salida generada se ajusta al esquema definido. Cuando especificas la estructura deseada, le indicas al LLM que produzca datos que se puedan analizar e integrar fácilmente en tu aplicación. Genkit valida automáticamente la salida según el esquema, lo que garantiza la integridad de los datos.

Además, puedes configurar Genkit para que reintente o intente reparar el resultado si no coincide con el esquema.

Ventajas clave de los esquemas de salida

  • Integración simplificada: Incorpora fácilmente datos estructurados a los elementos de la IU de tu app.
  • Validación de datos: Garantiza la exactitud y coherencia de los resultados generados.
  • Manejo de errores: Implementa mecanismos para abordar las discrepancias de esquema.

Los esquemas de salida mejoran tu experiencia con Genkit, lo que te permite crear datos estructurados personalizados para experiencias del usuario más enriquecidas y dinámicas.

Utiliza la entrada multimodal

Imagina que tu app sugiere destinos de vacaciones personalizados en función de imágenes que tus usuarios encuentran inspiradoras. Genkit, combinado con un modelo generativo multimodal, te permite darle vida a esta visión.

  1. En el editor de código, examina el archivo de instrucciones:
    1. Abre el archivo genkit-functions/prompts/imgDescription.prompt.
    2. Ten en cuenta que se incluyó {{media url=this}}, un elemento de sintaxis del Handlebars que facilita la incorporación de imágenes en tu instrucción.
  2. Interactúa con la IU:
    1. En la IU para desarrolladores de Genkit, abre la instrucción dotprompt/imgDescription.
    2. Para ingresar una URL de imagen en el campo imageUrls, pega la URL de una imagen. Por ejemplo, puedes usar una imagen en miniatura de Wikipedia que muestre la Torre Eiffel:
      {
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. Haz clic en Ejecutar.

7. Implementa la recuperación con la búsqueda de similitud de vectores

Si bien generar contenido creativo con modelos de IA es impresionante, las aplicaciones prácticas a menudo requieren que el resultado se base en un contexto específico.

En el caso de este codelab, tienes una base de datos de destinos (lugares y actividades) y quieres asegurarte de que las sugerencias generadas del modelo de Gemini hagan referencia exclusivamente a entradas de esta base de datos.

Para cerrar la brecha entre las búsquedas no estructuradas y el contenido relevante, aprovecharás la potencia de la búsqueda de similitud de vectores en las incorporaciones generadas.

Comprende las incorporaciones y la similitud de vectores

  • Vectores: Son representaciones numéricas de datos que, a menudo, se usan para modelar información compleja, como texto o imágenes. Cada dimensión de un vector corresponde a una característica específica de los datos.
  • Modelos de incorporación: Estos modelos de IA especializados transforman datos de entrada, como texto, en vectores de alta dimensión. El aspecto fascinante es que las entradas similares se asignan a vectores que están cerca entre sí en este espacio de alta dimensión.
  • Búsqueda de similitud de vectores: Esta técnica aprovecha la proximidad de los vectores de incorporación para identificar datos relevantes. Dada una consulta de entrada, encuentra entradas en la base de datos con vectores de incorporación similares, lo que indica una relación semántica.

Cómo funciona el proceso de recuperación

  1. Incorporación de la consulta: La entrada del usuario (por ejemplo, “cena romántica en París”) se pasa por un modelo de incorporación, lo que genera un vector de consulta.
  2. Incorporaciones de base de datos: Lo ideal es que hayas procesado previamente tu base de datos de destinos y hayas creado vectores de incorporación para cada entrada.
  3. Cálculo de similitud: El vector de consulta se compara con cada vector de incorporación de la base de datos mediante una métrica de similitud (por ejemplo, la similitud coseno).
  4. Recuperación: Las entradas más similares de la base de datos, según su proximidad al vector de consulta, se recuperan como sugerencias relevantes.

Si incorporas este mecanismo de recuperación en tu aplicación, aprovecharás el modelo de Gemini para generar sugerencias que no solo son creativas, sino que también se basan firmemente en tu conjunto de datos específico. Este enfoque garantiza que el resultado generado siga siendo contextualmente relevante y alineado con la información disponible en tu base de datos.

Habilita la búsqueda de similitud de vectores en Firestore

En un paso anterior de este codelab, completaste tu base de datos de Firestore con lugares y actividades de muestra. Cada entrada de lugar incluye un campo de texto knownFor que describe sus atributos destacados, junto con el campo embedding correspondiente que contiene la representación vectorial de esta descripción.

Para aprovechar el poder de la búsqueda de similitud vectorial en estas incorporaciones, deberás crear un índice de Firestore. Este índice permite una recuperación eficiente de sitios según la similitud de sus vectores de incorporación con una consulta determinada.

  1. En tu terminal, ejecuta el siguiente comando para instalar el componente alpha más reciente. Necesitas la versión 2024.05.03 o una posterior:
    gcloud components install alpha
  2. Crea el índice y asegúrate de reemplazar YOUR_PROJECT_ID por el ID de tu proyecto.
    gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
  3. En la IU para desarrolladores de Genkit, abre el placesRetriever.
  4. Haz clic en Ejecutar. Observa el objeto con andamiaje con texto de marcador de posición, que indica dónde implementarás la lógica del recuperador.
  5. En el editor de código, abre el archivo genkit-functions/src/lib/placesRetriever.ts.
  6. Desplázate hacia abajo y reemplaza el marcador de posición placesRetriever por lo siguiente:
    export const placesRetriever = defineFirestoreRetriever({
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: textEmbeddingGecko,
  distanceMeasure: 'COSINE',
});

Prueba el recuperador

  1. En la IU para desarrolladores de Genkit, abre el recuperador de placesRetriever.
  2. Proporciona la siguiente búsqueda:
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. También puedes proporcionar Opciones. Por ejemplo, a continuación, se muestra cómo especificar cuántos documentos debe mostrar el recuperador:
    {
    "limit": 4
}
  4. Haz clic en Ejecutar.

Puedes realizar filtros adicionales en los datos más allá de la similitud si agregas cláusulas where a Options.

8. Generación mejorada por recuperación (RAG) con Genkit

En secciones anteriores, creaste instrucciones individuales capaces de manejar texto, JSON e imágenes, y generar destinos de vacaciones y otro contenido atractivo para tus usuarios. También implementaste una instrucción que recupera destinos relevantes de tu base de datos de Firestore. Ahora, es el momento de organizar estos componentes en un flujo cohesivo de generación de aumento de recuperación (RAG).

En esta sección, se presenta un concepto importante de Genkit llamado flujos. Los flujos son funciones transmisibles y de tipado fuerte que pueden invocarse de forma local y remota, con observabilidad completa. Puedes administrar e invocar flujos desde la CLI de Genkit y la IU para desarrolladores de Genkit.

  1. En tu editor de código, examina el mensaje del itinerario:
    1. Abre el archivo genkit-functions/prompts/itineraryGen.prompt.
    2. Observa cómo la instrucción se amplió para aceptar entradas adicionales, específicamente los datos de activities que se obtienen del retriever.
  2. En la IU para desarrolladores de Genkit, ve un flujo de Genkit en el archivo genkit-functions/src/lib/itineraryFlow.ts.
    Sugerencia: Para optimizar la depuración, considera dividir los flujos extensos en pasos más pequeños y manejables.
  3. Integra un paso de "descripción de la imagen" para mejorar el flujo:
    1. Busca el comentario TODO: 2 (alrededor de la línea 70). Esto marca el punto en el que mejorarás tu flujo.
    2. Reemplaza el marcador de posición imgDescription vacío por el resultado que genera la llamada a la instrucción imgDescription.
  4. Prueba el flujo:
    1. Navega a itineraryFlow.
    2. Usa la siguiente entrada para probar la ejecución correcta de itineraryFlow con el paso que agregaste recientemente:
      {
    "request": "Sightseeing in Paris",
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. Haz clic en Ejecutar.
    4. Observa el resultado generado, que debería incorporar la descripción de la imagen en la sugerencia de itinerario.
  5. Si encuentras algún error o comportamiento inesperado, consulta la pestaña Inspeccionar para obtener más detalles. También puedes usar esta pestaña para revisar el historial de ejecuciones de Trace Store.

RAG para tu aplicación web

  1. Asegúrate de que la app web aún se esté ejecutando. Para ello, visita http://localhost:3000/ en tu navegador.
  2. Si la app web ya no se está ejecutando, ejecuta estos comandos en la terminal:
    npm install
npm run dev
  3. Consulta la página de la aplicación web Dream Your Vacation (http://localhost:3000/gemini).
  4. Consulta su código fuente (src/app/gemini/page.tsx) para ver un ejemplo de integración de Next.js.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. Implementa tu aplicación con Firebase App Hosting

El último paso de este recorrido es implementar tu app web. Aprovecharás Firebase App Hosting, una solución de hosting adaptada al marco de trabajo diseñada para simplificar la implementación de apps de Next.js y Angular en un backend sin servidores.

  1. Confirma los cambios en tu repositorio de Git local y, luego, envíalos a GitHub.
  2. En Firebase console, navega a App Hosting dentro de tu proyecto de Firebase.
  3. Haz clic en Get started > Connect to GitHub.
  4. Selecciona tu cuenta de GitHub y Repositorio. Haz clic en Siguiente.
  5. En Configuración de la implementación > Directorio raíz, mantén el valor predeterminado.
  6. Para la rama en vivo, selecciona la rama main de tu repositorio de GitHub. Haz clic en Siguiente.
  7. Ingresa un ID para tu backend (por ejemplo, compass).
  8. Cuando se te pregunte si quieres crear o asociar una app web de Firebase, elige Seleccionar una app web de Firebase existente y elige la app que creaste en un paso anterior de este codelab.
  9. Haz clic en Finish and Deploy.

Supervisa el estado de la implementación

El proceso de implementación tardará unos minutos. Puedes hacer un seguimiento del progreso en la sección Hosting de aplicaciones de Firebase console.

Otorga permisos a tu cuenta de servicio

Para que tu backend de Node.js acceda a los recursos de Vertex AI, debes asignar el rol aiplatform.user a la cuenta de servicio de tu app:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

Una vez que se complete el proceso, los usuarios podrán acceder a tu aplicación web.

Reimplementación automática

Firebase App Hosting optimiza las actualizaciones futuras. Cada vez que envíes cambios a la rama principal de tu repositorio de GitHub, Firebase App Hosting volverá a compilar y a implementar tu app automáticamente, lo que garantizará que los usuarios siempre disfruten de la versión más reciente.

10. Conclusión

¡Felicitaciones por completar este codelab completo!

Aprovechaste con éxito la potencia de Firebase Genkit, Firestore y Vertex AI para crear un “flujo” sofisticado que genera recomendaciones de vacaciones personalizadas en función de las preferencias y la inspiración de los usuarios, todo esto mientras basas las sugerencias en los datos de tu aplicación.

A lo largo de este recorrido, adquiriste experiencia práctica con patrones esenciales de ingeniería de software que son fundamentales para crear aplicaciones de IA generativa sólidas. Estos patrones incluyen los siguientes:

  • Administración de mensajes: Permite organizar y mantener instrucciones como código para mejorar la colaboración y el control de versiones.
  • Contenido multimodal: Integra diversos tipos de datos, como imágenes y texto, para mejorar las interacciones con la IA.
  • Esquemas de entrada y salida: Estructuran los datos para una integración y validación sin problemas en tu aplicación.
  • Almacenes de vectores: Aprovechan las incorporaciones de vectores para realizar una búsqueda de similitud eficiente y recuperar información relevante.
  • Recuperación de datos: Implementación de mecanismos para recuperar datos de bases de datos e incorporarlos en contenido generado por IA
  • Generación mejorada por recuperación (RAG): Combina técnicas de recuperación con IA generativa para obtener resultados contextualmente relevantes y precisos.
  • Instrumentación de flujo: Compila y organiza flujos de trabajo complejos de IA para una ejecución fluida y observable.

Si dominas estos conceptos y los aplicas en el ecosistema de Firebase, estarás bien preparado para embarcarte en tus propias aventuras de IA generativa. Explora las vastas posibilidades, crea aplicaciones innovadoras y continúa desafiando los límites de lo que se puede lograr con la IA generativa.

Explora opciones de implementación alternativas

Genkit ofrece una variedad de opciones de implementación que se adaptan a tus necesidades específicas, incluidas las siguientes:

Solo elige la que mejor se adapte a tus necesidades. Para ello, ejecuta el siguiente comando dentro de la carpeta del nodo (package.json):

npx genkit init

Próximos pasos