Como criar aplicativos na era da IA

1. Visão geral

Neste laboratório, você vai usar os produtos de IA generativa do Google para criar infraestrutura no Google Cloud com a ajuda do Gemini Cloud Assist, consultar dados do BigQuery usando linguagem natural para recursos SQL do Data Canvas, escrever código em notebooks do Colab Enterprise Jupyter e no Eclipse Theia (Visual Studio Code) com a ajuda do Gemini Code Assist e integrar recursos de pesquisa e chat de IA criados com base no Cloud Storage e no BigQuery no Vertex AI Agent Builder.

Nosso objetivo é criar um site de receitas e culinária chamado AI Recipe Haven. O site será criado em Python e Streamlit e vai conter duas páginas principais. O Cooking Advice vai hospedar um chatbot que vamos criar usando o Gemini e uma fonte fundamentada do Vertex AI Agent Builder vinculada a um grupo de livros de receitas. Ele vai oferecer conselhos culinários e responder a perguntas relacionadas a culinária. O Pesquisa de receitas será um mecanismo de pesquisa alimentado pelo Gemini, desta vez com base em um banco de dados de receitas do BigQuery.

Se você ficar preso em algum código neste exercício, as soluções para todos os arquivos de código estão localizadas no repositório do GitHub do exercício na ramificação solution.

Objetivos

Neste laboratório, você aprenderá a fazer o seguinte:

  • Ativar e usar o Gemini Cloud Assist
  • Criar um app de pesquisa no Vertex AI Agent Builder para o chatbot de conselhos culinários
  • Carregar e limpar dados em um notebook do Colab Enterprise com a ajuda do Gemini Code Assist
  • Criar um app de pesquisa no Vertex AI Agent Builder para o gerador de receitas
  • Defina o aplicativo da Web principal do Python e do Streamlit com um pouco de ajuda do Gemini
  • Implantar o aplicativo da Web no Cloud Run
  • Conectar a página "Cooking Advice" ao app do Agent Builder para pesquisa de livros de receitas
  • (Opcional) Conectar a página "Pesquisa de receitas" ao app de pesquisa de receitas do Agente do Criador
  • (Opcional) Conheça o aplicativo final

2. Configuração e requisitos

Antes de clicar no botão "Começar o laboratório"

Leia estas instruções. Os laboratórios são cronometrados e não podem ser pausados. O timer é iniciado quando você clica em "Começar o laboratório" e mostra por quanto tempo os recursos do Google Cloud vão ficar disponíveis.

Este laboratório prático do Qwiklabs permite que você realize as atividades em um ambiente real de nuvem, não em uma simulação ou demonstração. Você receberá novas credenciais temporárias para fazer login e acessar o Google Cloud durante o laboratório.

O que é necessário

Veja os requisitos para concluir o laboratório:

  • acesso a um navegador de Internet padrão (recomendamos o Chrome);
  • tempo para concluir as atividades.

Observação: não use seu projeto ou conta do Google Cloud neste laboratório.

Observação:se você estiver usando um Pixelbook, abra uma janela anônima para executar este laboratório.

Como iniciar seu laboratório e fazer login no console do Google Cloud

  1. Clique no botão "Começar o laboratório". Se for preciso pagar pelo laboratório, você verá um pop-up para selecionar a forma de pagamento. Um painel aparece à esquerda contendo as credenciais temporárias que você precisa usar no laboratório.

52e0878388c0d9ed.png

  1. Copie o nome de usuário e clique em "Abrir Console do Google". O laboratório ativa os recursos e depois abre outra guia com a página "Fazer login".

2a4b7165afebf5ab.png

Dica: abra as guias em janelas separadas, lado a lado.

Se a página "Escolher uma conta" aparecer, clique em "Usar outra conta".

6463aa9b492a3b60.png

  1. Na página Fazer login, cole o nome de usuário que você copiou do painel "Detalhes da conexão". Em seguida, copie e cole a senha.

