Use o Firebase Genkit para criar recursos de IA generativa com seus dados

1. Antes de começar

Neste codelab, você vai aprender a usar o Firebase Genkit para integrar a IA generativa ao seu app. O Firebase Genkit é um framework de código aberto que ajuda você a criar, implantar e monitorar apps com tecnologia de IA prontos para produção.

O Genkit foi desenvolvido para ajudar desenvolvedores a integrar facilmente recursos avançados de IA aos apps com padrões e paradigmas conhecidos. Ele foi criado pela equipe do Firebase, com base em nossa experiência na criação de ferramentas usadas por milhões de desenvolvedores em todo o mundo.

Pré-requisitos

• Ter familiaridade com o Firestore, Node.js e TypeScript.

O que você vai aprender

• Como criar apps mais inteligentes com os recursos avançados de pesquisa de similaridade vetorial do Firestore.
• Como implementar de forma prática a IA generativa nos seus apps usando o Firebase Genkit.
• Prepare sua solução para implantação e integração.

Pré-requisitos

• Um navegador da sua escolha, como o Google Chrome
• Ambiente de desenvolvimento com um editor de código e um terminal
• Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase

2. Analisar o app da Web e os serviços em nuvem usados

Nesta seção, você vai revisar o app da Web que vai criar com este codelab e aprender sobre os serviços de nuvem que vai usar.

App da Web

Neste codelab, você vai trabalhar na base de código de um app chamado Compass, um app de planejamento de férias. Os usuários podem escolher um destino, procurar atividades no destino e criar um itinerário para a viagem.

Neste codelab, você vai implementar dois novos recursos para melhorar o engajamento do usuário com a página inicial do app. Ambos os recursos são baseados em IA generativa:

• No momento, o app mostra uma lista estática de destinos. Você vai mudar para que seja dinâmico.
• Você vai implementar um itinerário preenchido automaticamente para aumentar a fidelidade.

Serviços usados

Neste codelab, você vai usar vários recursos e serviços do Firebase e do Cloud, e a maioria do código inicial deles será fornecida. A tabela a seguir contém os serviços que você vai usar e os motivos para isso.

3. Configurar o ambiente de desenvolvimento

Descubra sua versão do Node.js

1. No terminal, verifique se você tem a versão 20.0.0 ou mais recente do Node.js instalada:

   node -v
   

2. Se você não tiver a versão 20.0.0 ou mais recente do Node.js, faça o download e instale a versão mais recente do LTS.

Fazer o download do código-fonte do codelab

Se você tiver uma conta do GitHub:

1. Crie um novo repositório usando nosso modelo em github.com/FirebaseExtended/codelab-ai-genkit-rag
2. Crie um clone local do repositório do GitHub do codelab que você acabou de criar:

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

Se você não tiver o git instalado ou preferir não criar um novo repositório:

Faça o download do repositório do GitHub como um arquivo ZIP.

Revisar a estrutura de pastas

Na máquina local, encontre o repositório clonado e revise a estrutura de pastas:

A pasta raiz inclui um arquivo README.md que oferece um início rápido para executar o app da Web usando instruções simplificadas. No entanto, se você ainda está começando, conclua este codelab (em vez do quickstart) porque ele contém o conjunto mais abrangente de instruções.

Caso não tenha certeza se aplicou corretamente o código conforme as instruções deste codelab, você pode encontrar o código da solução na ramificação end do git.

Instalar a CLI do Firebase

1. Verifique se você tem a CLI do Firebase instalada e se ela é a versão 13.6 ou mais recente:

   firebase --version
   

2. Se você tiver a CLI do Firebase instalada, mas ela não for a versão 13.6 ou mais recente, atualize-a:

   npm update -g firebase-tools
   

3. Se você não tiver a CLI do Firebase, faça a instalação:

   npm install -g firebase-tools
   

Se não for possível atualizar ou instalar a CLI do Firebase devido a erros de permissão, consulte a documentação do npm ou use outra opção de instalação.

Fazer login no Firebase

1. No terminal, faça login no Firebase:

   firebase login
   

   Se o terminal informar que você já fez login no Firebase, pule para a seção Configurar seu projeto do Firebase deste codelab.
