Visão geral

Neste laboratório, você vai integrar um agente de AI a um app do Flutter. O Flutter é usado como o framework de app cliente, a Vertex AI para Pesquisa é usada como um banco de dados de vetores e o Reasoning Engine é usado para criar e implantar um agente com LangChain na Vertex AI. O agente usa o Gemini, uma família de modelos de linguagem grandes (LLMs) altamente capazes de gerar respostas de IA para comandos de texto e imagem.

O laboratório é pré-provisionado com o VS Code como IDE usando o code-server, além das extensões do Flutter e do Dart necessárias para executar o app do Flutter. O laboratório também inclui o fwr, uma ferramenta usada para disponibilizar o app do Flutter como um web app que pode ser acessado por um navegador.

O laboratório é voltado para desenvolvedores com experiência que contribuem para a criação de apps, mas que talvez não estejam familiarizados com o desenvolvimento de aplicativos em nuvem. É útil ter certa experiência em Python e familiaridade com o framework Flutter. Não é necessário conhecer o Flutter para realizar as tarefas deste laboratório, mas você vai analisar parte do código do app do Flutter e testar a funcionalidade dele.

Objetivos

Neste laboratório, você vai realizar as seguintes tarefas:

• Criar um repositório de dados de pesquisa e um app de pesquisa usando aplicativos de IA no console do Google Cloud.

• Implantar um agente do Reasoning Engine usando o Vertex AI Workbench.

• Usar um app Python integrado à Vertex AI para Pesquisa e ao agente do Reasoning Engine.

• Implantar o app no Cloud Run e usá-lo como back-end para um app do Flutter.

• Configurar um projeto do Firebase e conectá-lo ao app do Flutter.

  Confira a visão geral dos diferentes componentes usados neste laboratório:

  

Configuração

Para cada laboratório, você recebe um novo projeto do Google Cloud e um conjunto de recursos por um determinado período e sem custos financeiros.

1. Faça login no Qwiklabs em uma janela anônima.

2. Confira o tempo de acesso do laboratório (por exemplo, 1:15:00) e finalize todas as atividades nesse prazo.
   Não é possível pausar o laboratório. Você pode reiniciar o desafio, mas vai precisar refazer todas as etapas.

3. Quando tudo estiver pronto, clique em Começar o laboratório.

4. Anote as credenciais (Nome de usuário e Senha). É com elas que você vai fazer login no Console do Google Cloud.

5. Clique em Abrir Console do Google.

6. Clique em Usar outra conta, depois copie e cole as credenciais deste laboratório nos locais indicados.
   Se você usar outras credenciais, vai receber mensagens de erro ou cobranças.

7. Aceite os termos e pule a página de recursos de recuperação.

Tarefa 1: criar um repositório de dados de pesquisa e um app de pesquisa

Nesta tarefa, você vai implementar a funcionalidade de pesquisa no seu app do Flutter criando um repositório de dados de pesquisa e um app de pesquisa usando aplicativos de IA no console do Google Cloud.

Criar um repositório de dados de pesquisa

1. No console do Cloud, clique em Ver todos os produtos. Na página Todos os produtos, role a tela até a seção Inteligência artificial e clique em Aplicativos de IA.

2. Clique em Continuar e ativar a API.

3. No painel à esquerda, clique em Repositórios de dados e, na página Repositórios de dados, clique em Criar repositório de dados.

   Nessa página, você vai configurar a fonte de dados a ser usada nos resultados da pesquisa. O laboratório é pré-provisionado com um bucket do Cloud Storage que contém um arquivo .csv com dados sobre itens da loja de produtos do Google.

4. Para selecionar o Cloud Storage como fonte de dados, em Cloud Storage, clique em Selecionar.

5. Para o tipo de dados sendo importado, selecione Dados estruturados de perguntas frequentes para um aplicativo de chat (CSV).

6. Para selecionar uma pasta ou arquivo para importação, clique em Arquivo.

7. Para fornecer o URL do Cloud Storage para o arquivo CSV, clique em Procurar.

8. Para conferir os conteúdos do bucket do Cloud Storage , clique em .

9. Selecione o arquivo goog_merch.csv e clique em Selecionar.

   O URI gs:// da pasta é preenchido.

   

10. Clique em Continuar.

11. Para o nome do repositório de dados, digite goog-merch-ds.

12. Clique em Criar.

    Um repositório de dados é criado, e a ingestão de dados do arquivo CSV é iniciada.

13. Na página Repositórios de dados, clique no nome do repositório que você acabou de criar.

14. A guia Documentos exibe uma lista de documentos importados. Para conferir os dados associados a um documento, clique em Exibir documento.

Para verificar o objetivo, clique em Verificar meu progresso. Criar um repositório de dados da Vertex AI para Pesquisa.

Criar um app de pesquisa

Para usar o repositório de dados de pesquisa, conecte-o a um app de pesquisa no Vertex AI Agent Builder.

1. No console do Cloud, clique em Aplicativos de IA e em Apps.

2. Clique em Criar app.

3. Na página Criar app, em Pesquisa e assistente > Pesquisa personalizada (geral), clique em Criar.

