Упражнение. Вызов службы "Переводчик"

  • 10 мин

Внутренняя служба "Переводчик" уже создана в Azure и переменные для работы с ней уже настроены, а теперь мы добавим в приложение логику и шаблон для перевода текста. Мы выполним следующие действия:

  1. добавление кода для вызова службы;
  2. Создание шаблона для вывода результатов
  3. тестирование приложения.

добавление кода для вызова службы;

Логика приложения хранится в файле app.py. Для начала мы добавим несколько инструкций import для нужных нам библиотек, а затем создадим новый маршрут для ответа пользователю.

  1. В самом начале файла app.py добавьте следующие строки кода:

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

Верхняя строка будет импортировать библиотеки, которые мы позже применим для вызова службы "Переводчик". Кроме того, мы импортируем load_dotenv из dotenv и вызовем функцию, которая загружает значения из файла ENV.

  1. В самом конце файла app.py добавьте следующие строки кода, чтобы создать маршрут и логику для перевода текста:

    @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
    )

В код добавлены комментарии с описанием выполняемых действий. На высоком уровне этот код выполняет следующее:

  1. Считывает введенный пользователем текст и выбранный в форме язык.
  2. Считывает ранее созданные переменные среды из файла ENV.
  3. Создает необходимый путь для вызова службы "Переводчик", в который включает целевой язык (исходный язык определяется автоматически).
  4. Подготавливает сведения для заголовков, в том числе ключ для службы "Переводчик", расположение службы и произвольный идентификатор для перевода.
  5. Создает текст запроса с текстом для перевода.
  6. Вызывает post из requests, чтобы обратиться к службе "Переводчик".
  7. Получает от сервера ответ в формате JSON, который содержит переведенный текст.
  8. Извлекает переведенный текст (см. следующую заметку).
  9. Вызывает render_template для вывода страницы ответа.

Примечание.

При вызове службы "Переводчик" можно перевести несколько выражений на несколько языков одним запросом. Это означает, что возвращенный службой ответ в формате JSON содержит много информации, из которой нам нужна лишь малая часть. Поэтому переведенный текст мы будем извлекать на несколько уровней ниже.

В частности, нам сначала нужно получить первый результат, затем коллекцию translations с первым переводом, а затем text. Для этого используется такой вызов: translator_response[0]['translations'][0]['text']

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

Создание шаблона для вывода результатов

Теперь мы создадим шаблон HTML для страницы результатов.

  1. Создайте новый файл в папке templates, выбрав templates в средстве Проводник в Visual Studio Code. Выберите пункт Новый файл.

  2. Присвойте этому файлу имя results.html.

  3. Добавьте следующий код HTML в файл 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>

Как видите, здесь мы обращаемся к original_text, translated_text и target_language, которые переданы в render_template как именованные параметры, используя {{ }}. Эта операция сообщает Flask, что содержимое нужно отображать как обычный текст. Мы также с помощью url_for('index') создаем обратную ссылку на страницу по умолчанию. С технической точки зрения мы могли бы просто ввести путь к исходной странице, но url_for указывает Flask считать путь к функции с указанным именем (в нашем примере это index). Благодаря этому созданный URL-адрес всегда будет действовать правильно, даже если мы изменим структуру сайта.

Тестирование страницы

Вернитесь к встроенному терминалу Visual Studio Code (или снова откройте его с помощью клавиш CTRL+` или CMD+` на компьютере Mac). Если сайт уже работает, его нужно перезапустить, чтобы приложение считало новые переменные среды.

  1. Чтобы остановить приложение, нажмите клавиши CTRL+C.

  2. Выполните команду flask run, чтобы перезапустить службу.

  3. В браузере перейдите по адресу http://localhost:5000, чтобы протестировать приложение.

  4. Введите текст в текстовое поле, выберите язык и нажмите кнопку Translate (Перевести).

    Screenshot showing the completed translation form with text for translation that reads I am going to Osaka and Japanese selected as the language.

  5. Вы получите результат перевода.

    Screenshot showing the translation results.

Поздравляем!

Итак, вы успешно создали веб-сайт, который использует службу "Переводчик" для перевода текста. Вы можете обратить внимание, что результаты не всегда идеальны, так как язык и взаимодействие зависят от контекста, который не всегда понятен компьютерам. Но вы будете получать достаточно точный результат почти всегда, что вполне достаточно для эффективного взаимодействия.

Приведенный здесь код можно встроить в любое приложение. Вы можете продолжить работу над созданным веб-сайтом, или даже развернуть его в Службе приложений Azure.

Проверьте свои знания

1.

Что такое имя заголовка HTTP, который содержит ключи API в вызовах служб ИИ Azure?