Como usar a Duet AI para analisar e aprimorar um aplicativo atual

1. Visão geral

Este codelab vai demonstrar como usar a Duet AI para criar um aplicativo cliente com base em um back-end de API.

Conteúdo do laboratório

O objetivo deste laboratório é mostrar o uso da Duet AI com um aplicativo atual. Você vai aprender a:

• Implantar a Solução de início rápido para processamento de imagens de IA/ML
• Usar a Duet AI para conhecer o aplicativo de API
• Criar um cliente para o aplicativo de API com a Duet AI

Configuração: criar um novo projeto

Dependendo das políticas da sua organização, talvez você não possa implantar essa solução corretamente.

Recomendação: use uma conta com permissões totais (como uma pessoal) em vez de uma conta corporativa ou escolar.

Observação: se você criou recentemente um projeto com permissões totais e já tem a API Duet AI ativada, continue usando ele e pule esta etapa. Por exemplo, se você acabou de concluir outro codelab da Duet AI, pode ignorar isso.

1. Acesse o console do Google Cloud.
2. Clique no menu suspenso do projeto atual.
3. Clique em Novo projeto.
4. Dê um nome ao projeto e clique em CRIAR.
   • Recomendação: use um nome de projeto exclusivo para que Project name e Project ID sejam iguais.

2. Implantar a Solução de início rápido

As Soluções de início rápido são modelos de solução pré-criados do Google Cloud. Este laboratório usa uma Solução de início rápido para demonstrar como a Duet AI pode ajudar a aprimorar um aplicativo atual.

1. Acesse a página de detalhes da Solução de início rápido para processamento de imagens de IA/ML.
   • Clique no menu de navegação.
   • No submenu Produtos e soluções, clique em Soluções de início rápido.
   • Clique em Processamento de imagens de IA/ML no Cloud Functions.
2. Clique em IMPLANTAR.
   • Ative o faturamento caso seu projeto não esteja com essa opção ativada.
   • Confirme o nome do projeto e clique em CONTINUAR.
   • Selecione us-central1 (Iowa) como a região.
   • Se outra entrada for solicitada, aceite os valores padrã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.

Solução de problemas

1. Problema: você recebe um erro que diz Partial deployment.?
   • Solução: infelizmente, você deve excluir a implantação e começar de novo. Procure um botão com a mensagem EXCLUIR IMPLANTAÇÃO. Clique nele e reimplante a Solução de início rápido.

3. Ativar Duet AI

Configurar o ambiente de edição de código e ativar a Duet AI

1. Acesse o editor do Cloud Shell.
   • Volte para o console do Google Cloud.
   • Digite Cloud Shell Editor na barra de pesquisa e clique em Editor do Cloud Shell no menu suspenso.
   • Clique em Conheça o novo Editor se você estiver usando a versão legada.
     • Observação: se não aparecer o botão Conheça o novo Editor, é provável que ele já esteja em uso. A versão legada vai funcionar, mas as visualizações vão ser um pouco diferentes.
   • Clique no ícone "Abrir em uma nova janela".
2. Se solicitado, faça login ou autorize sua conta.
   • Dependendo das suas configurações, talvez você precise autorizar sua conta várias vezes durante este laboratório. Sempre que for solicitado, selecione "Autorizar".
3. Clique no botão Cloud Code – Fazer login na barra de status inferior, conforme mostrado. Autorize o plug-in seguindo as instruções.
4. Se solicitado, clique em Selecionar um projeto do Google Cloud e escolha o projeto que você está usando.
5. Ative a Duet AI.
   • Clique em "Cloud Code".
     • Observação: dependendo do tamanho da tela, pode ser preciso realizar uma ou duas etapas.
   • Clique em Mudar configurações na seção AJUDA E FEEDBACK.
   • Tipo Duet AI: Enable
   • Marque a caixa de seleção, se ainda não estiver selecionada.
   • Carregue novamente o ambiente de desenvolvimento integrado.
   • Isso ativa a Duet AI no Cloud Code, e a barra de status da Duet AI aparece no seu ambiente de desenvolvimento integrado.