4. Na página Configuração do app de pesquisa, configure um app de pesquisa de sites com estas definições, deixando as demais como padrão:

   Propriedade	Valor (digite ou selecione)
   Recursos da edição Enterprise	Desativar
   Nome do app	gms-search-app
   Nome externo da sua empresa ou organização	gms-company
   Localização do app	global (Global)

5. Clique em Continuar.

6. Uma lista de repositórios de dados atuais é exibida. Selecione o repositório de dados goog_merch_ds que você criou na subtarefa anterior.

7. Para criar o app de pesquisa, clique em Criar.

   O app de pesquisa é criado e o repositório de dados é conectado a ele.

8. Para testar o app de pesquisa, no menu de navegação dos aplicativos de IA, clique em Visualizar.

9. No campo Pesquisar, digite dino.

   Uma lista de resultados de pesquisa relacionados é exibida com base nos documentos importados para o repositório de dados.

   

   Observação: se aparecer um erro indicando que a Visualização da pesquisa ainda não está pronta, aguarde alguns minutos e tente novamente. Se não quiser esperar, continue com a próxima tarefa do laboratório.

Para verificar o objetivo, clique em Verificar meu progresso. Criar um app da Vertex AI para Pesquisa.

Tarefa 2: criar e implantar o back-end

O back-end do app do Flutter será executado como um serviço do Cloud Run no Google Cloud. O serviço de back-end é integrado ao app de pesquisa que você criou na etapa anterior para gerar respostas de pesquisa com base nos dados da loja de produtos. O back-end também é integrado a um agente do Reasoning Engine para acessar o Gemini em busca de conteúdo de IA generativa em resposta a consultas do app do Flutter.

Nesta tarefa, você vai criar e implantar o app de back-end em Python no Cloud Run.

Configurar e analisar o app de back-end

1. Um IDE baseado no VS Code foi pré-provisionado para este laboratório. Para acessar o IDE, copie o URL do serviço do IDE do painel de credenciais do Qwiklabs do laboratório e cole-o em uma nova janela do navegador em modo anônimo.

   

   Observação: o URL do serviço do IDE é o endpoint de um serviço do Cloud Run pré-provisionado para este laboratório e encaminha solicitações para a VM code-server. O IDE foi criado com o Code Server e inclui as extensões Flutter, Dart e Vim.

   

2. Abra um terminal no IDE. No menu de navegação do IDE (), clique em Terminal > Novo terminal.

   Observação: execute os comandos nas etapas abaixo na janela do terminal do IDE.

3. A versão inicial do app de back-end e os arquivos relacionados são pré-provisionados para o laboratório. Copie a versão inicial da pasta do app de back-end e o conteúdo dela do Cloud Storage:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ Observação: se for solicitado, clique em Permitir para colar textos e imagens da área de transferência e pressione Enter.

4. Para listar o conteúdo da pasta, na janela do terminal do IDE, execute o seguinte:

   ls ~/ag-web/app

   A pasta ag-web/app contém o código-fonte do aplicativo e outros arquivos necessários para criar e implantar o app de back-end no Cloud Run.

5. Defina as configurações PROJECT_ID, LOCATION e STAGING_BUCKET para o app.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py

6. Configure o app de back-end para usar o repositório de dados de pesquisa que você criou anteriormente.

   No comando abaixo, substitua a string {YOUR_SEARCH_DATA_STORE_ID} pelo valor do ID do seu repositório de dados de pesquisa.

   Não se esqueça de remover as chaves no comando sed.

   Observação: para ter acesso ao valor do ID do repositório de dados de pesquisa, no console do Cloud, acesse Aplicativos de IA > Repositórios de dados e clique no nome do repositório que você criou anteriormente. Copie o valor do ID do repositório de dados, que é o mesmo que o ID do mecanismo de pesquisa. sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py

   

7. Para acessar o código no IDE, no menu de navegação do IDE, clique em e em Abrir pasta.

8. Selecione a pasta IDE-DEV/ag-web/ na lista e clique em OK.

9. Para confiar nos autores do código, clique em Sim, confio nos autores.

10. No painel Explorador, expanda a pasta app e clique em app.py para abrir o arquivo no editor.

    O código do app de back-end faz o seguinte:

    • Inicializa a Vertex AI usando o ID do projeto do Google Cloud, a região e o bucket do Cloud Storage do laboratório.
    • A função search_gms() usa o endpoint de repositórios de dados da API discoveryengine.googleapis.com para iniciar uma solicitação de pesquisa. O ID do repositório de dados que você criou anteriormente é usado no URL.
    • A função usa a consulta de pesquisa fornecida pelo usuário para pesquisar o conteúdo do repositório de dados e formata os resultados em uma resposta JSON.
    • O app usa o flask para rotear chamadas para as funções individuais. O endpoint / é a página padrão usada para verificar se o app está sendo carregado corretamente, enquanto o endpoint /ask_gms invoca a função search_gms() que usa a Vertex AI para Pesquisa.

Criar e implantar o app no Cloud Run

Um script de implantação está disponível para criar e implantar o app de back-end no Cloud Run.

