Como usar o Gemini Code Assist para conhecer e melhorar a solução de início rápido para resumo por IA

1. Introdução

Neste codelab, vamos analisar uma solução de início rápido, o resumo de IA, que usa modelos da Vertex AI para resumir documentos em PDF enviados para o Google Cloud Storage.

Em seguida, vamos usar o Gemini Code Assist para:

• Entenda o código Python que alimenta a função do Cloud Functions, que extrai o texto do documento PDF, o resume e grava os resultados no BigQuery.
• Vamos usar o Gemini Code Assist durante todo o processo para ajudar a escrever novas funcionalidades. Vamos desenvolver um aplicativo da Web (Python Flask) e executá-lo localmente para verificar nosso código.
• Também é possível implantar esse aplicativo no Cloud Run e melhorar o design (estética) do aplicativo da Web usando o Material Design.

O que você vai fazer…

• Você vai implantar a solução de início rápido de resumo de IA e acionar o fluxo de processo para entender como ela funciona.
• Em seguida, você vai usar o Cloud Shell IDE para baixar o código da Solução de início rápido e o Gemini Code Assist para entender o código.
• Você vai usar o Gemini Code Assist no Cloud Shell IDE para gerar código de uma nova funcionalidade.

O que você vai aprender…

• Como funciona a Solução de início rápido de resumo com IA.
• Como usar o Gemini Code Assist para várias tarefas de desenvolvimento, como geração, conclusão e resumo de código.

O que é necessário…

• Navegador da Web Google Chrome
• Uma conta do Gmail
• Um projeto do Cloud com faturamento ativado
• O Gemini Code Assist está ativado para seu projeto do Cloud

Este laboratório é voltado para desenvolvedores com todos os níveis de conhecimento, inclusive iniciantes. O aplicativo de amostra está na linguagem Python, mas você não precisa conhecer esse tipo de programação para entender o que está acontecendo. Nosso foco será apresentar os recursos do Gemini Code Assist para desenvolvedores.

2. Configuração

Nesta seção, você vai encontrar tudo o que precisa fazer para começar o laboratório.

Ativar o Gemini para Cloud no projeto do Google Cloud

Agora vamos ativar o Gemini para Cloud no projeto do Google Cloud. Siga estas etapas:

1. Acesse https://console.cloud.google.com e confira se você selecionou o projeto do Google Cloud com que vai trabalhar neste laboratório. Clique no ícone "Abrir o Gemini" no canto superior direito.

2. A janela de chat do Gemini para Cloud vai abrir no lado direito do console. Clique no botão "Ativar" como mostrado abaixo. Se o botão Ativar não aparecer e, em vez disso, uma interface do chat for mostrada, é provável que você já tenha ativado o Gemini para Cloud no projeto e vá direto para a próxima etapa.

3. Depois da ativação, é possível testar o Gemini para Cloud com uma ou duas consultas. Alguns exemplos de consultas são mostrados, mas é possível tentar algo como What is Cloud Run?

O Gemini para Cloud vai responder à pergunta. Clique no ícone no canto superior direito para fechar a janela de chat do Gemini para Cloud.

Ativar o Gemini Code Assist no Cloud Shell IDE

Vamos usar o Cloud Shell IDE, um ambiente de desenvolvimento totalmente gerenciado baseado no Code OSS, no restante do codelab. É necessário ativar e configurar o Code Assist no Cloud Shell IDE. Siga as etapas abaixo:

1. Acesse ide.cloud.google.com. Pode levar algum tempo para o ambiente de desenvolvimento integrado aparecer. Aguarde.
2. Clique no botão Cloud Code – Fazer login na barra de status inferior, conforme mostrado. Autorize o plug-in conforme instruído. Se a barra de status mostrar Cloud Code – sem projeto, clique na opção e escolha o projeto do Google Cloud com que você quer trabalhar na lista.

3. Clique no botão Gemini no canto inferior direito, conforme mostrado, e selecione o projeto correto do Google Cloud pela última vez. Se for necessário ativar a API IA do Google Cloud Companion, faça isso e continue.
4. Depois de selecionar o projeto na nuvem do Google Cloud, confira se a mensagem de status do Cloud Code aparece na barra de status. Analise também se o Code Assist está ativado à direita, na barra de status, conforme mostrado abaixo:

O Gemini Code Assist está pronto para uso.

O Gemini Code Assist também está disponível em ambientes de desenvolvimento integrado locais, como o Visual Studio Code ou o JetBrains IntelliJ. Ele também está disponível no Google Cloud Workstations. Este codelab se concentra no Cloud Shell IDE como uma maneira de fazer com que todos usem o mesmo ambiente, mas fique à vontade para testar sua configuração favorita e conferir este link para mais detalhes.

