Visão geral

A IA generativa é uma tecnologia que pode ser usada para criar conteúdo como texto, vídeo, imagens e código. O Google Cloud oferece vários modelos de linguagem grandes (LLMs) e ferramentas para ajudar você a começar a usar a IA generativa, como o Gemini e a Vertex AI. É possível usar ferramentas com tecnologia LLM para criar e aprimorar o conteúdo de sites e adicionar experiências de pesquisa conversacional. Você também pode promover a descoberta de páginas da Web e melhorar a navegação do site.

Objetivos

Neste laboratório, você vai implementar uma solução de modernização de sites para:

• Simplificar a geração de conteúdo usando a IA generativa para melhorar a qualidade e a eficiência do conteúdo do site.
• Gerar imagens que complementam o conteúdo escrito do site.
• Traduzir o conteúdo para o idioma desejado com facilidade.
• Melhorar a descoberta de informações integrando a Vertex AI para Pesquisa no site.

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.

Ativar o Cloud Shell

O Cloud Shell é uma máquina virtual que contém ferramentas para desenvolvedores. Ele tem um diretório principal permanente de 5 GB e é executado no Google Cloud. O Cloud Shell oferece aos seus recursos do Google Cloud acesso às linhas de comando. A gcloud é a ferramenta ideal para esse tipo de operação no Google Cloud. Ela vem pré-instalada no Cloud Shell e aceita preenchimento com tabulação.

1. No painel de navegação do Console do Google Cloud, clique em Ativar o Cloud Shell ().

2. Clique em Continuar.
   O provisionamento e a conexão do ambiente podem demorar um pouco. Quando esses processos forem concluídos, você já vai ter uma autenticação, e o projeto estará definido com seu PROJECT_ID. Por exemplo:

Exemplo de comandos

• Liste o nome da conta ativa:

gcloud auth list

(Saída)

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

(Exemplo de saída)

Credentialed accounts: - google1623327_student@qwiklabs.net

• Liste o ID do projeto:

gcloud config list project

(Saída)

[core] project = <project_ID>

(Exemplo de saída)

[core] project = qwiklabs-gcp-44776a13dea667a6

Tarefa 1: ativar a API Vertex AI

Antes de usar a Vertex AI, é necessário ativar a API Vertex AI.

1. Para ativar a API, execute o comando no Cloud Shell:

   gcloud services enable aiplatform.googleapis.com

2. Se for solicitado, clique em Autorizar.

   Observação: antes de conferir o progresso, aguarde alguns segundos para que a API seja ativada.

Para verificar o objetivo, clique em Verificar meu progresso. A API Vertex AI está ativada.

Tarefa 2: baixar o código do site

Este laboratório usa um app de site pré-criado que consiste em APIs de back-end criadas com a FastAPI e um front-end criado com HTML, CSS e JavaScript. Nesta tarefa, você vai fazer o download do código do site e revisar o código e a estrutura de arquivos.

Fazer download e acessar o código do site

1. No Cloud Shell, faça o download do arquivo de código do site do Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. Extraia o conteúdo do arquivo:

   tar -zxvf genai-website-mod-app.tar.gz

3. Para conferir o código do site e a estrutura de arquivos, na barra de menus do Cloud Shell, clique em Abrir editor.

4. Na barra de navegação do editor do Cloud Shell, expanda a pasta genai-website-mod-app.

   Esta pasta contém todos os arquivos necessários para criar e implantar o app do site. Confira uma visão geral dos arquivos e do objetivo deles:

   Arquivo/Pasta	Descrição
   Dockerfile	Dockerfile para criar um contêiner para o aplicativo do site usando o Cloud Run
   config.toml	Configurar o aplicativo com variáveis
   main.py	Ponto de entrada principal do FastAPI para o aplicativo do site
   models/	Pasta que contém os modelos de dados usados pelo aplicativo do site
   roteadores/	Roteadores da API FastAPI para diferentes funcionalidades do aplicativo
   static/	Contém recursos estáticos do site, como CSS, imagens e arquivos JS
   templates/	Modelos Jinja para as páginas do aplicativo do site
   utilitários/	Módulos de utilitário para o aplicativo do site
   views/	Confira as implementações do aplicativo do site

   Observação:não é necessário visualizar ou editar os conteúdos dos arquivos, exceto quando indicado nas etapas posteriores do laboratório.