2. No terminal, dependendo se você quer que o Firebase colete dados, insira Y ou N. (qualquer uma das opções funciona para este codelab)
3. No navegador, selecione sua Conta do Google e clique em Permitir.

Instalar a CLI gcloud do Google Cloud

1. Instale a CLI da gcloud.
2. No terminal, faça login no Google Cloud:

   gcloud auth login
   

4. Configurar seu projeto do Firebase

Nesta seção, você vai configurar um projeto do Firebase e registrar um app da Web do Firebase nele. Você também vai ativar alguns serviços usados pelo app da Web de exemplo mais adiante neste codelab.

Todas as etapas desta seção são realizadas no console do Firebase.

Criar um projeto do Firebase

1. Faça login no console do Firebase usando a mesma Conta do Google usada na etapa anterior.
2. Clique em Criar um projeto e insira um nome (por exemplo, Compass Codelab).
   Lembre-se do ID atribuído automaticamente ao projeto do Firebase ou clique no ícone Editar para definir o ID que preferir. Você vai precisar desse ID mais tarde para identificar seu projeto do Firebase na CLI do Firebase. Se você esquecer o ID, poderá encontrá-lo mais tarde nas Configurações do projeto.
3. Clique em Continuar.
4. Se solicitado, leia e aceite os Termos do Firebase e clique em Continuar.
5. Para este codelab, não é necessário usar o Google Analytics. Portanto, desative a opção do Google Analytics.
6. Clique em Criar projeto, aguarde o provisionamento e clique em Continuar.

Adicionar um app da Web ao seu projeto do Firebase

1. Navegue até a tela Visão geral do projeto no seu projeto do Firebase e clique em Web.
2. Na caixa de texto Apelido do app, digite um apelido fácil de lembrar, como My Compass Codelab App. Deixe a caixa de seleção para configurar o Firebase Hosting desmarcada, porque você vai configurar um serviço de hospedagem na última etapa deste codelab.
   
3. Clique em Registrar app > Continuar para o console.

Ótimo! Você registrou um app da Web no seu novo projeto do Firebase.

Fazer upgrade do plano de preços do Firebase

Para usar o Firebase Genkit e a Vertex AI (e os serviços de nuvem associados), seu projeto do Firebase precisa estar no plano de preços pague conforme o uso (Blaze), ou seja, vinculado a uma conta do Cloud Billing.

• Uma conta do Cloud Billing exige uma forma de pagamento, como cartão de crédito.
• Se você ainda não conhece o Firebase e o Google Cloud, confira se tem qualificação para receber um crédito de US$300 e uma conta de teste sem custo financeiro do Cloud Billing.
• Se você estiver fazendo este codelab como parte de um evento, pergunte ao organizador se há créditos do Cloud disponíveis.

Saiba mais sobre os preços da Vertex AI.

Para fazer upgrade do seu projeto para o plano Blaze, siga estas etapas:

1. No console do Firebase, selecione Fazer upgrade do seu plano.
2. Selecione o plano Blaze. Siga as instruções na tela para vincular uma conta do Cloud Billing ao seu projeto.
   Se você precisou criar uma conta do Cloud Billing como parte desse upgrade, talvez seja necessário voltar ao fluxo de upgrade no console do Firebase para concluir o upgrade.

Configurar o Cloud Firestore

1. No painel à esquerda do Console do Firebase, expanda Build e selecione Banco de dados do Firestore.
2. Clique em Criar banco de dados.
3. Deixe o ID do banco de dados definido como (default).
4. Selecione um local para o banco de dados e clique em Próxima.
   No caso de apps reais, escolha um local próximo aos usuários.
5. Clique em Iniciar no modo de teste. Leia a exoneração de responsabilidade sobre as regras de segurança.
   Não distribua ou exponha um app publicamente sem adicionar regras de segurança ao seu banco de dados.
6. Clique em Criar.

Ativar a Vertex AI

Use a CLI gcloud para configurar a Vertex AI. Para todos os comandos desta página, substitua YOUR_PROJECT_ID pelo ID do seu projeto do Firebase.