Importante: é preciso usar as credenciais do painel "Connection Details". Não use as credenciais do Qwiklabs. Caso tenha sua própria conta do Google Cloud, não a use para este laboratório (isso evita cobranças). 4. Acesse as próximas páginas:

  1. Aceite os Termos e Condições.
  2. Não adicione opções de recuperação nem autenticação de dois fatores (porque essa é uma conta temporária).
  3. Não se inscreva em testes gratuitos.

Depois de alguns instantes, o console do Cloud será aberto nesta guia.

Observação:para acessar a lista dos produtos e serviços do Google Cloud, clique no menu de navegação no canto superior esquerdo.

bbdc8ea800bf0adc.png

3. Tarefa 0: Verificar o cluster da estação de trabalho

Mais adiante neste laboratório, você vai usar uma estação de trabalho do Google Cloud para fazer alguns trabalhos de desenvolvimento. O processo de inicialização deste laboratório deve ter iniciado a criação do cluster da estação de trabalho. Antes de continuar, vamos verificar se o cluster está sendo criado.

  1. No console do Google Cloud, use a caixa de pesquisa para navegar até as estações de trabalho do Cloud.
  2. Use o menu de navegação à esquerda para acessar o Gerenciamento de clusters.
  3. Se você tiver um cluster em atualização, poderá passar para a Tarefa 1. Se nenhum cluster aparecer em nenhum estado, atualize a página. Se você ainda não encontrar um cluster em atualização (build), termine o laboratório usando o botão no canto superior esquerdo destas instruções e reinicie o laboratório.

4. Tarefa 1: Ativar e usar o Gemini Cloud Assist

Nesta tarefa, vamos ativar e usar o Gemini Cloud Assist. Ao trabalhar no console do Google Cloud, o Gemini Cloud Assist pode oferecer conselhos, ajudar na criação, configuração e monitoramento da infraestrutura do Google Cloud e até sugerir comandos gcloud e escrever scripts do Terraform.

  1. Para ativar o Cloud Assist, clique na caixa de pesquisa na parte de cima da interface do console do Cloud e selecione Pergunte ao Gemini (ou Pergunte ao Gemini para o console do Cloud).
  2. Role até a seção "APIs obrigatórias" da página e ative a API Gemini para Google Cloud.
  3. Se a interface de chat não aparecer imediatamente, clique em Iniciar a conversa. Comece pedindo ao Gemini para explicar alguns dos benefícios do uso do Cloud Workstations. Reserve alguns minutos para conferir a resposta gerada.
  4. Em seguida, pergunte sobre os benefícios do Agente Builder e como ele pode ajudar a fundamentar as respostas generativas.
  5. Por fim, vamos fazer uma comparação. Na janela de chat do Gemini no console do Google Cloud, faça a seguinte pergunta:
What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?
  1. Agora, na janela não anônima, acesse o site público do Gemini aqui, faça login, se necessário, e faça a mesma pergunta. As respostas são iguais ou pelo menos semelhantes? As etapas específicas? Uma delas é significativamente melhor? De qualquer forma, lembre-se das respostas enquanto seguimos para as próximas etapas.

Observação:se você tentar fazer a etapa acima usando sua conta temporária do Qwiklabs, ela será bloqueada. Se a sua conta de trabalho também estiver bloqueada porque a organização não permite o uso do app da Web do Gemini, pule esta etapa e continue. Isso não vai afetar sua capacidade de concluir este exercício.

5. Tarefa 2: Criar um app de pesquisa no Vertex AI Agent Builder para o chatbot de conselhos culinários

O site que estamos criando terá uma página de conselhos de culinária com um chatbot projetado para ajudar os usuários a encontrar respostas para perguntas relacionadas a culinária. Ele será alimentado pelo Gemini com base em uma fonte que contém 70 livros de receitas de domínio público. Os livros de receitas vão atuar como a fonte de verdade que o Gemini usa para responder a perguntas.

  1. Use a caixa de pesquisa do console do Cloud para navegar até a Vertex AI. No painel, clique em Ativar todas as APIs recomendadas. Se você receber uma caixa pop-up sobre a necessidade de ativar a API Vertex AI, ative.
  2. Use a pesquisa para navegar até o Agent Builder e clique em Continuar e ativar a API.
  3. Como o Gemini sugeriu em nosso conselho anterior, a criação de um app de pesquisa no Agent Builder começa com a criação de uma fonte de dados oficial. Quando o usuário faz uma pesquisa, o Gemini entende a pergunta e como elaborar respostas inteligentes, mas procura a fonte confiável para as informações usadas nessa resposta, em vez de usar o conhecimento inato.