1. Abra uma janela do terminal no IDE e mude para a pasta do app de back-end:

   cd ~/ag-web/app

2. Faça a autenticação no Google Cloud usando a gcloud CLI:

   gcloud auth login

3. Para continuar, digite S.

4. Para iniciar o fluxo de login, pressione Control (para Windows e Linux) ou Command (para macOS) e clique no link no terminal.

5. Para confirmar a abertura do site externo, caso necessário, clique em Abrir.

6. Clique no endereço de e-mail do estudante do laboratório.

7. Quando aparecer uma janela confirmando a ação, clique em Continuar.

8. Para permitir que o SDK Google Cloud acesse sua Conta do Google e concordar com os termos, clique em Permitir.

   Seu código de verificação aparece na guia do navegador.

9. Clique em Copiar.

10. Na janela do terminal do IDE, onde está escrito Inserir código de autorização, cole o código e pressione Enter.

    Você fez login no Google Cloud.

11. Torne o script deploy.sh executável e execute-o para implantar o app na região especificada do Cloud Run:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Depois que o app for criado e implantado no Cloud Run, o URL do endpoint dele será exibido no final da saída do script. O URL foi gerado pelo comando gcloud run deploy executado no script.

    Observação: esse comando leva um tempo para ser executado. Aguarde a conclusão dele para prosseguir para a próxima tarefa.

Testar o app de back-end

Teste a funcionalidade do app acessando o respectivo endpoint do Cloud Run.

1. Copie o URL do endpoint do app gerado na etapa anterior e acesse esse URL em uma nova guia do navegador.

2. Quando o app é carregado, a página inicial mostra Este é o app de back-end ag-web.

3. Na barra de URL do navegador, adicione o caminho abaixo ao final do URL:

   /ask_gms?query=dino

4. Verifique se o app responde com os resultados do repositório de dados de pesquisa que você criou anteriormente.

Para verificar o objetivo, clique em Verificar meu progresso. Criar um app de back-end.

Tarefa 3: configurar o Firebase

Para invocar a API Gemini, o app do Flutter de front-end usa o SDK Dart da Vertex AI para Firebase. Esse SDK está disponível como o pacote firebase_vertexai no pub.dev, que é o repositório oficial de pacotes para apps do Dart e do Flutter.

O Firebase é uma plataforma de desenvolvimento de apps de back-end do Google que oferece serviços para várias plataformas, incluindo Android, iOS e outras.

Nesta tarefa, você vai configurar o Firebase e fazer login na CLI do Firebase. Mais adiante no laboratório, você vai conectar seu app do Flutter ao Firebase.

Configurar o Firebase

Para usar o SDK, primeiro você precisa configurar um projeto do Firebase.

1. Em uma guia de janela anônima, acesse o console do Firebase em https://console.firebase.google.com.

2. Clique em Criar um projeto do Firebase.

3. Para adicionar o Firebase ao projeto atual do Google Cloud do seu laboratório, clique em Adicionar o Firebase ao projeto do Google Cloud na parte de baixo da página.

4. Clique em Selecionar um projeto do Google Cloud e escolha o projeto do laboratório na lista.

5. Aceite os termos e clique em Continuar.

6. Clique em Continuar mais uma vez.

7. Para usar o plano de faturamento padrão, clique em Confirmar e continuar.

8. Desative o Google Analytics para o projeto e clique em Adicionar Firebase.

9. Aguarde até que o projeto do Firebase esteja pronto e clique em Continuar.

   Agora é possível usar o Firebase com seu projeto do Google Cloud do laboratório.

Fazer login no Firebase

1. Na janela do terminal do IDE, faça login na CLI do Firebase:

   firebase login --no-localhost

2. Para permitir que o Firebase colete informações de relatórios da CLI e do emulador, digite S e pressione Enter.

3. Anote o ID da sessão e siga as etapas para iniciar o fluxo de login. Pressione Control (para Windows e Linux) ou Comand (para macOS) e clique no URL no terminal.

4. Quando for solicitado que você abra o site externo, clique em Abrir.

5. Clique no ID de e-mail do estudante do laboratório.

6. Clique em Continuar.

7. Para conceder as permissões relevantes à CLI do Firebase, clique em Permitir.

8. Clique em Sim, acabei de executar este comando.

9. Verifique o ID da sessão e clique em Sim, este é meu ID de sessão.

10. Para copiar o código de autorização, clique em Copiar.

11. Cole o código de autorização no local solicitado na janela do terminal do IDE e pressione Enter.

    Você fez login na CLI do Firebase.

Tarefa 4: criar um agente de IA do Reasoning Engine

Um agente de IA é um aplicativo que usa o poder dos modelos de linguagem grandes (LLMs) para raciocínio e orquestração com ferramentas externas. O Vertex AI Agent Builder é um pacote de produtos e ferramentas do Google que ajuda você a criar agentes de IA conectando-os a fontes de dados confiáveis.

O Vertex AI Reasoning Engine (também conhecido como LangChain na Vertex AI) ajuda você a criar e implantar um agente de raciocínio com o Vertex AI Agent Builder. O LangChain é uma ferramenta de OSS conhecida usada para criar chatbots e sistemas RAG.

