Anterior

Avançar

Exercício – Chamar o serviço de Tradução

Concluído

Com o serviço de Tradução de back-end criado no Azure e as variáveis armazenadas prontas para uso, vamos voltar nossa atenção para a adição da lógica e do modelo necessários para o aplicativo traduzir o texto. Passaremos pelas seguintes etapas:

1. Adicionar código para chamar o serviço
2. Criar o modelo para exibir resultados
3. Testar o aplicativo

Adicionar código para chamar o serviço

app.py contém a lógica para o aplicativo. Adicionaremos algumas importações necessárias para as bibliotecas que usaremos, seguidas pela nova rota para responder ao usuário.

1. Na parte superior do app.py, adicione as seguintes linhas de código:

   import requests, os, uuid, json
   from dotenv import load_dotenv
   load_dotenv()
   

A linha superior importará bibliotecas que usaremos mais tarde, ao fazer a chamada para o serviço de Tradução. Também importaremos load_dotenv de dotenv e executaremos a função, que carregará os valores de .env.

2. Na parte inferior de app.py, adicione as seguintes linhas de código a fim de criar a rota e a lógica para traduzir o texto:

   @app.route('/', methods=['POST'])
   def index_post():
       # Read the values from the form
       original_text = request.form['text']
       target_language = request.form['language']
   
       # Load the values from .env
       key = os.environ['KEY']
       endpoint = os.environ['ENDPOINT']
       location = os.environ['LOCATION']
   
       # Indicate that we want to translate and the API version (3.0) and the target language
       path = '/translate?api-version=3.0'
       # Add the target language parameter
       target_language_parameter = '&to=' + target_language
       # Create the full URL
       constructed_url = endpoint + path + target_language_parameter
   
       # Set up the header information, which includes our subscription key
       headers = {
           'Ocp-Apim-Subscription-Key': key,
           'Ocp-Apim-Subscription-Region': location,
           'Content-type': 'application/json',
           'X-ClientTraceId': str(uuid.uuid4())
       }
   
       # Create the body of the request with the text to be translated
       body = [{ 'text': original_text }]
   
       # Make the call using post
       translator_request = requests.post(constructed_url, headers=headers, json=body)
       # Retrieve the JSON response
       translator_response = translator_request.json()
       # Retrieve the translation
       translated_text = translator_response[0]['translations'][0]['text']
   
       # Call render template, passing the translated text,
       # original text, and target language to the template
       return render_template(
           'results.html',
           translated_text=translated_text,
           original_text=original_text,
           target_language=target_language
       )
   

O código é comentado para descrever as etapas que estão sendo realizadas. De forma geral, o código faz o seguinte:

1. Lê o texto que o usuário inseriu e o idioma selecionado no formulário
2. Lê as variáveis ambientais que criamos anteriormente no arquivo .env
3. Cria o caminho necessário para chamar o serviço de Tradução, que inclui o idioma de destino (o idioma de origem é detectado automaticamente)
4. Cria as informações de cabeçalho, que incluem a chave para o serviço de Tradução, o local do serviço e uma ID arbitrária para a tradução
5. Cria o corpo da solicitação, que inclui o texto que queremos traduzir
6. Chama post em requests para chamar o serviço de Tradução
7. Recupera a resposta JSON do servidor, que inclui o texto traduzido
8. Recupera o texto traduzido (confira a nota a seguir)
9. Chama render_template para exibir a página de resposta

Observação

Ao chamar o serviço de Tradução, será possível ter várias instruções traduzidas em diversos idiomas em uma única chamada. Como resultado, o JSON retornado pelo serviço contém muitas informações, das quais precisamos apenas de uma pequena parte. Sendo assim, precisamos percorrer alguns níveis para obter o texto traduzido.

Especificamente, precisamos ler o primeiro resultado, depois passar para a coleção de translations, a primeira tradução e para text. Isso é feito pela chamada: translator_response[0]['translations'][0]['text']

[
  {
    "detectedLanguage": {
      "language": "en",
      "score": 1.0
    },
    "translations": [
      {
        "text": "これはテストです",
        "to": "ja"
      }
    ]
  }
]

Criar o modelo para exibir resultados

Vamos criar o modelo HTML para a página de resultados.

1. Crie um arquivo em templates selecionando templates na ferramenta Explorar no Visual Studio Code. Selecione Novo arquivo

2. Nomeie o arquivo como results.html

3. Adicione o seguinte código HTML a results.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
           integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
       <title>Result</title>
   </head>
   <body>
       <div class="container">
           <h2>Results</h2>
           <div>
               <strong>Original text:</strong> {{ original_text }}
           </div>
           <div>
               <strong>Translated text:</strong> {{ translated_text }}
           </div>
           <div>
               <strong>Target language code:</strong> {{ target_language }}
           </div>
           <div>
               <a href="{{ url_for('index') }}">Try another one!</a>
           </div>
       </div>
   </body>
   </html>
   

Você observará que acessamos original_text, translated_text e target_language, que passamos como parâmetros nomeados em render_template usando {{ }}. Essa operação pede para o Flask renderizar o conteúdo como texto sem formatação. Também estamos usando url_for('index') para criar um link de volta para a página padrão. Embora possamos, tecnicamente, digitar o caminho para a página original, usar url_for diz para o Flask ler o caminho da função com o nome que fornecemos (neste caso, index). Se reorganizarmos o site, a URL gerada para o link será sempre válida.

Testar a página

Retorne ao terminal integrado no Visual Studio Code (ou reabra-o com Ctrl-` ou Cmd-` em um Mac). Se o site estiver em execução no momento, precisaremos parar e reiniciar para que o aplicativo leia as variáveis ambientais.

1. Use Ctrl-C para interromper o aplicativo Flask

2. Execute o comando flask run para reiniciar o serviço

3. Navegue até http://localhost:5000 para testar o aplicativo

4. Insira o texto na área de texto, escolha um idioma e selecione Traduzir

   

5. Você verá os resultados.

   

Parabéns

Você criou com êxito um site que usa o serviço de Tradução para implementar traduções! Como a linguagem e a comunicação dependem do contexto, o que nem sempre é claro para um computador, você pode observar que os resultados não são perfeitos. No entanto, normalmente eles são corretos ou bons o bastante para obter uma comunicação eficaz, o que é a meta!

O código que fornecemos aqui pode ser incorporado a qualquer aplicativo que você desejar. Você pode continuar a compilar o site que criamos ou até mesmo implantá-lo nos Serviços de Aplicativo do Azure.

Verificar seu conhecimento

1.

Qual é o nome do cabeçalho HTTP que carrega chaves de API em chamadas para os serviços de IA do Azure?

Ocp-Apim-Cognitive-Key

Ocp-Apim-Subscription-Key

Ocp-Apim-Auth-Key

É necessário responder a todas as perguntas antes de verificar o trabalho.

Continuar