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 está diseñado para desarrolladores de apps para ayudarte a integrar fácilmente funciones de IA potentes en tus apps con patrones y paradigmas conocidos. El equipo de Firebase la creó aprovechando nuestra experiencia en la compilación de herramientas que usan millones de desarrolladores en todo el mundo.

Requisitos previos

  • Familiaridad 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

  • 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 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 también 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, ver 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 se basan en la 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 retención.

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 del 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 o posterior de Node.js:
    node -v
  2. Si no tienes la versión 20.0.0 de Node.js o una posterior, descarga la versión LTS más reciente y, luego, 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 carpetas

En tu máquina local, busca el repositorio clonado y revisa la estructura de carpetas:

Carpeta

Descripción

load-firestore-data

Herramienta de línea de comandos de ayuda para propagar con rapidez tu colección de Firestore

*todo lo demás

Código de la app web de Next.js

La carpeta raíz incluye un archivo README.md que ofrece un inicio rápido para ejecutar la app 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 sabes si aplicaste correctamente el código según las instrucciones de este codelab, puedes encontrar el código de la solución en la rama git end.

Instala Firebase CLI

  1. Verifica que tienes Firebase CLI instalado y que es la 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álala:
    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 app web de Firebase en él. También habilitarás algunos servicios que usa la app web de ejemplo 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 la consola de Firebase con la misma Cuenta de Google que usaste en el paso anterior.
  2. Haz clic en Create a project y, luego, ingresa un nombre para el proyecto (por ejemplo, Compass Codelab).
    Recuerda el ID de proyecto asignado automáticamente para tu proyecto de Firebase (o haz clic en el ícono Edit para establecer el ID de proyecto que prefieras). Más adelante, necesitarás este ID para identificar tu 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. Para este codelab, no necesitas Google Analytics, así que desactiva la opción de Google Analytics.
  6. Haz clic en Crear proyecto, espera a que se aprovisione y, luego, haz clic en Continuar.

Agrega 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 la página Descripción general del proyecto en Firebase console
  2. En el cuadro de texto App nickname, ingresa un sobrenombre fácil de recordar, como My Compass Codelab App. Puedes dejar sin marcar la casilla de verificación para configurar Firebase Hosting, ya que, de forma opcional, configurarás un servicio de hosting en el último paso de este codelab.
    Registra la app web
  3. Haz clic en Registrar app > Continuar en 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 necesitas 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 la 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, debes elegir una ubicación que esté cerca de tus 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 públicamente 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 "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" y, luego, ejecuta el siguiente comando para configurar el proyecto de cuota:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
  3. Habilitaste 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 de 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 la terminal, navega al directorio raíz de tu proyecto de 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 muestra de Firestore, ejecuta los siguientes comandos:
    cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
  3. Para verificar que los datos se hayan agregado correctamente a tu base de datos, ve a la sección Firestore de tu proyecto de Firebase en Firebase console.Deberías ver el esquema de datos importados y su contenido.Datos de muestra de Compass en Firebase console

Conecta tu 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 "Tus apps", 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 tu configuración de Firebase a la base de código de tu app 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 la terminal, instala las dependencias y, luego, ejecuta la app web:
    npm install
npm run dev:next
  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 servidor de React, y esta es la página principal.

Haz clic en Buscar mi viaje soñado. Puedes ver que actualmente muestra algunos datos codificados para algunos destinos fijos:

Pantalla de Encuentra tu 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. Explora 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 implementar una función que sugiera destinos en función de la inspiración que proporcione el usuario. Usarás Firebase Genkit y Vertex AI de Google Cloud como el proveedor del 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 estos registros.

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

Conecta tu app de Genkit a tu proyecto de Firebase

Ya conectamos Genkit a tu proyecto editando src/lib/genkit/genkit.config.ts en el paso anterior.

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.

En la terminal, ejecuta lo siguiente:

npm run dev:genkit

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. Observa cómo puedes usar las instrucciones del sistema para dirigir el comportamiento del modelo según tus necesidades específicas. Esto también funciona para los 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 los mensajes