Tarefa 3: implementar a Vertex AI para Pesquisa

Nesta tarefa, implemente a funcionalidade de pesquisa no site criando um aplicativo de pesquisa na Vertex AI para pesquisar dados não estruturados, como posts.

Criar um app de pesquisa

1. No console do Google Cloud, clique no menu de navegação () e selecione Agent Builder.

   Observação: se o Agent Builder não estiver listado no menu de navegação, clique em Ver todos os produtos. Na página Todos os produtos, role a página até a seção Inteligência artificial e clique em Agent Builder.

2. Clique em Continuar e ativar a API.

3. Se você for automaticamente redirecionado para a página Criar app, vá para a próxima etapa. Caso contrário, clique em Novo app.

4. Na página Criar app, em Pesquisar no site, clique em Criar.

5. Na página Configuração, configure um app de pesquisa genérica de acordo com estas configurações, deixando as outras no padrão:

   Propriedade	Valor (digite ou selecione)
   Nome do seu app	my-search-app
   Nome externo da sua empresa ou organização	my-company
   Localização do seu app	global (Global)

6. Clique em Continuar.

Criar um repositório de dados para o app de pesquisa

1. Na página Repositórios de dados, clique em Criar repositório de dados.

   Nesta página, configure o app de pesquisa com sua fonte de dados para ser usado nos resultados da pesquisa do site.

2. Selecione Cloud Storage.

   Observação:para este laboratório, alguns documentos HTML que representam posts foram pré-provisionados em um bucket do Cloud Storage no projeto.

3. Com Pasta selecionado como padrão, clique em Procurar.

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

5. Selecione a pasta blog_posts e clique em Selecionar.

   O URI gs:// da pasta é preenchido.

   

6. Para o tipo de dados que está sendo importado, deixe a opção padrão Documentos não estruturados selecionada e clique em Continuar.

7. Como nome do repositório de dados, digite my-data-store.

8. Clique em Criar.

9. Na página Repositórios de dados, selecione o repositório que você acabou de criar. Em seguida, clique em Criar para criar o app de pesquisa.

   

   O Agent Builder agora começa a ingerir os dados HTML do post do bucket do Cloud Storage para o app de pesquisa.

10. Para conferir o status da ingestão de dados, na página de dados do my-data-store, clique na guia Atividade.

    A coluna Status indica o status atual. Quando o processo de importação for concluído, a coluna vai indicar Importação concluída.

    

    Observação: o processo de importação leva alguns minutos para ser concluído. Aguarde a conclusão do processo de importação de dados antes de prosseguir para a próxima etapa.

11. Para verificar se os documentos foram importados, clique na guia Documentos.

Testar o app de pesquisa

Para ter uma prévia do app de pesquisa, teste a funcionalidade dele no Agent Builder.

1. No menu de navegação do Agent Builder, clique em Pré-lançamento.

2. Na caixa de pesquisa, digite What is dollar cost averaging and how can it help me? (Qual é o custo médio em dólares e como ele pode me ajudar?) e pressione Enter.

   O app gera uma resposta explicando o custo médio em dólares e fornece trechos e links para arquivos relevantes que foram importados do Cloud Storage.

   Observação: por padrão, o app de pesquisa usa o modelo Gemini 1.5 Pro para gerar as respostas da pesquisa. É possível visualizar ou modificar a configuração do app de pesquisa na página Agent Builder > Configurações no console do Google Cloud.

Para verificar o objetivo, clique em Verificar meu progresso. O app Vertex AI para Pesquisa é criado.

Tarefa 4: integrar o aplicativo do site com a pesquisa