1. No terminal, defina o projeto padrão para o SDK do Google Cloud:

   gcloud config set project YOUR_PROJECT_ID
   

2. Se você receber uma mensagem de aviso informando que "AVISO: seu projeto ativo não corresponde ao projeto de cota no arquivo de credenciais padrão do aplicativo local. Isso pode resultar em problemas inesperados de cota.", execute o comando a seguir para definir o projeto de cota:

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. Ative o serviço da Vertex AI no seu projeto:

   gcloud services enable aiplatform.googleapis.com
   

5. Configurar o app da Web

Para executar o app da Web, você precisa executar comandos no terminal e adicionar código no editor de código. Para todos os comandos desta página, substitua YOUR_PROJECT_ID pelo ID do seu projeto do Firebase.

Configurar a CLI do Firebase para segmentar seu projeto

1. No terminal, navegue até o diretório raiz do projeto do codelab.
2. Para fazer com que a CLI do Firebase execute todos os comandos no seu projeto do Firebase, execute o seguinte comando:

   firebase use YOUR_PROJECT_ID
   

Importar dados de amostra para o Firestore

Para você começar rapidamente, este codelab fornece dados de amostra pré-gerados para o Firestore.

1. Para permitir que a base de código local execute o código que normalmente usaria uma conta de serviço, execute o seguinte comando no terminal:

   gcloud auth application-default login
   

   Isso vai abrir uma nova guia no navegador. Faça login com a mesma Conta do Google usada nas etapas anteriores.
2. Para importar os dados de exemplo do Firestore, execute os seguintes comandos:

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Para verificar se os dados foram adicionados ao banco de dados, acesse a seção Firestore do projeto do Firebase no console do Firebase.O esquema de dados importados e o conteúdo deles vão aparecer.

Conectar o app da Web ao projeto do Firebase

A base de código do seu app da Web precisa estar associada ao projeto correto do Firebase para usar os serviços dele, como o banco de dados. Para isso, adicione a configuração do Firebase à base de código do app. Essa configuração inclui valores essenciais, como o ID do projeto, a chave de API e o ID do app, além de outros valores que permitem a interação do app com o Firebase.

1. Acesse a configuração do Firebase do app:
   1. No Console do Firebase, acesse seu projeto.
   2. No painel à esquerda, clique no ícone de engrenagem ao lado de Visão geral do projeto e selecione Configurações do projeto.
   3. No card "Seus apps", selecione o app da Web.
   4. Na seção "Configuração e configuração do SDK", selecione a opção Configuração.
   5. Copie o snippet. Ele começa com const firebaseConfig ....
2. Adicione a configuração do Firebase à base de código do app da Web:
   1. No editor de código, abra o arquivo src/lib/genkit/genkit.config.ts.
   2. Substitua a seção relevante pelo código que você copiou.
   3. Salve o arquivo.

Visualizar o app da Web no navegador

1. No seu terminal, instale as dependências e execute o app da Web:

   npm install
   npm run dev
   

2. No navegador, navegue até o URL de hospedagem hospedado localmente para acessar o app da Web. Por exemplo, na maioria dos casos, o URL é http://localhost:3000/ ou algo semelhante.

O Compass é um app Next.js que usa React Server Components. Esta é a página inicial.

Clique em Encontrar minha viagem dos sonhos. Atualmente, ele mostra alguns dados codificados para alguns destinos fixos:

Fique à vontade para explorar. Quando estiver tudo pronto para continuar, clique no botão de início (no canto superior direito).

6. Aprofunde seus conhecimentos sobre IA generativa com o Genkit

Agora você está pronto para aproveitar o potencial da IA generativa no seu aplicativo. Esta seção do codelab vai orientar você na implementação de um recurso que sugere destinos com base na inspiração fornecida pelo usuário. Você vai usar o Firebase Genkit e a Vertex AI do Google Cloud como provedor do modelo generativo (você vai usar o Gemini).

O Genkit pode armazenar o estado de rastreamento e de fluxo, o que permite inspecionar o resultado da execução dos fluxos do Genkit. Neste codelab, você vai usar o Firestore para armazenar esses rastros.