O Reasoning Engine permite que os desenvolvedores usem a chamada de função para associar a saída dos LLMs (Gemini) às funções em Python. O Reasoning Engine se integra ao SDK do Python para o modelo do Gemini na Vertex AI e é compatível com o LangChain e outros frameworks do Python.

Nesta tarefa, você vai usar o Vertex AI Workbench com um notebook do Jupyter para implantar um agente do Reasoning Engine com funções em Python. O agente será usado no nosso aplicativo de back-end de IA generativa na próxima tarefa do laboratório.

Criar uma instância do Vertex AI Workbench

O Vertex AI Workbench é um ambiente de desenvolvimento baseado em notebook do Jupyter para todo o fluxo de trabalho de ciência de dados e machine learning. É possível interagir com a Vertex AI e outros serviços do Google Cloud em um notebook do Jupyter de uma instância do Vertex AI Workbench. Por exemplo, o Vertex AI Workbench permite acessar e analisar dados em um notebook do Jupyter com as integrações do BigQuery e do Cloud Storage.

As instâncias do Vertex AI Workbench são fornecidas com um conjunto pré-instalado de pacotes de aprendizado profundo, incluindo o suporte aos frameworks TensorFlow e PyTorch.

Os notebooks do Vertex AI Workbench oferecem uma solução flexível e escalonável para desenvolver e implantar modelos de ML no Google Cloud.

1. Para criar uma instância do Workbench, no console do Cloud, clique no menu de navegação () e selecione Vertex AI > Workbench.

2. Se solicitado, clique para ativar a API Notebooks no console do Cloud.

3. Verifique se a opção Instâncias está selecionada na guia Instâncias e clique em Criar nova.

   

4. Na página Nova instância, digite my-instance em Nome.

5. Mantenha os valores padrão para as demais configurações e clique em Criar.

   Sua nova instância é ativada na seção de instâncias. Antes de avançar para a próxima etapa, aguarde a criação da instância.

   Observação: uma marca de seleção verde aparece ao lado da instância quando ela está pronta para uso.

6. Quando a instância estiver pronta, clique em Abrir JupyterLab.

   

7. Para iniciar um notebook do Jupyter em Python 3, clique no notebook Python 3.

   

Copiar um arquivo de notebook

Um notebook que cria e implanta um agente do Reasoning Engine foi pré-provisionado para este laboratório.

1. Para copiar o notebook para a instância do JupyterLab, copie este código na primeira célula do novo notebook:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Selecione a célula e clique em Executar no menu da célula:

   

   O comando copia o notebook do Cloud Storage para a instância do JupyterLab. Depois que o comando for concluído, o arquivo do notebook será listado na pasta raiz de nível superior.

   

3. Para abrir o notebook, clique duas vezes no arquivo dele na lista de pastas. Uma guia separada é criada com o conteúdo do notebook.

Criar e implantar um agente do Reasoning Engine

1. Execute todas as células do código no notebook em ordem, começando do início. Para executar uma célula, selecione-a clicando em qualquer lugar dela e depois clique em Executar no menu da célula ou no menu superior do notebook.

   Observação: ao executar o comando de uma célula, aguarde até que ele seja concluído antes de passar para a próxima. Quando um comando é concluído, o asterisco (*) no campo de número da célula é substituído pelo número da célula. Observação: antes de executar uma célula, confira as notas abaixo para saber se há instruções ou etapas específicas. Essas instruções são marcadas com o prefixo CELL INSTR.

   a. [CELL INSTR] Reinicie o ambiente de execução atual.

   Se for solicitado, na caixa de diálogo Reinicialização do kernel, clique em OK.

   b. [CELL INSTR] Defina as informações do projeto do Google Cloud e inicialize o SDK da Vertex AI:

   Antes de executar a célula para inicializar o SDK da Vertex AI, atualize os valores de configuração do project_id, do local e do bucket de preparação do laboratório:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Célula atualizada com configurações de exemplo:

   

   c. [CELL INSTR] Defina a função da ferramenta para a Vertex AI para Pesquisa:

   Antes de executar a célula, substitua o valor de GOOGLE_SHOP_VERTEXAI_SEARCH_URL pelo URL do endpoint do Cloud Run do app de back-end.

   Para buscar o URL do endpoint, no console do Cloud, acesse Cloud Run e clique no nome do app de back-end: ag-web. Copie o valor do URL do endpoint e substitua-o na célula.

   

   Célula atualizada com o URL de exemplo do endpoint do Cloud Run do app de back-end:

   

   Observação: também é possível executar uma célula clicando em Executar na barra de menus do notebook.

2. Depois de executar a célula Implantar o agente no ambiente de execução do Reasoning Engine, aguarde a conclusão do comando e crie o agente do Reasoning Engine. Depois, copie o ID do Reasoning Engine:

   

   Você vai usar esse ID para configurar e reimplantar o app de back-end na próxima tarefa.

   Observação: a célula pode levar até 10 minutos para ser concluída. Antes de prosseguir para a próxima etapa, aguarde a exibição da saída final que indica que o Reasoning Engine foi criado.