Agora que o app de pesquisa foi criado, você pode integrá-lo ao site ou aplicativo. Este laboratório usa a API de pesquisa para fazer chamadas e receber respostas que são exibidas no site. Também é possível incorporar um widget de pesquisa ao site, que automaticamente fornece uma barra de pesquisa e uma interface de pesquisa expansível. Para saber mais sobre essa opção, acesse os links no final do laboratório para ter acesso à documentação.

Nesta tarefa, você vai configurar o código do site para integrar com o app de pesquisa criado na tarefa anterior. Depois você vai implantar o aplicativo do site no Cloud Run para testes.

Configurar o aplicativo do site

O aplicativo do site é criado com a FastAPI, que é uma framework da Web para criar APIs em Python. A pasta genai-website-mod-app/routers contém as implementações da API do roteador para várias funcionalidades do site, como pesquisa.

1. No editor do Cloud Shell, acesse a pasta genai-website-mod-app/routers e abra o arquivo vertex_search.py.

   Esse arquivo contém o código que implementa as chamadas de API da pesquisa usando o módulo discoveryengine do SDK do cliente da nuvem para Python. O código também usa o tomllib, um módulo em Python que analisa arquivos de configuração.

2. Confira o código na função trigger_first_search().

   Essa função configura a chamada para a API Discovery Engine usando o caminho projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id}, que contém os parâmetros de caminho.

3. Para fornecer valores aos parâmetros de caminho, na pasta genai-website-mod-app, edite o arquivo config.toml.

4. Na seção [global], substitua os valores das propriedades de configuração conforme indicado:

   Seção	Propriedade	Valor
   global	project_id
   global	localização
   global	datastore_id	Confira a próxima etapa

5. Substitua o valor da propriedade de configuração datastore_id pelo ID do armazenamento do app de pesquisa:

   a. Para conseguir o valor de datastore_id, acesse o Agent Builder no console do Google Cloud e selecione Dados.

   b. Copie e cole o valor do ID do repositório de dados de my-data-store no arquivo config.toml.

6. Substitua as propriedades de configuração adicionais nas seções de configuração relevantes conforme indicado:

   Seção	Propriedade	Valor
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. Salve as alterações no arquivo.

Tarefa 5: criar, implantar e testar o site no Cloud Run

O Cloud Run é uma plataforma de computação gerenciada para executar contêineres de aplicativos diretamente na infraestrutura escalonável do Google.

Nesta tarefa, você vai criar o aplicativo do site e implantá-lo no Cloud Run. Você também vai testar a funcionalidade de pesquisa que integrou ao site.

Configurar o ambiente

1. Abra o diretório aplicativo da Web:

   cd ~/genai-website-mod-app

2. Defina as variáveis de ambiente para o ID do projeto, a região e o serviço de aplicativo do site:

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # Nome do serviço do Cloud Run. echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

Criar e implantar o app no Cloud Run

1. Para criar e implantar o app no Cloud Run, execute o comando:

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. Para criar o repositório Docker do Artifact Registry, digite Y

   Depois da implantação, um URL do serviço é gerado como resposta ao comando.

Teste a funcionalidade de pesquisa do site

1. Para testar o app no Cloud Run, acesse o URL do serviço do Cloud Run do aplicativo do site em uma guia ou janela separada do navegador.

2. Na caixa de pesquisa, digite What is dollar cost averaging and how can it help me? (Qual é o custo médio em dólares e como ele pode me ajudar?) e pressione Enter.

3. Verifique se os resultados da pesquisa são retornados e exibidos no site.

   Observação: o resultado da pesquisa inclui uma resposta de IA. Ele é gerado com base no conteúdo dos arquivos HTML no repositório de dados provisionados do Cloud Storage para o app de pesquisa. Às vezes, os links dos resultados da pesquisa podem não mostrar um snippet, mesmo que eles estejam vinculados ao post relacionado. Observação:os arquivos de posts que são usados pelo site são armazenados como arquivos JSON em uma pasta produção separada no bucket do Cloud Storage. O aplicativo do site usa o EditorJS para renderizar esses arquivos como HTML para visualização no site.