Como etapa final neste codelab, você vai implantar seu app do Genkit no Firebase App Hosting.

Conectar o app Genkit ao projeto do Firebase

Antes de iniciar o Genkit, sua base de código precisa ser associada ao projeto correto do Firebase para usar os serviços dele, como o banco de dados. Para isso, adicione a configuração do Firebase à base de código do app do Genkit. Essa configuração inclui valores essenciais, como o ID do projeto, a chave de API e o ID do app, além de outros valores que permitem a interação do app com o Firebase.

1. Acesse a configuração do Firebase do app:
   1. No Console do Firebase, acesse seu projeto.
   2. No painel à esquerda, clique no ícone de engrenagem ao lado de Visão geral do projeto e selecione Configurações do projeto.
   3. No card "Seus apps", selecione o app da Web.
   4. Na seção "Configuração e configuração do SDK", selecione a opção Configuração.
   5. Copie o snippet. Ele começa com const firebaseConfig ....
2. Adicione a configuração do Firebase do app à base de código do app do Genkit:
   1. No editor de código, abra o arquivo genkit-functions/src/lib/genkit.config.ts.
   2. Substitua a seção relevante pelo código que você copiou.
   3. Salve o arquivo.

Iniciar a interface do desenvolvedor do Genkit

O Genkit vem com uma interface baseada na Web que permite interagir com LLMs, fluxos do Genkit, recuperadores e outros componentes de IA.

1. Inicie a interface do desenvolvedor do Genkit:
   1. Abra uma nova janela do terminal.
   2. Navegue até a raiz do diretório genkit-functions.
   3. Execute o seguinte comando para iniciar a interface do desenvolvedor do Genkit:

      cd genkit-functions
      npx genkit start
      

2. No navegador, acesse o URL do Genkit hospedado localmente. Na maioria dos casos, é http://localhost:4000/.

Interagir com o Gemini

Agora é possível usar a interface para desenvolvedores do Genkit para interagir com qualquer um dos modelos compatíveis ou com qualquer um dos outros componentes de IA, como comandos, extratores e fluxos do Genkit.

Por exemplo, peça para o Gemini sugerir um destino de férias. Confira como usar instruções do sistema para orientar o comportamento do modelo com base nas suas necessidades específicas. Isso também funciona para modelos que não oferecem suporte nativo a instruções do sistema.

Gerenciar avisos

O Firebase Genkit apresenta o Dotprompt, um plug-in e formato de texto projetado para simplificar a criação e o gerenciamento de comandos de IA generativa. A ideia principal do Dotprompt é tratar comandos como código, permitindo que você os escreva, mantenha e controle as versões deles junto com o código do aplicativo.

Para usar o Dotprompt, comece com um hello-world:

1. No editor de código, abra o arquivo genkit-functions/prompts/1-hello-world.prompt.
2. Na interface do desenvolvedor do Genkit, abra dotprompt/1-hello-world.
3. Use qualquer nome ou código de idioma que você conheça ou deixe como uma string vazia.
4. Clique em Run.
5. Tente alguns valores diferentes. Os modelos de linguagem grandes são bons para entender comandos abreviados, com erros ortográficos ou incompletos em consultas simples como essa.

Enriquecer a saída com dados estruturados

Além de gerar texto simples, o Genkit permite estruturar a saída para melhorar a apresentação e a integração na interface do app. Ao definir um esquema, você pode instruir o LLM a produzir dados estruturados alinhados ao formato desejado.

Como analisar esquemas de saída

Também é possível especificar o esquema de saída de uma chamada de LLM.

1. No editor de código, examine o arquivo de solicitação:
   1. Abra o arquivo dotprompt/2-simple-itinerary.
   2. Analise os esquemas de entrada e saída definidos.
2. Interagir com a interface:
   1. Na interface do desenvolvedor do Genkit, navegue até a seção dotprompt/2-simple-itinerary.
   2. Forneça entradas preenchendo os campos place e interests com dados de amostra:

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. Clique em Executar.

Noções básicas sobre a saída orientada por esquema