No menu à esquerda, acesse "Repositórios de dados" e "Criar repositório de dados". 4. Os livros de receitas de domínio público que estamos usando para fundamentar nossa página de conselhos de culinária estão em um bucket do Cloud Storage em um projeto externo. Selecione o tipo de origem do Cloud Storage. 5. Analise, mas não altere as opções padrão relacionadas ao tipo de informação que estamos importando. Deixe o tipo de importação definido como "Pasta" e use o caminho do bucket: labs.roitraining.com/labs/old-cookbooks. Em seguida, clique em Continuar. 6. Nomeie o repositório de dados: old-cookbooks. Edite e mude o ID para old-cookbooks-id e crie o repositório de dados.

O Vertex AI Agent Builder oferece suporte a vários tipos de apps, e a Data Store atua como a fonte de verdade para cada um deles. Os apps de pesquisa são bons para uso geral e pesquisa. Os apps de chat são para fluxos generativos em aplicativos de chatbot/voicebot orientados pelo Dataflow. Os apps de recomendação ajudam a criar mecanismos de recomendação melhores. Os apps de agente são para criar agentes com base na IA generativa. No final, o Agente provavelmente vai ser mais útil para o que queremos fazer, mas, como o produto está em visualização, vamos continuar com o tipo de app de pesquisa. 7. Use o menu à esquerda para navegar até Apps e clique em Criar app. 8. Selecione o tipo de app de pesquisa. Examine, mas não mude as várias opções. Nomeie o app: cookbook-search. Edit e defina o ID do app como cookbook-search-id. Defina a empresa como Google e Continue. 9. Verifique o repositório de dados old-cookbooks que você criou há algumas etapas e crie o app de pesquisa.

Se você examinar a guia Atividade, provavelmente vai notar que os livros de receitas ainda estão sendo importados e indexados. O Agente de criação vai levar mais de cinco minutos para indexar os milhares de páginas contidas nos 70 livros de receitas que fornecemos. Enquanto isso, vamos carregar e limpar alguns dados do banco de dados de receitas para o gerador de receitas.

6. Tarefa 3: Carregar e limpar dados em um notebook do Colab Enterprise com a ajuda do Gemini Code Assist

O Google Cloud oferece algumas maneiras principais de trabalhar com os notebooks do Jupiter. Vamos usar a oferta mais recente do Google, o Colab Enterprise. Alguns de vocês podem conhecer o produto Colab do Google, que é comumente usado por indivíduos e organizações que gostariam de experimentar os notebooks do Jupiter em um ambiente sem custo financeiro. O Colab Enterprise é uma oferta comercial do Google Cloud totalmente integrada ao restante dos produtos de nuvem do Google e que aproveita ao máximo os recursos de segurança e compliance do ambiente do GCP.

Um dos recursos do Colab Enterprise é a integração com o Gemini Code Assist do Google. O Code Assist pode ser usado em vários editores de código diferentes e oferece conselhos e sugestões inline perfeitas enquanto você programa. Vamos aproveitar esse assistente generativo enquanto manipulamos os dados das receitas.

  1. Use a pesquisa para navegar até o Colab Enterprise e Criar um bloco. Se você receber uma oferta para testar novos recursos do Colab, ignore. Para acessar o ambiente de execução, a capacidade de computação por trás do notebook, pressione Conectar no canto superior direito do novo notebook.

386577c713522b4d.png

  1. Use o menu de três pontos ao lado do nome do bloco atual no painel "Arquivos do Colab Enterprise" para renomeá-lo Data Wrangling.

