練習 - 呼叫翻譯工具服務
在 Azure 上建立後端翻譯工具服務並儲存隨時可用的變數後，讓我們將注意力轉移到將必要的邏輯和範本新增至應用程式以翻譯文字。 我們將逐步執行下列步驟：
- 新增呼叫服務的程式碼
- 建立顯示結果的範本
- 測試應用程式
新增呼叫服務的程式碼
app.py 包含應用程式的邏輯。 我們會新增兩個要用的程式庫必要匯入，後面跟著回應使用者的新路由。
在 app.py 的「頂端」，新增下列幾行程式碼：
import requests, os, uuid, json from dotenv import load_dotenv load_dotenv()
呼叫翻譯工具服務時，第一行會匯入稍後將用到的程式庫。 我們也會從 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 檔案讀取稍早建立的環境變數
- 建立呼叫翻譯工具服務所需的路徑，包括目標語言 (會自動偵測來源語言)
- 建立標頭資訊，包含翻譯工具服務的金鑰、服務的位置，以及翻譯的任意識別碼
- 建立要求的本文，包含想要翻譯的文字
- 對
requests呼叫post以呼叫翻譯工具服務 - 從伺服器擷取包含已翻譯文字的 JSON 回應
- 擷取翻譯的文字 (請見下列注意事項)
- 呼叫
render_template以顯示回應頁面
注意
呼叫翻譯工具服務時，單一呼叫中有可能將多個句子翻譯成多種語言。 因此，服務傳回的 JSON 會包含許多資訊，而我們只需要其中的一小部分。 所以，我們必須深入幾個層級，取得翻譯的文字。
具體而言，我們必須讀取第一個結果，然後是 translations 的集合，再到第一則翻譯，然後是 text。 完成這一切的呼叫是：translator_response[0]['translations'][0]['text']
[
{
"detectedLanguage": {
"language": "en",
"score": 1.0
},
"translations": [
{
"text": "これはテストです",
"to": "ja"
}
]
}
]
建立顯示結果的範本
讓我們建立結果頁面的 HTML 範本。
在 Visual Studio Code 的 Explorer 工具中選取 [範本]，以在 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 會告訴 Flask 讀取指定名稱的函式路徑 (本例中為 index)。 如果重新排列網站，則針對該連結產生的 URL 一律有效。
測試頁面
回到 Visual Studio Code 的整合式終端 (或使用 Ctrl-` 或 Cmd-` (Mac) 重新開啟)。 如果網站目前正在執行，我們就必須停止並重新啟動網站，應用程式才會讀取環境變數。
使用 Ctrl-C 停止 Flask 應用程式
執行命令
flask run以重新啟動服務瀏覽至 http://localhost:5000 測試應用程式
在文字區域中輸入文字、選擇語言，然後選取 [翻譯]
您將會看到結果！
恭喜
您現在已成功建立使用翻譯工具實作翻譯的網站！ 因為語言和溝通依賴內容，這對電腦而言卻不一定很清楚，所以您會發現結果不是那麼完美。 但重點目標是有效或接近有效的溝通！
這裡提供的程式碼可以併入您喜歡的任何應用程式。 您可以繼續在我們建立的網站上建置應用程式，或甚至部署到 Azure App Services！