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 por IA, que usa modelos da Vertex AI para resumir documentos PDF que foram enviados ao Google Cloud Storage.

Depois, vamos usar o Gemini Code Assist para:

• Entender o código Python que alimenta a função do Cloud que faz o trabalho de extrair o texto do documento PDF, resumi-lo e gravar os resultados no BigQuery.
• Vamos usar a ajuda do Gemini Code Assist durante todo o processo para desenvolver novas funcionalidades. Vamos desenvolver um aplicativo da Web (aplicativo Python Flask) e executá-lo localmente para verificar nosso código.
• Também podemos analisar a implantação desse 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 por IA e acionar o fluxo do processo para entender como ela funciona.
• Em seguida, você vai usar o ambiente de desenvolvimento integrado do Cloud Shell para fazer o download do código da solução de início rápido e o Gemini Code Assist para entender o código.
• Você vai usar o ambiente de desenvolvimento integrado do Cloud Shell do Gemini Code Assist para gerar o código de uma nova funcionalidade.

O que você vai aprender…

• Como funciona a solução de início rápido para resumo por IA.
• Como usar o Gemini Code Assist em várias tarefas de desenvolvedor, como geração e preenchimento de código 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
• Gemini Code Assist 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á nos familiarizar com 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 nosso 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 no Cloud vai abrir no lado direito do console. Clique no botão "Ativar" como mostrado abaixo. Se o botão Ativar não aparecer, mas a interface do Chat não aparecer, é provável que você já tenha ativado o Gemini para Cloud no projeto, então siga direto para a próxima etapa.

3. Depois de ativá-lo, você pode fazer uma ou duas consultas para testar o Gemini para Cloud. Alguns exemplos de consultas são mostrados, mas é possível tentar algo como What is Cloud Run?

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

Ativar o Gemini Code Assist no ambiente de desenvolvimento integrado do Cloud Shell

No restante do codelab, usaremos o ambiente de desenvolvimento integrado do Cloud Shell, um ambiente de desenvolvimento totalmente gerenciado baseado em Code OSS. Precisamos ativar e configurar o Assistente de código no ambiente de desenvolvimento integrado do Cloud Shell. Siga estas etapas:

1. Acesse ide.cloud.google.com. Talvez demore um pouco para o IDE aparecer.
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 pela última vez o projeto correto do Google Cloud. Se você precisar ativar a API Cloud AI Companion, faça isso e prossiga.
4. Depois de selecionar seu projeto do Google Cloud, verifique se aparece na mensagem de status do Cloud Code na barra de status e se o Code Assist está ativado à direita, na barra de status, conforme mostrado abaixo:

O Gemini Code Assist está pronto para ser usado.

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

Opcional:se o Gemini não aparecer na barra de status na parte inferior direita, será necessário ativar o Gemini no Cloud Code. Antes disso, verifique se o Gemini está ativado no ambiente de desenvolvimento integrado. Para isso, acesse Cloud Code Extension → Configurações e insira o texto Gemini conforme mostrado abaixo. Confira se a caixa de seleção está marcada. Atualize seu ambiente de desenvolvimento integrado.Isso ativa o Gemini no Cloud Code, e o ícone do Gemini na barra de status vai aparecer no ambiente.

3. Implante a solução de início rápido de resumo por IA

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

• Ative o faturamento caso seu projeto não tenha esse recurso ativado.
• Selecione a região us-central1.
• Clique em "Implantar".
• Isso pode levar até 15 minutos.
• Você não precisa fazer alterações, mas fique à vontade para explorar a implantação da solução de início rápido clicando no botão EXPLORAR ESTA SOLUÇÃO na página de detalhes da implantação da solução.

4. Converse com o Gemini

Vamos começar aprendendo a conversar com o Gemini. O Gemini está disponível como um assistente de chat no ambiente de desenvolvimento integrado do Cloud Shell como parte da extensão do Cloud Code no VS Code. Para acessar, clique no botão Gemini na barra de navegação à esquerda. Procure o ícone do Gemini na barra de ferramentas de navegação à esquerda e clique nele.

O painel Chat: GeminiI aparece no ambiente de desenvolvimento integrado do Cloud Shell, e você pode conversar com o Gemini para receber ajuda sobre o Google Cloud.

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