6. Clique no botão Duet AI no canto inferior direito, conforme mostrado, e selecione o projeto correto do Google Cloud.
   • Se você receber um erro dizendo Duet AI has not been enabled for your selected project, clique em Ativar API Duet AI.
7. Confirme se o projeto correto do Google Cloud aparece à esquerda (o nome do seu projeto) e a Duet AI ativada à direita na barra de status, conforme mostrado abaixo:

4. Baixar o código do Cloud Functions

Baixe o código e use a Duet AI para saber mais sobre as Soluções de início rápido e o código que você implantou.

1. Se você saiu da página, clique em Cloud Code.
2. Clique em Cloud Functions.
   • Se houver um botão Selecionar um projeto, clique nele e selecione seu projeto de trabalho.
   • Clique na função annotate-http.
   • Clique no ícone Baixar para um novo espaço de trabalho.
3. Use annotate-http-1 como o nome do espaço de trabalho (deve ser o padrão) e clique em OK.
4. Abra o arquivo main.py.
   • Clique no ícone do explorador .
   • Clique no arquivo main.py para abrir.
5. Clique no ícone de conversa da Duet AI.
   • Observação: dependendo do tamanho da tela, pode ser preciso realizar uma ou duas etapas.
6. Tente fazer uma pergunta à Duet AI. Insira um comando como:
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

Como redefinir a conversa da Duet AI

Os comandos afetam as conversas futuras. Por exemplo, se você cometer um erro de digitação no ID do projeto ou na região, isso vai influenciar os próximos comandos e respostas, o que pode prejudicar sua experiência. Se você digitou algo errado ou quer limpar o histórico por outro motivo, use o ícone de lixeira para redefinir a conversa.

5. Como chamar o endpoint da função do Cloud

Analise o código e chame o endpoint que você implantou na Solução de início rápido.

1. Insira o comando:
   • IMPORTANTE: substitua my-project-with-duet no comando a seguir pelo ID do seu projeto.
   • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
   • Você vai receber uma resposta com um comando curl assim:

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

     .
   • Copie esse comando curl para usar na próxima etapa.
2. Teste o comando em um novo terminal.
   • Clique no menu de navegação.
   • Clique em Terminal.
   • Clique em Novo Terminal.
   • Cole o comando curl da etapa anterior no terminal e pressione Enter para executar o comando.
   • Você vai receber uma resposta assim:

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

     .
3. (Opcional) Faça isso com outra imagem pública da Internet ao enviar à Duet AI um comando assim:
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Solução de problemas

Observação sobre não determinismo: a Duet AI e outros produtos com modelos de linguagem grandes (LLMs) não são deterministas. Ou seja, com a mesma entrada, você pode receber resultados diferentes. Mesmo que você faça tudo perfeitamente, é possível que os comandos não funcionem. Estas etapas de solução de problemas ajudam nisso.

O comando curl gerado vai ficar assim:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

A Duet AI está usando o TEST_IMAGE no arquivo main.py, que é uma imagem da Torre Eiffel.

Se o comando curl não estiver funcionando para você, confira o seguinte:

1. Problema: o endpoint do URL inclui .a.run.app?
   • Solução: talvez a Duet AI considere que você esteja implantando no Cloud Run. Substitua my-project-with-duet pelo ID do projeto em https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate para acessar o endpoint correto do Cloud Functions e use isso no comando curl.
2. Problema: o endpoint do URL inclui my-project-with-duet?
   • Solução: substitua my-project-with-duet pelo ID do projeto.
3. Problema: o endpoint do URL não tem us-central1?
   • Solução: verifique se o URL começa com us-central1, como: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate, com o ID do projeto.
4. Problema: dependendo do comando usado, às vezes o endpoint gerado vai ser parecido com cloudfunctions.net/annotate-http ou cloudfunctions.net/annotate. O endpoint do URL não tem /annotate-http/annotate no final?
   • Solução: verifique se o endpoint do URL termina com o caminho completo do aplicativo da API cloudfunctions.net/annotate-http/annotate.