4cb787f255bac415.png

  1. Crie uma nova caixa + Texto e use a seta para cima para movê-la para que ela seja a primeira célula da página.

6a08b3ccc9c2174b.png

  1. Edite a caixa de texto e insira:
# Data Wrangling

Import the Pandas library
  1. No bloco de código abaixo do bloco de texto que você acabou de criar, comece a digitar imp. O Gemini Code Assist vai sugerir o restante da importação em cinza. Pressione Tab para aceitar a sugestão.
import pandas as pd
  1. Abaixo da caixa de código de importação, crie outra caixa de texto e insira:
Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
  1. Crie e edite outro bloco de código. Novamente, comece a digitar df e examine o código gerado pelo Gemini Code Assist. Se você vir uma lista suspensa de preenchimento automático de palavras-chave do Python sobre a sugestão gerada, pressione "Escape" para conferir o código sugerido em cinza claro. Pressione a guia "Novamente" para aceitar a sugestão. Se a sugestão não contiver a chamada de função head(), adicione-a.
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
  1. Clique na primeira célula de código, onde você importou o Pandas, e use o menu Commands ou o teclado para executar a célula selecionada. No teclado, Shift + Enter executa a célula e muda o foco para a próxima célula, criando uma se necessário. Aguarde a célula ser executada antes de continuar.

Observação:o símbolo [ ] aparece à esquerda quando uma célula não foi executada. Enquanto uma célula está sendo executada, você vai ver uma animação giratória. Quando a célula terminar, um número vai aparecer, como [13]. 9. Execute a célula que carrega o CSV no DataFrame. Aguarde o carregamento do arquivo e examine as cinco primeiras linhas de dados. Esses são os dados de receita que vamos carregar no BigQuery e usar para fundamentar nosso gerador de receitas. 10. Crie um novo bloco de código e insira o comentário abaixo. Depois de digitar o comentário, mova para a próxima linha de código e você vai receber a sugestão df.columns. Aceite e execute a célula.

# List the current DataFrame column names

Acabamos de demonstrar que você tem duas opções para receber ajuda do Gemini Code Assist em um notebook Jupyter: células de texto acima das células de código ou comentários dentro da própria célula de código. Os comentários dentro das células de código funcionam bem nos notebooks do Jupyter, mas essa abordagem também funciona em qualquer outro ambiente de desenvolvimento integrado com suporte ao Gemini Code Assist do Google.

  1. Vamos fazer uma pequena limpeza nas colunas. Renomeie a coluna Unnamed: 0 como id e link como uri. Use a sua escolha de comando > técnicas de código para criar o código e, em seguida, execute a célula quando estiver satisfeito.
# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
  1. Remova as colunas source e NER e use head() para conferir as primeiras linhas. Novamente, peça ajuda ao Gemini. Execute as duas últimas linhas e examine os resultados.
# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()
  1. Vamos conferir quantos registros há no nosso conjunto de dados. Novamente, comece com a técnica de solicitação escolhida e veja se o Gemini pode ajudar a gerar o código.
# Count the records in the DataFrame
df.shape # count() will also work
  1. 2,23 milhões de registros provavelmente são mais receitas do que temos tempo para fazer. O processo de indexação no Criador de agentes provavelmente vai demorar muito para nosso exercício de hoje. Como compromisso, vamos usar uma amostra de 150.000 receitas. Use a abordagem de comando > código para coletar a amostra e armazená-la em um novo DataFrame chamado dfs (s para pequeno).
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
  1. Os dados da fonte de receitas estão prontos para serem carregados no BigQuery. Antes de fazer o carregamento, vamos acessar o BigQuery e preparar um conjunto de dados para armazenar nossa tabela. No console do Google Cloud, use a caixa de pesquisa para navegar até o BigQuery. Você pode clicar com o botão direito do mouse em BigQuery e abrir em uma nova guia do navegador.
  2. Se ele ainda não estiver visível, abra o painel de conversa por chat da Gemini usando o logotipo da Gemini no canto superior direito do console do Cloud. Se você precisar ativar a API novamente, pressione "Ativar" ou atualize a página. Execute a instrução: What is a dataset used for in BigQuery? Depois de analisar a resposta, pergunte: How can I create a dataset named recipe_data using the Cloud Console? Compare os resultados com as etapas a seguir.

