Exercício – Chamar o Serviço de tradução

10 minutos

Com o Serviço de tradução do back-end criado no Azure e com as variáveis armazenadas prontas a utilizar, vamos concentrar-nos em adicionar a lógica e o modelo necessários à nossa aplicação, para a tradução do texto. Vamos executar os seguintes passos:

Adicionar código para chamar o serviço
Criar o modelo para apresentar resultados
Testar a nossa aplicação

Adicionar código para chamar o serviço

O app.py contém a lógica da nossa aplicação. Vamos adicionar algumas importações necessárias às bibliotecas que vamos utilizar, seguidas da nova rota para dar resposta ao utilizador.

Na parte superior do ficheiro 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á as bibliotecas que vamos utilizar posteriormente, quando for feita a chamada para o Serviço de tradução. Também vamos importar load_dotenv de dotenv e executar a função, o que permitirá carregar os valores de .env.

Na parte inferior do app.py, adicione as seguintes linhas de código para 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 os passos que estão a ser executados. Num nível elevado, o código fará o seguinte:

Lê o texto que o utilizador introduziu e o idioma que selecionou no formulário
Lê as variáveis ambientais que criámos anteriormente no nosso ficheiro .env
Cria o caminho necessário para chamar o Serviço de tradução, que inclui o idioma de destino (o idioma de origem é detetado automaticamente)
Cria as informações de cabeçalho, que incluem a chave do Serviço de tradução, a localização do serviço e um ID arbitrário para a tradução
Cria o corpo do pedido, que inclui o texto que queremos traduzir
Chama post em requests para chamar o Serviço de tradução
Recupera a resposta JSON do servidor, que inclui o texto traduzido
Recupera o texto traduzido (veja a nota seguinte)
Chama render_template para apresentar a página de resposta

Nota

Ao chamar o Serviço de tradução, é possível ter várias instruções traduzidas em vários idiomas numa única chamada. Como resultado de tal, o JSON devolvido pelo serviço contém muitas informações, das quais precisamos apenas de uma pequena parte. Assim, precisamos de recuar um pouco para obter o texto traduzido.

Especificamente, devemos ler o primeiro resultado, em seguida, a recolha de translations, a primeira tradução e, em seguida, o text. Esta ação pode ser realizada pela chamada: translator_response[0]['translations'][0]['text']

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

Criar o modelo para apresentar resultados

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

Crie um novo ficheiro em modelos ao selecionar modelos na ferramenta Explorador no Visual Studio Code. Em seguida, selecione Novo ficheiro
Dê o nome resultados.html ao ficheiro

Adicione o seguinte código HTML ao ficheiro resultados.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>

Observará que acedemos a original_text, translated_text e target_language, que passamos como parâmetros nomeados em render_template com {{ }}. Esta operação diz ao Flask para compor os conteúdos como texto simples. Também estamos a utilizar url_for('index') para criar uma ligação de retorno à página predefinida. Embora seja, tecnicamente, possível escrever o caminho para a página original, utilizar url_for indica ao Flask que deve ler o caminho para a função com o nome que indicamos (neste caso index). Se reorganizarmos o site, o URL gerado para a ligação será sempre válido.

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, será necessário parar e reiniciar o mesmo, para que a aplicação leia as nossas variáveis ambientais.

Utilize Ctrl-C de forma a parar a aplicação Flask
Execute o comando flask run para reiniciar o serviço
Navegue para http://localhost:5000 para testar a aplicação
Introduza o texto na área de texto, escolha um idioma e selecione Traduzir
Os resultados serão apresentados!

Parabéns!

Criou com sucesso um site que utiliza a Tradução para implementar traduções! Dado que o idioma e a comunicação dependem do contexto e o mesmo nem sempre é claro para um computador, poderá ver que os resultados não são perfeitos. No entanto, normalmente, estão muito próximos ou suficientemente perto para uma comunicação eficaz, o que é o objetivo!

O código que proporcionamos aqui pode ser incorporado em qualquer aplicação desejada. Pode continuar a compilá-lo no site que criamos ou, até mesmo, implementá-lo no Serviço de Aplicações do Azure!

Verifique o seu conhecimento

Continuar