Observe como a saída gerada está em conformidade com o esquema definido. Ao especificar a estrutura desejada, você instruiu o LLM a produzir dados que são facilmente analisados e integrados ao seu aplicativo. O Genkit valida automaticamente a saída em relação ao esquema, garantindo a integridade dos dados.

Além disso, é possível configurar o Genkit para tentar novamente ou reparar a saída se ela não corresponder ao esquema.

Principais vantagens dos esquemas de saída

• Integração simplificada: incorpore dados estruturados aos elementos da interface do app com facilidade.
• Validação de dados: garanta a precisão e a consistência da saída gerada.
• Tratamento de erros: implemente mecanismos para resolver incompatibilidades de esquema.

O uso de esquemas de saída melhora sua experiência com o Genkit, permitindo que você crie dados personalizados e estruturados para experiências de usuário mais ricas e dinâmicas.

Usar entrada multimodal

Imagine que seu app sugere destinos de férias personalizados com base em imagens que os usuários acham inspiradoras. O Genkit, combinado com um modelo generativo multimodal, permite que você dê vida a essa visão.

1. No editor de código, examine o arquivo de comando:
   1. Abra o arquivo genkit-functions/prompts/imgDescription.prompt.
   2. Observe a inclusão de {{media url=this}}, que é um elemento de sintaxe do Handlebars que facilita a incorporação de imagens ao comando.
2. Interagir com a interface:
   1. Na interface do desenvolvedor do Genkit, abra o comando dotprompt/imgDescription.
   2. Insira um URL de imagem no campo imageUrls colando um URL de uma imagem. Por exemplo, você pode usar uma imagem em miniatura da Wikipedia mostrando a 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. Clique em Executar.

7. Implementar a recuperação com a pesquisa de similaridade vetorial

Embora a geração de conteúdo criativo com modelos de IA seja impressionante, as aplicações práticas geralmente exigem que a saída seja baseada em um contexto específico.

No caso deste codelab, você tem um banco de dados de destinos (lugares e atividades) e quer garantir que as sugestões geradas pelo modelo Gemini se refiram exclusivamente a entradas desse banco de dados.

Para preencher a lacuna entre consultas não estruturadas e conteúdo relevante, aproveite o poder da pesquisa de similaridade vetorial em embeddings gerados.

Entender os embeddings e a similaridade de vetores

• Vetores: são representações numéricas de pontos de dados, geralmente usadas para modelar informações complexas, como texto ou imagens. Cada dimensão em um vetor corresponde a um recurso específico dos dados.
• Modelos de embedding: esses modelos de IA especializados transformam dados de entrada, como texto, em vetores de alta dimensão. O aspecto fascinante é que entradas semelhantes são mapeadas para vetores próximos uns dos outros nesse espaço de alta dimensão.
• Pesquisa de similaridade de vetores: essa técnica aproveita a proximidade de embeddings de vetores para identificar pontos de dados relevantes. Dada uma consulta de entrada, ele encontra entradas no banco de dados com vetores de embedding semelhantes, indicando a relação semântica.

Como funciona o processo de recuperação

1. Inserir a consulta: a entrada do usuário (por exemplo, "jantar romântico em Paris") é transmitida por um modelo de embedding, gerando um vetor de consulta.
2. Embeddings de banco de dados: o ideal é que você tenha pré-processado seu banco de dados de destinos, criando vetores de embedding para cada entrada.
3. Cálculo de similaridade: o vetor de consulta é comparado a cada vetor de embedding no banco de dados usando uma métrica de similaridade (por exemplo, a similaridade de cossenos).
4. Recuperação: as entradas mais semelhantes do banco de dados, com base na proximidade ao vetor de consulta, são recuperadas como sugestões relevantes.

Ao incorporar esse mecanismo de recuperação ao seu aplicativo, você aproveita o modelo Gemini para gerar sugestões que não são apenas criativas, mas também estão firmemente enraizadas no seu conjunto de dados específico. Essa abordagem garante que a saída gerada permaneça relevante em termos de contexto e alinhada com as informações disponíveis no seu banco de dados.

Ativar a pesquisa de similaridade vetorial no Firestore