Firebase Genkit presenta Dotprompt, un complemento y un formato de texto diseñados para optimizar la creación y la 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 un hello-world:

  1. En el editor de código, abre el archivo prompts/1-hello-world.prompt.
  2. En la IU para desarrolladores de Genkit, abre prompts/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 búsquedas simples como esta.

Enriquece tu resultado 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 deseas.

Explora los 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 prompts/2-simple-itinerary.prompt.
    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 prompts/2-simple-itinerary.
    2. Para proporcionar entradas, completa los campos place y interests con datos de muestra:
      {
    "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 el resultado generado 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 el resultado en función del 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 datos estructurados fácilmente en 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 esquemas.

Aprovechar los esquemas de salida mejora tu experiencia de Genkit, lo que te permite crear datos estructurados y personalizados para experiencias del usuario más ricas 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 dar vida a esta visión.

  1. En el editor de código, examina el archivo de instrucciones:
    1. Abre el archivo prompts/imgDescription.prompt.
    2. Ten en cuenta la inclusión de {{media url=this}}, que es un elemento de sintaxis de 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 prompts/imgDescription.
    2. Para ingresar una URL de imagen en el campo imageUrls, pega la URL de una imagen. Por ejemplo, puedes usar una imagen de 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 tu objetivo es asegurarte de que las sugerencias generadas por el modelo de Gemini hagan referencia exclusivamente a las 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: Los 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 los datos de entrada, como el texto, en vectores de alta dimensión. Lo 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 la relación semántica.

Comprende 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 a través de un modelo de incorporación, lo que genera un vector de consulta.
  2. Incorporaciones de bases de datos: Idealmente, deberías haber procesado previamente tu base de datos de destinos y haber 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.

Cuando incorporas este mecanismo de recuperación en tu aplicación, aprovechas el modelo de Gemini para generar sugerencias que no solo sean creativas, sino que también estén firmemente arraigadas 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, propagaste 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 notables, junto con un campo embedding correspondiente que contiene la representación vectorial de esta descripción.

Para aprovechar la potencia de la búsqueda de similitud vectorial en estas incorporaciones, deberás crear un índice de Firestore. Este índice permite recuperar lugares de manera eficiente en función de la similitud de sus vectores de incorporación con una consulta determinada.

  1. En la 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 firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
  3. En la IU para desarrolladores de Genkit, abre retrievers/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 src/lib/genkit/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 retrievers/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 aplicar filtros adicionales a los datos más allá de la similitud agregando cláusulas where a Opciones.

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 de generación aumentada de recuperación (RAG) cohesivo.

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

  1. En el editor de código, examina la instrucción de itinerario:
    1. Abre el archivo prompts/itineraryGen.prompt.
    2. Observa cómo se expandió la instrucción para aceptar entradas adicionales, específicamente los datos de actividades que provienen del recuperador.
  2. En la IU para desarrolladores de Genkit, consulta un flujo de Genkit en el archivo src/lib/genkit/itineraryFlow.ts.
    Sugerencia: Para optimizar la depuración, considera dividir los flujos largos en pasos más pequeños y fáciles de administrar.
  3. Para mejorar el flujo, integra un paso de “descripción de la imagen”:
    1. Busca el comentario TODO: 2 (alrededor de la línea 81). 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 flows/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 debe 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. Para asegurarte de que la app web siga ejecutándose, 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 app 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 compatible con frameworks 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 Alojamiento de apps en tu proyecto de Firebase.
  3. Haz clic en Get started > Connect to GitHub.
  4. Selecciona tu cuenta de GitHub y el repositorio. Haz clic en Siguiente.
  5. En Configuración de implementación > Directorio raíz, mantén el valor predeterminado.
  6. Para la rama publicada, 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 Finalizar y, luego, en Implementar.

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, los usuarios podrán acceder a tu app 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 automáticamente tu app, lo que garantizará que tus usuarios siempre experimenten la versión más reciente.

10. Conclusión

¡Felicitaciones por completar este codelab integral!

Aprovechaste con éxito el poder 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, a la vez que basa 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 instrucciones: Organiza y mantiene las 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: Implementa mecanismos para recuperar e incorporar datos de bases de datos en el 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 amplias posibilidades, crea aplicaciones innovadoras y sigue 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 para satisfacer 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