Ejercicio: Llamada al servicio Translator

10 minutos

Con nuestro servicio Translator de back-end creado en Azure y las variables almacenadas listas para usar, vamos a centrarnos en agregar la lógica y la plantilla necesarias a nuestra aplicación para traducir texto. Pasaremos por estas etapas:

Adición de código para llamar al servicio
Creación de la plantilla para mostrar los resultados
Prueba de nuestra aplicación

Adición de código para llamar al servicio

app.py contiene la lógica de la aplicación. Agregaremos un par de importaciones necesarias para las bibliotecas que usaremos, seguidas de la nueva ruta para responder al usuario.

En el extremo superior de app.py, agregue las siguientes líneas de código:

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

La línea superior importará las bibliotecas que usaremos más adelante, al hacer la llamada al servicio Translator. También importamos load_dotenv desde dotenv y ejecutamos la función, que cargará los valores desde .env.

En la parte inferior de app.py, agregue las siguientes líneas de código para crear la ruta y la lógica para traducir 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
    )

El código se comenta para describir los pasos que se están llevando a cabo. Yendo al detalle, esto es lo que hace nuestro código:

Lee el texto que escribió el usuario y el idioma que seleccionó en el formulario.
Lee las variables de entorno que creamos anteriormente en el archivo .env.
Crea la ruta de acceso necesaria para llamar al servicio Translator, lo cual incluye el idioma de destino (el idioma de origen se detecta automáticamente).
Crea la información de encabezado, que incluye la clave para el servicio Translator, la ubicación del servicio y un identificador arbitrario para la traducción.
Crea el cuerpo de la solicitud, que incluye el texto que desea traducir.
Llama a post en requests para llamar al servicio Translator.
Recupera la respuesta JSON del servidor, que incluye el texto traducido.
Recupera el texto traducido (vea la nota siguiente).
Llama a render_template para mostrar la página de respuesta.

Nota:

Al llamar al servicio Translator, es posible tener varias frases traducidas a varios idiomas en una sola llamada. Como resultado, el JSON devuelto por el servicio contiene mucha información, de la que solo necesitamos una pequeña parte. Como resultado, debemos bajar algunos niveles para obtener el texto traducido.

En concreto, es necesario leer el primer resultado, luego la colección de translations, la primera traducción y, luego, text. Esto se realiza mediante la llamada a translator_response[0]['translations'][0]['text'].

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

Creación de la plantilla para mostrar los resultados

Vamos a crear la plantilla HTML para la página de resultados.

Cree un nuevo archivo en templates seleccionando templates en la herramienta Explorador de Visual Studio Code. Luego, seleccione Nuevo archivo.
Asigne al archivo el nombre results.html.

Agregue el siguiente 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>

Observará que accedemos a original_text, translated_text y target_language, que pasamos como parámetros con nombre en render_template usando {{ }}. Esta operación indica a Flask que represente el contenido como texto sin formato. También usamos url_for('index') para crear un vínculo de vuelta a la página predeterminada. Aunque podríamos, técnicamente, escribir la ruta de acceso a la página original, el uso de url_for indica a Flask que lea la ruta de acceso de la función con el nombre proporcionado (index en este caso). Si reorganizamos nuestro sitio, la dirección URL generada para el vínculo siempre será válida.

Prueba de la página

Vuelva al terminal integrado en Visual Studio Code (o vuelva a abrirlo con Ctrl-, o Cmd- en un equipo Mac). Si el sitio se está ejecutando actualmente, deberá detenerlo y reiniciarlo para que la aplicación lea las variables de entorno.

Use Ctrl+C para detener la aplicación Flask.
Ejecute el comando flask run para reiniciar el servicio.
Vaya a http://localhost:5000 para probar la aplicación.
Escriba el texto en el área de texto, elija un idioma y, a continuación, seleccione Traducir
¡Ya verá los resultados!

Enhorabuena

Ya ha creado correctamente un sitio web que usa Translator para implementar traducciones. Debido a que el lenguaje y la comunicación dependen del contexto, que no siempre está claro para un equipo informático, podría observar que los resultados no son perfectos. Sin embargo, por lo general son acertados o están lo suficientemente cerca para permitir una comunicación eficaz, que es el objetivo perseguido.

El código que hemos proporcionado aquí se puede incorporar a cualquier aplicación que desee. Puede continuar con la compilación en el sitio web que hemos creado, o incluso implementarla Azure App Services.

Comprobación de conocimientos

Continuar