Em uma etapa anterior deste codelab, você preencheu o banco de dados do Firestore com exemplos de lugares e atividades. Cada entrada de lugar inclui um campo de texto knownFor que descreve os atributos importantes, além de um campo embedding correspondente que contém a representação vetorial dessa descrição.

Para aproveitar o poder da pesquisa de similaridade vetorial nesses embeddings, você precisa criar um índice do Firestore. Esse índice permite a recuperação eficiente de lugares com base na semelhança dos vetores de embedding deles com uma determinada consulta.

1. No terminal, execute o comando abaixo para instalar o componente alpha mais recente. Você precisa da versão 2024.05.03 ou mais recente:

   gcloud components install alpha
   

2. Crie o índice, substituindo YOUR_PROJECT_ID pelo ID do projeto.

   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. Na interface do desenvolvedor do Genkit, abra o placesRetriever.
4. Clique em Executar. Observe o objeto estruturado com texto de marcador de posição, indicando onde você vai implementar a lógica de recuperação.
5. No editor de código, abra o arquivo genkit-functions/src/lib/placesRetriever.ts.
6. Role a tela para baixo até o fim e substitua o marcador de posição placesRetriever pelo seguinte:

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

Testar o retriever

1. Na interface do desenvolvedor do Genkit, abra o retriever placesRetriever.
2. Forneça a seguinte consulta:

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. Também é possível fornecer Opções. Por exemplo, confira como especificar quantos documentos o extrator deve retornar:

   {
       "limit": 4
   }
   

4. Clique em Executar.

É possível filtrar ainda mais os dados além da semelhança adicionando cláusulas where às Opções.

8. Geração aumentada de recuperação (RAG) com o Genkit

Nas seções anteriores, você criou comandos individuais capazes de processar texto, JSON e imagens, gerando destinos de férias e outros conteúdos interessantes para seus usuários. Você também implementou uma solicitação que recupera destinos relevantes do seu banco de dados do Firestore. Agora, é hora de orquestrar esses componentes em um fluxo coeso de geração aumentada de recuperação (RAG).

Esta seção apresenta um conceito importante do Genkit chamado fluxos. Os fluxos são funções com tipagem forte e passíveis de fluxo que podem ser invocadas local e remotamente, com total observabilidade. Você pode gerenciar e invocar fluxos na CLI e na interface do desenvolvedor do Genkit.

1. No editor de código, examine a solicitação de itinerário:
   1. Abra o arquivo genkit-functions/prompts/itineraryGen.prompt.
   2. Observe como a solicitação foi expandida para aceitar outras entradas, especificamente os dados de atividades provenientes do retriever.
2. Na interface do desenvolvedor do Genkit, confira um fluxo do Genkit no arquivo genkit-functions/src/lib/itineraryFlow.ts.
   Dica: para agilizar a depuração, divida fluxos longos em etapas menores e gerenciáveis.
3. Melhore o fluxo integrando uma etapa de "descrição da imagem":
   1. Localize o comentário TODO: 2 (por volta da linha 70). Isso marca o ponto em que você vai melhorar seu fluxo.
   2. Substitua o marcador vazio imgDescription pela saída gerada pela chamada de solicitação imgDescription.