3c38e5975c5c519.png

  1. No painel "BigQuery Explorer", clique no menu Ver ações com três pontos ao lado do ID do projeto. Em seguida, selecione Criar conjunto de dados.

e28c2fc55a04c694.png

  1. Informe o conjunto de dados e o ID de recipe_data. Deixe o tipo de local como EUA e Criar conjunto de dados. Se você receber um erro informando que o conjunto de dados já existe, prossiga.

Com o conjunto de dados criado no BigQuery, volte ao seu notebook e faça a inserção. 19. Volte para o notebook de manipulação de dados no Colab Enterprise. Em uma nova célula de código, crie uma variável com o nome project_id e use-a para armazenar o ID do projeto atual. Procure o ID do projeto atual no canto superior esquerdo dessas instruções, abaixo do botão "End Lab". Também está disponível na página inicial do console do Cloud, se preferir. Atribua o valor à variável project_id e execute a célula.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'
  1. Use a instrução > código para criar um bloco de código que insira o DataFrame dfs em uma tabela chamada recipes no conjunto de dados que acabamos de criar recipe_data. Execute a célula.
dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

7. Tarefa 4: Criar um app de pesquisa no Vertex AI Agent Builder para o gerador de receitas

Ótimo, com a tabela de dados de receitas criada, vamos usá-la para criar uma fonte de dados fundamentada para o gerador de receitas. A abordagem que vamos usar será semelhante à que usamos para o chatbot de culinária. Vamos usar o Vertex AI Agent Builder para criar um repositório de dados e, em seguida, usá-lo como a fonte de verdade de um app de pesquisa.

Se quiser, peça ao Gemini no Console do Google Cloud para lembrar você das etapas para criar um app de pesquisa do Criador de agentes ou siga as etapas abaixo.

  1. Use a Pesquisa para acessar o Agent Builder. Abra Repositórios de dados e Criar repositório de dados. Desta vez, selecione o tipo de repositório de dados do BigQuery.
  2. Na célula de seleção da tabela, pressione Procurar e pesquise recipes. Selecione o botão de opção ao lado da tabela. Se você encontrar receitas de outros projetos qwiklabs-gcp-..., selecione o que pertence a você.

Observação:se você clicar em recipes em vez de selecionar o botão de opção ao lado dele, uma nova guia será aberta no navegador e você será direcionado à página de visão geral da tabela no BigQuery. Basta fechar a guia do navegador e selecionar o botão de opção no Criador de agentes. 3. Examine, mas não mude o restante das opções padrão e clique em Continuar. 4. Na página de análise do esquema, examine as configurações padrão iniciais, mas não faça nenhuma alteração. Continuar 5. Nomeie o repositório de dados como recipe-data. Edite o ID do repositório de dados e defina-o como recipe-data-id. Crie o repositório de dados. 6. Acesse Apps usando o menu de navegação à esquerda e clique em Criar app. 7. Selecione o app Pesquisar mais uma vez. Nomeie o app como recipe-search e defina o ID como recipe-search-id. Defina o nome da empresa como Google e Continue. 8. Desta vez, verifique as fontes de dados recipe-data. Crie o app.

Vai levar um tempo para que a tabela do banco de dados seja indexada. Enquanto isso, vamos testar a nova tela de dados do BigQuery e ver se conseguimos encontrar uma ou duas receitas interessantes. 9. Use a caixa de pesquisa para acessar o BigQuery. Na parte de cima do BigQuery Studio, clique na seta para baixo ao lado da guia mais à direita e selecione Canvas de dados. Defina a região como us-central1.