5. Problema: a solicitação cURL funciona, mas não recebe muitas informações de volta. Ela inclui recursos?
   • Solução: esse não é um grande problema. Se você continuar sem mudar nada, o restante do laboratório ainda vai funcionar. Para receber mais informações, peça para a Duet AI adicionar recursos à solicitação cURL.
6. Problema: as respostas parecem incorretas ou não têm contexto específico para o código. Você está usando a conversa da Duet AI no editor do Cloud Shell?
   • Solução: tente abrir o arquivo main.py e destacar o código relacionado ao comando enquanto usa a conversa da Duet AI no editor do Cloud Shell. O assistente da Duet AI no Google Cloud tem contextos diferentes, o que vai levar a respostas diferentes.
7. Problema: a resposta do comando ainda não está correta.
   • Solução: teste um comando diferente para dar à Duet AI ainda mais orientações sobre o que você quer que ela produza. Substitua my-project-with-duet pelo ID do projeto. Por exemplo:

     Give me the curl command for:
     
     1- Cloud Function running in us-central1 and project my-project-with-duet
     2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
     3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
     

     .
8. Problema: mesmo depois de todas essas etapas de solução de problemas, ainda não está funcionando.
   • Solução: devido à natureza não determinista dos LLMs, talvez a resposta gerada pela Duet AI não funcione. Se isso acontecer, copie o comando curl de exemplo acima e tente executar no terminal. Substitua my-project-with-duet pelo ID do projeto.

6. Criar um cliente de aplicativo da Web para a API

Use a Duet AI para gerar um arquivo index.html que chama o endpoint da função do Cloud da Solução de início rápido. Em seguida, implante o arquivo index.html no Firebase Hosting para ver o código em ação.

1. Gere o código do lado do cliente.
   • Na caixa de conversa da Duet AI, digite o seguinte comando:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
   • Copie o arquivo index.html gerado na resposta.
     • OBSERVAÇÃO: você vai precisar desse código depois, então salve em algum lugar para não perder.
   • Feche main.py.
2. Crie um novo diretório frontend.
   • Pergunte à Duet AI algo como:
     • What are the console commands to create and navigate to a new frontend directory?
   • Você vai ver resultados como mkdir frontend e cd frontend.
   • Use o terminal do Cloud Shell para confirmar que você ainda está no diretório annotate-http-1 e execute estes comandos:
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. Confirme no terminal do Cloud Shell se você fez login no projeto correto.
   • Pergunte à Duet AI algo como:
     • What is the gcloud command to set my project?
   • Você vai ver um resultado como gcloud config set project my-project-with-duet
     • Confirme se o ID do projeto está correto e execute o comando no terminal do Cloud Shell.
4. Ative o Firebase.
   • Em uma nova guia (deixe o editor do Cloud Shell aberto), acesse https://console.firebase.google.com/
   • Clique em Adicionar projeto.
   • Digite o ID do projeto e aguarde até que ele apareça no menu suspenso.
   • Clique no ID do projeto.
   • Clique em Continuar
   • Clique em Confirmar plano.
   • Clique em Continuar
   • Desmarque a opção Ativar o Google Analytics neste projeto
     .
     • O Firebase recomenda o uso do Google Analytics, mas ele não vai ser usado nesse aplicativo.
   • Clique em Continuar
   • Feche a guia e volte ao editor do Cloud Shell.
   • Observação: essas etapas só são necessárias para usuários que nunca usaram o Firebase, permitindo que todos sigam o mesmo caminho. Se você fizer isso novamente no futuro, pule esta etapa.
5. Faça login no Firebase no Cloud Shell.
   • No terminal do editor do Cloud Shell, execute o comando firebase login --no-localhost.
   • Navegue até o URL fornecido.
     • Clique em Sim, acabei de executar este comando.
     • Clique em Sim, este é meu ID de sessão.
     • Clique em Copiar.
   • Volte ao terminal do editor do Cloud Shell.
   • Cole o valor copiado no terminal onde diz: Enter authorization code:.
   • Pressione Enter.