What is Cloud Run? 

O Gemini vai responder com detalhes sobre o Cloud Run. Comandos são perguntas ou declarações que descrevem a ajuda de que você precisa e podem incluir o contexto do código 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 superior. Essa é a maneira de redefinir o contexto do histórico de chat do Code Assist. Observe também que essa interação por chat é contextual para os arquivos em que você está trabalhando no ambiente de desenvolvimento integrado.

5. Faça o download da função do Cloud da solução de início rápido 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 necessário concluir uma ou duas etapas.

ou

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

6. Revisar o projeto atual

Esta solução de início rápido é mostrada abaixo:

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 é fornecida no arquivo main.py.

Vamos clicar nesse arquivo. O ponto de entrada da função do Cloud é a função entrypoint, que finalmente invoca a função cloud_event_entrypoint, que extrai o texto do PDF e depois invoca 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 de código específico. Clique no Gemini Chat e forneça o seguinte comando: Explain this.

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

7. Executar uma amostra de execução

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

Tenha um PDF de amostra pronto para upload e para o qual você quer o resumo.

• Acesse o 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 amostra, use uma das amostras criadas. 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 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 é um processo manual passo a passo para fazer upload do PDF que queremos 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 nos permite selecionar e fazer upload do arquivo, que precisa ser resumido.
2. Após o upload, o arquivo precisa ser gravado no bucket <PROJECT_ID>_uploads para que o restante da funcionalidade funcione como está.

Para ajudar na Duet AI, vamos usar Python e o framework Flask para aplicativos da Web.

Vamos começar. Vamos supor que você ainda tenha o mesmo espaço de trabalho aberto no ambiente de desenvolvimento integrado do Cloud Shell.

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 o código da seguinte forma:

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 do host 0.0.0.0. Por isso , vamos pedir que o Gemini modifique a instrução app.run.

Digite 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 gerar index.html também. Dê o seguinte comando na janela do Gemini Chat:

Provide the index.html file

Ele deve 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. Digite o seguinte comando:

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

Ele deve fornecer uma resposta semelhante a esta:

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

Gostaríamos de aplicar alguma exceção no arquivo app.py caso o arquivo não possa ser salvo no bucket do Google Cloud Storage. Mantenha o arquivo app.py aberto e dê o comando a seguir 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 adicionará o processamento 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 exibir a mensagem de erro em index.html, precisamos modificá-la. Vamos pedir para o Gemini fazer isso usando o comando abaixo:

update the index.html to display the error message

Isso fornecerá um index.html atualizado, conforme 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>

Verifique se você está salvando as mudanças no arquivo app.py e index.html, respectivamente.

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

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 vai ficar assim (o ID do meu projeto é mostrado abaixo, mas o ideal é que ele seja aquele com que você está trabalhando e que deu 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 no ambiente de desenvolvimento integrado do Cloud Shell, conforme mostrado abaixo:

Digite Python: Create Environment e siga as etapas para criar um ambiente virtual usando (venv), depois 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 para mostrar a página index.html.

Faça upload de um arquivo na sua máquina local e ele será processado corretamente.

Para verificar o resumo, acesse o conjunto de dados e a tabela do BigQuery que vimos anteriormente no laboratório. Outra opção é conferir o bucket do Cloud Storage (&lt;PROJECT_ID&gt;_output).

10. (Opcional) Abrir análise detalhada: implantar no Cloud Run

• Implante o aplicativo no Cloud Run.
• Pergunte ao Gemini Code Assist com o seguinte comando (pode ser necessário tentar 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 análise detalhada: adicionar estilos de CSS

• Use o Gemini Code Assist e o assistente no editor para adicionar estilos CSS ao seu aplicativo e implantá-lo de novo quando terminar.
• Abra o arquivo index.html e forneça 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ê trabalhou com o Gemini Code Assist em um exemplo de projeto para entender como ele pode ajudar com a geração e o preenchimento de código e o resumo de código, além de ajudar a tirar dúvidas sobre o Google Cloud.

13. Documentos de referência

• Página inicial do Gemini Code Assistant
• Use o Gemini para assistência e desenvolvimento de IA – documentação
• Casos de uso do Gemini