3. Para testar a operação bem-sucedida do agente do Reasoning Engine, execute as duas células a seguir e observe a saída.

   O agente do Reasoning Engine invocou o repositório de dados da Wikipédia ou da Vertex AI para Pesquisa com base na entrada da consulta e na saída do modelo do Gemini.

Para verificar o objetivo, clique em Verificar meu progresso. Implantar o agente do Reasoning Engine.

Tarefa 5: melhorar o app de back-end

Agora é hora de aprimorar o app de back-end para invocar o agente do Reasoning Engine que você implantou na tarefa anterior.

A versão inicial do app de back-end só buscava resultados diretamente da Vertex AI para Pesquisa. Na nova versão, o app vai invocar o agente do Reasoning Engine que usa a saída do Gemini e as ferramentas do agente para gerar uma resposta da Vertex AI para Pesquisa ou da Wikipédia com base no comando de entrada.

Nesta tarefa, você vai atualizar o código do app de back-end para adicionar outro ponto de entrada que invoca o agente do Reasoning Engine com uma consulta de solicitação e retorna a resposta do agente.

Atualizar o app de back-end

1. Na janela do terminal do IDE, execute o seguinte comando para adicionar o arquivo app.py com o código do novo ponto de entrada:

   cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Endpoint para o app Flask para chamar o agente @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Configure o app de back-end para usar o agente do Reasoning Engine que você criou anteriormente.

   Substitua a string {YOUR_REASONING_ENGINE_ID} no comando abaixo pelo valor do ID do Reasoning Engine que você copiou da célula do notebook na tarefa anterior e execute o comando abaixo na janela do terminal do IDE.

   Não se esqueça de remover as chaves no comando sed.

   sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py

3. Para exibir o código no IDE, no menu de navegação do IDE, clique em e selecione o arquivo IDE-DEV/ag-web/app/app.py.

   Na versão aprimorada do app de back-end:

   • Um identificador do remote_agent é recuperado do ambiente de execução do Reasoning Engine com o REASONING_ENGINE_ID do agente que você criou na tarefa anterior.
   • Um novo endpoint /ask_gemini que define a função ask_gemini() é configurado.
   • A função transmite o parâmetro query fornecido pelo usuário na solicitação para o Reasoning Engine (remote_agent) e retorna a resposta do agente.

Criar e reimplantar o app de back-end no Cloud Run

1. Mude para a pasta do app de back-end:

   cd ~/ag-web/app

2. Execute o script para reimplantar o app na região especificada do Cloud Run:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Testar o app de back-end

Teste a funcionalidade do app acessando o respectivo endpoint do Cloud Run.

1. Copie o URL do endpoint do app gerado na etapa anterior e acesse esse URL em uma nova guia do navegador.

2. Quando o app é carregado, a página inicial mostra Este é o app de back-end ag-web.

3. Na barra de URL do navegador, adicione o caminho abaixo ao final do URL:

   /ask_gemini?query=where can I buy the chrome dino pin

   O app responde com os resultados que o agente buscou no repositório de dados da Vertex AI para Pesquisa que você criou anteriormente.

   O broche esmaltado Chrome Dino é um produto vendido no Google Merch Shop. O preço é USD 7,00. Você pode comprar o produto no site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Na barra de URL do navegador, substitua o caminho pelo seguinte:

   /ask_gemini?query=what is fallingwater

   O app responde com os resultados do agente que buscou uma resposta da API da Wikipédia que você configurou no notebook.

   A Casa da Cascata (Fallingwater) foi projetada pelo arquiteto Frank Lloyd Wright em 1935. Está localizada no sudoeste da Pensilvânia, cerca de 113 km ao sudeste de Pitsburgo. A casa é famosa porque foi construída com uma parte sobre uma cascata. Observação: a resposta real que você recebe pode variar daquelas mostradas acima.

Tarefa 6: testar o Gemini 2.0 Flash

Agora que você já desenvolveu e implantou o app de back-end, os componentes da Vertex AI para Pesquisa e um agente do Reasoning Engine, é hora de começar a projetar e criar o front-end do Flutter.

O app do Flutter permite que os usuários descubram mais informações sobre as fotos enviadas a ele. Ele se integra ao Gemini para gerar respostas sobre as fotos e usa um agente de IA para fornecer respostas em uma interface de chat.

Antes de desenvolver o app de front-end, você precisa definir a estrutura das respostas retornadas pelo modelo Gemini 2.0 Flash. Esse modelo é usado pelo agente de IA que você implantou anteriormente no laboratório.

Nesta tarefa, você vai enviar comandos ao modelo Gemini 2.0 Flash e conferir a resposta do modelo no formato JSON.

1. O Gemini 2.0 Flash está disponível no Vertex AI Studio no console do Cloud. Para acessar o Vertex AI Studio, clique no menu de navegação () e selecione Vertex AI > Criar comando (em Vertex AI Studio).

2. Se for solicitado que você ative as APIs necessárias para usar o Vertex AI Studio, clique em Concordar e continuar.

   Observação: o Vertex AI Studio é uma ferramenta do console do Google Cloud que permite testar e criar protótipos de modelos de IA generativa com rapidez para usar os recursos deles nos seus aplicativos.