4. Teste o fluxo:
   1. Navegue até o itineraryFlow.
   2. Use a entrada a seguir para testar a execução bem-sucedida de itineraryFlow com a etapa recém-adicionada:

      {
          "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. Clique em Executar.
   4. Observe a saída gerada, que incorpora a descrição da imagem à sugestão de itinerário.
5. Se você encontrar erros ou comportamentos inesperados, verifique os detalhes na guia Inspecionar. Você também pode usar essa guia para analisar o histórico de execuções na Trace Store.

RAG para seu aplicativo da Web

1. Para verificar se o app da Web ainda está em execução, acesse http://localhost:3000/ no navegador.
2. Se o app da Web não estiver mais em execução, execute estes comandos no terminal:

   npm install
   npm run dev
   

3. Confira a página do app da Web Dream Your Vacation (http://localhost:3000/gemini).
4. Confira o código-fonte (src/app/gemini/page.tsx) para conferir um exemplo de integração do Next.js.

9. Implantar seu aplicativo com o Firebase App Hosting

A etapa final desta jornada é implantar seu app da Web. Você vai usar o Firebase App Hosting, uma solução de hospedagem com reconhecimento de framework projetada para simplificar a implantação de apps Next.js e Angular em um back-end sem servidor.

1. Confirme as mudanças no repositório local do Git e envie por push para o GitHub.
2. No console do Firebase, acesse Hospedar app no seu projeto do Firebase.
3. Clique em Começar > Conectar ao GitHub.
4. Selecione sua conta do GitHub e o repositório. Clique em Next.
5. Em Configuração de implantação > Diretório raiz, mantenha o valor padrão.
6. Para a versão em produção, selecione a versão principal do repositório do GitHub. Clique em Next.
7. Digite um ID para o back-end (por exemplo, compass).
8. Quando for solicitado que você crie ou associe um app da Web do Firebase, escolha Selecionar um app da Web do Firebase e selecione o app que você criou em uma etapa anterior deste codelab.
9. Clique em Concluir e implantar.

Como monitorar o status da implantação

O processo de implantação leva alguns minutos. É possível acompanhar o progresso na seção "Hospedeiro de apps" do Console do Firebase.

Conceder permissões à sua conta de serviço

Para que o back-end do Node.js acesse os recursos da Vertex AI, é necessário atribuir o papel aiplatform.user à conta de serviço do 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"

Depois de concluído, o app da Web vai ficar acessível aos usuários.

Reimplantação automática

O Firebase App Hosting simplifica as atualizações futuras. Sempre que você enviar mudanças para a ramificação principal do repositório do GitHub, o Firebase App Hosting vai recriar e reimplantar o app automaticamente, garantindo que os usuários sempre tenham a versão mais recente.

10. Conclusão

Parabéns por concluir este codelab completo.

Você aproveitou o poder do Firebase Genkit, do Firestore e da Vertex AI para criar um "fluxo" sofisticado que gera recomendações de férias personalizadas com base nas preferências e inspirações do usuário, tudo isso com base nos dados do seu aplicativo.

Ao longo desta jornada, você adquiriu experiência prática com padrões essenciais de engenharia de software, essenciais para criar aplicativos robustos de IA generativa. Esses padrões incluem:

• Gerenciamento de comandos: organizar e manter comandos como código para melhorar a colaboração e o controle de versões.
• Conteúdo multimodal: integração de diversos tipos de dados, como imagens e texto, para melhorar as interações com a IA.
• Esquemas de entrada/saída: estruturar dados para integração e validação perfeitas no seu app.
• Repositórios de vetores: use embeddings de vetores para pesquisar e recuperar informações relevantes de forma eficiente.
• Recuperação de dados: implementação de mecanismos para buscar e incorporar dados de bancos de dados em conteúdo gerado por IA.
• Geração aumentada de recuperação (RAG): combina técnicas de recuperação com IA generativa para gerar resultados precisos e relevantes para o contexto.
• Instrumentação de fluxo: criar e orquestrar fluxos de trabalho complexos de IA para execução perfeita e observável.

Ao dominar esses conceitos e aplicá-los no ecossistema do Firebase, você estará pronto para embarcar nas suas próprias aventuras de IA generativa. Explore as vastas possibilidades, crie aplicativos inovadores e continue superando os limites do que é possível com a IA generativa.

Opções de implantação alternativas

O Genkit oferece várias opções de implantação para atender às suas necessidades específicas, incluindo:

• Cloud Functions para Firebase
• Cloud Run
• Next.js
• Qualquer ambiente do Node.js
• O Genkit também oferece suporte ao Go

Basta escolher a melhor opção executando o seguinte comando na pasta de nó (package.json):

npx genkit init

Próximas etapas

• Teste comandos e aproveite as janelas de contexto grandes no Google AI Studio ou no Vertex AI Studio.
• Saiba mais sobre a pesquisa de geração aumentada de recuperação (RAG) com IA.
• Confira a documentação oficial do Firebase Genkit.
• Saiba mais sobre os recursos de pesquisa de similaridade no Firestore e no Cloud SQL para PostgreSQL.
• Conheça melhor os fluxos de genAI com a chamada de função.