4. Para fazer uma pergunta complementar, digite Can you use dollar cost averaging with ETFs? (É possível usar o custo médio em dólares com ETFs?) na caixa de pesquisa e pressione Enter.

5. Verifique se os resultados da pesquisa incluem uma resposta à pergunta complementar, além de links relevantes para os posts.

Para verificar o objetivo, clique em Verificar meu progresso. O aplicativo do site é implantado no Cloud Run.

Tarefa 6: usar a IA generativa para editar o conteúdo do site

As ferramentas de IA generativa do Google podem ser usadas para criar e editar textos ou conteúdo dos sites. Nesta tarefa, como editor de conteúdo de um site, você vai usar essas ferramentas para atualizar o texto e as imagens do site usado neste laboratório.

Revisar o código de geração de imagens

O aplicativo do site usa a API Imagen na Vertex AI para gerar e atualizar imagens.

1. No editor do Cloud Shell, abra o arquivo de configuração config.toml.

2. Revise as propriedades de configuração na seção [imagen]. Esta seção define propriedades para o modelo na geração de imagens e legendas, além de algumas propriedades adicionais.

3. No editor do Cloud Shell, abra o arquivo routers/vertex_imagen.py.

   As diferentes funções de legenda e modificação de imagens e as rotas de API são definidas neste arquivo.

4. As funções são implementadas no arquivo utils/imagen.py. Abra o arquivo no editor do Cloud Shell.

5. Confira a função generate_image():

   Essa função usa a classe vertexai.preview.vision_models.ImageGenerationModel do pacote vertexai no SDK do Python.

   Essa função primeiro carrega o modelo de geração de imagens e depois gera uma imagem invocando a função generate_images() no modelo, passando o comando de texto e outros parâmetros.

Atualizar conteúdo da imagem

Vamos atualizar uma imagem em um dos posts no site.

1. No canto superior direito do site da Cymbal Investments, clique em Todos os blogs.

   Uma página com seis posts de blog é exibida no site.

   Observação: se os posts iniciais do blog estiverem selecionados por padrão, clique em qualquer lugar da página para desmarcar.

2. Clique no link para acessar o primeiro post: Unleashing the Techie Within: A Journey to FIRE.

   A página do post contém um cabeçalho, uma imagem e parágrafos de texto.

3. Para editar o conteúdo da página, clique em Edit () no canto inferior direito.

4. Passe o cursor sobre a imagem. Em seguida, à esquerda da imagem, clique em Click to tune ().

5. No menu Click to tune, selecione Generate.

   

6. Na legenda da imagem, em Prompt, digite An image of a retired man and woman sitting on a beach enjoying the sunset. Clique em Generate.

7. Role a tela até o topo da página e aguarde a geração da imagem.

   Uma nova imagem é gerada e enviada para o bucket de imagens do Cloud Storage. A página do post é atualizada com a nova imagem.

Tradução de conteúdo

É possível traduzir páginas da Web inteiras ou apenas partes do texto inline usando modelos de geração de texto. Nesta subtarefa, você vai traduzir o texto inline na página do blog do site.

1. No editor do Cloud Shell, abra o arquivo routers/vertex_llm.py.

   As diferentes funções de edição e tradução de páginas da Web, além das rotas de API, são definidas neste arquivo.

2. Role a tela até o final do arquivo-fonte e confira o código da função ai_translate_inline().

   Essa função cria um comando usando a propriedade de configuração ai_translate_inline_prompt, o texto selecionado pelo usuário e o idioma de destino especificado pelo usuário. Em seguida, ele invoca a função llm_generate_gemini() para gerar uma resposta do modelo.

   Este é o valor da propriedade de configuração ai_translate_inline_prompt do arquivo config.toml:

   Você é um escritor premiado. INSTRUÇÕES: 1: você recebe um texto como INPUT_TEXT 2: você também recebe um idioma de destino como TARGET_LANGUAGE. 3: você deve traduzir o INPUT_TEXT para o TARGET_LANGUAGE. 4: apenas a saída do texto traduzido. Não adicione nenhuma outra explicação. Não coloque a resposta entre \"\" (aspas duplas ou simples) INPUT_TEXT:

3. Para conferir a função llm_generate_gemini(), abra o arquivo utils/vertex_llm_utils.py.

   Essa função usa a classe vertexai.generative_models.GenerativeModel do pacote vertexai no SDK do Python.

   Essa função primeiro carrega o modelo gemini-1.5-pro e depois gera uma resposta chamando a função generate_content() no modelo, passando o comando de texto e outros parâmetros.

4. Verifique se você está no modo de edição da página do blog do seu site. Caso contrário, clique em Edit () no canto inferior direito.

5. Selecione qualquer parágrafo de texto e clique na ferramenta de tradução:

   

6. No campo de comando de idioma, digite French e clique em Send.

   Depois de alguns segundos, o texto do parágrafo é traduzido para o idioma especificado e substituído na página.

Atualizar o texto do site (conteúdo de texto)

Também é possível usar um modelo generativo para refinar o conteúdo de texto do site.

1. No arquivo routers/vertex_llm.py, verifique a função ai_refine_text().

   Essa função cria um comando usando a propriedade de configuração ai_refine_prompt, o texto selecionado pelo usuário no conteúdo do site e as instruções de entrada do usuário.

   Este é o valor da propriedade de configuração ai_refine_prompt do arquivo config.toml:

   Você é um escritor premiado. INSTRUÇÕES: 1: você recebe um texto como INPUT_TEXT 2: você também recebe um estilo ou tom ou instruções como REFINE_PROMPT. 3: você deve modificar ou refinar INPUT_TEXT no tom ou estilo de REFINE_PROMPT. 4: apenas forneça o texto refinado. Não adicione nenhuma outra explicação. Não imprima a resposta em \"\" (aspas duplas ou simples) TEXTO DE ENTRADA:

2. Verifique se você está no modo de edição da página do blog do seu site. Caso contrário, clique em Edit () no canto inferior direito.

3. Selecione qualquer parágrafo de texto e clique em Refine TextTool:

   

4. Para mudar o tom do texto selecionado para ele ficar mais formal e impactante, na caixa de estilo, digite formal impactful. Esse valor é adicionado ao prompt como a string REFINE_PROMPT antes de invocar o modelo.

5. Clique em Send.

   Depois de alguns segundos, uma resposta é gerada pelo modelo e exibida na página em uma caixa fechada abaixo do texto original.

6. Confira o texto do parágrafo atualizado e clique em Replace.

7. Para salvar as mudanças na página do blog, clique em Save na parte de cima da página.

8. Para conferir o valor final do comando, no menu de navegação () do console do Google Cloud, selecione Geração de registros > Análise de registros.

   Observação: se a opção Geração de registros não estiver listada no menu de navegação, clique em Ver todos os produtos. Na página Todos os produtos, role a tela até a seção de Observabilidade e clique em Geração de registros.

9. Para destacar as entradas de registro relevantes, na barra de menu de resultados, clique em Ações > Destacar nos resultados.

10. Para Destacar nos resultados, digite REFINE_PROMPT

    

Para verificar o objetivo, clique em Verificar meu progresso. Mudanças são feitas no conteúdo do site.

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ê:

• Criou e testou um app de pesquisa genérico da Vertex AI.
• Integrou o app Vertex AI para Pesquisa a um site.
• Usou a API Imagen para gerar e atualizar uma imagem no site.
• Traduziu e refinou um texto em uma página usando o TextGenerationModel da Vertex AI.
• Implantou e testou o aplicativo do site no Cloud Run.

Com esses recursos, você pode criar o processo para atualizar o conteúdo do seu site e salvar as alterações em um armazenamento externo, como o Cloud Storage, para revisão e publicação.

Próximas etapas/Saiba mais

• Vertex AI
• Gemini
• Adicionar um widget de pesquisa a uma página da Web
• Artifact Registry
• Cloud Run

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.