3. Em Comando, clique em Inserir mídia e selecione Importar do Cloud Storage.

   

4. Clique em > ao lado do nome do bucket do laboratório .

5. Selecione o arquivo de imagem fallingwater.jpg e clique em Selecionar.

   A imagem é enviada para a caixa Comando.

6. Para solicitar o modelo, na caixa de comando abaixo da imagem, digite O que é isso? e clique em Enviar ().

   O modelo fornece uma resposta breve que descreve corretamente o objeto na imagem.

7. Para buscar mais informações sobre o modelo no formato JSON, modifique o comando de texto. Para editar o comando, role até a parte de cima do painel e clique em Editar. Atualize o texto do comando para:

   What is this? Forneça o nome e a descrição do objeto e seja o mais específico possível. Também inclui uma lista de 3 perguntas complementares que eu posso pedir mais informações sobre esse objeto. Gere a resposta no formato JSON com as chaves "name", "description" e "suggestedQuestions".

8. Clique em Enviar ().

9. Veja a resposta JSON gerada pelo modelo.

   { "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.", "suggestedQuestions": [ "Who commissioned Frank Lloyd Wright to design Fallingwater?", "What are some of the key architectural features of Fallingwater?", "Is Fallingwater open to the public, and if so, how can I visit?" ] }

   Agora você tem um comando e uma resposta do modelo no formato JSON que podem ser usados para criar o app do Flutter.

   Observação: a resposta do modelo que você recebe pode ser diferente da resposta exibida acima.

Tarefa 7: implantar o app de front-end do Flutter

Agora que você tem a estrutura dos dados retornados pelo modelo, é possível criar o app de front-end.

O Flutter é um framework de desenvolvimento de apps multiplataforma de código aberto. Com ele, você pode escrever uma base de código para execução no Android, no iOS, na Web, no macOS, no Windows e no Linux. Os apps do Flutter são desenvolvidos na linguagem de programação Dart.

Para este laboratório, você vai usar a Web como plataforma de destino, para que o app do Flutter possa ser implantado como um web app e acessado por um navegador.

Nesta tarefa, você vai analisar o código do app do Flutter e criar e executar o app como um web app.

Analisar a base de código do app do Flutter

Uma das funções do app permite que os usuários enviem uma foto de uma atração turística e consultem o Gemini para buscar mais informações sobre ela. Para este laboratório, o app do Flutter foi desenvolvido e disponibilizado no Cloud Storage.

1. No terminal do IDE, faça o download do código do app do Flutter:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~

2. Para buscar as dependências do projeto do app, na janela do terminal do IDE, execute o seguinte:

   cd ~/app; flutter pub get

3. Para exibir o código no IDE, no menu de navegação (), clique em Arquivo e selecione Abrir pasta.

4. Selecione /home/ide-dev/app/ na lista e clique em OK.

5. Para confiar nos autores dos arquivos na pasta, clique em Sim, confio nos autores.

   Confira uma visão geral do conteúdo da pasta app:

   Pasta/arquivo	Descrição
   app	Pasta raiz do projeto que contém as subpastas e os arquivos que compõem o app do Flutter.
   android/ios/linux/macos/web/windows	Contém arquivos específicos da plataforma que são necessários para executar o app do Flutter em cada plataforma com suporte.
   lib	Contém os arquivos Dart do aplicativo principal, que incluem a funcionalidade, o roteamento, os modelos de dados e a interface do usuário.
   test	Contém testes Dart usados para testar os widgets do app.
   pubspec.yaml	Contém as dependências do app, a versão do Flutter e outras configurações.
   analysis_options.yaml	Contém as configurações de análise estática do app.

   É hora de analisar alguns dos arquivos nessas pastas.

6. No menu Explorador, clique na pasta /app/lib/models e depois no arquivo metadata.dart para abri-lo.

   O arquivo metadata.dart contém o modelo de dados usado pelo app do Flutter.

   class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }

   Os atributos do objeto de metadados são associados aos atributos JSON retornados na resposta da API Gemini. O método fromJson inicializa os atributos do objeto quando é invocado.

7. No menu Explorador, clique no arquivo /app/lib/main.dart para abri-lo.

   Esse é o ponto de entrada do app do Flutter. Depois de executar as tarefas de inicialização, o código nesse arquivo cria a interface do app usando componentes do Material e define o título, o tema e a configuração de roteamento do app.

   Observação: um app do Material começa com o widget MaterialApp, que cria vários widgets úteis na raiz do app, incluindo um Navigator que gerencia o roteamento para várias telas no app.

8. Para conferir a configuração de roteamento do app, no menu Explorador, clique no arquivo /app/lib/functionality/routing.dart para abri-lo.

   O código nesse arquivo define as rotas /, /chat e /settings do app.

   O Flutter usa o conceito de widgets, que são classes declarativas usadas para criar o app. No Flutter, você cria um layout com a composição de widgets para criar widgets mais complexos e formar uma árvore de widgets. Para saber como criar interfaces no Flutter, consulte a documentação.