Opcional:se o Gemini não aparecer na barra de status na parte inferior direita, ative o Gemini no Cloud Code. No entanto, antes de tudo, confira se o Gemini está ativado no ambiente de desenvolvimento integrado. Para isso, acesse Extensão do Cloud Code → Configurações e insira o texto Gemini, conforme mostrado abaixo. Confira se a caixa de seleção está marcada. Atualize o ambiente de desenvolvimento integrado.Assim você ativa o Gemini no Cloud Code e o ícone do Gemini na barra de status aparece lá.

3. Implantar a Solução de início rápido de resumo de IA

1. Acesse a solução de resumo de documentos de IA generativa
2. Clique em "Implantar".

• Se o faturamento não estiver ativado no seu projeto, faça isso.
• Selecione us-central1 como a região.
• Clique em "Implantar".
• Isso pode levar até 15 minutos.
• Não é preciso fazer nenhuma mudança, mas fique à vontade para conferir a implantação da Solução de início rápido clicando no botão CONHEÇA ESTA SOLUÇÃO na página de detalhes da implantação.

4. Converse com o Gemini

Primeiro você vai aprender a conversar com o Gemini. O Gemini está disponível como assistente de chat no Cloud Shell IDE, inserido na extensão do Cloud Code no VS Code. Para acessar, clique no botão do Gemini na barra de navegação esquerda. Procure e clique no ícone do Gemini na barra de ferramentas de navegação à esquerda.

Assim você abre o painel "Chat: GeminiI" no Cloud Shell IDE e pode conversar com o Gemini para receber ajuda com o Google Cloud.

Vamos usar o painel de conversa no Gemini para inserir um comando e conferir a resposta. Insira o seguinte comando:

What is Cloud Run? 

O Gemini vai responder com informações sobre o Cloud Run. Comandos são perguntas ou declarações que descrevem a ajuda de que você precisa Eles podem incluir o contexto de um código já criado, que o Google Cloud analisa para dar respostas mais úteis ou completas. Para mais informações sobre como escrever comandos para gerar boas respostas, consulte Escrever comandos melhores para o Gemini no Google Cloud.

Teste estes exemplos de comandos ou um próprio para fazer perguntas sobre o Google Cloud:

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

Observe o ícone de lixeira na parte de cima. É assim que você redefine o contexto do histórico de conversas do Code Assist. Essa conversa por chat é contextual aos arquivos em que você está trabalhando no ambiente de desenvolvimento integrado.

5. Baixar a solução Jump Start do Cloud Functions no Cloud Code

Supondo que você esteja no editor do Cloud Shell, siga estas etapas:

• Clique em Cloud Code.
• Observação: dependendo do tamanho da tela, pode ser preciso realizar uma ou duas etapas.

ou

• Clique em "Cloud Functions".
• Se solicitado, faça login ou autorize sua conta.
• Clique na função de webhook.
• Clique no ícone "Baixar para um novo espaço de trabalho" .
• 
• Use webhook-1 como o nome do espaço de trabalho (deve ser o padrão) ou qualquer outro nome e clique em OK.
• Isso vai abrir o código no Cloud Shell IDE.

6. Analisar o projeto atual

Confira abaixo esta solução de início rápido:

Revise o fluxo da funcionalidade "Fazer upload de PDF" para o Cloud Storage. A Função do Cloud que será invocada se o arquivo PDF for enviado está no arquivo main.py.

Vamos clicar nesse arquivo. O ponto de entrada da função do Cloud é a função entrypoint, que invoca a função cloud_event_entrypoint, que extrai o texto do PDF, e a função summarization_entrypoint, que usa os modelos da Vertex AI para resumir e gravar os resultados no GCS e no BigQuery, respectivamente.

Destaque todo o código no arquivo main.py ou qualquer snippet específico. Clique no Gemini Chat e dê o seguinte comando: Explain this.

Isso vai dar uma explicação para o código.

7. Executar um teste de amostra

De acordo com o diagrama de arquitetura, vamos fazer upload de um arquivo no bucket <PROJECT_ID>_uploads para que a função do Cloud seja invocada.

Verifique se você tem um PDF de amostra pronto para fazer upload e que você quer resumir.

• Acesse Google Cloud Storage no console do Cloud.
• Acesse o bucket <PROJECT_ID>_uploads. Clique no link ENVIAR ARQUIVOS e faça upload de um PDF de amostra.

Se você não tiver um arquivo PDF de exemplo, use um dos exemplos que criamos. No Cloud Shell, execute o seguinte comando:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

Depois que o upload do arquivo for concluído, a função do Cloud webhook será invocada e vai resumir o texto encontrado no documento. A saída será gravada em um conjunto de dados do BigQuery chamado summary_dataset e na tabela summary_table.

Consulte a tabela para conferir os resultados do resumo.

8. Criar um cliente de aplicativo da Web para o aplicativo

O processo acima é manual e detalhado para fazer upload do PDF que você quer resumir. Que tal criar um front-end da Web para o aplicativo?

