演習 - Translator サービスを呼び出す - Training

10 分

Azure でバックエンド Translator サービス作成し、変数を使用できるように格納したので、テキストを翻訳するために必要なロジックとテンプレートをアプリケーションに追加することに注目しましょう。次のような手順で作業を行います。

サービスを呼び出すコードを追加する
結果を表示するためのテンプレートを作成する
アプリケーションをテストする

サービスを呼び出すコードを追加する

app.py には、アプリケーションのロジックが含まれています。ここでは、使用するライブラリに必要なインポートをいくつか追加し、その後でユーザーに応答するための新しいルートを追加します。

app.py の "先頭" に、次のコード行を追加します。

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

最初の行で、後ほど Translator サービスを呼び出すときに使用するライブラリをインポートします。また、dotenv から load_dotenv をインポートし、関数を実行します。これにより、.env から値が読み込まれます。

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
    )

コードには、行われている手順を説明するコメントが付いています。コードで行われていることの概要は次のとおりです。

ユーザーがフォームで入力したテキストと、選択した言語を読み取ります
前に作成した環境変数を .env ファイルから読み取ります
Translator サービスを呼び出すために必要なパスを作成します。これには、ターゲット言語が含まれます (ソース言語は自動的に検出されます)
Translator サービスのキー、サービスの場所、翻訳の任意の ID を含むヘッダー情報を作成します
翻訳するテキストを含む要求の本文を作成します
requests で post を呼び出して、Translator サービスを呼び出します
サーバーから JSON 応答を取得します。これには翻訳されたテキストが含まれます
翻訳されたテキストを取得します (後の注を参照)
render_template を呼び出して、応答ページを表示します

Note

Translator サービスを呼び出すとき、1 回の呼び出しで複数の文章を複数の言語に翻訳することができます。その結果、サービスによって返される JSON に大量の情報が含まれていても、必要なのはその中の小さな部分だけです。そのため、翻訳されたテキストを取得するには、いくつかレベルを下げる必要があります。

具体的には、最初の結果を読み取ってから、translations のコレクションまで読み取り、最初の翻訳を読み取り、text まで読み取る必要があります。これは、以下を呼び出すことによって行われます: translator_response[0]['translations'][0]['text']

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

結果を表示するためのテンプレートを作成する

結果ページの HTML テンプレートを作成してみましょう。

Visual Studio Code の [エクスプローラー] ツールで templates を選択して、templates に新しいファイルを作成します。次に、[新しいファイル] を選択します
ファイルに results.html という名前を設定します

次の 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 を使用すると、指定した名前 (この場合は index) の関数へのパスを読み取るよう Flask に指示されます。サイトを再配置した場合、リンクに生成される URL は常に有効になります。

ページをテストする

Visual Studio Code で統合ターミナルに戻ります (または、Ctrl-` (Mac では Cmd-`) キーを押して開きなおします)。サイトが現在実行されている場合は、アプリケーションで環境変数が読み取られるように、停止してから再起動する必要があります。

Ctrl + C キーを押して、Flask アプリケーションを停止します
コマンド flask run を実行して、サービスを再起動します
アプリケーションをテストするには、http://localhost:5000 を表示します
テキスト領域にテキストを入力し、言語を選択して、[Translate] を選択します
結果が表示されます。

結論

これで、Translator を使用して翻訳を実装する Web サイトをうまく作成できました。言語とコミュニケーションはコンテキストに依存し、コンピューターに対して明確ではないことがあるため、結果が完全ではないことに気付く場合があります。ただし、通常は、効果的なコミュニケーションのために十分に正確であるか近い結果が得られます。それこそが目標です。

ここで示したコードは、任意のアプリケーションに組み込むことができます。ここで作成した Web サイトの構築を続けることも、Azure App Service にそれをデプロイすることもできます。

自分の知識をチェックする

続行

演習 - Translator サービスを呼び出す

サービスを呼び出すコードを追加する

結果を表示するためのテンプレートを作成する

ページをテストする

結論

自分の知識をチェックする

フィードバック