9. É hora de analisar o código responsável por algumas das funcionalidades e telas de interface do app. No menu Explorador, clique no arquivo /app/lib/ui/screens/quick_id.dart para abri-lo.

   Esse arquivo contém as classes que criam os widgets do app. Ele inclui a classe GenerateMetadataScreen, que cria a página principal do app e é invocada pelo caminho / definido no arquivo routing.dart. A interface permite que o usuário envie uma imagem do computador ou dispositivo móvel ou tire uma foto com a câmera do dispositivo.

   

   Outras telas da interface usadas no app são para configurações e a página de chat. Elas são implementadas nos arquivos settings.dart e chat.dart na pasta app/lib/ui/screens/.

   Durante a inicialização do app, o SDK Dart da Vertex AI para Firebase é usado para buscar uma instância do modelo de IA generativa do Gemini que será usada pelo app. Ele é implementado na classe _GenerateMetadataScreenState.

   void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }

   Depois que o usuário seleciona uma imagem, o app invoca a API Vertex AI Gemini com a imagem e um comando de texto. O comando de texto usado é o mesmo que você testou em uma tarefa anterior ao testar o modelo Gemini 2.0 Flash.

   O método _sendVertexMessage() contém o código que envia o comando. Confira um trecho do código do método:

   Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }

   A resposta JSON do modelo é decodificada para extrair name, description e suggestedQuestions, que são salvos localmente e exibidos na interface do app.

Conectar o app do Flutter ao Firebase

1. Na janela do terminal do IDE, mude para a pasta do projeto raiz app e ative o pacote flutterfire_cli:

   cd ~/app dart pub global activate flutterfire_cli

2. Para registrar o app do Flutter no Firebase, execute o seguinte:

   flutterfire configure --project={{{project_0.project_id|set at lab start}}}

   Depois de executar o comando, um arquivo de configuração firebase_options.dart é adicionado à pasta lib do projeto do Flutter.

3. Para configurar as plataformas compatíveis para o app, pressione a tecla de espaço e desmarque todas as plataformas, exceto Web. Use as setas para navegar pelas plataformas. Em seguida, pressione Enter.

   Agora o app da Web do Flutter está registrado para uso com o Firebase.

Configurar o recurso de chat do app do Flutter

O app do Flutter tem um recurso de chat que permite que os usuários encontrem mais informações sobre a imagem enviada no app ou solicitem informações de outras fontes de dados externas que possam ter informações mais atualizadas. Para isso, é preciso conectar ou ground o modelo do Gemini a essas fontes de dados.

Para implementar esse recurso, o app do Flutter se integra ao agente do Reasoning Engine que você implantou anteriormente no laboratório. A integração é feita conectando o app do Flutter ao endpoint do app de back-end que você também criou e implantou no Cloud Run.

1. Primeiro, recupere o nome do host do endpoint do Cloud Run do app de back-end e armazene o valor em uma variável de ambiente. Na janela do terminal do IDE, execute o seguinte:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. No caso do app do Flutter, o endpoint do app de back-end está configurado no arquivo ~/app/lib/config.dart. Atualize a entrada de configuração no arquivo:

   sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart

3. Para verificar a mudança, no menu Explorador do IDE, clique no arquivo IDE-DEV/app/lib/config.dart para abri-lo. Verifique se o valor da entrada de configuração cloudRunHost foi atualizado de acordo com o exemplo abaixo.

   

   Observação: esse valor precisa corresponder ao da variável de ambiente BACKEND_APP_HOST que você definiu em uma etapa anterior.

Analisar o código do recurso de chat

É hora de analisar o código do app do Flutter que implementa o recurso de chat.

1. No menu Explorador do IDE, clique no arquivo /app/lib/ui/screens/chat.dart para abri-lo.

   A classe ChatPage cria o widget do Flutter para a página de chat na interface. Essa página é exibida na interface quando o botão Saiba mais é pressionado.

   

   Para criar a interface do chat, o app usa o flutter_chat_ui_package, que implementa a maior parte do código boilerplate do chat que pode ser personalizado. O método build() usa a classe Chat para criar o widget.

   Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }

   O listBottomWidget é usado para mostrar a lista de perguntas sugeridas que são retornadas na resposta da chamada anterior do Gemini, para que o usuário possa selecionar uma pergunta como a mensagem do chat.

   O método de callback _handleSendPressed() é invocado quando o usuário clica em Enviar na janela do chat. O método cria uma mensagem, adiciona essa mensagem à lista de mensagens e a envia ao back-end usando o método askAgent().

2. Role a tela para baixo no código para encontrar o método askAgent().

   Para invocar o Gemini usando o agente do Reasoning Engine, o método askAgent() envia uma solicitação para o URL /ask_gemini no endpoint do Cloud Run do app de back-end. Os parâmetros de consulta da solicitação incluem o name e a description da imagem que foram retornados na chamada anterior do Gemini e na mensagem do usuário.

   Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }

   A resposta do back-end é adicionada à lista de mensagens na janela do chat pela função de chamada _sendMessageToAgent().

Implantar o app do Flutter