5d562cddb1717c32.png

  1. Na caixa de pesquisa da tela de dados, procure recipes e Adicione à tela sua tabela.
  2. Uma representação visual da tabela de receitas será carregada na tela de dados do BigQuery. É possível analisar o esquema da tabela, visualizar os dados nela e examinar outros detalhes. Abaixo da representação da tabela, clique em Consulta.
  3. A tela de dados vai carregar uma caixa de diálogo de consulta do BigQuery mais ou menos típica com uma adição: acima da janela de consulta, há uma caixa de texto que pode ser usada para pedir ajuda ao Gemini. Vamos conferir se encontramos algumas receitas de bolo na nossa amostra. Execute o seguinte comando (digitando o texto e pressionando Enter/Return para acionar a geração de SQL):
Please select the title and ingredients for all the recipes with a title that contains the word cake.
  1. Confira o SQL gerado. Quando terminar, execute a consulta.
  2. Nada mal! Fique à vontade para testar outros comandos e consultas antes de continuar. Ao testar, use comandos menos específicos para saber o que funciona e o que não funciona. Por exemplo, esta solicitação:
Do I have any chili recipes?

(Não se esqueça de executar a nova consulta) Uma lista de receitas de chili foi retornada, mas os ingredientes não foram incluídos até que eu modificasse para:

Do I have any chili recipes?  Please include their title and ingredients.

(Sim, eu digo "por favor" quando peço. Minha mãe ficaria tão orgulhosa.)

Notei que uma receita de chili continha cogumelos, e quem quer isso no chili? Pedi para o Gemini me ajudar a excluir essas receitas.

Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.

8. Tarefa 5: Defina o aplicativo da Web principal do Python e do Streamlit com um pouco de ajuda do Gemini

Com os repositórios de dados do Vertex AI Agent Builder indexados e os apps de pesquisa quase prontos, vamos criar nosso aplicativo da Web.

Vamos usar o Gemini Code Assist enquanto trabalhamos. Para mais informações sobre como usar o Gemini Code Assist no Visual Studio Code, consulte a documentação aqui.

Vamos fazer o desenvolvimento em uma estação de trabalho do Google Cloud, um ambiente de desenvolvimento baseado na nuvem, no nosso caso, pré-carregado com o Eclipse Theia (código aberto do Visual Studio). Um script automatizado neste exercício criou o cluster e a configuração da Cloud Workstation para nós, mas ainda precisamos criar a própria Cloud Workstation. Se você quiser mais informações sobre o Cloud Workstations e o uso dele, consulte o Gemini Cloud Assist :-)

  1. Use a pesquisa para navegar até Estações de trabalho do Cloud e clique em Criar estação de trabalho. Nomeie a estação de trabalho dev-env e use a configuração my-config. Crie a estação de trabalho.
  2. Após alguns minutos, a nova estação de trabalho vai aparecer na lista "Minhas estações de trabalho". Inicie o dev-env e, quando ele estiver em execução, inicie o ambiente de desenvolvimento.
  3. O editor da estação de trabalho será aberto em uma nova guia do navegador e, após alguns instantes, você verá uma interface familiar do Theia (Visual Studio Code). No lado esquerdo da interface, abra a guia Source Control e clique em Clone Repository.

c03d05b42d28a518.png

  1. Para o URL do repositório, insira https://github.com/haggman/recipe-app. Clone o repositório na pasta user e abra o repositório clonado para edição.
  2. Antes de analisarmos a pasta clonada e começarmos a trabalhar no nosso aplicativo da Web, precisamos fazer login no Google Cloud com o plug-in do Cloud Code do editor e ativar o Gemini. Vamos fazer isso agora. No canto inferior esquerdo do editor, clique em Cloud Code - Fazer login. Se você não encontrar o link, aguarde um minuto e confira novamente.