Os requisitos para o front-end da Web são simples:

1. Um formulário HTML básico que permite selecionar e fazer upload do arquivo a ser resumido.
2. O arquivo, após o upload, precisa ser gravado no bucket <PROJECT_ID>_uploads para que o restante da funcionalidade funcione no estado em que se encontra.

Vamos usar o Python e o framework Flask para aplicativos da Web e criar isso com a ajuda da Duet AI.

Vamos começar. Vamos presumir que você ainda tem o mesmo espaço de trabalho aberto no Cloud Shell IDE.

Feche todos os arquivos e dê o seguinte comando na janela do Gemini Chat:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

O ideal é que isso produza um código como este:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Salve o código acima como app.py na raiz do espaço de trabalho do ambiente de desenvolvimento integrado.

Queremos que o aplicativo seja executado na porta 8080 e use o endereço de host 0.0.0.0. Por isso , vamos pedir ao Gemini para modificar a instrução app.run.

Dê o seguinte comando:

Modify the app.py to run on port 8080 and host address 0.0.0.0

O código vai ficar assim:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Em seguida, queremos que o index.html também seja gerado. Dê o seguinte comando na janela do Gemini Chat:

Provide the index.html file

Ele vai fornecer o código abaixo para index.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Podemos pedir ao Gemini para informar onde salvar o arquivo index.html. Dê o seguinte comando:

Since this is using the render_template framework, where should this file be saved?

A resposta será semelhante a esta:

Crie uma pasta chamada "templates" na pasta raiz e salve o arquivo index.html nela.

Gostaríamos de ter algum tratamento de exceção no arquivo app.py caso o arquivo não possa ser salvo no bucket do Cloud Storage. Mantenha o arquivo app.py aberto e dê o seguinte comando na janela do Gemini Chat.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

Isso vai adicionar o tratamento de exceções, conforme mostrado abaixo:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Como precisamos mostrar a mensagem de erro em index.html, também precisamos modificar isso. Vamos pedir para o Gemini fazer isso com o comando abaixo:

update the index.html to display the error message

Isso vai gerar um index.html atualizado, como mostrado abaixo:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Em cada uma das etapas acima, salve as mudanças nos arquivos app.py e index.html, respectivamente.

O app.py não tem o nome correto do bucket. Por isso, podemos dar essas informações ao Gemini e pedir que ele faça as mudanças. Além disso, precisamos fornecer o ID do projeto da instância storage.Client(). Por isso, dê os seguintes comandos (substitua <PROJECT_ID> pelo ID do projeto do Google Cloud) na janela do Gemini Chat e incorpore as mudanças:

Comando 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

Comando 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

O arquivo app.py final é assim (meu ID do projeto é mostrado abaixo, mas o ideal é que seja aquele com que você está trabalhando e que você informou no comando acima):

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. Executar o aplicativo da Web localmente

Crie um ambiente Python com as dependências definidas no arquivo requirements.txt. Acesse a paleta de comandos na IDE do Cloud Shell, conforme mostrado abaixo:

Digite Python: Create Environment e siga as etapas para criar um ambiente virtual usando (venv), o interpretador Python 3.x e o arquivo requirements.txt. Isso vai criar o ambiente necessário.

Inicie o terminal agora, conforme mostrado abaixo:

Execute o seguinte comando no terminal:

python app.py

O app Flask será iniciado, e você verá algo parecido com isto:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

Acesse o URL http://127.0.0.1:8080, que vai mostrar a página index.html.

Faça upload de um arquivo da sua máquina local. Ele será processado.

Para verificar o resumo, acesse o conjunto de dados e a tabela do BigQuery que vimos anteriormente no laboratório. Como alternativa, confira o bucket do Cloud Storage (<PROJECT_ID>_output).

10. (Opcional) Abrir a análise detalhada: implantação no Cloud Run

• É possível implantar o aplicativo no Cloud Run.
• Peça ao Gemini Code Assist com o seguinte comando (talvez seja necessário testar algumas variações do comando acima):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (Opcional) Abrir a análise detalhada: adicionar estilos CSS

• Use o Gemini Code Assist e o assistente no editor para adicionar estilos CSS e implantar seu aplicativo de novo quando terminar.
• Abra o arquivo index.html e insira o seguinte comando no Gemini Chat: Can you apply material design styles to this index.html?
• Confira o código e veja se ele funciona.

12. Parabéns!

Parabéns! Você usou o Gemini Code Assist em um projeto de exemplo para entender como a ferramenta pode ajudar na geração, na conclusão e no resumo de código, bem como para encontrar respostas a perguntas sobre o Google Cloud.

13. Documentos de referência

• Página inicial do Gemini Code Assist
• Usar o Gemini para assistência e desenvolvimento de IA: documentação
• Casos de uso do Gemini