Agora que a configuração do app do Flutter está concluída, você pode criar e implantar o app. Para este laboratório, você usará o Fwr para executar o app como um web app. Ele consiste em um servidor de desenvolvimento para o Flutter Web.

1. Verifique se você está na pasta do app do Flutter. Na janela do terminal do IDE, execute o seguinte:

   cd ~/app

2. Para buscar as dependências do projeto do app, execute o seguinte:

   flutter pub get

3. Para gerar o projeto e iniciar o servidor da Web, execute o seguinte:

   fwr

   Aguarde o servidor ser iniciado e disponibilizar o app do Flutter. Depois disso, a resposta ao comando será como a seguinte:

   

Para verificar o objetivo, clique em Verificar meu progresso. Configurar o projeto do Firebase e o app do Flutter

Tarefa 8: testar o app do Flutter

É hora de testar a funcionalidade do app do Flutter.

Fazer o download de imagens de teste

1. Para testar o app, primeiro faça o download de uma imagem e a salve no seu computador. Copie o URL para acessar a imagem em outra guia do navegador:

   Imagem Fallingwater

2. Clique com o botão direito do mouse na imagem e salve-a no seu computador.

3. Repita essas etapas para fazer o download de uma imagem do broche do Dinossauro do Google Chrome no URL abaixo:

   Imagem do broche do Dinossauro do Google Chrome

Testar o app

1. Para acessar o app do Flutter, copie o URL Servidor em tempo real do painel de credenciais do Qwiklabs e abra-o em uma nova guia da janela do navegador em modo anônimo.

2. Aguarde alguns segundos até que o app seja carregado. Em seguida, para fazer upload da imagem Fallingwater, clique em Escolher da biblioteca.

   Depois do upload da imagem, o app invoca a API Gemini da Vertex AI para gerar uma resposta que contém o nome e a descrição da imagem, que são exibidos na interface do app.

   

   Pode levar alguns segundos para que os campos de nome e descrição sejam preenchidos na interface do app com a resposta do modelo do Gemini.

   Observação: se você receber um erro de permissão negada, ignore-o e clique no botão OK para continuar. Clique em Remover imagem e faça o upload da imagem novamente.

3. Clique em Saiba mais.

   A página do chat é carregada e exibe as perguntas sugeridas que foram retornadas na resposta da chamada anterior à API Gemini.

   

   Observação: se as perguntas sugeridas não forem exibidas, atualize a página e repita as duas etapas anteriores para fazer upload da imagem.

Testar o app com dados de produtos

1. Na interface do chat, clique em Remover imagem.

2. Para fazer o upload da imagem do broche do Dinossauro do Google Chrome, clique em Escolher da biblioteca e envie a imagem que você salvou anteriormente.

   Depois do upload da imagem, o app invoca a API Gemini da Vertex AI para gerar uma resposta que contém o nome e a descrição da imagem, que são exibidos na interface do app.

3. Clique em Saiba mais.

4. Na caixa de mensagem do chat, digite o seguinte:

   Onde posso comprar esse broche?

   O agente faz uma chamada HTTPS para o endpoint do Cloud Run do app de back-end, que invoca o agente do Reasoning Engine que usa o Gemini para retornar uma resposta do repositório de dados de pesquisa da Vertex AI.

   

5. (Opcional) Para que o app do Flutter se alinhe ao layout de um dispositivo móvel, redimensione a janela do navegador para aproximadamente o tamanho de um dispositivo móvel:

   

   Isso indica que o app do Flutter é responsivo a mudanças com base no tamanho da tela ou da janela. O Flutter tem pacotes e widgets que ajudam a tornar o app responsivo e adaptável a mudanças com base na configuração do dispositivo.

Finalize o laboratório

Após terminar seu laboratório, clique em End Lab. O Qwiklabs removerá os recursos usados e limpará a conta para você.

Você poderá avaliar sua experiência neste laboratório. Basta selecionar o número de estrelas, digitar um comentário e clicar em Submit.

O número de estrelas indica o seguinte:

• 1 estrela = muito insatisfeito
• 2 estrelas = insatisfeito
• 3 estrelas = neutro
• 4 estrelas = satisfeito
• 5 estrelas = muito satisfeito

Feche a caixa de diálogo se não quiser enviar feedback.

Para enviar seu feedback, fazer sugestões ou correções, use a guia Support.

Parabéns!

Neste laboratório, você fez o seguinte:

• Criou um repositório de dados de pesquisa e um app de pesquisa usando o Vertex AI Agent Builder no console do Google Cloud.
• Implantou um agente do Reasoning Engine usando o Vertex AI Workbench.
• Criou um app Python integrado à Vertex AI para Pesquisa e ao agente do Reasoning Engine.
• Implantou o app no Cloud Run e o usou como back-end para um app do Flutter.
• Configurou um projeto do Firebase e o conectou ao app do Flutter.
• Conferiu o código do app do Flutter para entender algumas das funcionalidades.
• Executou e testou o app do Flutter.

Próximas etapas / Saiba mais

• Visão geral do Gemini para Google Cloud
• Vertex AI Workbench
• Vertex AI Studio
• Firebase

Copyright 2024 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de empresas e produtos podem ser marcas registradas das empresas a que estão associados.