f4ebfbd96026c0d8.png

  1. A janela do terminal vai mostrar um URL longo. Abra o URL no navegador e siga as etapas para conceder acesso do Cloud Code ao seu ambiente do Google Cloud. Use sua conta temporária student-... de exercício e não sua conta pessoal do Google Cloud ao fazer a autenticação. Na caixa de diálogo final, copie o código de verificação e cole-o na janela de terminal em espera na guia do navegador da estação de trabalho do Cloud.
  2. Depois de alguns instantes, o link do Cloud Code no canto inferior esquerdo do editor vai mudar para Cloud Code - Sem projeto. Clique no novo link para selecionar um projeto. A paleta de comandos vai aparecer na parte de cima do editor. Clique em Selecionar um projeto do Google Cloud e selecione qwiklabs-gcp-.... Depois de alguns instantes, o link no canto inferior esquerdo do editor será atualizado para mostrar o ID do projeto. Isso indica que o Cloud Code foi anexado ao seu projeto.
  3. Com o Cloud Code conectado ao seu projeto, agora você pode ativar o Gemini Code Assist. No canto inferior direito da interface do editor, clique no logotipo do Gemini riscado. O painel de chat do Gemini vai abrir à esquerda do editor. Clique em Selecionar um projeto do Google Cloud. Quando a paleta de comandos abrir, selecione o projeto qwiklabs-gcp-.... Se você seguiu as etapas corretamente (e o Google não mudou nada), uma janela de chat ativa do Gemini vai aparecer.

70e4e06ed6565329.png

  1. Por fim, vamos configurar a janela do terminal do editor da mesma forma. Use menu de navegação > Visualizar > Terminal para abrir a janela do terminal. Execute gcloud init. Mais uma vez, use o link para permitir que o terminal do Cloud Shell funcione com seu projeto qwiklabs-gcp-.... Quando solicitado, selecione a opção numérica do seu projeto qwiklabs-gcp-....
  2. Ótimo, com o terminal, o chat do Gemini e as configurações do Cloud Code configurados, abra a guia Explorer e dedique alguns minutos para conferir os arquivos do projeto atual.

3b2dc3820ed643e2.png

  1. No Explorer, abra o arquivo requirements.txt para edição. Mude para o painel de chat do Gemini e pergunte:
From the dependencies specified in the requirements.txt file, what type of application are we building?
  1. Estamos criando um aplicativo da Web interativo usando Python e Streamlit que interage com a Vertex AI e o Discovery Engine. Por enquanto, vamos nos concentrar nos componentes do aplicativo da Web. Como o Gemini diz, o Streamlit é um framework para criar aplicativos da Web orientados a dados em Python. Agora pergunte:
Does the current project's folder structure seem appropriate for a Streamlit app?s

É aqui que o Gemini tende a ter problemas. O Gemini pode acessar o arquivo que você abriu no editor, mas não consegue acessar o projeto inteiro. Tente perguntar o seguinte:

Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?

- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py

Receber uma resposta melhor?

  1. Confira mais informações sobre o Streamlit:
What can you tell me about Streamlit?

Legal, o Gemini está oferecendo uma boa visão geral, incluindo prós e contras.

  1. Se você quiser explorar os contras, pergunte:
What are the major downsides or shortcomings?

Não precisamos dizer "do Streamlit" porque o Gemini Chat é conversacional (com vários turnos). O Gemini sabe sobre o que estamos falando porque estamos em uma sessão de chat. Se quiser limpar o histórico de conversas do Gemini, use o ícone de lixeira na parte de cima da janela de conversa com o código.

9. Tarefa 6: implantar o aplicativo da Web no Cloud Run

Ótimo, nossa estrutura principal do aplicativo está em vigor, mas será que tudo vai funcionar? Melhor ainda, onde devemos hospedar no Google Cloud?

  1. Na janela de chat do Gemini, pergunte:
If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?
  1. Se você ainda não estava trabalhando no seu ambiente de desenvolvimento integrado, também pode usar o Google Cloud Assist. Abra o console do Google Cloud e, em seguida, abra o Gemini Cloud Assist e pergunte:
If I have a containerized web application, where would be the
best place to run it in Google Cloud?

Os dois conjuntos de conselhos foram iguais? Você concorda ou discorda de algum dos conselhos? O Gemini é um assistente de IA generativa, e, assim como um assistente humano, nem sempre você vai concordar com tudo o que ele diz. No entanto, ter esse assistente sempre ao seu lado enquanto você trabalha no Google Cloud e no seu editor de código pode aumentar muito sua eficiência.

  1. Para um aplicativo da Web conteinerizado de curta duração sem estado, o Cloud Run é uma ótima opção. Na janela de chat do Gemini no editor de código, tente o comando:
What steps would be required to run this application in
Cloud Run?
  1. Parece que a primeira coisa que precisamos fazer é criar um Dockerfile. Usando o editor, crie um arquivo chamado Dockerfile na raiz da pasta do projeto. Não coloque o arquivo acidentalmente na pasta de páginas. Abra o arquivo para edição.
  2. Vamos usar o painel lateral do Gemini Chat para criar o Dockerfile. Use uma instrução como a abaixo. Quando os resultados forem exibidos no chat, use o + ao lado do ícone de cópia logo acima do Dockerfile sugerido para inserir o código sugerido no Dockerfile.
Create a Dockerfile for the application in the current folder.
The dependencies are defined in requirements.txt and I want you
to use the Python 3 slim bookworm base image.

O Gemini nem sempre retorna a mesma resposta para o mesmo comando. Na primeira vez que pedi um Dockerfile ao Gemini, recebi o arquivo exato que vou sugerir que você use. Acabei de receber a sugestão:

```docker
# Base image
FROM python:3-bookworm-slim

# Set working directory
WORKDIR /app

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    gcc \
    python3-dev \
    && rm -rf /var/lib/apt/lists/*

# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv

# Create virtual environment
RUN python3 -m venv venv

# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate

# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt

# Copy application files
COPY . /app

# Expose port 8501 for Streamlit
EXPOSE 8501

# Start Streamlit app
CMD ["streamlit", "run", "main.py"]
That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.

6. Tweak the Dockerfile so it resembles the following:


FROM python:3.11-slim-bookworm

WORKDIR /app

COPY requirements.txt . RUN pip install –no-cache-dir –upgrade pip &&
pip install –no-cache-dir -r requirements.txt

COPY . .

CMD ["streamlit", "run", "Home.py"]

7. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:

Qual é o melhor lugar no Google Cloud para armazenar imagens do Docker?

8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.

Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.

Como usar a gcloud para criar um registro do Docker no Artifact Registry?

9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.

Como posso usar o gcloud para criar um novo serviço do Cloud Run chamado "recipe-web-app" a partir de uma imagem com o mesmo nome do repositório do Artifact Registry que acabamos de criar?

10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.

<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png"  width="624.00" />

12. At the prompt enter the below. Examine and **Accept** the change.

Comente o arquivo atual.

How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!

13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.

. build.sh

14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.

Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.


## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app



We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.

1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings

projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id

**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder &gt; Data Stores &gt; old-cookbooks for its actual Data store ID.

4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.


Como posso saber se um tomate está maduro?

5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.

<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png"  width="624.00" />

6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:

model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )

10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.

**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.

def start_chat_session(): vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1") tools = [ Tool.from_retrieval( retrieval=grounding.Retrieval( source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"), ) ), ] model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, ) chat = model.start_chat() return chat

11. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.

chat = start_chat_session()

12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell

response = chat.send_message("How can I tell if a tomato is ripe?") print(response)

13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:


response = chat.send_message("How can I tell if a tomato is ripe?") print(response.candidates[0].content.parts[0].text)

14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there

<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png"  width="326.00" />

15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:


Adicione o código copiado do seu notebook abaixo desta mensagem

17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:

Este é o código para configurar as variáveis de sessão

Remova a marca de comentário deste bloco quando solicitado

19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.

Confira o código para criar a interface de chat

Remova a marca de comentário do código abaixo quando solicitado

21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.

. build.sh

How cool is that! Your own personal AI cooking advisor :-)


## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app



When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.

1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation  [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook  [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.

Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.


## Task 9: (Optional) Explore the final application



Take a few minutes to explore the final application.

1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:

Você tem alguma dica para preparar brócolis?

Que tal uma receita clássica de canja?

Me fale sobre o merengue.

6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:

Chili com carne

Pimenta, milho, arroz

Torta de limão com merengue

Uma sobremesa com morangos

## Congratulations!



You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!