6. Implante um novo site no Firebase Hosting.
   • Inicialize um novo projeto do Firebase.
     • Pergunte à Duet AI algo como:
       • What are the commands to initialize and deploy a new firebase application?
     • Você vai ver resultados como firebase init e firebase deploy com instruções.
     • Como a Duet AI pode sugerir várias maneiras de fazer isso dependendo das suas preferências, aqui está uma recomendação específica:
       • firebase init
         • Pressione a seta para baixo até Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
           • Pressione a barra Space.
           • Pressione Enter.
         • Pressione a seta para baixo até Use an existing project.
           • Pressione Enter.
         • Se aparecer uma lista de projetos, pressione a seta para baixo até o que você está usando hoje.
           • Pressione Enter.
         • Se for exibida esta mensagem: Please input the ID of the Google Cloud Project you would like to add Firebase:
           • Digite o ID do seu projeto.
           • Pressione Enter.
         • Para todos os outros comandos, pressione Enter.
       • firebase deploy
7. Implante seu aplicativo novamente com uma chamada para o endpoint da API Cloud Functions.
   • Os comandos anteriores precisam criar um diretório public com um arquivo index.html dentro do diretório frontend já criado. É no arquivo ~/annotate-http-1/frontend/public/index.html que você vai fazer as próximas mudanças.
   • Abra o arquivo index.html.
     • Clique no ícone do explorador.
     • Clique na pasta frontend.
     • Clique na pasta public.
     • Clique no arquivo index.html.
   • Esvazie o arquivo index.html atual.
   • Cole o código que você copiou anteriormente no arquivo index.html.
   • Execute firebase deploy para implantar o novo aplicativo.
   • Acesse o URL do Firebase Hosting para ver se ele funciona.
     • Observação: provavelmente vai ser necessário forçar a atualização do site para ver as atualizações.

Solução de problemas

O arquivo index.html vai ficar assim:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Se o site não estiver funcionando, confira o seguinte:

1. Problema: 404 (não encontrado). O URL usado no método fetch inclui my-project-with-duet?
   • Solução: substitua my-project-with-duet pelo ID do projeto.
2. Problema: 404 (não encontrado). O URL usado no método fetch não tem o URL completo?
   • Solução: inclua o URL completo no método fetch. Deve ficar assim: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate.
3. Problema: a resposta do comando ainda não está correta.
   • Solução: teste um comando diferente para dar à Duet AI ainda mais orientações sobre o que você quer que ela produza. Substitua my-project-with-duet pelo ID do projeto. Exemplo:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
4. Problema: seu site foi implantado, mas não está funcionando?
   • Solução: devido à natureza não determinista dos LLMs, talvez a resposta gerada pela Duet AI não funcione. Se isso acontecer, copie o exemplo index.html acima e tente reimplantar com firebase deploy. Substitua my-project-with-duet pelo ID do projeto.

7. (Opcional) Abrir a análise detalhada

1. Use a Duet AI e o assistente no editor para adicionar estilos CSS e implantar seu aplicativo de novo quando terminar. Se precisar de inspiração, aqui está um exemplo de comando:
   • Make this index.html file use material design.
2. Tente também o seguinte:
   • O site gerado precisa funcionar com qualquer imagem http pública. Trabalhe com a Duet AI para exibir a imagem na página.

8. (Opcional) Excluir o projeto

Se quiser evitar cobranças pelos recursos criados hoje, pergunte à Duet AI como fazer isso.

1. Insira o comando:
   • How can I delete my project?
   • Você vai ver um resultado como gcloud projects delete my-project-with-duet.
   • IMPORTANTE: substitua my-project-with-duet no comando anterior pelo seu ID do projeto.
2. Execute o comando gcloud projects delete para remover todos os recursos que você criou hoje.